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     background-color: #FFF;
 114     z-index: 5;
 115     position: fixed;
 116     top: 0;
 117     padding-left: $-l;
 118     padding-right: $-l + 15;
 119     width: 30%;
 120     right: -15px;
 121     height: 100%;
 122     overflow-y: scroll;
 123     -ms-overflow-style: none;
 124     //background-color: $primary-faded;
 125     border-left: 1px solid #DDD;
 126     &::-webkit-scrollbar { width: 0 !important }
 127   }
 128 }
 129 .book-tree h4 {
 130   padding: $-m $-s 0 $-s;
 131   i {
 132     padding-right: $-s;
 133   }
 134 }
 135 .book-tree .sidebar-page-list {
 136   list-style: none;
 137   margin: $-xs 0 0;
 138   padding-left: 0;
 139   border-left: 5px solid $color-book;
 140   li a {
 141     display: block;
 142     border-bottom: none;
 143     padding: $-xs 0 $-xs $-s;
 144     &:hover {
 145       text-decoration: none;
 146     }
 147   }
 148   li a i {
 149     padding-right: $-xs + 2px;
 150   }
 151   li, a {
 152     display: block;
 153   }
 154   a.bold {
 155     color: #EEE !important;
 156   }
 157   ul {
 158     list-style: none;
 159     margin: 0;
 160   }
 161   .book {
 162     color: $color-book !important;
 163     &.selected {
 164       background-color: rgba($color-book, 0.29);
 165     }
 166   }
 167   .chapter {
 168     color: $color-chapter !important;
 169     &.selected {
 170       background-color: rgba($color-chapter, 0.12);
 171     }
 172   }
 173   .chapter-toggle {
 174     padding-left: $-s;
 175   }
 176   .list-item-chapter {
 177     border-left: 5px solid $color-chapter;
 178     margin: 10px 10px;
 179     display: block;
 180   }
 181   .list-item-page {
 182     border-bottom: none;
 183     border-left: 5px solid $color-page;
 184     margin: 10px 10px;
 185   }
 186   .page {
 187     color: $color-page !important;
 188     border-bottom: none;
 189     &.selected {
 190       background-color: rgba($color-page, 0.1);
 191     }
 192   }
 193   .list-item-page.draft {
 194     border-left: 5px solid $color-page-draft;
 195   }
 196   .page.draft .page, .list-item-page.draft a.page {
 197     color: $color-page-draft !important;
 198   }
 199   .sub-menu {
 200     display: none;
 201     padding-left: 0;
 202   }
 203   .sub-menu.open {
 204     display: block;
 205   }
 206 }
 207
 208 // Sortable Lists
 209 .sortable-page-list, .sortable-page-list ul {
 210   list-style: none;
 211   background-color: #FFF;
 212 }
 213 .sort-box {
 214   margin-bottom: $-m;
 215   padding: 0 $-l 0 $-l;
 216   border-left: 4px solid $color-book;
 217 }
 218 .sortable-page-list {
 219   margin-left: 0;
 220   > ul {
 221     margin-left: 0;
 222   }
 223   ul {
 224     margin-bottom: 0;
 225     margin-top: 0;
 226     box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
 227   }
 228   li {
 229     border: 1px solid #DDD;
 230     padding: $-xs $-s;
 231     margin-top: -1px;
 232     min-height: 38px;
 233     &.text-chapter {
 234       border-left: 2px solid $color-chapter;
 235     }
 236     &.text-page {
 237       border-left: 2px solid $color-page;
 238     }
 239   }
 240   li:first-child {
 241     margin-top: $-xs;
 242   }
 243 }
 244 .sortable-page-list li.placeholder {
 245   position: relative;
 246 }
 247 .sortable-page-list li.placeholder:before {
 248   position: absolute;
 249 }
 250
 251 .activity-list-item {
 252   padding: $-s 0;
 253   color: #888;
 254   border-bottom: 1px solid #EEE;
 255   font-size: 0.9em;
 256   .left {
 257     float: left;
 258   }
 259   .left + .right {
 260     margin-left: 30px + $-s;
 261   }
 262 }
 263
 264 ul.pagination {
 265   display: inline-block;
 266   list-style: none;
 267   margin: $-m 0;
 268   padding-left: 1px;
 269   li {
 270     float: left;
 271   }
 272   li:first-child {
 273     a, span {
 274       border-radius: 3px 0 0 3px;
 275     }
 276   }
 277   li:last-child {
 278     a, span {
 279       border-radius: 0 3px 3px 0;
 280     }
 281   }
 282   a, span {
 283     display: block;
 284     padding: $-xxs $-s;
 285     border: 1px solid #CCC;
 286     margin-left: -1px;
 287     color: #888;
 288     user-select: none;
 289     &.disabled {
 290       cursor: not-allowed;
 291     }
 292   }
 293   li.active span {
 294     background-color: rgba($primary, 0.8);
 295     color: #EEE;
 296     border-color: rgba($primary, 0.8);
 297   }
 298   a {
 299     color: $primary;
 300   }
 301 }
 302
 303 .compact ul.pagination {
 304   margin: 0;
 305 }
 306
 307 .entity-list {
 308   > div {
 309     padding: $-m 0;
 310   }
 311   h4 {
 312     margin: 0;
 313   }
 314   p {
 315     margin: $-xs 0 0 0;
 316   }
 317   hr {
 318     margin: 0;
 319   }
 320   .text-small.text-muted {
 321     color: #AAA;
 322     font-size: 0.75em;
 323     margin-top: $-xs;
 324   }
 325   .text-muted p.text-muted {
 326     margin-top: 0;
 327   }
 328   .page.draft .text-page {
 329     color: $color-page-draft;
 330   }
 331 }
 332
 333 .entity-list.compact {
 334   font-size: 0.6em;
 335   h4, a {
 336     line-height: 1.2;
 337   }
 338   p {
 339     display: none;
 340     font-size: $fs-m * 0.8;
 341     padding-top: $-xs;
 342     margin: 0;
 343   }
 344   > p.empty-text {
 345     display: block;
 346     font-size: $fs-m;
 347   }
 348   hr {
 349     margin: 0;
 350   }
 351 }
 352
 353 .dropdown-container {
 354   display: inline-block;
 355   vertical-align: top;
 356   position: relative;
 357 }
 358
 359 .dropdown-container ul {
 360   display: none;
 361   position: absolute;
 362   z-index: 999;
 363   top: 0;
 364   list-style: none;
 365   right: 0;
 366   margin: $-m 0;
 367   background-color: #FFFFFF;
 368   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 369   border-radius: 1px;
 370   border: 1px solid #EEE;
 371   min-width: 180px;
 372   padding: $-xs 0;
 373   color: #555;
 374   text-align: left !important;
 375   &.wide {
 376     min-width: 220px;
 377   }
 378   .text-muted {
 379     color: #999;
 380   }
 381   li.padded {
 382     padding: $-xs $-m;
 383   }
 384   a {
 385     display: block;
 386     padding: $-xs $-m;
 387     color: #555;
 388     &:hover {
 389       text-decoration: none;
 390       background-color: #EEE;
 391     }
 392     i {
 393       margin-right: $-s;
 394       padding-right: 0;
 395       display: inline-block;
 396       width: 16px;
 397     }
 398   }
 399   li.border-bottom {
 400     border-bottom: 1px solid #DDD;
 401   }
 402 }