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

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