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

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