diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/_split-view.scss | 20 | ||||
| -rw-r--r-- | src/layouts/_split-view.vars.scss | 4 |
2 files changed, 12 insertions, 12 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss index 6469a7d..33511d2 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss | |||
| @@ -23,12 +23,11 @@ | |||
| 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--min-100); |
| 27 | } | 27 | } |
| 28 | 28 | ||
| 29 | @include bem.modifier('sticky-0') { | 29 | @include bem.modifier('min-200') { |
| 30 | position: sticky; | 30 | min-inline-size: props.get(vars.$panel--min-200); |
| 31 | inset-block-start: 0; | ||
| 32 | } | 31 | } |
| 33 | 32 | ||
| 34 | @include bem.modifier('sticky') { | 33 | @include bem.modifier('sticky') { |
| @@ -40,11 +39,6 @@ | |||
| 40 | position: sticky; | 39 | position: sticky; |
| 41 | inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); | 40 | inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); |
| 42 | } | 41 | } |
| 43 | |||
| 44 | @include bem.modifier('sticky-1200') { | ||
| 45 | position: sticky; | ||
| 46 | inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); | ||
| 47 | } | ||
| 48 | } | 42 | } |
| 49 | 43 | ||
| 50 | @include bem.modifier('gapless') { | 44 | @include bem.modifier('gapless') { |
| @@ -52,7 +46,11 @@ | |||
| 52 | 46 | ||
| 53 | @include bem.elem('panel') { | 47 | @include bem.elem('panel') { |
| 54 | @include bem.modifier('side-25') { | 48 | @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)); | 49 | min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless)); |
| 50 | } | ||
| 51 | |||
| 52 | @include bem.modifier('min-200') { | ||
| 53 | min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless)); | ||
| 56 | } | 54 | } |
| 57 | } | 55 | } |
| 58 | } | 56 | } |
| @@ -76,7 +74,7 @@ | |||
| 76 | 74 | ||
| 77 | @include bem.elem('panel') { | 75 | @include bem.elem('panel') { |
| 78 | inline-size: auto; | 76 | inline-size: auto; |
| 79 | 77 | ||
| 80 | @include bem.modifier('side-25') { | 78 | @include bem.modifier('side-25') { |
| 81 | inline-size: auto; | 79 | inline-size: auto; |
| 82 | min-inline-size: 0; | 80 | min-inline-size: 0; |
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss index d519939..5a8be2b 100644 --- a/src/layouts/_split-view.vars.scss +++ b/src/layouts/_split-view.vars.scss | |||
| @@ -6,7 +6,9 @@ $row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !defau | |||
| 6 | 6 | ||
| 7 | $gapless: props.def(--l-split-view--gapless, 0rem) !default; | 7 | $gapless: props.def(--l-split-view--gapless, 0rem) !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--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default; |
| 10 | $panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default; | ||
| 11 | |||
| 10 | $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default; | 12 | $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default; |
| 11 | $panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default; | 13 | $panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default; |
| 12 | 14 | ||
