diff options
author | Volpeon <git@volpeon.ink> | 2024-10-25 14:47:14 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-25 14:47:14 +0200 |
commit | 2ef14e9319df7365a42192b4479ad1facb193a2e (patch) | |
tree | 94f8dfac40aa5ec92a4804f316b9d9b051a1ebe8 | |
parent | Fix (diff) | |
download | iro-design-2ef14e9319df7365a42192b4479ad1facb193a2e.tar.gz iro-design-2ef14e9319df7365a42192b4479ad1facb193a2e.tar.bz2 iro-design-2ef14e9319df7365a42192b4479ad1facb193a2e.zip |
Fix again
-rw-r--r-- | src/layouts/_split-view.scss | 68 |
1 files changed, 36 insertions, 32 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss index eac739f..2bc35bc 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss | |||
@@ -7,47 +7,51 @@ | |||
7 | @forward 'split-view.vars'; | 7 | @forward 'split-view.vars'; |
8 | @use 'split-view.vars' as vars; | 8 | @use 'split-view.vars' as vars; |
9 | 9 | ||
10 | @include bem.layout('split-view') { | 10 | @mixin styles { |
11 | display: flex; | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | gap: props.get(vars.$col-gap); | ||
13 | align-items: start; | ||
14 | |||
15 | @include bem.elem('panel') { | ||
16 | flex: 1 1 auto; | ||
17 | inline-size: 100%; | ||
18 | min-inline-size: 0; | ||
19 | |||
20 | @include bem.modifier('side-25') { | ||
21 | flex: 0 0 auto; | ||
22 | inline-size: 25%; | ||
23 | min-inline-size: props.get(vars.$panel--side-25--min); | ||
24 | } | ||
25 | 12 | ||
26 | @include bem.modifier('sticky') { | 13 | @include bem.layout('split-view') { |
27 | position: sticky; | 14 | display: flex; |
28 | inset-block-start: props.get(vars.$panel--sticky--inset); | 15 | gap: props.get(vars.$col-gap); |
29 | } | 16 | align-items: start; |
30 | } | ||
31 | |||
32 | @include bem.elem('content') { | ||
33 | inline-size: 100%; | ||
34 | } | ||
35 | |||
36 | @include media.media('<=md') { | ||
37 | flex-direction: column; | ||
38 | gap: props.get(vars.$row-gap); | ||
39 | align-items: stretch; | ||
40 | 17 | ||
41 | @include bem.elem('panel') { | 18 | @include bem.elem('panel') { |
42 | flex: 1 1 auto; | 19 | flex: 1 1 auto; |
20 | inline-size: 100%; | ||
21 | min-inline-size: 0; | ||
43 | 22 | ||
44 | @include bem.modifier('side-25') { | 23 | @include bem.modifier('side-25') { |
45 | inline-size: auto; | 24 | flex: 0 0 auto; |
46 | min-inline-size: 0; | 25 | inline-size: 25%; |
26 | min-inline-size: props.get(vars.$panel--side-25--min); | ||
47 | } | 27 | } |
48 | 28 | ||
49 | @include bem.modifier('sticky') { | 29 | @include bem.modifier('sticky') { |
50 | position: static; | 30 | position: sticky; |
31 | inset-block-start: props.get(vars.$panel--sticky--inset); | ||
32 | } | ||
33 | } | ||
34 | |||
35 | @include bem.elem('content') { | ||
36 | inline-size: 100%; | ||
37 | } | ||
38 | |||
39 | @include media.media('<=md') { | ||
40 | flex-direction: column; | ||
41 | gap: props.get(vars.$row-gap); | ||
42 | align-items: stretch; | ||
43 | |||
44 | @include bem.elem('panel') { | ||
45 | flex: 1 1 auto; | ||
46 | |||
47 | @include bem.modifier('side-25') { | ||
48 | inline-size: auto; | ||
49 | min-inline-size: 0; | ||
50 | } | ||
51 | |||
52 | @include bem.modifier('sticky') { | ||
53 | position: static; | ||
54 | } | ||
51 | } | 55 | } |
52 | } | 56 | } |
53 | } | 57 | } |