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   background-color: #FFF;
 149 }
 150 .sort-box {
 151   margin-bottom: $-m;
 152   padding: 0 $-l 0 $-l;
 153   border-left: 4px solid $color-book;
 154 }
 155 .sortable-page-list {
 156   margin-left: 0;
 157   > ul {
 158     margin-left: 0;
 159   }
 160   ul {
 161     margin-bottom: 0;
 162     margin-top: 0;
 163     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 164   }
 165   li {
 166     border: 1px solid #DDD;
 167     padding: $-xs $-s;
 168     margin-top: -1px;
 169     min-height: 38px;
 170     &.text-chapter {
 171       border-left: 2px solid $color-chapter;
 172     }
 173     &.text-page {
 174       border-left: 2px solid $color-page;
 175     }
 176   }
 177   li:first-child {
 178     margin-top: $-xs;
 179   }
 180 }
 181 .sortable-page-list li.placeholder {
 182   position: relative;
 183 }
 184 .sortable-page-list li.placeholder:before {
 185   position: absolute;
 186 }
 187
 188 .activity-list-item {
 189   padding: $-s 0;
 190   display: grid;
 191   grid-template-columns: min-content 1fr;
 192   grid-column-gap: $-m;
 193   color: #888;
 194   fill: #888;
 195   font-size: 0.9em;
 196 }
 197 .card .activity-list-item {
 198   padding: $-s $-m;
 199 }
 200
 201 .user-list-item {
 202   display: inline-grid;
 203   padding: $-s;
 204   grid-template-columns: min-content 1fr;
 205   grid-column-gap: $-m;
 206   font-size: 0.9em;
 207   align-items: center;
 208   > div:first-child {
 209     line-height: 0;
 210   }
 211 }
 212
 213 ul.pagination {
 214   display: inline-block;
 215   list-style: none;
 216   margin: $-m 0;
 217   padding-left: 1px;
 218   li {
 219     float: left;
 220   }
 221   li:first-child {
 222     a, span {
 223       border-radius: 3px 0 0 3px;
 224     }
 225   }
 226   li:last-child {
 227     a, span {
 228       border-radius: 0 3px 3px 0;
 229     }
 230   }
 231   a, span {
 232     display: block;
 233     padding: $-xxs $-s;
 234     border: 1px solid #CCC;
 235     margin-left: -1px;
 236     user-select: none;
 237     &.disabled {
 238       cursor: not-allowed;
 239     }
 240   }
 241   li.active span {
 242     color: #FFF;
 243   }
 244 }
 245
 246 .compact ul.pagination {
 247   margin: 0;
 248 }
 249
 250 .entity-list, .icon-list {
 251   margin: 0 (-$-m);
 252   h4 {
 253     margin: 0;
 254   }
 255   hr {
 256     margin: 0;
 257   }
 258   .text-small.text-muted {
 259     color: #AAA;
 260     font-size: 0.75em;
 261     margin-top: $-xs;
 262   }
 263   .text-muted p.text-muted {
 264     margin-top: 0;
 265   }
 266   .page.draft .text-page {
 267     color: $color-page-draft;
 268     fill: $color-page-draft;
 269   }
 270   > .dropdown-container {
 271     display: block;
 272   }
 273 }
 274
 275 .entity-list-item, .icon-list-item {
 276   padding: $-s $-m;
 277   display: flex;
 278   align-items: center;
 279   background-color: transparent;
 280   border: 0;
 281   cursor: pointer;
 282   width: 100%;
 283   position: relative;
 284   h4 a {
 285     color: #666;
 286   }
 287   > span:first-child {
 288     margin-right: $-m;
 289     flex-basis: 1.88em;
 290     flex: none;
 291   }
 292   > span:last-child {
 293     flex: 1;
 294     text-align: left;
 295   }
 296   &:hover {
 297     text-decoration: none;
 298     background-color: #DDD;
 299     border-radius: 4px;
 300   }
 301 }
 302
 303 .card .entity-list-item:hover {
 304   background-color: #F2F2F2;
 305 }
 306 .card .entity-list-item .entity-list-item:hover {
 307   background-color: #EEEEEE;
 308 }
 309
 310 .entity-list-item-image {
 311   align-self: stretch;
 312   width: 140px;
 313   background-size: cover;
 314   background-position: 50% 50%;
 315   border-radius: 3px;
 316   position: relative;
 317   margin-right: $-l;
 318   @include smaller-than($m) {
 319     width: 80px;
 320   }
 321 }
 322
 323 .entity-list.compact {
 324   font-size: 0.6 * $fs-m;
 325   h4, a {
 326     line-height: 1.2;
 327   }
 328   .entity-item-snippet {
 329     display: none;
 330   }
 331   .entity-list-item p {
 332     font-size: $fs-m * 0.8;
 333     padding-top: $-xs;
 334   }
 335   p {
 336     margin: 0;
 337   }
 338   > p.empty-text {
 339     display: block;
 340     font-size: $fs-m;
 341   }
 342   hr {
 343     margin: 0;
 344   }
 345   @include smaller-than($m) {
 346     h4 {
 347       font-size: 1.666em;
 348     }
 349   }
 350 }
 351
 352 .dropdown-container {
 353   display: inline-block;
 354   vertical-align: top;
 355   position: relative;
 356 }
 357
 358 .dropdown-container ul {
 359   display: none;
 360   position: absolute;
 361   z-index: 999;
 362   top: 0;
 363   list-style: none;
 364   right: 0;
 365   margin: $-m 0;
 366   background-color: #FFFFFF;
 367   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 368   border-radius: 1px;
 369   border: 1px solid #EEE;
 370   min-width: 180px;
 371   padding: $-xs 0;
 372   color: #555;
 373   fill: #555;
 374   text-align: left !important;
 375   &.wide {
 376     min-width: 220px;
 377   }
 378   .text-muted {
 379     color: #999;
 380     fill: #999;
 381   }
 382   li.padded {
 383     padding: $-xs $-m;
 384     line-height: 1.2;
 385   }
 386   li.active a {
 387     font-weight: 600;
 388   }
 389   a, button {
 390     display: block;
 391     padding: $-xs $-m;
 392     color: #555;
 393     fill: #555;
 394     white-space: nowrap;
 395     &:hover {
 396       text-decoration: none;
 397       background-color: #EEE;
 398     }
 399     svg {
 400       margin-right: $-s;
 401       display: inline-block;
 402       width: 16px;
 403     }
 404   }
 405   button {
 406     width: 100%;
 407     text-align: left;
 408   }
 409   li.border-bottom {
 410     border-bottom: 1px solid #DDD;
 411   }
 412 }
 413
 414 // Books grid view
 415 .featured-image-container {
 416   position: relative;
 417   overflow: hidden;
 418   a {
 419     display: block;
 420   }
 421   img {
 422     display: block;
 423     width: 100%;
 424     max-width: 100%;
 425     height: auto;
 426     transition: all .5s ease-in-out;
 427   }
 428 }
 429 .grid-card:hover .featured-image-container img {
 430   transform: scale(1.15);
 431   opacity: .5;
 432 }
 433
 434 .action-link-list {
 435   //padding: $-s 0;
 436 }
 437 .action-link {
 438   background: transparent;
 439   border: none;
 440   color: currentColor;
 441   padding: $-m 0;
 442 }
 443
 444 .active-link-list {
 445   a {
 446     display: inline-block;
 447     padding: $-s;
 448   }
 449   a:not(.active) {
 450     color: #444;
 451     fill: #444;
 452   }
 453   a:hover {
 454     background-color: rgba(0, 0, 0, 0.05);
 455     border-radius: 3px;
 456     text-decoration: none;
 457   }
 458 }