diff options
author | Volpeon <git@volpeon.ink> | 2024-10-22 08:23:33 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-10-22 08:23:33 +0200 |
commit | 5855a6821cf5585378a70f9bee13563bdbfe2d86 (patch) | |
tree | 0ee25906c9e73912137a56b7d6214c89bf43e8a6 /src/layouts | |
parent | Update (diff) | |
download | iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.gz iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.tar.bz2 iro-design-5855a6821cf5585378a70f9bee13563bdbfe2d86.zip |
Less broad imports
Diffstat (limited to 'src/layouts')
-rw-r--r-- | src/layouts/_button-group.scss | 4 | ||||
-rw-r--r-- | src/layouts/_card-list.scss | 32 | ||||
-rw-r--r-- | src/layouts/_container.scss | 10 | ||||
-rw-r--r-- | src/layouts/_container.vars.scss | 8 | ||||
-rw-r--r-- | src/layouts/_flex.scss | 14 | ||||
-rw-r--r-- | src/layouts/_form.scss | 24 | ||||
-rw-r--r-- | src/layouts/_media.scss | 14 | ||||
-rw-r--r-- | src/layouts/_overflow.scss | 4 |
8 files changed, 55 insertions, 55 deletions
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss index 58d0986..4895647 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_button-group.scss | |||
@@ -1,5 +1,5 @@ | |||
1 | @use 'sass:meta'; | 1 | @use 'sass:meta'; |
2 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/bem' as bem; |
3 | @use 'iro-sass/src/props'; | 3 | @use 'iro-sass/src/props'; |
4 | @use '../props' as *; | 4 | @use '../props' as *; |
5 | 5 | ||
@@ -9,7 +9,7 @@ | |||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include iro.bem-layout('button-group') { | 12 | @include bem.layout('button-group') { |
13 | display: flex; | 13 | display: flex; |
14 | flex-wrap: wrap; | 14 | flex-wrap: wrap; |
15 | gap: props.get(vars.$spacing); | 15 | gap: props.get(vars.$spacing); |
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index 0722a88..49f4b74 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
@@ -1,6 +1,6 @@ | |||
1 | @use 'sass:meta'; | 1 | @use 'sass:meta'; |
2 | @use 'include-media/dist/include-media' as media; | 2 | @use 'include-media/dist/include-media' as media; |
3 | @use 'iro-sass/src/iro-sass' as iro; | 3 | @use 'iro-sass/src/bem' as bem; |
4 | @use 'iro-sass/src/props'; | 4 | @use 'iro-sass/src/props'; |
5 | @use '../props' as *; | 5 | @use '../props' as *; |
6 | 6 | ||
@@ -10,47 +10,47 @@ | |||
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 iro.bem-layout('card-list') { | 13 | @include bem.layout('card-list') { |
14 | display: flex; | 14 | display: flex; |
15 | flex-direction: column; | 15 | flex-direction: column; |
16 | gap: props.get(vars.$row-gap); | 16 | gap: props.get(vars.$row-gap); |
17 | 17 | ||
18 | @include iro.bem-modifier('quiet') { | 18 | @include bem.modifier('quiet') { |
19 | row-gap: props.get(vars.$quiet--row-gap); | 19 | row-gap: props.get(vars.$quiet--row-gap); |
20 | } | 20 | } |
21 | 21 | ||
22 | @include iro.bem-modifier('grid') { | 22 | @include bem.modifier('grid') { |
23 | display: grid; | 23 | display: grid; |
24 | grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); | 24 | grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); |
25 | gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); | 25 | gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); |
26 | 26 | ||
27 | @include iro.bem-modifier('quiet') { | 27 | @include bem.modifier('quiet') { |
28 | row-gap: props.get(vars.$grid--quiet--row-gap); | 28 | row-gap: props.get(vars.$grid--quiet--row-gap); |
29 | } | 29 | } |
30 | } | 30 | } |
31 | 31 | ||
32 | @include iro.bem-modifier('masonry') { | 32 | @include bem.modifier('masonry') { |
33 | display: block; | 33 | display: block; |
34 | columns: auto props.get(vars.$masonry--col-width); | 34 | columns: auto props.get(vars.$masonry--col-width); |
35 | column-gap: props.get(vars.$masonry--col-gap); | 35 | column-gap: props.get(vars.$masonry--col-gap); |
36 | 36 | ||
37 | @include iro.bem-elem('card') { | 37 | @include bem.elem('card') { |
38 | margin-block-end: props.get(vars.$masonry--row-gap); | 38 | margin-block-end: props.get(vars.$masonry--row-gap); |
39 | break-inside: avoid; | 39 | break-inside: avoid; |
40 | } | 40 | } |
41 | 41 | ||
42 | @include iro.bem-modifier('quiet') { | 42 | @include bem.modifier('quiet') { |
43 | @include iro.bem-elem('card') { | 43 | @include bem.elem('card') { |
44 | margin-block-end: props.get(vars.$masonry--quiet--row-gap); | 44 | margin-block-end: props.get(vars.$masonry--quiet--row-gap); |
45 | } | 45 | } |
46 | } | 46 | } |
47 | } | 47 | } |
48 | 48 | ||
49 | @include iro.bem-modifier('masonry-h') { | 49 | @include bem.modifier('masonry-h') { |
50 | flex-flow: row wrap; | 50 | flex-flow: row wrap; |
51 | gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); | 51 | gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); |
52 | 52 | ||
53 | @include iro.bem-modifier('no-flush') { | 53 | @include bem.modifier('no-flush') { |
54 | &::after { | 54 | &::after { |
55 | display: block; | 55 | display: block; |
56 | flex: 1 0 auto; | 56 | flex: 1 0 auto; |
@@ -59,22 +59,22 @@ | |||
59 | } | 59 | } |
60 | } | 60 | } |
61 | 61 | ||
62 | @include iro.bem-elem('card') { | 62 | @include bem.elem('card') { |
63 | flex: 1 0 auto; | 63 | flex: 1 0 auto; |
64 | max-inline-size: 100%; | 64 | max-inline-size: 100%; |
65 | } | 65 | } |
66 | 66 | ||
67 | @include iro.bem-elem('card-image') { | 67 | @include bem.elem('card-image') { |
68 | block-size: props.get(vars.$masonry-h--row-height); | 68 | block-size: props.get(vars.$masonry-h--row-height); |
69 | } | 69 | } |
70 | 70 | ||
71 | @include iro.bem-modifier('quiet') { | 71 | @include bem.modifier('quiet') { |
72 | row-gap: props.get(vars.$masonry-h--quiet--row-gap); | 72 | row-gap: props.get(vars.$masonry-h--quiet--row-gap); |
73 | } | 73 | } |
74 | } | 74 | } |
75 | 75 | ||
76 | @include iro.bem-modifier('aspect-5\\/4') { | 76 | @include bem.modifier('aspect-5\\/4') { |
77 | @include iro.bem-elem('card-image') { | 77 | @include bem.elem('card-image') { |
78 | aspect-ratio: 5 / 4; | 78 | aspect-ratio: 5 / 4; |
79 | } | 79 | } |
80 | } | 80 | } |
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 8b2ed20..3336140 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss | |||
@@ -1,5 +1,5 @@ | |||
1 | @use 'sass:meta'; | 1 | @use 'sass:meta'; |
2 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/bem' as bem; |
3 | @use 'iro-sass/src/props'; | 3 | @use 'iro-sass/src/props'; |
4 | @use '../props' as *; | 4 | @use '../props' as *; |
5 | 5 | ||
@@ -9,19 +9,19 @@ | |||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include iro.bem-layout('container') { | 12 | @include bem.layout('container') { |
13 | @each $mod, $size in vars.$fixed-sizes { | 13 | @each $mod, $size in vars.$fixed-sizes { |
14 | @include iro.bem-modifier($mod) { | 14 | @include bem.modifier($mod) { |
15 | max-inline-size: props.get($size); | 15 | max-inline-size: props.get($size); |
16 | margin-inline: auto; | 16 | margin-inline: auto; |
17 | } | 17 | } |
18 | } | 18 | } |
19 | 19 | ||
20 | @include iro.bem-modifier('pad-i') { | 20 | @include bem.modifier('pad-i') { |
21 | padding-inline: props.get(vars.$pad-i); | 21 | padding-inline: props.get(vars.$pad-i); |
22 | } | 22 | } |
23 | 23 | ||
24 | @include iro.bem-modifier('pad-b') { | 24 | @include bem.modifier('pad-b') { |
25 | padding-block: props.get(vars.$pad-b); | 25 | padding-block: props.get(vars.$pad-b); |
26 | } | 26 | } |
27 | } | 27 | } |
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss index f5343a6..cba7574 100644 --- a/src/layouts/_container.vars.scss +++ b/src/layouts/_container.vars.scss | |||
@@ -1,10 +1,10 @@ | |||
1 | @use 'iro-sass/src/iro-sass' as iro; | 1 | @use 'iro-sass/src/functions' as fn; |
2 | @use 'iro-sass/src/props'; | 2 | @use 'iro-sass/src/props'; |
3 | @use '../core.vars' as core; | 3 | @use '../core.vars' as core; |
4 | 4 | ||
5 | $fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default; | 5 | $fixed-125: props.def(--l-container--fixed-125, fn.px-to-rem(720px)) !default; |
6 | $fixed: props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default; | 6 | $fixed: props.def(--l-container--fixed, fn.px-to-rem(610px)) !default; |
7 | $fixed-75: props.def(--l-container--fixed-75, iro.fn-px-to-rem(500px)) !default; | 7 | $fixed-75: props.def(--l-container--fixed-75, fn.px-to-rem(500px)) !default; |
8 | 8 | ||
9 | $fixed-sizes: ( | 9 | $fixed-sizes: ( |
10 | 'fixed-125': $fixed-125, | 10 | 'fixed-125': $fixed-125, |
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss index 6cc9dc6..d7cae95 100644 --- a/src/layouts/_flex.scss +++ b/src/layouts/_flex.scss | |||
@@ -1,26 +1,26 @@ | |||
1 | @use 'iro-sass/src/iro-sass' as iro; | 1 | @use 'iro-sass/src/bem' as bem; |
2 | 2 | ||
3 | @mixin styles { | 3 | @mixin styles { |
4 | @include iro.bem-layout('flex') { | 4 | @include bem.layout('flex') { |
5 | display: flex; | 5 | display: flex; |
6 | 6 | ||
7 | @include iro.bem-modifier('align-stretch') { | 7 | @include bem.modifier('align-stretch') { |
8 | align-items: stretch; | 8 | align-items: stretch; |
9 | } | 9 | } |
10 | 10 | ||
11 | @include iro.bem-modifier('align-center') { | 11 | @include bem.modifier('align-center') { |
12 | align-items: center; | 12 | align-items: center; |
13 | } | 13 | } |
14 | 14 | ||
15 | @include iro.bem-modifier('align-start') { | 15 | @include bem.modifier('align-start') { |
16 | align-items: flex-start; | 16 | align-items: flex-start; |
17 | } | 17 | } |
18 | 18 | ||
19 | @include iro.bem-modifier('align-end') { | 19 | @include bem.modifier('align-end') { |
20 | align-items: flex-end; | 20 | align-items: flex-end; |
21 | } | 21 | } |
22 | 22 | ||
23 | @include iro.bem-modifier('column') { | 23 | @include bem.modifier('column') { |
24 | flex-direction: column; | 24 | flex-direction: column; |
25 | } | 25 | } |
26 | } | 26 | } |
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 0bb9d4a..4ccf334 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss | |||
@@ -1,5 +1,5 @@ | |||
1 | @use 'sass:meta'; | 1 | @use 'sass:meta'; |
2 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/bem' as bem; |
3 | @use 'iro-sass/src/props'; | 3 | @use 'iro-sass/src/props'; |
4 | @use '../props' as *; | 4 | @use '../props' as *; |
5 | 5 | ||
@@ -9,49 +9,49 @@ | |||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include iro.bem-layout('form') { | 12 | @include bem.layout('form') { |
13 | display: flex; | 13 | display: flex; |
14 | flex-direction: column; | 14 | flex-direction: column; |
15 | gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); | 15 | gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); |
16 | 16 | ||
17 | @include iro.bem-elem('item') { | 17 | @include bem.elem('item') { |
18 | display: block; | 18 | display: block; |
19 | } | 19 | } |
20 | 20 | ||
21 | @include iro.bem-elem('item-content') { | 21 | @include bem.elem('item-content') { |
22 | @include iro.bem-modifier('align-start') { | 22 | @include bem.modifier('align-start') { |
23 | align-self: start; | 23 | align-self: start; |
24 | } | 24 | } |
25 | } | 25 | } |
26 | 26 | ||
27 | @include iro.bem-modifier('row') { | 27 | @include bem.modifier('row') { |
28 | flex-direction: row; | 28 | flex-direction: row; |
29 | align-items: flex-end; | 29 | align-items: flex-end; |
30 | } | 30 | } |
31 | 31 | ||
32 | @include iro.bem-modifier('labels-start', 'labels-end') { | 32 | @include bem.modifier('labels-start', 'labels-end') { |
33 | display: grid; | 33 | display: grid; |
34 | grid-template-rows: auto; | 34 | grid-template-rows: auto; |
35 | grid-template-columns: auto 1fr; | 35 | grid-template-columns: auto 1fr; |
36 | align-items: baseline; | 36 | align-items: baseline; |
37 | 37 | ||
38 | @include iro.bem-elem('item') { | 38 | @include bem.elem('item') { |
39 | display: contents; | 39 | display: contents; |
40 | } | 40 | } |
41 | 41 | ||
42 | @include iro.bem-elem('item-label') { | 42 | @include bem.elem('item-label') { |
43 | grid-column: 1; | 43 | grid-column: 1; |
44 | padding-inline-end: 0; | 44 | padding-inline-end: 0; |
45 | } | 45 | } |
46 | 46 | ||
47 | @include iro.bem-elem('item-content') { | 47 | @include bem.elem('item-content') { |
48 | grid-column: 2; | 48 | grid-column: 2; |
49 | margin-block-start: 0; | 49 | margin-block-start: 0; |
50 | } | 50 | } |
51 | } | 51 | } |
52 | 52 | ||
53 | @include iro.bem-modifier('labels-end') { | 53 | @include bem.modifier('labels-end') { |
54 | @include iro.bem-elem('item-label') { | 54 | @include bem.elem('item-label') { |
55 | text-align: end; | 55 | text-align: end; |
56 | } | 56 | } |
57 | } | 57 | } |
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss index 5658222..63daaf8 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss | |||
@@ -1,5 +1,5 @@ | |||
1 | @use 'sass:meta'; | 1 | @use 'sass:meta'; |
2 | @use 'iro-sass/src/iro-sass' as iro; | 2 | @use 'iro-sass/src/bem' as bem; |
3 | @use 'iro-sass/src/props'; | 3 | @use 'iro-sass/src/props'; |
4 | @use '../props' as *; | 4 | @use '../props' as *; |
5 | 5 | ||
@@ -9,31 +9,31 @@ | |||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include iro.bem-layout('media') { | 12 | @include bem.layout('media') { |
13 | display: flex; | 13 | display: flex; |
14 | gap: props.get(vars.$gap); | 14 | gap: props.get(vars.$gap); |
15 | align-items: center; | 15 | align-items: center; |
16 | line-height: 1.4; | 16 | line-height: 1.4; |
17 | 17 | ||
18 | @each $mod, $size in vars.$sizes { | 18 | @each $mod, $size in vars.$sizes { |
19 | @include iro.bem-modifier($mod) { | 19 | @include bem.modifier($mod) { |
20 | gap: props.get($size); | 20 | gap: props.get($size); |
21 | } | 21 | } |
22 | } | 22 | } |
23 | 23 | ||
24 | @include iro.bem-modifier('wrap') { | 24 | @include bem.modifier('wrap') { |
25 | flex-wrap: wrap; | 25 | flex-wrap: wrap; |
26 | } | 26 | } |
27 | 27 | ||
28 | @include iro.bem-elem('block') { | 28 | @include bem.elem('block') { |
29 | flex: 0 0 auto; | 29 | flex: 0 0 auto; |
30 | 30 | ||
31 | @include iro.bem-modifier('shrink', 'main') { | 31 | @include bem.modifier('shrink', 'main') { |
32 | flex-shrink: 1; | 32 | flex-shrink: 1; |
33 | min-inline-size: 0; | 33 | min-inline-size: 0; |
34 | } | 34 | } |
35 | 35 | ||
36 | @include iro.bem-modifier('main') { | 36 | @include bem.modifier('main') { |
37 | inline-size: 100%; | 37 | inline-size: 100%; |
38 | } | 38 | } |
39 | } | 39 | } |
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss index 3489ed7..195132a 100644 --- a/src/layouts/_overflow.scss +++ b/src/layouts/_overflow.scss | |||
@@ -1,9 +1,9 @@ | |||
1 | @use 'iro-sass/src/iro-sass' as iro; | 1 | @use 'iro-sass/src/bem' as bem; |
2 | @use 'iro-sass/src/props'; | 2 | @use 'iro-sass/src/props'; |
3 | @use '../core.vars' as core; | 3 | @use '../core.vars' as core; |
4 | 4 | ||
5 | @mixin styles { | 5 | @mixin styles { |
6 | @include iro.bem-layout('overflow') { | 6 | @include bem.layout('overflow') { |
7 | overflow: auto; | 7 | overflow: auto; |
8 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; | 8 | scrollbar-color: props.get(core.$theme, --text-disabled) transparent; |
9 | } | 9 | } |