summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_button-group.scss4
-rw-r--r--src/layouts/_card-list.scss32
-rw-r--r--src/layouts/_container.scss10
-rw-r--r--src/layouts/_container.vars.scss8
-rw-r--r--src/layouts/_flex.scss14
-rw-r--r--src/layouts/_form.scss24
-rw-r--r--src/layouts/_media.scss14
-rw-r--r--src/layouts/_overflow.scss4
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 }