diff options
Diffstat (limited to 'src/layouts')
-rw-r--r-- | src/layouts/_button-group.scss | 16 | ||||
-rw-r--r-- | src/layouts/_button-group.vars.scss | 4 | ||||
-rw-r--r-- | src/layouts/_card-list.scss | 76 | ||||
-rw-r--r-- | src/layouts/_card-list.vars.scss | 19 | ||||
-rw-r--r-- | src/layouts/_container.scss | 27 | ||||
-rw-r--r-- | src/layouts/_container.vars.scss | 22 | ||||
-rw-r--r-- | src/layouts/_flex.scss | 27 | ||||
-rw-r--r-- | src/layouts/_form.scss | 58 | ||||
-rw-r--r-- | src/layouts/_form.vars.scss | 5 | ||||
-rw-r--r-- | src/layouts/_media.scss | 40 | ||||
-rw-r--r-- | src/layouts/_media.vars.scss | 16 | ||||
-rw-r--r-- | src/layouts/_overflow.scss | 11 |
12 files changed, 321 insertions, 0 deletions
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss new file mode 100644 index 0000000..95b63c9 --- /dev/null +++ b/src/layouts/_button-group.scss | |||
@@ -0,0 +1,16 @@ | |||
1 | @use 'sass:meta'; | ||
2 | @use 'iro-sass/src/iro-sass' as iro; | ||
3 | @use '../props'; | ||
4 | |||
5 | @forward 'button-group.vars'; | ||
6 | @use 'button-group.vars' as vars; | ||
7 | |||
8 | @mixin styles { | ||
9 | @include props.materialize(meta.module-variables('vars')); | ||
10 | |||
11 | @include iro.bem-layout('button-group') { | ||
12 | display: flex; | ||
13 | flex-wrap: wrap; | ||
14 | gap: props.get(vars.$spacing); | ||
15 | } | ||
16 | } | ||
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss new file mode 100644 index 0000000..ac57b44 --- /dev/null +++ b/src/layouts/_button-group.vars.scss | |||
@@ -0,0 +1,4 @@ | |||
1 | @use '../props'; | ||
2 | @use '../vars'; | ||
3 | |||
4 | $spacing: props.def(--l-button-group--spacing, props.get(vars.$size--150)) !default; | ||
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss new file mode 100644 index 0000000..1aea7bc --- /dev/null +++ b/src/layouts/_card-list.scss | |||
@@ -0,0 +1,76 @@ | |||
1 | @use 'sass:meta'; | ||
2 | @use 'include-media/dist/include-media' as media; | ||
3 | @use 'iro-sass/src/iro-sass' as iro; | ||
4 | @use '../props'; | ||
5 | |||
6 | @forward 'card-list.vars'; | ||
7 | @use 'card-list.vars' as vars; | ||
8 | |||
9 | @mixin styles { | ||
10 | @include props.materialize(meta.module-variables('vars')); | ||
11 | |||
12 | @include iro.bem-layout('card-list') { | ||
13 | display: flex; | ||
14 | flex-direction: column; | ||
15 | gap: props.get(vars.$row-gap) props.get(vars.$col-gap); | ||
16 | |||
17 | @include iro.bem-modifier('grid') { | ||
18 | display: grid; | ||
19 | grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); | ||
20 | gap: props.get(vars.$grid--col-gap); | ||
21 | |||
22 | @include iro.bem-modifier('quiet') { | ||
23 | row-gap: props.get(vars.$grid--row-gap); | ||
24 | } | ||
25 | } | ||
26 | |||
27 | @include iro.bem-modifier('masonry') { | ||
28 | display: block; | ||
29 | columns: auto props.get(vars.$masonry--col-width); | ||
30 | column-gap: props.get(vars.$masonry--col-gap); | ||
31 | |||
32 | @include iro.bem-elem('card') { | ||
33 | margin-block-end: props.get(vars.$masonry--col-gap); | ||
34 | break-inside: avoid; | ||
35 | } | ||
36 | |||
37 | @include iro.bem-modifier('quiet') { | ||
38 | @include iro.bem-elem('card') { | ||
39 | margin-block-end: props.get(vars.$masonry--row-gap); | ||
40 | } | ||
41 | } | ||
42 | } | ||
43 | |||
44 | @include iro.bem-modifier('masonry-h') { | ||
45 | flex-flow: row wrap; | ||
46 | gap: props.get(vars.$masonry-h--col-gap); | ||
47 | |||
48 | &::after { | ||
49 | display: block; | ||
50 | flex: 1 0 auto; | ||
51 | inline-size: props.get(vars.$masonry-h--row-height); | ||
52 | block-size: 0; | ||
53 | content: ''; | ||
54 | } | ||
55 | |||
56 | @include iro.bem-elem('card') { | ||
57 | flex: 1 0 auto; | ||
58 | max-inline-size: 100%; | ||
59 | } | ||
60 | |||
61 | @include iro.bem-elem('card-image') { | ||
62 | block-size: props.get(vars.$masonry-h--row-height); | ||
63 | } | ||
64 | |||
65 | @include iro.bem-modifier('quiet') { | ||
66 | row-gap: props.get(vars.$masonry-h--row-gap); | ||
67 | } | ||
68 | } | ||
69 | |||
70 | @include iro.bem-modifier('aspect-5\\/4') { | ||
71 | @include iro.bem-elem('card-image') { | ||
72 | aspect-ratio: 5 / 4; | ||
73 | } | ||
74 | } | ||
75 | } | ||
76 | } | ||
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss new file mode 100644 index 0000000..b3aaac4 --- /dev/null +++ b/src/layouts/_card-list.vars.scss | |||
@@ -0,0 +1,19 @@ | |||
1 | @use '../props'; | ||
2 | @use '../vars'; | ||
3 | |||
4 | $row-gap: props.def(--l-card-list--row-gap, props.get(vars.$size--800)) !default; | ||
5 | $col-gap: props.def(--l-card-list--col-gap, props.get(vars.$size--400)) !default; | ||
6 | |||
7 | $grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(vars.$size--800)) !default; | ||
8 | $grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(vars.$size--400)) !default; | ||
9 | $grid--col-width: props.def(--l-card-list--grid--col-width, props.get(vars.$size--3200)) !default; | ||
10 | |||
11 | $masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(vars.$size--800)) !default; | ||
12 | $masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(vars.$size--400)) !default; | ||
13 | $masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(vars.$size--3200)) !default; | ||
14 | |||
15 | $masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(vars.$size--800)) !default; | ||
16 | $masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(vars.$size--400)) !default; | ||
17 | $masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(vars.$size--3200)) !default; | ||
18 | |||
19 | $border-color: props.def(--l-card-list--border-color, props.get(vars.$theme, --border)) !default; | ||
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss new file mode 100644 index 0000000..34c4bf0 --- /dev/null +++ b/src/layouts/_container.scss | |||
@@ -0,0 +1,27 @@ | |||
1 | @use 'sass:meta'; | ||
2 | @use 'iro-sass/src/iro-sass' as iro; | ||
3 | @use '../props'; | ||
4 | |||
5 | @forward 'container.vars'; | ||
6 | @use 'container.vars' as vars; | ||
7 | |||
8 | @mixin styles { | ||
9 | @include props.materialize(meta.module-variables('vars')); | ||
10 | |||
11 | @include iro.bem-layout('container') { | ||
12 | @each $mod, $size in vars.$fixed-sizes { | ||
13 | @include iro.bem-modifier($mod) { | ||
14 | max-inline-size: props.get($size); | ||
15 | margin-inline: auto; | ||
16 | } | ||
17 | } | ||
18 | |||
19 | @include iro.bem-modifier('pad-i') { | ||
20 | padding-inline: props.get(vars.$pad-i); | ||
21 | } | ||
22 | |||
23 | @include iro.bem-modifier('pad-b') { | ||
24 | padding-block: props.get(vars.$pad-b); | ||
25 | } | ||
26 | } | ||
27 | } | ||
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss new file mode 100644 index 0000000..8b2258a --- /dev/null +++ b/src/layouts/_container.vars.scss | |||
@@ -0,0 +1,22 @@ | |||
1 | @use 'iro-sass/src/iro-sass' as iro; | ||
2 | @use '../props'; | ||
3 | @use '../vars'; | ||
4 | |||
5 | $fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default; | ||
6 | $fixed: props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default; | ||
7 | $fixed-75: props.def(--l-container--fixed-75, iro.fn-px-to-rem(500px)) !default; | ||
8 | |||
9 | $fixed-sizes: ( | ||
10 | 'fixed-125': $fixed-125, | ||
11 | 'fixed': $fixed, | ||
12 | 'fixed-75': $fixed-75 | ||
13 | ) !default; | ||
14 | |||
15 | $pad-i: props.def(--l-container--pad-i, props.get(vars.$size--400)) !default; | ||
16 | $pad-b: props.def(--l-container--pad-b, props.get(vars.$size--800)) !default; | ||
17 | |||
18 | $pad-i--sm: props.def(--l-container--pad-i, props.get(vars.$size--200), 'sm') !default; | ||
19 | $pad-b--sm: props.def(--l-container--pad-b, props.get(vars.$size--600), 'sm') !default; | ||
20 | |||
21 | $pad-i--xs: props.def(--l-container--pad-i, props.get(vars.$size--150), 'xs') !default; | ||
22 | $pad-b--xs: props.def(--l-container--pad-b, props.get(vars.$size--450), 'xs') !default; | ||
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss new file mode 100644 index 0000000..6cc9dc6 --- /dev/null +++ b/src/layouts/_flex.scss | |||
@@ -0,0 +1,27 @@ | |||
1 | @use 'iro-sass/src/iro-sass' as iro; | ||
2 | |||
3 | @mixin styles { | ||
4 | @include iro.bem-layout('flex') { | ||
5 | display: flex; | ||
6 | |||
7 | @include iro.bem-modifier('align-stretch') { | ||
8 | align-items: stretch; | ||
9 | } | ||
10 | |||
11 | @include iro.bem-modifier('align-center') { | ||
12 | align-items: center; | ||
13 | } | ||
14 | |||
15 | @include iro.bem-modifier('align-start') { | ||
16 | align-items: flex-start; | ||
17 | } | ||
18 | |||
19 | @include iro.bem-modifier('align-end') { | ||
20 | align-items: flex-end; | ||
21 | } | ||
22 | |||
23 | @include iro.bem-modifier('column') { | ||
24 | flex-direction: column; | ||
25 | } | ||
26 | } | ||
27 | } | ||
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss new file mode 100644 index 0000000..824d7ca --- /dev/null +++ b/src/layouts/_form.scss | |||
@@ -0,0 +1,58 @@ | |||
1 | @use 'sass:meta'; | ||
2 | @use 'iro-sass/src/iro-sass' as iro; | ||
3 | @use '../props'; | ||
4 | |||
5 | @forward 'form.vars'; | ||
6 | @use 'form.vars' as vars; | ||
7 | |||
8 | @mixin styles { | ||
9 | @include props.materialize(meta.module-variables('vars')); | ||
10 | |||
11 | @include iro.bem-layout('form') { | ||
12 | display: flex; | ||
13 | flex-direction: column; | ||
14 | gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); | ||
15 | |||
16 | @include iro.bem-elem('item') { | ||
17 | display: block; | ||
18 | } | ||
19 | |||
20 | @include iro.bem-elem('item-content') { | ||
21 | @include iro.bem-modifier('align-start') { | ||
22 | align-self: start; | ||
23 | } | ||
24 | } | ||
25 | |||
26 | @include iro.bem-modifier('row') { | ||
27 | flex-direction: row; | ||
28 | align-items: flex-end; | ||
29 | } | ||
30 | |||
31 | @include iro.bem-modifier('labels-start', 'labels-end') { | ||
32 | display: grid; | ||
33 | grid-template-rows: auto; | ||
34 | grid-template-columns: auto 1fr; | ||
35 | align-items: baseline; | ||
36 | |||
37 | @include iro.bem-elem('item') { | ||
38 | display: contents; | ||
39 | } | ||
40 | |||
41 | @include iro.bem-elem('item-label') { | ||
42 | grid-column: 1; | ||
43 | padding-inline-end: 0; | ||
44 | } | ||
45 | |||
46 | @include iro.bem-elem('item-content') { | ||
47 | grid-column: 2; | ||
48 | margin-block-start: 0; | ||
49 | } | ||
50 | } | ||
51 | |||
52 | @include iro.bem-modifier('labels-end') { | ||
53 | @include iro.bem-elem('item-label') { | ||
54 | text-align: end; | ||
55 | } | ||
56 | } | ||
57 | } | ||
58 | } | ||
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss new file mode 100644 index 0000000..45faf29 --- /dev/null +++ b/src/layouts/_form.vars.scss | |||
@@ -0,0 +1,5 @@ | |||
1 | @use '../props'; | ||
2 | @use '../vars'; | ||
3 | |||
4 | $item-spacing-b: props.def(--l-form--item-spacing-b, props.get(vars.$size--325)) !default; | ||
5 | $label-spacing-i: props.def(--l-form--label-spacing-i, props.get(vars.$size--325)) !default; | ||
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss new file mode 100644 index 0000000..7483f12 --- /dev/null +++ b/src/layouts/_media.scss | |||
@@ -0,0 +1,40 @@ | |||
1 | @use 'sass:meta'; | ||
2 | @use 'iro-sass/src/iro-sass' as iro; | ||
3 | @use '../props'; | ||
4 | |||
5 | @forward 'media.vars'; | ||
6 | @use 'media.vars' as vars; | ||
7 | |||
8 | @mixin styles { | ||
9 | @include props.materialize(meta.module-variables('vars')); | ||
10 | |||
11 | @include iro.bem-layout('media') { | ||
12 | display: flex; | ||
13 | gap: props.get(vars.$gap); | ||
14 | align-items: center; | ||
15 | line-height: 1.4; | ||
16 | |||
17 | @each $mod, $size in vars.$sizes { | ||
18 | @include iro.bem-modifier($mod) { | ||
19 | gap: props.get($size); | ||
20 | } | ||
21 | } | ||
22 | |||
23 | @include iro.bem-modifier('wrap') { | ||
24 | flex-wrap: wrap; | ||
25 | } | ||
26 | |||
27 | @include iro.bem-elem('block') { | ||
28 | flex: 0 0 auto; | ||
29 | |||
30 | @include iro.bem-modifier('shrink', 'main') { | ||
31 | flex-shrink: 1; | ||
32 | min-inline-size: 0; | ||
33 | } | ||
34 | |||
35 | @include iro.bem-modifier('main') { | ||
36 | inline-size: 100%; | ||
37 | } | ||
38 | } | ||
39 | } | ||
40 | } | ||
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss new file mode 100644 index 0000000..3444611 --- /dev/null +++ b/src/layouts/_media.vars.scss | |||
@@ -0,0 +1,16 @@ | |||
1 | @use '../props'; | ||
2 | @use '../vars'; | ||
3 | |||
4 | $gap: props.def(--l-media--gap, props.get(vars.$size--150)) !default; | ||
5 | |||
6 | $gapless: props.def(--l-media--gapless, 0) !default; | ||
7 | $sm: props.def(--l-media--sm, props.get(vars.$size--100)) !default; | ||
8 | $lg: props.def(--l-media--lg, props.get(vars.$size--300)) !default; | ||
9 | $xl: props.def(--l-media--xl, props.get(vars.$size--450)) !default; | ||
10 | |||
11 | $sizes: ( | ||
12 | 'gapless': $gapless, | ||
13 | 'sm': $sm, | ||
14 | 'lg': $lg, | ||
15 | 'xl': $xl, | ||
16 | ) !default; | ||
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss new file mode 100644 index 0000000..2589d2c --- /dev/null +++ b/src/layouts/_overflow.scss | |||
@@ -0,0 +1,11 @@ | |||
1 | @use 'iro-sass/src/iro-sass' as iro; | ||
2 | @use '../props'; | ||
3 | @use '../vars'; | ||
4 | |||
5 | @mixin styles { | ||
6 | @include iro.bem-layout('overflow') { | ||
7 | overflow: auto; | ||
8 | scrollbar-color: props.get(vars.$theme, --text-disabled) transparent; | ||
9 | } | ||
10 | } | ||
11 | |||