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