diff options
author | Volpeon <git@volpeon.ink> | 2024-10-26 21:48:20 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-26 21:48:20 +0200 |
commit | a4c5eb2ab28b73aba162407d88e34e5eb334f429 (patch) | |
tree | eb2b51b5ff7e1266708fb71470533bd56c7a5c3d /src | |
parent | Remove card view (diff) | |
download | iro-design-a4c5eb2ab28b73aba162407d88e34e5eb334f429.tar.gz iro-design-a4c5eb2ab28b73aba162407d88e34e5eb334f429.tar.bz2 iro-design-a4c5eb2ab28b73aba162407d88e34e5eb334f429.zip |
Update split view
Diffstat (limited to 'src')
-rw-r--r-- | src/layouts/_split-view.scss | 27 | ||||
-rw-r--r-- | src/layouts/_split-view.vars.scss | 2 |
2 files changed, 17 insertions, 12 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss index 9d6c4bc..591267d 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss | |||
@@ -11,8 +11,8 @@ | |||
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.modifier('gapless') { | 18 | @include bem.modifier('gapless') { |
@@ -20,18 +20,23 @@ | |||
20 | } | 20 | } |
21 | 21 | ||
22 | @include bem.elem('panel') { | 22 | @include bem.elem('panel') { |
23 | flex: 1 1 auto; | 23 | flex: 1 1 auto; |
24 | inline-size: 100%; | 24 | inline-size: 100%; |
25 | min-inline-size: 0; | 25 | min-inline-size: 0; |
26 | 26 | ||
27 | @include bem.modifier('side-25') { | 27 | @include bem.modifier('side-25') { |
28 | flex: 0 0 auto; | 28 | flex: 0 0 auto; |
29 | inline-size: 25%; | 29 | inline-size: 25%; |
30 | min-inline-size: props.get(vars.$panel--side-25--min); | 30 | min-inline-size: props.get(vars.$panel--side-25--min); |
31 | } | 31 | } |
32 | 32 | ||
33 | @include bem.modifier('sticky') { | 33 | @include bem.modifier('sticky') { |
34 | position: sticky; | 34 | position: sticky; |
35 | inset-block-start: 0; | ||
36 | } | ||
37 | |||
38 | @include bem.modifier('sticky-400') { | ||
39 | position: sticky; | ||
35 | inset-block-start: props.get(vars.$panel--sticky--inset); | 40 | inset-block-start: props.get(vars.$panel--sticky--inset); |
36 | } | 41 | } |
37 | } | 42 | } |
@@ -42,18 +47,18 @@ | |||
42 | 47 | ||
43 | @include media.media('<=md') { | 48 | @include media.media('<=md') { |
44 | flex-direction: column; | 49 | flex-direction: column; |
45 | gap: props.get(vars.$row-gap); | 50 | gap: props.get(vars.$row-gap); |
46 | align-items: stretch; | 51 | align-items: stretch; |
47 | 52 | ||
48 | @include bem.elem('panel') { | 53 | @include bem.elem('panel') { |
49 | flex: 1 1 auto; | 54 | flex: 1 1 auto; |
50 | 55 | ||
51 | @include bem.modifier('side-25') { | 56 | @include bem.modifier('side-25') { |
52 | inline-size: auto; | 57 | inline-size: auto; |
53 | min-inline-size: 0; | 58 | min-inline-size: 0; |
54 | } | 59 | } |
55 | 60 | ||
56 | @include bem.modifier('sticky') { | 61 | @include bem.modifier('sticky', 'sticky-400') { |
57 | position: static; | 62 | position: static; |
58 | } | 63 | } |
59 | } | 64 | } |
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss index 864ab5d..8f6bf93 100644 --- a/src/layouts/_split-view.vars.scss +++ b/src/layouts/_split-view.vars.scss | |||
@@ -7,4 +7,4 @@ $row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !defau | |||
7 | $gapless: props.def(--l-split-view--gapless, 0) !default; | 7 | $gapless: props.def(--l-split-view--gapless, 0) !default; |
8 | 8 | ||
9 | $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default; | 9 | $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default; |
10 | $panel--sticky--inset: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--400)) !default; | 10 | $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default; |