+@use "mixins";
+@use "vars";
+
/**
* Generic content container
*/
.container {
- max-width: $xxl;
+ max-width: vars.$bp-xxl;
margin-inline-start: auto;
margin-inline-end: auto;
- padding-inline-start: $-m;
- padding-inline-end: $-m;
+ padding-inline-start: vars.$m;
+ padding-inline-end: vars.$m;
+ &.medium {
+ max-width: 1100px;
+ }
&.small {
max-width: 840px;
}
*/
.grid {
display: grid;
- grid-column-gap: $-l;
- grid-row-gap: $-l;
+ grid-column-gap: vars.$l;
+ grid-row-gap: vars.$l;
+ > * {
+ min-width: 0;
+ }
&.half {
grid-template-columns: 1fr 1fr;
}
grid-template-columns: 1fr 3fr;
}
&.gap-y-xs {
- grid-row-gap: $-xs;
+ grid-row-gap: vars.$xs;
}
&.gap-xl {
- grid-column-gap: $-xl;
- grid-row-gap: $-xl;
+ grid-column-gap: vars.$xl;
+ grid-row-gap: vars.$xl;
}
&.gap-xxl {
- grid-column-gap: $-xxl;
- grid-row-gap: $-xxl;
+ grid-column-gap: vars.$xxl;
+ grid-row-gap: vars.$xxl;
}
&.v-center {
align-items: center;
}
}
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.grid.third:not(.no-break) {
grid-template-columns: 1fr 1fr;
}
grid-template-columns: 1fr 1fr;
}
.grid.gap-xl {
- grid-column-gap: $-m;
- grid-row-gap: $-m;
+ grid-column-gap: vars.$m;
+ grid-row-gap: vars.$m;
}
.grid.right-focus.reverse-collapse > *:nth-child(2) {
order: 0;
}
}
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
.grid.third:not(.no-break) {
grid-template-columns: 1fr;
}
}
-@include smaller-than($xs) {
+@include mixins.smaller-than(vars.$bp-xs) {
.grid.half.collapse-xs {
grid-template-columns: 1fr;
}
}
+#content {
+ flex: 1 0 auto;
+}
+
/**
* Flexbox layout system
*/
.flex-container-row {
display: flex;
flex-direction: row;
+ &.v-center {
+ align-items: center;
+ }
}
.flex-container-column {
flex-direction: column;
}
+.flex-container-row.inline, .flex-container-column.inline {
+ display: inline-flex !important;
+}
+
+.flex-container-column.wrap, .flex-container-row.wrap {
+ flex-wrap: wrap;
+}
+
.flex {
min-height: 0;
flex: 1;
+ max-width: 100%;
+ &.fit-content {
+ flex-basis: auto;
+ flex-grow: 0;
+ }
+ &.fill-area {
+ flex-grow: 1;
+ flex-shrink: 0;
+ min-width: fit-content;
+ }
}
+.flex-2 {
+ min-height: 0;
+ flex: 2;
+ max-width: 100%;
+}
+
+.flex-3 {
+ min-height: 0;
+ flex: 3;
+ max-width: 100%;
+}
+
+.flex-none {
+ flex: none;
+}
+
+.justify-flex-start {
+ justify-content: flex-start;
+}
.justify-flex-end {
justify-content: flex-end;
}
+.justify-center {
+ justify-content: center;
+}
+.justify-space-between {
+ justify-content: space-between;
+}
+.items-center {
+ align-items: center;
+}
+.items-stretch {
+ align-items: stretch;
+}
+/**
+ * Min width utilities
+ */
+.min-width-xxxxs {
+ min-width: 60px;
+}
+.min-width-xxxs {
+ min-width: 80px;
+}
+.min-width-xxs {
+ min-width: 100px;
+}
+.min-width-xs {
+ min-width: 120px;
+}
+.min-width-s {
+ min-width: 160px;
+}
+.min-width-m {
+ min-width: 200px;
+}
+.min-width-l {
+ min-width: 240px;
+}
+.min-width-xl {
+ min-width: 280px;
+}
+.min-width-xxl {
+ min-width: 320px;
+}
/**
* Display and float utilities
*/
.block {
- display: block;
+ display: block !important;
position: relative;
}
.inline {
- display: inline;
+ display: inline !important;
}
.block.inline {
- display: inline-block;
+ display: inline-block !important;
+}
+
+.relative {
+ position: relative;
+}
+
+.fixed {
+ position: fixed;
+ z-index: 20;
+ &.top-right {
+ top: 0;
+ right: 0;
+ }
}
.hidden {
display: none !important;
}
+.overflow-hidden {
+ overflow: hidden;
+}
+
+.height-fill {
+ height: 100%;
+}
+
+.height-auto {
+ height: auto !important;
+}
+
.float {
float: left;
&.right {
}
}
+.sticky-top-m {
+ position: sticky;
+ top: vars.$m;
+}
+
/**
* Visibility
*/
-@each $sizeLetter, $size in $screen-sizes {
- @include smaller-than($size) {
+@each $sizeLetter, $size in vars.$screen-sizes {
+ @include mixins.smaller-than($size) {
.hide-under-#{$sizeLetter} {
display: none !important;
}
}
- @include larger-than($size) {
+ @include mixins.larger-than($size) {
.hide-over-#{$sizeLetter} {
display: none !important;
}
}
}
+[hidden] {
+ display: none !important;
+}
+
+.screen-reader-only {
+ position: absolute;
+ inset-inline-start: -10000px;
+ top: auto;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+}
+
+/**
+ * Border radiuses
+ */
+.rounded {
+ border-radius: 4px;
+}
+
/**
* Inline content columns
*/
columns: 2;
}
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.dual-column-content {
columns: 1;
}
*/
.tri-layout-container {
display: grid;
- margin-inline-start: $-xl;
- margin-inline-end: $-xl;
+ margin-inline-start: vars.$xl;
+ margin-inline-end: vars.$xl;
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c";
- grid-column-gap: $-xxl;
- .tri-layout-right {
- grid-area: c;
- min-width: 0;
+ grid-column-gap: vars.$xl;
+ position: relative;
+}
+.tri-layout-sides {
+ grid-column-start: a;
+ grid-column-end: c;
+ grid-row: 1;
+ min-width: 0;
+ z-index: 4;
+}
+.tri-layout-sides-content {
+ display: grid;
+ grid-template-areas: "a b c";
+ grid-template-columns: 1fr 4fr 1fr;
+ height: 100%;
+}
+.tri-layout-middle {
+ grid-area: b;
+ padding-top: vars.$m;
+ min-width: 0;
+ z-index: 5;
+}
+.tri-layout-right {
+ grid-area: c;
+ min-width: 0;
+}
+.tri-layout-left {
+ grid-area: a;
+ min-width: 0;
+}
+
+@include mixins.larger-than(vars.$bp-xxl) {
+ .tri-layout-left-contents, .tri-layout-right-contents {
+ padding: vars.$xl vars.$m;
+ position: sticky;
+ top: 0;
+ max-height: 100vh;
+ min-height: 50vh;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ height: 100%;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ &::-webkit-scrollbar {
+ display: none;
+ }
}
- .tri-layout-left {
- grid-area: a;
- min-width: 0;
+ .tri-layout-middle-contents {
+ max-width: 940px;
+ margin: 0 auto;
}
- .tri-layout-middle {
- grid-area: b;
- padding-top: $-m;
+}
+@include mixins.between(vars.$bp-xxl, vars.$bp-xxxl) {
+ .tri-layout-sides-content, .tri-layout-container {
+ grid-template-columns: 1fr calc(940px + (2 * vars.$m)) 1fr;
+ }
+ .tri-layout-container {
+ grid-column-gap: vars.$s;
+ margin-inline-start: vars.$m;
+ margin-inline-end: vars.$m;
}
}
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
.tri-layout-container {
- grid-template-areas: "c b b"
- "a b b"
- ". b b";
+ grid-template-areas: "a b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr;
- padding-inline-end: $-l;
+ padding-inline-end: vars.$l;
}
-}
-@include between($l, $xxl) {
- .tri-layout-left {
- position: sticky;
- top: $-m;
+ .tri-layout-sides {
+ grid-column-start: a;
+ grid-column-end: a;
+ }
+ .tri-layout-sides-content {
+ display: block;
}
}
-@include larger-than($xxl) {
- .tri-layout-left-contents, .tri-layout-right-contents {
- padding: $-m;
+@include mixins.between(vars.$bp-l, vars.$bp-xxl) {
+ .tri-layout-sides-content {
position: sticky;
- top: $-m;
+ top: 0;
max-height: 100vh;
min-height: 50vh;
overflow-y: scroll;
overflow-x: hidden;
+ height: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
- .tri-layout-middle-contents {
- max-width: 940px;
- margin: 0 auto;
+}
+@include mixins.larger-than(vars.$bp-l) {
+ .tri-layout-mobile-tabs {
+ display: none;
+ }
+ .tri-layout-left-contents > *, .tri-layout-right-contents > * {
+ @include mixins.lightDark(opacity, 0.6, 0.75);
+ transition: opacity ease-in-out 120ms;
+ &:hover, &:focus-within {
+ opacity: 1 !important;
+ }
+ @media (prefers-contrast: more) {
+ opacity: 1 !important;
+ }
}
}
-
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
.tri-layout-container {
grid-template-areas: none;
grid-template-columns: 1fr;
grid-column-gap: 0;
- padding-inline-end: $-xs;
- padding-inline-start: $-xs;
- .tri-layout-left-contents, .tri-layout-right-contents {
- padding-inline-start: $-m;
- padding-inline-end: $-m;
+ padding-inline-end: vars.$xs;
+ padding-inline-start: vars.$xs;
+ .tri-layout-sides {
+ padding-inline-start: vars.$m;
+ padding-inline-end: vars.$m;
+ grid-column: 1/1;
}
.tri-layout-left > *, .tri-layout-right > * {
display: none;
pointer-events: none;
}
.tri-layout-left, .tri-layout-right {
- grid-area: none;
- grid-column: 1/1;
- grid-row: 1;
padding-top: 0 !important;
}
.tri-layout-middle {
}
}
}
-@include larger-than($l) {
- .tri-layout-mobile-tabs {
- display: none;
- }
- .tri-layout-left-contents > *, .tri-layout-right-contents > * {
- opacity: 0.6;
- transition: opacity ease-in-out 120ms;
- &:hover {
- opacity: 1;
- }
- &:focus-within {
- opacity: 1;
- }
- }
-
-}
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
.tri-layout-container {
margin-inline-start: 0;
margin-inline-end: 0;
projects / bookstack / blobdiff