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;
 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   .entity-list-item {
 168     padding-top: $-xxs;
 169     padding-bottom: $-xxs;
 170     .content {
 171       padding-top: $-xs;
 172       padding-bottom: $-xs;
 173     }
 174   }
 175   .entity-list-item.no-hover {
 176     margin-top: -$-xs;
 177     padding-right: 0;
 178   }
 179   .entity-list-item-name {
 180     font-size: 1em;
 181     margin: 0;
 182   }
 183   .chapter-child-menu {
 184     font-size: .8rem;
 185     margin-top: -.2rem;
 186     margin-left: -1rem;
 187   }
 188   [chapter-toggle] {
 189     padding-left: .7rem;
 190     padding-bottom: .2rem;
 191   }
 192   .entity-list-item .icon {
 193     z-index: 2;
 194     width: 4px;
 195     height: auto;
 196     align-self: stretch;
 197     flex-shrink: 0;
 198     border-radius: 1px;
 199     opacity: 0.6;
 200   }
 201   .entity-list-item .icon:after {
 202     opacity: 1;
 203   }
 204   .entity-list-item .icon svg {
 205     display: none;
 206   }
 207 }
 208
 209 .chapter-child-menu {
 210   ul.sub-menu {
 211     display: none;
 212     padding-left: 0;
 213     position: relative;
 214   }
 215   [chapter-toggle].open + .sub-menu {
 216     display: block;
 217   }
 218 }
 219
 220 // Sortable Lists
 221 .sortable-page-list, .sortable-page-list ul {
 222   list-style: none;
 223 }
 224 .sort-box {
 225   margin-bottom: $-m;
 226   border: 2px solid rgba($color-book, 0.6);
 227   padding: $-m $-xl;
 228   border-radius: 4px;
 229 }
 230 .sort-box-options {
 231   display: flex;
 232   flex-wrap: wrap;
 233   justify-content: space-between;
 234 }
 235 .sort-box-options .button {
 236   margin-left: 0;
 237 }
 238 .sortable-page-list {
 239   margin-left: 0;
 240   padding: 0;
 241   .entity-list-item > span:first-child {
 242     align-self: flex-start;
 243   }
 244   .entity-list-item > div {
 245     display: block;
 246     flex: 1;
 247   }
 248   > ul {
 249     margin-left: 0;
 250   }
 251   ul {
 252     margin-bottom: $-m;
 253     margin-top: 0;
 254     padding-left: $-m;
 255   }
 256   li {
 257     border: 1px solid #DDD;
 258     margin-top: -1px;
 259     min-height: 38px;
 260     &.text-chapter {
 261       border-left: 2px solid $color-chapter;
 262     }
 263     &.text-page {
 264       border-left: 2px solid $color-page;
 265     }
 266   }
 267   li:first-child {
 268     margin-top: $-xs;
 269   }
 270 }
 271 .sortable-page-list li.placeholder {
 272   position: relative;
 273 }
 274 .sortable-page-list li.placeholder:before {
 275   position: absolute;
 276 }
 277
 278 .activity-list-item {
 279   padding: $-s 0;
 280   display: grid;
 281   grid-template-columns: min-content 1fr;
 282   grid-column-gap: $-m;
 283   color: #888;
 284   fill: #888;
 285   font-size: 0.9em;
 286 }
 287 .card .activity-list-item {
 288   padding: $-s $-m;
 289 }
 290
 291 .user-list-item {
 292   display: inline-grid;
 293   padding: $-s;
 294   grid-template-columns: min-content 1fr;
 295   grid-column-gap: $-m;
 296   font-size: 0.9em;
 297   align-items: center;
 298   > div:first-child {
 299     line-height: 0;
 300   }
 301 }
 302
 303 ul.pagination {
 304   display: inline-block;
 305   list-style: none;
 306   margin: $-m 0;
 307   padding-left: 1px;
 308   li {
 309     float: left;
 310   }
 311   li:first-child {
 312     a, span {
 313       border-radius: 3px 0 0 3px;
 314     }
 315   }
 316   li:last-child {
 317     a, span {
 318       border-radius: 0 3px 3px 0;
 319     }
 320   }
 321   a, span {
 322     display: block;
 323     padding: $-xxs $-s;
 324     border: 1px solid #CCC;
 325     margin-left: -1px;
 326     user-select: none;
 327     &.disabled {
 328       cursor: not-allowed;
 329     }
 330   }
 331   li.active span {
 332     color: #FFF;
 333   }
 334 }
 335
 336 .compact ul.pagination {
 337   margin: 0;
 338 }
 339
 340 .entity-list, .icon-list {
 341   margin: 0 (-$-m);
 342   h4 {
 343     margin: 0;
 344   }
 345   hr {
 346     margin: 0;
 347   }
 348   .text-small.text-muted {
 349     color: #AAA;
 350     font-size: 0.75em;
 351     margin-top: $-xs;
 352   }
 353   .text-muted p.text-muted {
 354     margin-top: 0;
 355   }
 356   .page.draft .text-page {
 357     color: $color-page-draft;
 358     fill: $color-page-draft;
 359   }
 360   > .dropdown-container {
 361     display: block;
 362   }
 363 }
 364
 365 .entity-list-item, .icon-list-item {
 366   padding: $-s $-m;
 367   display: flex;
 368   align-items: center;
 369   background-color: transparent;
 370   border: 0;
 371   width: 100%;
 372   position: relative;
 373   h4 a {
 374     color: #666;
 375   }
 376   > span:first-child {
 377     margin-right: $-m;
 378     flex-basis: 1.88em;
 379     flex: none;
 380   }
 381   > span:last-child {
 382     flex: 1;
 383     text-align: left;
 384   }
 385   &:not(.no-hover) {
 386     cursor: pointer;
 387   }
 388   &:not(.no-hover):hover {
 389     text-decoration: none;
 390     background-color: rgba(0, 0, 0, 0.1);
 391     border-radius: 4px;
 392   }
 393   &.outline-hover {
 394     border: 1px solid transparent;
 395   }
 396   &.outline-hover:hover {
 397     background-color: transparent;
 398     border-color: rgba(0, 0, 0, 0.1);
 399   }
 400 }
 401
 402 .entity-list-item-path-sep {
 403   display: inline-block;
 404   vertical-align: top;
 405   position: relative;
 406   top: 1px;
 407   svg {
 408     margin-right: 0;
 409   }
 410 }
 411
 412 .card .entity-list-item:not(.no-hover):hover {
 413   background-color: #F2F2F2;
 414 }
 415 .card .entity-list-item .entity-list-item:hover {
 416   background-color: #EEEEEE;
 417 }
 418
 419 .entity-list-item-children {
 420   padding: $-m;
 421   > div {
 422     overflow: hidden;
 423     padding: $-xs 0;
 424     margin-top: -$-xs;
 425   }
 426   .entity-chip {
 427     text-overflow: ellipsis;
 428     height: 2.5em;
 429     overflow: hidden;
 430     text-align: left;
 431     display: block;
 432     white-space: nowrap;
 433   }
 434 }
 435
 436 .entity-list-item-image {
 437   align-self: stretch;
 438   width: 140px;
 439   flex: none;
 440   background-size: cover;
 441   background-position: 50% 50%;
 442   border-radius: 3px;
 443   position: relative;
 444   margin-right: $-l;
 445
 446   .svg-icon {
 447     color: #FFF;
 448     fill: #FFF;
 449     font-size: 1.66rem;
 450     margin-right: 0;
 451     position: absolute;
 452     bottom: $-xs;
 453     left: $-xs;
 454   }
 455
 456   @include smaller-than($m) {
 457     width: 80px;
 458   }
 459 }
 460
 461 .chapter > .entity-list-item-image {
 462   width: 60px;
 463 }
 464
 465 .entity-list.compact {
 466   font-size: 0.6 * $fs-m;
 467   h4, a {
 468     line-height: 1.2;
 469   }
 470   .entity-item-snippet {
 471     display: none;
 472   }
 473   .entity-list-item p {
 474     font-size: $fs-m * 0.8;
 475     padding-top: $-xs;
 476   }
 477   p {
 478     margin: 0;
 479   }
 480   > p.empty-text {
 481     display: block;
 482     font-size: $fs-m;
 483   }
 484   hr {
 485     margin: 0;
 486   }
 487   @include smaller-than($m) {
 488     h4 {
 489       font-size: 1.666em;
 490     }
 491   }
 492 }
 493
 494 .dropdown-container {
 495   display: inline-block;
 496   vertical-align: top;
 497   position: relative;
 498 }
 499
 500 .dropdown-container ul {
 501   display: none;
 502   position: absolute;
 503   z-index: 999;
 504   top: 0;
 505   list-style: none;
 506   right: 0;
 507   margin: $-m 0;
 508   background-color: #FFFFFF;
 509   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 510   border-radius: 1px;
 511   border: 1px solid #EEE;
 512   min-width: 180px;
 513   padding: $-xs 0;
 514   color: #555;
 515   fill: #555;
 516   text-align: left !important;
 517   &.wide {
 518     min-width: 220px;
 519   }
 520   .text-muted {
 521     color: #999;
 522     fill: #999;
 523   }
 524   li.padded {
 525     padding: $-xs $-m;
 526     line-height: 1.2;
 527   }
 528   li.active a {
 529     font-weight: 600;
 530   }
 531   a, button {
 532     display: block;
 533     padding: $-xs $-m;
 534     color: #555;
 535     fill: #555;
 536     white-space: nowrap;
 537     &:hover {
 538       text-decoration: none;
 539       background-color: #EEE;
 540     }
 541     svg {
 542       margin-right: $-s;
 543       display: inline-block;
 544       width: 16px;
 545     }
 546   }
 547   button {
 548     width: 100%;
 549     text-align: left;
 550   }
 551   li.border-bottom {
 552     border-bottom: 1px solid #DDD;
 553   }
 554 }
 555
 556 // Books grid view
 557 .featured-image-container {
 558   position: relative;
 559   overflow: hidden;
 560   min-height: 140px;
 561   background-size: cover;
 562   background-position: 50% 50%;
 563   transition: opacity ease-in-out 240ms;
 564   a {
 565     display: block;
 566   }
 567   img {
 568     display: block;
 569     width: 100%;
 570     max-width: 100%;
 571     height: auto;
 572   }
 573 }
 574 .featured-image-container-wrap {
 575   position: relative;
 576   .svg-icon {
 577     color: #FFF;
 578     fill: #FFF;
 579     font-size: 2rem;
 580     margin-right: 0;
 581     position: absolute;
 582     bottom: 10px;
 583     left: 6px;
 584   }
 585 }
 586 .grid-card:hover .featured-image-container {
 587   opacity: .5;
 588 }
 589
 590 .action-link-list {
 591   //padding: $-s 0;
 592 }
 593 .action-link {
 594   background: transparent;
 595   border: none;
 596   color: currentColor;
 597   padding: $-m 0;
 598 }
 599
 600 .active-link-list {
 601   a {
 602     display: inline-block;
 603     padding: $-s;
 604   }
 605   a:not(.active) {
 606     color: #444;
 607     fill: #444;
 608   }
 609   a:hover {
 610     background-color: rgba(0, 0, 0, 0.05);
 611     border-radius: 3px;
 612     text-decoration: none;
 613   }
 614 }