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