diff options
author | Volpeon <git@volpeon.ink> | 2025-08-06 16:40:56 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2025-08-06 16:40:56 +0200 |
commit | 41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch) | |
tree | 015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/layouts/_split-view.scss | |
parent | Fix button font size (diff) | |
download | iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2 iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip |
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 | } |