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 {
 255   h4 {
 256     margin: 0;
 257   }
 258   hr {
 259     margin: 0;
 260   }
 261   .text-small.text-muted {
 262     color: #AAA;
 263     font-size: 0.75em;
 264     margin-top: $-xs;
 265   }
 266   .text-muted p.text-muted {
 267     margin-top: 0;
 268   }
 269   .page.draft .text-page {
 270     color: $color-page-draft;
 271     fill: $color-page-draft;
 272   }
 273 }
 274
 275 .entity-list-item {
 276   padding: $-s $-m;
 277   display: grid;
 278   grid-template-columns: min-content 1fr;
 279   grid-column-gap: $-m;
 280   align-items: top;
 281   > .content {
 282     padding-top: 2px;
 283   }
 284   .icon {
 285     font-size: 1rem;
 286   }
 287   h4 a {
 288     color: #666;
 289   }
 290 }
 291 a.entity-list-item:hover {
 292   text-decoration: none;
 293   background-color: #F2F2F2;
 294 }
 295
 296 .entity-list-item-image {
 297   width: 140px;
 298   background-size: cover;
 299   background-position: 50% 50%;
 300   border-radius: 3px;
 301 }
 302
 303 .entity-list.compact {
 304   font-size: 0.6 * $fs-m;
 305   h4, a {
 306     line-height: 1.2;
 307   }
 308   .entity-item-snippet {
 309     display: none;
 310   }
 311   .entity-list-item p {
 312     font-size: $fs-m * 0.8;
 313     padding-top: $-xs;
 314   }
 315   p {
 316     margin: 0;
 317   }
 318   > p.empty-text {
 319     display: block;
 320     font-size: $fs-m;
 321   }
 322   hr {
 323     margin: 0;
 324   }
 325   @include smaller-than($m) {
 326     h4 {
 327       font-size: 1.666em;
 328     }
 329   }
 330 }
 331
 332 .dropdown-container {
 333   display: inline-block;
 334   vertical-align: top;
 335   position: relative;
 336 }
 337
 338 .dropdown-container ul {
 339   display: none;
 340   position: absolute;
 341   z-index: 999;
 342   top: 0;
 343   list-style: none;
 344   right: 0;
 345   margin: $-m 0;
 346   background-color: #FFFFFF;
 347   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 348   border-radius: 1px;
 349   border: 1px solid #EEE;
 350   min-width: 180px;
 351   padding: $-xs 0;
 352   color: #555;
 353   fill: #555;
 354   text-align: left !important;
 355   &.wide {
 356     min-width: 220px;
 357   }
 358   .text-muted {
 359     color: #999;
 360     fill: #999;
 361   }
 362   li.padded {
 363     padding: $-xs $-m;
 364     line-height: 1.2;
 365   }
 366   a, button {
 367     display: block;
 368     padding: $-xs $-m;
 369     color: #555;
 370     fill: #555;
 371     white-space: nowrap;
 372     &:hover {
 373       text-decoration: none;
 374       background-color: #EEE;
 375     }
 376     svg {
 377       margin-right: $-s;
 378       display: inline-block;
 379       width: 16px;
 380     }
 381   }
 382   button {
 383     width: 100%;
 384     text-align: left;
 385   }
 386   li.border-bottom {
 387     border-bottom: 1px solid #DDD;
 388   }
 389 }
 390
 391 // Books grid view
 392 .featured-image-container {
 393   position: relative;
 394   overflow: hidden;
 395   background: #F2F2F2;
 396   a {
 397     display: block;
 398   }
 399   img {
 400     display: block;
 401     width: 100%;
 402     max-width: 100%;
 403     height: auto;
 404     transition: all .5s ease-in-out;
 405   }
 406   img:hover {
 407     transform: scale(1.15);
 408     opacity: .5;
 409   }
 410 }
 411