margin-inline-end: auto;
padding-inline-start: $-m;
padding-inline-end: $-m;
+ &.medium {
+ max-width: 1100px;
+ }
&.small {
max-width: 840px;
}
.flex {
min-height: 0;
flex: 1;
+ max-width: 100%;
&.fit-content {
flex-basis: auto;
flex-grow: 0;
}
}
+.gap-m {
+ gap: $-m;
+}
+
+.justify-flex-start {
+ justify-content: flex-start;
+}
.justify-flex-end {
justify-content: flex-end;
}
display: inline-block !important;
}
+.relative {
+ position: relative;
+}
+
.hidden {
display: none !important;
}
}
@include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents {
- padding: $-m;
+ padding: $-xl $-m;
position: sticky;
- top: $-m;
+ top: 0;
max-height: 100vh;
min-height: 50vh;
overflow-y: scroll;
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
- opacity: 0.6;
+ @include lightDark(opacity, 0.6, 0.7);
transition: opacity ease-in-out 120ms;
- &:hover {
- opacity: 1;
+ &:hover, &:focus-within {
+ opacity: 1 !important;
}
- &:focus-within {
- opacity: 1;
+ @media (prefers-contrast: more) {
+ opacity: 1 !important;
}
}