summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-18 18:08:24 +0200
committerVolpeon <git@volpeon.ink>2024-10-18 18:08:24 +0200
commit365c56edcc36b5b92902bac01ce44b43d01e8685 (patch)
tree644611792591a76e605068d0c9e230fad6a633e7 /src/layouts
parentRevamped variable management (diff)
downloadiro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.tar.gz
iro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.tar.bz2
iro-design-365c56edcc36b5b92902bac01ce44b43d01e8685.zip
Refactoring
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_button-group.scss16
-rw-r--r--src/layouts/_button-group.vars.scss4
-rw-r--r--src/layouts/_card-list.scss76
-rw-r--r--src/layouts/_card-list.vars.scss19
-rw-r--r--src/layouts/_container.scss27
-rw-r--r--src/layouts/_container.vars.scss22
-rw-r--r--src/layouts/_flex.scss27
-rw-r--r--src/layouts/_form.scss58
-rw-r--r--src/layouts/_form.vars.scss5
-rw-r--r--src/layouts/_media.scss40
-rw-r--r--src/layouts/_media.vars.scss16
-rw-r--r--src/layouts/_overflow.scss11
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
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 01:04:16 +0000