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

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