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 }
 164
 165 .flex-2 {
 166   min-height: 0;
 167   flex: 2;
 168   max-width: 100%;
 169 }
 170
 171 .flex-3 {
 172   min-height: 0;
 173   flex: 3;
 174   max-width: 100%;
 175 }
 176
 177 .flex-none {
 178   flex: none;
 179 }
 180
 181 .justify-flex-start {
 182   justify-content: flex-start;
 183 }
 184 .justify-flex-end {
 185   justify-content: flex-end;
 186 }
 187 .justify-center {
 188   justify-content: center;
 189 }
 190 .justify-space-between {
 191   justify-content: space-between;
 192 }
 193 .items-center {
 194   align-items: center;
 195 }
 196
 197 /**
 198  * Min width utilities
 199  */
 200 .min-width-xs {
 201   min-width: 120px;
 202 }
 203 .min-width-s {
 204   min-width: 160px;
 205 }
 206 .min-width-m {
 207   min-width: 200px;
 208 }
 209 .min-width-l {
 210   min-width: 240px;
 211 }
 212 .min-width-xl {
 213   min-width: 280px;
 214 }
 215 .min-width-xxl {
 216   min-width: 320px;
 217 }
 218
 219 /**
 220  * Display and float utilities
 221  */
 222 .block {
 223   display: block !important;
 224   position: relative;
 225 }
 226
 227 .inline {
 228   display: inline !important;
 229 }
 230
 231 .block.inline {
 232   display: inline-block !important;
 233 }
 234
 235 .relative {
 236   position: relative;
 237 }
 238
 239 .hidden {
 240   display: none !important;
 241 }
 242
 243 .fill-height {
 244   height: 100%;
 245 }
 246
 247 .float {
 248   float: left;
 249   &.right {
 250     float: right;
 251   }
 252 }
 253
 254 /**
 255  * Visibility
 256  */
 257 @each $sizeLetter, $size in $screen-sizes {
 258   @include smaller-than($size) {
 259     .hide-under-#{$sizeLetter} {
 260       display: none !important;
 261     }
 262   }
 263   @include larger-than($size) {
 264     .hide-over-#{$sizeLetter} {
 265       display: none !important;
 266     }
 267   }
 268 }
 269
 270 /**
 271  * Border radiuses
 272  */
 273 .rounded {
 274   border-radius: 4px;
 275 }
 276
 277 /**
 278  * Inline content columns
 279  */
 280 .dual-column-content {
 281   columns: 2;
 282 }
 283
 284 @include smaller-than($m) {
 285   .dual-column-content {
 286     columns: 1;
 287   }
 288 }
 289
 290
 291 /**
 292  * Fixes
 293  */
 294 .clearfix::before,
 295 .clearfix::after {
 296   content: " ";
 297   display: table;
 298 }
 299 .clearfix::after {
 300   clear: both;
 301 }
 302
 303 /**
 304  * View Layouts
 305  */
 306 .tri-layout-container {
 307   display: grid;
 308   margin-inline-start: $-xl;
 309   margin-inline-end: $-xl;
 310   grid-template-columns: 1fr 4fr 1fr;
 311   grid-template-areas: "a b c";
 312   grid-column-gap: $-xxl;
 313   .tri-layout-right {
 314     grid-area: c;
 315     min-width: 0;
 316   }
 317   .tri-layout-left {
 318     grid-area: a;
 319     min-width: 0;
 320   }
 321   .tri-layout-middle {
 322     grid-area: b;
 323     padding-top: $-m;
 324     min-width: 0;
 325   }
 326 }
 327 @include smaller-than($xxl) {
 328   .tri-layout-container {
 329     grid-template-areas:  "c b b"
 330     "a b b"
 331     ". b b";
 332     grid-template-columns: 1fr 3fr;
 333     grid-template-rows: min-content min-content 1fr;
 334     padding-inline-end: $-l;
 335   }
 336 }
 337 @include between($l, $xxl) {
 338   .tri-layout-left {
 339     position: sticky;
 340     top: $-m;
 341   }
 342 }
 343 @include larger-than($xxl) {
 344   .tri-layout-left-contents, .tri-layout-right-contents {
 345     padding: $-xl $-m;
 346     position: sticky;
 347     top: 0;
 348     max-height: 100vh;
 349     min-height: 50vh;
 350     overflow-y: scroll;
 351     overflow-x: hidden;
 352     height: 100%;
 353     scrollbar-width: none;
 354     -ms-overflow-style: none;
 355     &::-webkit-scrollbar {
 356       display: none;
 357     }
 358   }
 359   .tri-layout-middle-contents {
 360     max-width: 940px;
 361     margin: 0 auto;
 362   }
 363 }
 364
 365 @include smaller-than($l) {
 366   .tri-layout-container {
 367     grid-template-areas:  none;
 368     grid-template-columns: 1fr;
 369     grid-column-gap: 0;
 370     padding-inline-end: $-xs;
 371     padding-inline-start: $-xs;
 372     .tri-layout-left-contents, .tri-layout-right-contents {
 373       padding-inline-start: $-m;
 374       padding-inline-end: $-m;
 375     }
 376     .tri-layout-left > *, .tri-layout-right > * {
 377       display: none;
 378       pointer-events: none;
 379     }
 380     .tri-layout-left, .tri-layout-right {
 381       grid-area: none;
 382       grid-column: 1/1;
 383       grid-row: 1;
 384       padding-top: 0 !important;
 385     }
 386     .tri-layout-middle {
 387       grid-area: none;
 388       grid-row: 3;
 389       grid-column: 1/1;
 390       z-index: 1;
 391       overflow: hidden;
 392       transition: transform ease-in-out 240ms;
 393     }
 394     .tri-layout-left {
 395       grid-row: 2;
 396     }
 397     &.show-info {
 398       overflow: hidden;
 399       .tri-layout-middle {
 400         display: none;
 401       }
 402       .tri-layout-right  > *, .tri-layout-left > * {
 403         display: block;
 404         pointer-events: auto;
 405       }
 406     }
 407   }
 408 }
 409 @include larger-than($l) {
 410   .tri-layout-mobile-tabs {
 411     display: none;
 412   }
 413   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
 414     @include lightDark(opacity, 0.6, 0.7);
 415     transition: opacity ease-in-out 120ms;
 416     &:hover, &:focus-within {
 417       opacity: 1 !important;
 418     }
 419     @media (prefers-contrast: more) {
 420       opacity: 1 !important;
 421     }
 422   }
 423
 424 }
 425
 426 @include smaller-than($m) {
 427   .tri-layout-container {
 428     margin-inline-start: 0;
 429     margin-inline-end: 0;
 430   }
 431 }