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