BookStack Code Mirror - bookstack/blob - resources/sass/_layout.scss

   1
   2 /**
   3  * Generic content container
   4  */
   5 .container {
   6   max-width: $xxl;
   7   margin-inline-start: auto;
   8   margin-inline-end: auto;
   9   padding-inline-start: $-m;
  10   padding-inline-end: $-m;
  11   &.medium {
  12     max-width: 1100px;
  13   }
  14   &.small {
  15     max-width: 840px;
  16   }
  17   &.very-small {
  18     max-width: 480px;
  19   }
  20 }
  21
  22 /**
  23  * Core grid layout system
  24  */
  25 .grid {
  26   display: grid;
  27   grid-column-gap: $-l;
  28   grid-row-gap: $-l;
  29   > * {
  30     min-width: 0;
  31   }
  32   &.half {
  33     grid-template-columns: 1fr 1fr;
  34   }
  35   &.third {
  36     grid-template-columns: 1fr 1fr 1fr;
  37   }
  38   &.left-focus {
  39     grid-template-columns: 2fr 1fr;
  40   }
  41   &.right-focus {
  42     grid-template-columns: 1fr 3fr;
  43   }
  44   &.gap-y-xs {
  45     grid-row-gap: $-xs;
  46   }
  47   &.gap-xl {
  48     grid-column-gap: $-xl;
  49     grid-row-gap: $-xl;
  50   }
  51   &.gap-xxl {
  52     grid-column-gap: $-xxl;
  53     grid-row-gap: $-xxl;
  54   }
  55   &.v-center {
  56     align-items: center;
  57   }
  58   &.v-end {
  59     align-items: end;
  60   }
  61   &.no-gap {
  62     grid-row-gap: 0;
  63     grid-column-gap: 0;
  64   }
  65   &.no-row-gap {
  66     grid-row-gap: 0;
  67   }
  68 }
  69
  70 @include smaller-than($m) {
  71   .grid.third:not(.no-break) {
  72     grid-template-columns: 1fr 1fr;
  73   }
  74   .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
  75     grid-template-columns: 1fr;
  76   }
  77   .grid.half.collapse-xs {
  78     grid-template-columns: 1fr 1fr;
  79   }
  80   .grid.gap-xl {
  81     grid-column-gap: $-m;
  82     grid-row-gap: $-m;
  83   }
  84   .grid.right-focus.reverse-collapse > *:nth-child(2) {
  85     order: 0;
  86   }
  87   .grid.right-focus.reverse-collapse > *:nth-child(1) {
  88     order: 1;
  89   }
  90 }
  91
  92 @include smaller-than($s) {
  93   .grid.third:not(.no-break) {
  94     grid-template-columns: 1fr;
  95   }
  96 }
  97
  98 @include smaller-than($xs) {
  99   .grid.half.collapse-xs {
 100     grid-template-columns: 1fr;
 101   }
 102 }
 103
 104 #content {
 105   flex: 1 0 auto;
 106 }
 107
 108 /**
 109  * Flexbox layout system
 110  */
 111 body.flexbox {
 112   display: flex;
 113   flex-direction: column;
 114   align-items: stretch;
 115   height: 100%;
 116   min-height: 100%;
 117   max-height: 100%;
 118   overflow: hidden;
 119   #content {
 120     flex: 1;
 121     display: flex;
 122     min-height: 0;
 123   }
 124 }
 125
 126 .flex-fill {
 127   display: flex;
 128   align-items: stretch;
 129   min-height: 0;
 130   max-width: 100%;
 131   position: relative;
 132 }
 133
 134 .flex-container-row {
 135   display: flex;
 136   flex-direction: row;
 137   &.v-center {
 138     align-items: center;
 139   }
 140 }
 141
 142 .flex-container-column {
 143   display: flex;
 144   flex-direction: column;
 145 }
 146
 147 .flex-container-row.inline, .flex-container-column.inline {
 148   display: inline-flex !important;
 149 }
 150
 151 .flex-container-column.wrap, .flex-container-row.wrap {
 152   flex-wrap: wrap;
 153 }
 154
 155 .flex {
 156   min-height: 0;
 157   flex: 1;
 158   max-width: 100%;
 159   &.fit-content {
 160     flex-basis: auto;
 161     flex-grow: 0;
 162   }
 163   &.fill-area {
 164     flex-grow: 1;
 165     flex-shrink: 0;
 166     min-width: fit-content;
 167   }
 168 }
 169
 170 .flex-2 {
 171   min-height: 0;
 172   flex: 2;
 173   max-width: 100%;
 174 }
 175
 176 .flex-3 {
 177   min-height: 0;
 178   flex: 3;
 179   max-width: 100%;
 180 }
 181
 182 .flex-none {
 183   flex: none;
 184 }
 185
 186 .justify-flex-start {
 187   justify-content: flex-start;
 188 }
 189 .justify-flex-end {
 190   justify-content: flex-end;
 191 }
 192 .justify-center {
 193   justify-content: center;
 194 }
 195 .justify-space-between {
 196   justify-content: space-between;
 197 }
 198 .items-center {
 199   align-items: center;
 200 }
 201 .items-stretch {
 202   align-items: stretch;
 203 }
 204
 205 /**
 206  * Min width utilities
 207  */
 208 .min-width-xxxxs {
 209   min-width: 60px;
 210 }
 211 .min-width-xxxs {
 212   min-width: 80px;
 213 }
 214 .min-width-xxs {
 215   min-width: 100px;
 216 }
 217 .min-width-xs {
 218   min-width: 120px;
 219 }
 220 .min-width-s {
 221   min-width: 160px;
 222 }
 223 .min-width-m {
 224   min-width: 200px;
 225 }
 226 .min-width-l {
 227   min-width: 240px;
 228 }
 229 .min-width-xl {
 230   min-width: 280px;
 231 }
 232 .min-width-xxl {
 233   min-width: 320px;
 234 }
 235
 236 /**
 237  * Display and float utilities
 238  */
 239 .block {
 240   display: block !important;
 241   position: relative;
 242 }
 243
 244 .inline {
 245   display: inline !important;
 246 }
 247
 248 .block.inline {
 249   display: inline-block !important;
 250 }
 251
 252 .relative {
 253   position: relative;
 254 }
 255
 256 .fixed {
 257   position: fixed;
 258   z-index: 20;
 259   &.top-right {
 260     top: 0;
 261     right: 0;
 262   }
 263 }
 264
 265 .hidden {
 266   display: none !important;
 267 }
 268
 269 .overflow-hidden {
 270   overflow: hidden;
 271 }
 272
 273 .fill-height {
 274   height: 100%;
 275 }
 276
 277 .float {
 278   float: left;
 279   &.right {
 280     float: right;
 281   }
 282 }
 283
 284 .sticky-top-m {
 285   position: sticky;
 286   top: $-m;
 287 }
 288
 289 /**
 290  * Visibility
 291  */
 292 @each $sizeLetter, $size in $screen-sizes {
 293   @include smaller-than($size) {
 294     .hide-under-#{$sizeLetter} {
 295       display: none !important;
 296     }
 297   }
 298   @include larger-than($size) {
 299     .hide-over-#{$sizeLetter} {
 300       display: none !important;
 301     }
 302   }
 303 }
 304
 305 [hidden] {
 306   display: none !important;
 307 }
 308
 309 .screen-reader-only {
 310   position: absolute;
 311   inset-inline-start: -10000px;
 312   top: auto;
 313   width: 1px;
 314   height: 1px;
 315   overflow: hidden;
 316 }
 317
 318 /**
 319  * Border radiuses
 320  */
 321 .rounded {
 322   border-radius: 4px;
 323 }
 324
 325 /**
 326  * Inline content columns
 327  */
 328 .dual-column-content {
 329   columns: 2;
 330 }
 331
 332 @include smaller-than($m) {
 333   .dual-column-content {
 334     columns: 1;
 335   }
 336 }
 337
 338
 339 /**
 340  * Fixes
 341  */
 342 .clearfix::before,
 343 .clearfix::after {
 344   content: " ";
 345   display: table;
 346 }
 347 .clearfix::after {
 348   clear: both;
 349 }
 350
 351 /**
 352  * View Layouts
 353  */
 354 .tri-layout-container {
 355   display: grid;
 356   margin-inline-start: $-xl;
 357   margin-inline-end: $-xl;
 358   grid-template-columns: 1fr 4fr 1fr;
 359   grid-template-areas: "a b c";
 360   grid-column-gap: $-xl;
 361   position: relative;
 362 }
 363 .tri-layout-sides {
 364   grid-column-start: a;
 365   grid-column-end: c;
 366   grid-row: 1;
 367   min-width: 0;
 368   z-index: 4;
 369 }
 370 .tri-layout-sides-content {
 371   display: grid;
 372   grid-template-areas: "a b c";
 373   grid-template-columns: 1fr 4fr 1fr;
 374   height: 100%;
 375 }
 376 .tri-layout-middle {
 377   grid-area: b;
 378   padding-top: $-m;
 379   min-width: 0;
 380   z-index: 5;
 381 }
 382 .tri-layout-right {
 383   grid-area: c;
 384   min-width: 0;
 385 }
 386 .tri-layout-left {
 387   grid-area: a;
 388   min-width: 0;
 389 }
 390
 391 @include larger-than($xxl) {
 392   .tri-layout-left-contents, .tri-layout-right-contents {
 393     padding: $-xl $-m;
 394     position: sticky;
 395     top: 0;
 396     max-height: 100vh;
 397     min-height: 50vh;
 398     overflow-y: scroll;
 399     overflow-x: hidden;
 400     height: 100%;
 401     scrollbar-width: none;
 402     -ms-overflow-style: none;
 403     &::-webkit-scrollbar {
 404       display: none;
 405     }
 406   }
 407   .tri-layout-middle-contents {
 408     max-width: 940px;
 409     margin: 0 auto;
 410   }
 411 }
 412 @include between($xxl, $xxxl) {
 413   .tri-layout-sides-content, .tri-layout-container {
 414     grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
 415   }
 416   .tri-layout-container {
 417     grid-column-gap: $-s;
 418     margin-inline-start: $-m;
 419     margin-inline-end: $-m;
 420   }
 421 }
 422 @include smaller-than($xxl) {
 423   .tri-layout-container {
 424     grid-template-areas:  "a b b";
 425     grid-template-columns: 1fr 3fr;
 426     grid-template-rows: min-content min-content 1fr;
 427     padding-inline-end: $-l;
 428   }
 429   .tri-layout-sides {
 430     grid-column-start: a;
 431     grid-column-end: a;
 432   }
 433   .tri-layout-sides-content {
 434     display: block;
 435   }
 436 }
 437 @include between($l, $xxl) {
 438   .tri-layout-sides-content {
 439     position: sticky;
 440     top: 0;
 441     max-height: 100vh;
 442     min-height: 50vh;
 443     overflow-y: scroll;
 444     overflow-x: hidden;
 445     height: 100%;
 446     scrollbar-width: none;
 447     -ms-overflow-style: none;
 448     &::-webkit-scrollbar {
 449       display: none;
 450     }
 451   }
 452 }
 453 @include larger-than($l) {
 454   .tri-layout-mobile-tabs {
 455     display: none;
 456   }
 457   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
 458     @include lightDark(opacity, 0.6, 0.75);
 459     transition: opacity ease-in-out 120ms;
 460     &:hover, &:focus-within {
 461       opacity: 1 !important;
 462     }
 463     @media (prefers-contrast: more) {
 464       opacity: 1 !important;
 465     }
 466   }
 467 }
 468 @include smaller-than($l) {
 469   .tri-layout-container {
 470     grid-template-areas:  none;
 471     grid-template-columns: 1fr;
 472     grid-column-gap: 0;
 473     padding-inline-end: $-xs;
 474     padding-inline-start: $-xs;
 475     .tri-layout-sides {
 476       padding-inline-start: $-m;
 477       padding-inline-end: $-m;
 478       grid-column: 1/1;
 479     }
 480     .tri-layout-left > *, .tri-layout-right > * {
 481       display: none;
 482       pointer-events: none;
 483     }
 484     .tri-layout-left, .tri-layout-right {
 485       padding-top: 0 !important;
 486     }
 487     .tri-layout-middle {
 488       grid-area: none;
 489       grid-row: 3;
 490       grid-column: 1/1;
 491       z-index: 1;
 492       overflow: hidden;
 493       transition: transform ease-in-out 240ms;
 494     }
 495     .tri-layout-left {
 496       grid-row: 2;
 497     }
 498     &.show-info {
 499       overflow: hidden;
 500       .tri-layout-middle {
 501         display: none;
 502       }
 503       .tri-layout-right  > *, .tri-layout-left > * {
 504         display: block;
 505         pointer-events: auto;
 506       }
 507     }
 508   }
 509 }
 510
 511 @include smaller-than($m) {
 512   .tri-layout-container {
 513     margin-inline-start: 0;
 514     margin-inline-end: 0;
 515   }
 516 }