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

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