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 .fill-height {
 270   height: 100%;
 271 }
 272
 273 .float {
 274   float: left;
 275   &.right {
 276     float: right;
 277   }
 278 }
 279
 280 .sticky-top-m {
 281   position: sticky;
 282   top: $-m;
 283 }
 284
 285 /**
 286  * Visibility
 287  */
 288 @each $sizeLetter, $size in $screen-sizes {
 289   @include smaller-than($size) {
 290     .hide-under-#{$sizeLetter} {
 291       display: none !important;
 292     }
 293   }
 294   @include larger-than($size) {
 295     .hide-over-#{$sizeLetter} {
 296       display: none !important;
 297     }
 298   }
 299 }
 300
 301 [hidden] {
 302   display: none !important;
 303 }
 304
 305 /**
 306  * Border radiuses
 307  */
 308 .rounded {
 309   border-radius: 4px;
 310 }
 311
 312 /**
 313  * Inline content columns
 314  */
 315 .dual-column-content {
 316   columns: 2;
 317 }
 318
 319 @include smaller-than($m) {
 320   .dual-column-content {
 321     columns: 1;
 322   }
 323 }
 324
 325
 326 /**
 327  * Fixes
 328  */
 329 .clearfix::before,
 330 .clearfix::after {
 331   content: " ";
 332   display: table;
 333 }
 334 .clearfix::after {
 335   clear: both;
 336 }
 337
 338 /**
 339  * View Layouts
 340  */
 341 .tri-layout-container {
 342   display: grid;
 343   margin-inline-start: $-xl;
 344   margin-inline-end: $-xl;
 345   grid-template-columns: 1fr 4fr 1fr;
 346   grid-template-areas: "a b c";
 347   grid-column-gap: $-xxl;
 348   .tri-layout-right {
 349     grid-area: c;
 350     min-width: 0;
 351   }
 352   .tri-layout-left {
 353     grid-area: a;
 354     min-width: 0;
 355   }
 356   .tri-layout-middle {
 357     grid-area: b;
 358     padding-top: $-m;
 359     min-width: 0;
 360   }
 361 }
 362 @include smaller-than($xxl) {
 363   .tri-layout-container {
 364     grid-template-areas:  "c b b"
 365     "a b b"
 366     ". b b";
 367     grid-template-columns: 1fr 3fr;
 368     grid-template-rows: min-content min-content 1fr;
 369     padding-inline-end: $-l;
 370   }
 371 }
 372 @include between($l, $xxl) {
 373   .tri-layout-left {
 374     position: sticky;
 375     top: $-m;
 376   }
 377 }
 378 @include larger-than($xxl) {
 379   .tri-layout-left-contents, .tri-layout-right-contents {
 380     padding: $-xl $-m;
 381     position: sticky;
 382     top: 0;
 383     max-height: 100vh;
 384     min-height: 50vh;
 385     overflow-y: scroll;
 386     overflow-x: hidden;
 387     height: 100%;
 388     scrollbar-width: none;
 389     -ms-overflow-style: none;
 390     &::-webkit-scrollbar {
 391       display: none;
 392     }
 393   }
 394   .tri-layout-middle-contents {
 395     max-width: 940px;
 396     margin: 0 auto;
 397   }
 398 }
 399
 400 @include smaller-than($l) {
 401   .tri-layout-container {
 402     grid-template-areas:  none;
 403     grid-template-columns: 1fr;
 404     grid-column-gap: 0;
 405     padding-inline-end: $-xs;
 406     padding-inline-start: $-xs;
 407     .tri-layout-left-contents, .tri-layout-right-contents {
 408       padding-inline-start: $-m;
 409       padding-inline-end: $-m;
 410     }
 411     .tri-layout-left > *, .tri-layout-right > * {
 412       display: none;
 413       pointer-events: none;
 414     }
 415     .tri-layout-left, .tri-layout-right {
 416       grid-area: none;
 417       grid-column: 1/1;
 418       grid-row: 1;
 419       padding-top: 0 !important;
 420     }
 421     .tri-layout-middle {
 422       grid-area: none;
 423       grid-row: 3;
 424       grid-column: 1/1;
 425       z-index: 1;
 426       overflow: hidden;
 427       transition: transform ease-in-out 240ms;
 428     }
 429     .tri-layout-left {
 430       grid-row: 2;
 431     }
 432     &.show-info {
 433       overflow: hidden;
 434       .tri-layout-middle {
 435         display: none;
 436       }
 437       .tri-layout-right  > *, .tri-layout-left > * {
 438         display: block;
 439         pointer-events: auto;
 440       }
 441     }
 442   }
 443 }
 444 @include larger-than($l) {
 445   .tri-layout-mobile-tabs {
 446     display: none;
 447   }
 448   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
 449     @include lightDark(opacity, 0.6, 0.75);
 450     transition: opacity ease-in-out 120ms;
 451     &:hover, &:focus-within {
 452       opacity: 1 !important;
 453     }
 454     @media (prefers-contrast: more) {
 455       opacity: 1 !important;
 456     }
 457   }
 458 }
 459
 460 @include smaller-than($m) {
 461   .tri-layout-container {
 462     margin-inline-start: 0;
 463     margin-inline-end: 0;
 464   }
 465 }