BookStack Code Mirror - bookstack/blob - resources/assets/sass/_lists.scss

   1
   2 .book-contents .entity-list-item {
   3   .icon {
   4     width: 30px;
   5     border-radius: 4px;
   6     justify-self: stretch;
   7     align-self: stretch;
   8     height: auto;
   9   }
  10   p {
  11     margin-bottom: 0;
  12   }
  13   .inner-page {
  14     padding-top: 0;
  15     padding-bottom: 0;
  16   }
  17 }
  18
  19 .entity-list-item + .chapter-expansion {
  20   display: flex;
  21   padding: 0 $-m $-m $-m;
  22   align-items: center;
  23   border: 0;
  24   width: 100%;
  25   position: relative;
  26   > .icon {
  27     width: 30px;
  28     height: auto;
  29     border-radius: 0 0 4px 4px;
  30     align-self: stretch;
  31     flex-shrink: 0;
  32     &:before {
  33       position: absolute;
  34       top: 0;
  35       left: 0;
  36       width: 100%;
  37       height: 1px;
  38       background-color: currentColor;
  39       content: '';
  40       opacity: 0.2;
  41     }
  42   }
  43   > .content {
  44     flex: 1;
  45   }
  46   .chapter-expansion-toggle {
  47     border-radius: 0 4px 4px 0;
  48     padding: $-xs $-m;
  49   }
  50   .chapter-expansion-toggle:hover {
  51     background-color: rgba(0, 0, 0, 0.06);
  52   }
  53
  54 }
  55
  56 .entity-list-item.has-children {
  57   padding-bottom: 0;
  58   > .icon {
  59     border-radius: 4px 4px 0 0;
  60   }
  61 }
  62
  63 .inset-list {
  64   display: none;
  65   .entity-list-item-name {
  66     font-size: 1rem;
  67   }
  68   .entity-list-item-children {
  69     padding-top: 0;
  70     padding-bottom: 0;
  71   }
  72 }
  73
  74 .sidebar-page-nav {
  75   $nav-indent: $-m;
  76   list-style: none;
  77   margin: $-s 0 $-m 2px;
  78   position: relative;
  79   &:after {
  80     content: '';
  81     display: block;
  82     position: absolute;
  83     left: 0;
  84     background-color: rgba(0, 0, 0, 0.2);
  85     width: 2px;
  86     top: 5px;
  87     bottom: 5px;
  88     z-index: 0;
  89   }
  90   li {
  91     margin-bottom: 4px;
  92     font-size: 0.95em;
  93     position: relative;
  94   }
  95   .h1 {
  96     padding-left: $nav-indent;
  97   }
  98   .h2 {
  99     padding-left: $nav-indent;
 100   }
 101   .h3 {
 102     padding-left: $nav-indent * 2;
 103   }
 104   .h4 {
 105     padding-left: $nav-indent * 2.5;
 106   }
 107   .h5 {
 108     padding-left: $nav-indent*3;
 109   }
 110   .h6 {
 111     padding-left: $nav-indent*3.5;
 112   }
 113   .current-heading {
 114     font-weight: bold;
 115   }
 116   li:not(.current-heading) .sidebar-page-nav-bullet {
 117     background-color: #BBB !important;
 118   }
 119   .sidebar-page-nav-bullet {
 120     width: 6px;
 121     height: 6px;
 122     position: absolute;
 123     left: -2px;
 124     top: 30%;
 125     border-radius: 50%;
 126     box-shadow: 0 0 0 6px #F2F2F2;
 127     z-index: 1;
 128   }
 129 }
 130
 131 // Sidebar list
 132 .book-tree .book.entity-list-item {
 133   font-size: 0.6rem;
 134   h4 {
 135     font-size: 1rem;
 136     margin: 0;
 137   }
 138 }
 139 .book-tree .sidebar-page-list {
 140   list-style: none;
 141   margin: $-xs 0 0;
 142   padding-left: 0;
 143   padding-right: 0;
 144   position: relative;
 145   ul {
 146     list-style: none;
 147     padding-left: 1rem;
 148     padding-right: 0;
 149   }
 150   .entity-icon {
 151     font-size: 12px;
 152     z-index: 2;
 153     background-color: #FFF;
 154   }
 155   .entity-list-item-name {
 156     font-size: 1em;
 157     margin: 0;
 158   }
 159   .entity-list-item {
 160     font-size: 0.8rem;
 161   }
 162   .entity-list-item.selected {
 163     background-color: #F2F2F2;
 164   }
 165   .chapter-child-menu {
 166     font-size: 12px;
 167     padding-left: 2rem;
 168     margin-top: -.2rem;
 169   }
 170   [chapter-toggle] {
 171     padding-left: 1.5rem;
 172     padding-bottom: .2rem;
 173   }
 174   .icon {
 175     z-index: 2;
 176   }
 177   &:after, .sub-menu:after {
 178     content: '';
 179     display: block;
 180     position: absolute;
 181     left: 1.6rem;
 182     top: 1rem;
 183     bottom: 1rem;
 184     border-left: 2px solid #DDD;
 185     opacity: 0.6;
 186     z-index: 0;
 187   }
 188 }
 189
 190 .chapter-child-menu {
 191   ul.sub-menu {
 192     display: none;
 193     padding-left: 0;
 194     position: relative;
 195   }
 196   [chapter-toggle].open + .sub-menu {
 197     display: block;
 198   }
 199 }
 200
 201 // Sortable Lists
 202 .sortable-page-list, .sortable-page-list ul {
 203   list-style: none;
 204 }
 205 .sort-box {
 206   margin-bottom: $-m;
 207   border: 2px solid rgba($color-book, 0.6);
 208   padding: $-m $-xl;
 209   border-radius: 4px;
 210 }
 211 .sort-box-options {
 212   display: flex;
 213   flex-wrap: wrap;
 214   justify-content: space-between;
 215 }
 216 .sort-box-options .button {
 217   margin-left: 0;
 218 }
 219 .sortable-page-list {
 220   margin-left: 0;
 221   padding: 0;
 222   .entity-list-item > span:first-child {
 223     align-self: flex-start;
 224   }
 225   .entity-list-item > div {
 226     display: block;
 227     flex: 1;
 228   }
 229   > ul {
 230     margin-left: 0;
 231   }
 232   ul {
 233     margin-bottom: $-m;
 234     margin-top: 0;
 235     padding-left: $-m;
 236   }
 237   li {
 238     border: 1px solid #DDD;
 239     margin-top: -1px;
 240     min-height: 38px;
 241     &.text-chapter {
 242       border-left: 2px solid $color-chapter;
 243     }
 244     &.text-page {
 245       border-left: 2px solid $color-page;
 246     }
 247   }
 248   li:first-child {
 249     margin-top: $-xs;
 250   }
 251 }
 252 .sortable-page-list li.placeholder {
 253   position: relative;
 254 }
 255 .sortable-page-list li.placeholder:before {
 256   position: absolute;
 257 }
 258
 259 .activity-list-item {
 260   padding: $-s 0;
 261   display: grid;
 262   grid-template-columns: min-content 1fr;
 263   grid-column-gap: $-m;
 264   color: #888;
 265   fill: #888;
 266   font-size: 0.9em;
 267 }
 268 .card .activity-list-item {
 269   padding: $-s $-m;
 270 }
 271
 272 .user-list-item {
 273   display: inline-grid;
 274   padding: $-s;
 275   grid-template-columns: min-content 1fr;
 276   grid-column-gap: $-m;
 277   font-size: 0.9em;
 278   align-items: center;
 279   > div:first-child {
 280     line-height: 0;
 281   }
 282 }
 283
 284 ul.pagination {
 285   display: inline-block;
 286   list-style: none;
 287   margin: $-m 0;
 288   padding-left: 1px;
 289   li {
 290     float: left;
 291   }
 292   li:first-child {
 293     a, span {
 294       border-radius: 3px 0 0 3px;
 295     }
 296   }
 297   li:last-child {
 298     a, span {
 299       border-radius: 0 3px 3px 0;
 300     }
 301   }
 302   a, span {
 303     display: block;
 304     padding: $-xxs $-s;
 305     border: 1px solid #CCC;
 306     margin-left: -1px;
 307     user-select: none;
 308     &.disabled {
 309       cursor: not-allowed;
 310     }
 311   }
 312   li.active span {
 313     color: #FFF;
 314   }
 315 }
 316
 317 .compact ul.pagination {
 318   margin: 0;
 319 }
 320
 321 .entity-list, .icon-list {
 322   margin: 0 (-$-m);
 323   h4 {
 324     margin: 0;
 325   }
 326   hr {
 327     margin: 0;
 328   }
 329   .text-small.text-muted {
 330     color: #AAA;
 331     font-size: 0.75em;
 332     margin-top: $-xs;
 333   }
 334   .text-muted p.text-muted {
 335     margin-top: 0;
 336   }
 337   .page.draft .text-page {
 338     color: $color-page-draft;
 339     fill: $color-page-draft;
 340   }
 341   > .dropdown-container {
 342     display: block;
 343   }
 344 }
 345
 346 .entity-list-item, .icon-list-item {
 347   padding: $-s $-m;
 348   display: flex;
 349   align-items: center;
 350   background-color: transparent;
 351   border: 0;
 352   width: 100%;
 353   position: relative;
 354   h4 a {
 355     color: #666;
 356   }
 357   > span:first-child {
 358     margin-right: $-m;
 359     flex-basis: 1.88em;
 360     flex: none;
 361   }
 362   > span:last-child {
 363     flex: 1;
 364     text-align: left;
 365   }
 366   &:not(.no-hover) {
 367     cursor: pointer;
 368   }
 369   &:not(.no-hover):hover {
 370     text-decoration: none;
 371     background-color: #DDD;
 372     border-radius: 4px;
 373   }
 374 }
 375
 376
 377 .card .entity-list-item:not(.no-hover):hover {
 378   background-color: #F2F2F2;
 379 }
 380 .card .entity-list-item .entity-list-item:hover {
 381   background-color: #EEEEEE;
 382 }
 383
 384 .entity-list-item-children {
 385   padding: $-m;
 386   > div {
 387     overflow: hidden;
 388     padding: $-xs 0;
 389     margin-top: -$-xs;
 390   }
 391   .entity-chip {
 392     text-overflow: ellipsis;
 393     height: 2.5em;
 394     overflow: hidden;
 395     text-align: left;
 396     display: block;
 397     white-space: nowrap;
 398   }
 399 }
 400
 401 .entity-list-item-image {
 402   align-self: stretch;
 403   width: 140px;
 404   flex: none;
 405   background-size: cover;
 406   background-position: 50% 50%;
 407   border-radius: 3px;
 408   position: relative;
 409   margin-right: $-l;
 410
 411   .svg-icon {
 412     color: #FFF;
 413     fill: #FFF;
 414     font-size: 1.66rem;
 415     margin-right: 0;
 416     position: absolute;
 417     bottom: $-xs;
 418     left: $-xs;
 419   }
 420
 421   @include smaller-than($m) {
 422     width: 80px;
 423   }
 424 }
 425
 426 .chapter > .entity-list-item-image {
 427   width: 60px;
 428 }
 429
 430 .entity-list.compact {
 431   font-size: 0.6 * $fs-m;
 432   h4, a {
 433     line-height: 1.2;
 434   }
 435   .entity-item-snippet {
 436     display: none;
 437   }
 438   .entity-list-item p {
 439     font-size: $fs-m * 0.8;
 440     padding-top: $-xs;
 441   }
 442   p {
 443     margin: 0;
 444   }
 445   > p.empty-text {
 446     display: block;
 447     font-size: $fs-m;
 448   }
 449   hr {
 450     margin: 0;
 451   }
 452   @include smaller-than($m) {
 453     h4 {
 454       font-size: 1.666em;
 455     }
 456   }
 457 }
 458
 459 .dropdown-container {
 460   display: inline-block;
 461   vertical-align: top;
 462   position: relative;
 463 }
 464
 465 .dropdown-container ul {
 466   display: none;
 467   position: absolute;
 468   z-index: 999;
 469   top: 0;
 470   list-style: none;
 471   right: 0;
 472   margin: $-m 0;
 473   background-color: #FFFFFF;
 474   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 475   border-radius: 1px;
 476   border: 1px solid #EEE;
 477   min-width: 180px;
 478   padding: $-xs 0;
 479   color: #555;
 480   fill: #555;
 481   text-align: left !important;
 482   &.wide {
 483     min-width: 220px;
 484   }
 485   .text-muted {
 486     color: #999;
 487     fill: #999;
 488   }
 489   li.padded {
 490     padding: $-xs $-m;
 491     line-height: 1.2;
 492   }
 493   li.active a {
 494     font-weight: 600;
 495   }
 496   a, button {
 497     display: block;
 498     padding: $-xs $-m;
 499     color: #555;
 500     fill: #555;
 501     white-space: nowrap;
 502     &:hover {
 503       text-decoration: none;
 504       background-color: #EEE;
 505     }
 506     svg {
 507       margin-right: $-s;
 508       display: inline-block;
 509       width: 16px;
 510     }
 511   }
 512   button {
 513     width: 100%;
 514     text-align: left;
 515   }
 516   li.border-bottom {
 517     border-bottom: 1px solid #DDD;
 518   }
 519 }
 520
 521 // Books grid view
 522 .featured-image-container {
 523   position: relative;
 524   overflow: hidden;
 525   min-height: 140px;
 526   background-size: cover;
 527   background-position: 50% 50%;
 528   transition: opacity ease-in-out 240ms;
 529   a {
 530     display: block;
 531   }
 532   img {
 533     display: block;
 534     width: 100%;
 535     max-width: 100%;
 536     height: auto;
 537   }
 538 }
 539 .featured-image-container-wrap {
 540   position: relative;
 541   .svg-icon {
 542     color: #FFF;
 543     fill: #FFF;
 544     font-size: 2rem;
 545     margin-right: 0;
 546     position: absolute;
 547     bottom: 10px;
 548     left: 6px;
 549   }
 550 }
 551 .grid-card:hover .featured-image-container {
 552   opacity: .5;
 553 }
 554
 555 .action-link-list {
 556   //padding: $-s 0;
 557 }
 558 .action-link {
 559   background: transparent;
 560   border: none;
 561   color: currentColor;
 562   padding: $-m 0;
 563 }
 564
 565 .active-link-list {
 566   a {
 567     display: inline-block;
 568     padding: $-s;
 569   }
 570   a:not(.active) {
 571     color: #444;
 572     fill: #444;
 573   }
 574   a:hover {
 575     background-color: rgba(0, 0, 0, 0.05);
 576     border-radius: 3px;
 577     text-decoration: none;
 578   }
 579 }