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