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