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

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