diff options
Diffstat (limited to 'src/layouts/_split-view.scss')
| -rw-r--r-- | src/layouts/_split-view.scss | 128 |
1 files changed, 64 insertions, 64 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss index f522254..6469a7d 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss | |||
| @@ -8,84 +8,84 @@ | |||
| 8 | @use 'split-view.vars' as vars; | 8 | @use 'split-view.vars' as vars; |
| 9 | 9 | ||
| 10 | @mixin styles { | 10 | @mixin styles { |
| 11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | 12 | ||
| 13 | @include bem.layout('split-view') { | 13 | @include bem.layout('split-view') { |
| 14 | display: flex; | 14 | display: flex; |
| 15 | gap: props.get(vars.$col-gap); | 15 | gap: props.get(vars.$col-gap); |
| 16 | align-items: start; | 16 | align-items: start; |
| 17 | 17 | ||
| 18 | @include bem.elem('panel') { | 18 | @include bem.elem('panel') { |
| 19 | flex: 1 1 auto; | 19 | flex: 1 1 auto; |
| 20 | inline-size: 100%; | 20 | inline-size: 100%; |
| 21 | min-inline-size: 0; | 21 | min-inline-size: 0; |
| 22 | 22 | ||
| 23 | @include bem.modifier('side-25') { | 23 | @include bem.modifier('side-25') { |
| 24 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
| 25 | inline-size: 25%; | 25 | inline-size: 25%; |
| 26 | min-inline-size: props.get(vars.$panel--side-25--min); | 26 | min-inline-size: props.get(vars.$panel--side-25--min); |
| 27 | } | 27 | } |
| 28 | 28 | ||
| 29 | @include bem.modifier('sticky-0') { | 29 | @include bem.modifier('sticky-0') { |
| 30 | position: sticky; | 30 | position: sticky; |
| 31 | inset-block-start: 0; | 31 | inset-block-start: 0; |
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | @include bem.modifier('sticky') { | 34 | @include bem.modifier('sticky') { |
| 35 | position: sticky; | 35 | position: sticky; |
| 36 | inset-block-start: props.get(vars.$panel--sticky-offset); | 36 | inset-block-start: props.get(vars.$panel--sticky-offset); |
| 37 | } | 37 | } |
| 38 | 38 | ||
| 39 | @include bem.modifier('sticky-400') { | 39 | @include bem.modifier('sticky-400') { |
| 40 | position: sticky; | 40 | position: sticky; |
| 41 | inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); | 41 | inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); |
| 42 | } | 42 | } |
| 43 | 43 | ||
| 44 | @include bem.modifier('sticky-1200') { | 44 | @include bem.modifier('sticky-1200') { |
| 45 | position: sticky; | 45 | position: sticky; |
| 46 | inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); | 46 | inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); |
| 47 | } | 47 | } |
| 48 | } | 48 | } |
| 49 | 49 | ||
| 50 | @include bem.modifier('gapless') { | 50 | @include bem.modifier('gapless') { |
| 51 | gap: props.get(vars.$gapless); | 51 | gap: props.get(vars.$gapless); |
| 52 | 52 | ||
| 53 | @include bem.elem('panel') { | 53 | @include bem.elem('panel') { |
| 54 | @include bem.modifier('side-25') { | 54 | @include bem.modifier('side-25') { |
| 55 | min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless)); | 55 | min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless)); |
| 56 | } | 56 | } |
| 57 | } | 57 | } |
| 58 | } | 58 | } |
| 59 | 59 | ||
| 60 | @include bem.elem('content') { | 60 | @include bem.elem('content') { |
| 61 | inline-size: 100%; | 61 | inline-size: 100%; |
| 62 | } | 62 | } |
| 63 | 63 | ||
| 64 | @include media.media('<=md') { | 64 | @include media.media('<=md') { |
| 65 | flex-direction: column; | 65 | flex-direction: column; |
| 66 | gap: props.get(vars.$row-gap); | 66 | gap: props.get(vars.$row-gap); |
| 67 | align-items: stretch; | 67 | align-items: stretch; |
| 68 | 68 | ||
| 69 | @include bem.modifier('gapless') { | 69 | @include bem.modifier('gapless') { |
| 70 | gap: props.get(vars.$gapless); | 70 | gap: props.get(vars.$gapless); |
| 71 | } | 71 | } |
| 72 | 72 | ||
| 73 | @include bem.modifier('wrap-reverse') { | 73 | @include bem.modifier('wrap-reverse') { |
| 74 | flex-direction: column-reverse; | 74 | flex-direction: column-reverse; |
| 75 | } | 75 | } |
| 76 | 76 | ||
| 77 | @include bem.elem('panel') { | 77 | @include bem.elem('panel') { |
| 78 | inline-size: auto; | 78 | inline-size: auto; |
| 79 | 79 | ||
| 80 | @include bem.modifier('side-25') { | 80 | @include bem.modifier('side-25') { |
| 81 | inline-size: auto; | 81 | inline-size: auto; |
| 82 | min-inline-size: 0; | 82 | min-inline-size: 0; |
| 83 | } | 83 | } |
| 84 | 84 | ||
| 85 | @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') { | 85 | @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') { |
| 86 | position: static; | 86 | position: static; |
| 87 | } | 87 | } |
| 88 | } | 88 | } |
| 89 | } | 89 | } |
| 90 | } | 90 | } |
| 91 | } | 91 | } |
