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