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 /**
  99  * Flexbox layout system
 100  */
 101 body.flexbox {
 102   display: flex;
 103   flex-direction: column;
 104   align-items: stretch;
 105   height: 100%;
 106   min-height: 100%;
 107   max-height: 100%;
 108   overflow: hidden;
 109   #content {
 110     flex: 1;
 111     display: flex;
 112     min-height: 0;
 113   }
 114 }
 115
 116 .flex-fill {
 117   display: flex;
 118   align-items: stretch;
 119   min-height: 0;
 120   max-width: 100%;
 121   position: relative;
 122 }
 123
 124 .flex-container-row {
 125   display: flex;
 126   flex-direction: row;
 127   &.v-center {
 128     align-items: center;
 129   }
 130 }
 131
 132 .flex-container-column {
 133   display: flex;
 134   flex-direction: column;
 135 }
 136
 137 .flex-container-column.wrap, .flex-container-row.wrap {
 138   flex-wrap: wrap;
 139 }
 140
 141 .flex {
 142   min-height: 0;
 143   flex: 1;
 144   &.fit-content {
 145     flex-basis: auto;
 146     flex-grow: 0;
 147   }
 148 }
 149
 150 .justify-flex-end {
 151   justify-content: flex-end;
 152 }
 153 .justify-center {
 154   justify-content: center;
 155 }
 156 .items-center {
 157   align-items: center;
 158 }
 159
 160
 161 /**
 162  * Display and float utilities
 163  */
 164 .block {
 165   display: block !important;
 166   position: relative;
 167 }
 168
 169 .inline {
 170   display: inline !important;
 171 }
 172
 173 .block.inline {
 174   display: inline-block !important;
 175 }
 176
 177 .hidden {
 178   display: none !important;
 179 }
 180
 181 .float {
 182   float: left;
 183   &.right {
 184     float: right;
 185   }
 186 }
 187
 188 /**
 189  * Visibility
 190  */
 191 @each $sizeLetter, $size in $screen-sizes {
 192   @include smaller-than($size) {
 193     .hide-under-#{$sizeLetter} {
 194       display: none !important;
 195     }
 196   }
 197   @include larger-than($size) {
 198     .hide-over-#{$sizeLetter} {
 199       display: none !important;
 200     }
 201   }
 202 }
 203
 204 /**
 205  * Inline content columns
 206  */
 207 .dual-column-content {
 208   columns: 2;
 209 }
 210
 211 @include smaller-than($m) {
 212   .dual-column-content {
 213     columns: 1;
 214   }
 215 }
 216
 217
 218 /**
 219  * Fixes
 220  */
 221 .clearfix::before,
 222 .clearfix::after {
 223   content: " ";
 224   display: table;
 225 }
 226 .clearfix::after {
 227   clear: both;
 228 }
 229
 230 /**
 231  * View Layouts
 232  */
 233 .tri-layout-container {
 234   display: grid;
 235   margin-inline-start: $-xl;
 236   margin-inline-end: $-xl;
 237   grid-template-columns: 1fr 4fr 1fr;
 238   grid-template-areas: "a b c";
 239   grid-column-gap: $-xxl;
 240   .tri-layout-right {
 241     grid-area: c;
 242     min-width: 0;
 243   }
 244   .tri-layout-left {
 245     grid-area: a;
 246     min-width: 0;
 247   }
 248   .tri-layout-middle {
 249     grid-area: b;
 250     padding-top: $-m;
 251   }
 252 }
 253 @include smaller-than($xxl) {
 254   .tri-layout-container {
 255     grid-template-areas:  "c b b"
 256     "a b b"
 257     ". b b";
 258     grid-template-columns: 1fr 3fr;
 259     grid-template-rows: min-content min-content 1fr;
 260     padding-inline-end: $-l;
 261   }
 262 }
 263 @include between($l, $xxl) {
 264   .tri-layout-left {
 265     position: sticky;
 266     top: $-m;
 267   }
 268 }
 269 @include larger-than($xxl) {
 270   .tri-layout-left-contents, .tri-layout-right-contents {
 271     padding: $-m;
 272     position: sticky;
 273     top: $-m;
 274     max-height: 100vh;
 275     min-height: 50vh;
 276     overflow-y: scroll;
 277     overflow-x: hidden;
 278     scrollbar-width: none;
 279     -ms-overflow-style: none;
 280     &::-webkit-scrollbar {
 281       display: none;
 282     }
 283   }
 284   .tri-layout-middle-contents {
 285     max-width: 940px;
 286     margin: 0 auto;
 287   }
 288 }
 289
 290 @include smaller-than($l) {
 291   .tri-layout-container {
 292     grid-template-areas:  none;
 293     grid-template-columns: 1fr;
 294     grid-column-gap: 0;
 295     padding-inline-end: $-xs;
 296     padding-inline-start: $-xs;
 297     .tri-layout-left-contents, .tri-layout-right-contents {
 298       padding-inline-start: $-m;
 299       padding-inline-end: $-m;
 300     }
 301     .tri-layout-left > *, .tri-layout-right > * {
 302       display: none;
 303       pointer-events: none;
 304     }
 305     .tri-layout-left, .tri-layout-right {
 306       grid-area: none;
 307       grid-column: 1/1;
 308       grid-row: 1;
 309       padding-top: 0 !important;
 310     }
 311     .tri-layout-middle {
 312       grid-area: none;
 313       grid-row: 3;
 314       grid-column: 1/1;
 315       z-index: 1;
 316       overflow: hidden;
 317       transition: transform ease-in-out 240ms;
 318     }
 319     .tri-layout-left {
 320       grid-row: 2;
 321     }
 322     &.show-info {
 323       overflow: hidden;
 324       .tri-layout-middle {
 325         display: none;
 326       }
 327       .tri-layout-right  > *, .tri-layout-left > * {
 328         display: block;
 329         pointer-events: auto;
 330       }
 331     }
 332   }
 333 }
 334 @include larger-than($l) {
 335   .tri-layout-mobile-tabs {
 336     display: none;
 337   }
 338   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
 339     opacity: 0.6;
 340     transition: opacity ease-in-out 120ms;
 341     &:hover {
 342       opacity: 1;
 343     }
 344     &:focus-within {
 345       opacity: 1;
 346     }
 347   }
 348
 349 }
 350
 351 @include smaller-than($m) {
 352   .tri-layout-container {
 353     margin-inline-start: 0;
 354     margin-inline-end: 0;
 355   }
 356 }