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