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

   1 .page-list {
   2   h3 {
   3     margin: $-l 0 $-m 0;
   4   }
   5   a.chapter {
   6     color: $color-chapter;
   7   }
   8   .inset-list {
   9     display: none;
  10     overflow: hidden;
  11     // padding-left: $-m;
  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   }
  20   hr {
  21     margin-top: 0;
  22   }
  23   .page, .chapter, .book {
  24     padding-left: $-l;
  25   }
  26   .page {
  27     border-left: 5px solid $color-page;
  28   }
  29   .page.draft {
  30     border-left: 5px solid $color-page-draft;
  31     .text-page {
  32       color: $color-page-draft;
  33     }
  34   }
  35   .chapter {
  36     border-left: 5px solid $color-chapter;
  37   }
  38   .book {
  39     border-left: 5px solid $color-book;
  40   }
  41   .meta {
  42     margin-top: -$-m;
  43     font-size: 0.95em;
  44   }
  45   .meta span {
  46     margin-right: $-s;
  47   }
  48 }
  49 .chapter-toggle {
  50   cursor: pointer;
  51   margin: 0 0 $-l 0;
  52   transition: all ease-in-out 180ms;
  53   user-select: none;
  54   i.zmdi-caret-right {
  55     transition: all ease-in-out 180ms;
  56     transform: rotate(0deg);
  57     transform-origin: 25% 50%;
  58   }
  59   &.open {
  60     margin-bottom: 0;
  61   }
  62   &.open i.zmdi-caret-right {
  63     transform: rotate(90deg);
  64   }
  65 }
  66
  67 .page-nav-list {
  68   $nav-indent: $-s;
  69   margin-left: 2px;
  70   list-style: none;
  71   li {
  72     //border-left: 1px solid rgba(0, 0, 0, 0.1);
  73     padding-left: $-xs;
  74     border-left: 2px solid #888;
  75     margin-bottom: 4px;
  76   }
  77   li a {
  78     color: #555;
  79   }
  80   .nav-H2 {
  81     margin-left: $nav-indent;
  82     font-size: 0.95em;
  83   }
  84   .nav-H3 {
  85     margin-left: $nav-indent*2;
  86     font-size: 0.90em
  87   }
  88   .nav-H4 {
  89     margin-left: $nav-indent*3;
  90     font-size: 0.85em
  91   }
  92   .nav-H5 {
  93     margin-left: $nav-indent*4;
  94     font-size: 0.80em
  95   }
  96   .nav-H6 {
  97     margin-left: $nav-indent*5;
  98     font-size: 0.75em
  99   }
 100 }
 101
 102 // Sidebar list
 103 .book-tree {
 104   padding: $-l 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   li {
 267     float: left;
 268   }
 269   li:first-child {
 270     a, span {
 271       border-radius: 3px 0 0 3px;
 272     }
 273   }
 274   li:last-child {
 275     a, span {
 276       border-radius: 0 3px 3px 0;
 277     }
 278   }
 279   a, span {
 280     display: block;
 281     padding: $-xxs $-s;
 282     border: 1px solid #CCC;
 283     margin-left: -1px;
 284     color: #888;
 285     user-select: none;
 286     &.disabled {
 287       cursor: not-allowed;
 288     }
 289   }
 290   li.active span {
 291     background-color: rgba($primary, 0.8);
 292     color: #EEE;
 293     border-color: rgba($primary, 0.8);
 294   }
 295   a {
 296     color: $primary;
 297   }
 298 }
 299
 300 .entity-list {
 301   >div {
 302     padding: $-m 0;
 303   }
 304   h3 {
 305     margin: 0;
 306   }
 307   p {
 308     margin: $-xs 0 0 0;
 309   }
 310   hr {
 311     margin: 0;
 312   }
 313   .text-small.text-muted {
 314     color: #AAA;
 315     font-size: 0.75em;
 316     margin-top: $-xs;
 317   }
 318   .page.draft .text-page {
 319     color: $color-page-draft;
 320   }
 321 }
 322 .entity-list.compact {
 323   font-size: 0.6em;
 324   h3, a {
 325     line-height: 1.2;
 326   }
 327   p {
 328     display: none;
 329     font-size: $fs-m * 0.8;
 330     padding-top: $-xs;
 331     margin: 0;
 332   }
 333   hr {
 334     margin: 0;
 335   }
 336 }
 337
 338 .dropdown-container {
 339   display: inline-block;
 340   vertical-align: top;
 341   position: relative;
 342 }
 343
 344 .dropdown-container ul {
 345   display: none;
 346   position: absolute;
 347   z-index: 999;
 348   top: 0;
 349   list-style: none;
 350   right: 0;
 351   margin: $-m 0;
 352   background-color: #FFFFFF;
 353   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
 354   border-radius: 1px;
 355   border: 1px solid #EEE;
 356   min-width: 180px;
 357   padding: $-xs 0;
 358   color: #555;
 359   text-align: left !important;
 360   &.wide {
 361     min-width: 220px;
 362   }
 363   .text-muted {
 364     color: #999;
 365   }
 366   a {
 367     display: block;
 368     padding: $-xs $-m;
 369     color: #555;
 370     &:hover {
 371       text-decoration: none;
 372       background-color: #EEE;
 373     }
 374     i {
 375       margin-right: $-m;
 376       padding-right: 0;
 377       display: inline;
 378       width: 22px;
 379     }
 380   }
 381   li.border-bottom {
 382     border-bottom: 1px solid #DDD;
 383   }
 384 }