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   &.small {
  12     max-width: 840px;
  13   }
  14   &.very-small {
  15     max-width: 480px;
  16   }
  17 }
  18
  19 /**
  20  * Core grid layout system
  21  */
  22 .grid {
  23   display: grid;
  24   grid-column-gap: $-l;
  25   grid-row-gap: $-l;
  26   &.half {
  27     grid-template-columns: 1fr 1fr;
  28   }
  29   &.third {
  30     grid-template-columns: 1fr 1fr 1fr;
  31   }
  32   &.left-focus {
  33     grid-template-columns: 2fr 1fr;
  34   }
  35   &.right-focus {
  36     grid-template-columns: 1fr 3fr;
  37   }
  38   &.gap-y-xs {
  39     grid-row-gap: $-xs;
  40   }
  41   &.gap-xl {
  42     grid-column-gap: $-xl;
  43     grid-row-gap: $-xl;
  44   }
  45   &.gap-xxl {
  46     grid-column-gap: $-xxl;
  47     grid-row-gap: $-xxl;
  48   }
  49   &.v-center {
  50     align-items: center;
  51   }
  52   &.v-end {
  53     align-items: end;
  54   }
  55   &.no-gap {
  56     grid-row-gap: 0;
  57     grid-column-gap: 0;
  58   }
  59   &.no-row-gap {
  60     grid-row-gap: 0;
  61   }
  62 }
  63
  64 @include smaller-than($m) {
  65   .grid.third:not(.no-break) {
  66     grid-template-columns: 1fr 1fr;
  67   }
  68   .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
  69     grid-template-columns: 1fr;
  70   }
  71   .grid.half.collapse-xs {
  72     grid-template-columns: 1fr 1fr;
  73   }
  74   .grid.gap-xl {
  75     grid-column-gap: $-m;
  76     grid-row-gap: $-m;
  77   }
  78   .grid.right-focus.reverse-collapse > *:nth-child(2) {
  79     order: 0;
  80   }
  81   .grid.right-focus.reverse-collapse > *:nth-child(1) {
  82     order: 1;
  83   }
  84 }
  85
  86 @include smaller-than($s) {
  87   .grid.third:not(.no-break) {
  88     grid-template-columns: 1fr;
  89   }
  90 }
  91
  92 @include smaller-than($xs) {
  93   .grid.half.collapse-xs {
  94     grid-template-columns: 1fr;
  95   }
  96 }
  97
  98 #content {
  99   flex: 1 0 auto;
 100 }
 101
 102 /**
 103  * Flexbox layout system
 104  */
 105 body.flexbox {
 106   display: flex;
 107   flex-direction: column;
 108   align-items: stretch;
 109   height: 100%;
 110   min-height: 100%;
 111   max-height: 100%;
 112   overflow: hidden;
 113   #content {
 114     flex: 1;
 115     display: flex;
 116     min-height: 0;
 117   }
 118 }
 119
 120 .flex-fill {
 121   display: flex;
 122   align-items: stretch;
 123   min-height: 0;
 124   max-width: 100%;
 125   position: relative;
 126 }
 127
 128 .flex-container-row {
 129   display: flex;
 130   flex-direction: row;
 131   &.v-center {
 132     align-items: center;
 133   }
 134 }
 135
 136 .flex-container-column {
 137   display: flex;
 138   flex-direction: column;
 139 }
 140
 141 .flex-container-column.wrap, .flex-container-row.wrap {
 142   flex-wrap: wrap;
 143 }
 144
 145 .flex {
 146   min-height: 0;
 147   flex: 1;
 148   &.fit-content {
 149     flex-basis: auto;
 150     flex-grow: 0;
 151   }
 152 }
 153
 154 .justify-flex-end {
 155   justify-content: flex-end;
 156 }
 157 .justify-center {
 158   justify-content: center;
 159 }
 160 .items-center {
 161   align-items: center;
 162 }
 163
 164
 165 /**
 166  * Display and float utilities
 167  */
 168 .block {
 169   display: block !important;
 170   position: relative;
 171 }
 172
 173 .inline {
 174   display: inline !important;
 175 }
 176
 177 .block.inline {
 178   display: inline-block !important;
 179 }
 180
 181 .hidden {
 182   display: none !important;
 183 }
 184
 185 .fill-height {
 186   height: 100%;
 187 }
 188
 189 .float {
 190   float: left;
 191   &.right {
 192     float: right;
 193   }
 194 }
 195
 196 /**
 197  * Visibility
 198  */
 199 @each $sizeLetter, $size in $screen-sizes {
 200   @include smaller-than($size) {
 201     .hide-under-#{$sizeLetter} {
 202       display: none !important;
 203     }
 204   }
 205   @include larger-than($size) {
 206     .hide-over-#{$sizeLetter} {
 207       display: none !important;
 208     }
 209   }
 210 }
 211
 212 /**
 213  * Inline content columns
 214  */
 215 .dual-column-content {
 216   columns: 2;
 217 }
 218
 219 @include smaller-than($m) {
 220   .dual-column-content {
 221     columns: 1;
 222   }
 223 }
 224
 225
 226 /**
 227  * Fixes
 228  */
 229 .clearfix::before,
 230 .clearfix::after {
 231   content: " ";
 232   display: table;
 233 }
 234 .clearfix::after {
 235   clear: both;
 236 }
 237
 238 /**
 239  * View Layouts
 240  */
 241 .tri-layout-container {
 242   display: grid;
 243   margin-inline-start: $-xl;
 244   margin-inline-end: $-xl;
 245   grid-template-columns: 1fr 4fr 1fr;
 246   grid-template-areas: "a b c";
 247   grid-column-gap: $-xxl;
 248   .tri-layout-right {
 249     grid-area: c;
 250     min-width: 0;
 251   }
 252   .tri-layout-left {
 253     grid-area: a;
 254     min-width: 0;
 255   }
 256   .tri-layout-middle {
 257     grid-area: b;
 258     padding-top: $-m;
 259   }
 260 }
 261 @include smaller-than($xxl) {
 262   .tri-layout-container {
 263     grid-template-areas:  "c b b"
 264     "a b b"
 265     ". b b";
 266     grid-template-columns: 1fr 3fr;
 267     grid-template-rows: min-content min-content 1fr;
 268     padding-inline-end: $-l;
 269   }
 270 }
 271 @include between($l, $xxl) {
 272   .tri-layout-left {
 273     position: sticky;
 274     top: $-m;
 275   }
 276 }
 277 @include larger-than($xxl) {
 278   .tri-layout-left-contents, .tri-layout-right-contents {
 279     padding: $-m;
 280     position: sticky;
 281     top: $-m;
 282     max-height: 100vh;
 283     min-height: 50vh;
 284     overflow-y: scroll;
 285     overflow-x: hidden;
 286     height: 100%;
 287     scrollbar-width: none;
 288     -ms-overflow-style: none;
 289     &::-webkit-scrollbar {
 290       display: none;
 291     }
 292   }
 293   .tri-layout-middle-contents {
 294     max-width: 940px;
 295     margin: 0 auto;
 296   }
 297 }
 298
 299 @include smaller-than($l) {
 300   .tri-layout-container {
 301     grid-template-areas:  none;
 302     grid-template-columns: 1fr;
 303     grid-column-gap: 0;
 304     padding-inline-end: $-xs;
 305     padding-inline-start: $-xs;
 306     .tri-layout-left-contents, .tri-layout-right-contents {
 307       padding-inline-start: $-m;
 308       padding-inline-end: $-m;
 309     }
 310     .tri-layout-left > *, .tri-layout-right > * {
 311       display: none;
 312       pointer-events: none;
 313     }
 314     .tri-layout-left, .tri-layout-right {
 315       grid-area: none;
 316       grid-column: 1/1;
 317       grid-row: 1;
 318       padding-top: 0 !important;
 319     }
 320     .tri-layout-middle {
 321       grid-area: none;
 322       grid-row: 3;
 323       grid-column: 1/1;
 324       z-index: 1;
 325       overflow: hidden;
 326       transition: transform ease-in-out 240ms;
 327     }
 328     .tri-layout-left {
 329       grid-row: 2;
 330     }
 331     &.show-info {
 332       overflow: hidden;
 333       .tri-layout-middle {
 334         display: none;
 335       }
 336       .tri-layout-right  > *, .tri-layout-left > * {
 337         display: block;
 338         pointer-events: auto;
 339       }
 340     }
 341   }
 342 }
 343 @include larger-than($l) {
 344   .tri-layout-mobile-tabs {
 345     display: none;
 346   }
 347   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
 348     opacity: 0.6;
 349     transition: opacity ease-in-out 120ms;
 350     &:hover {
 351       opacity: 1;
 352     }
 353     &:focus-within {
 354       opacity: 1;
 355     }
 356   }
 357
 358 }
 359
 360 @include smaller-than($m) {
 361   .tri-layout-container {
 362     margin-inline-start: 0;
 363     margin-inline-end: 0;
 364   }
 365 }