summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_button-group.scss16
-rw-r--r--src/layouts/_card-list.scss96
-rw-r--r--src/layouts/_container.scss45
-rw-r--r--src/layouts/_flex.scss27
-rw-r--r--src/layouts/_form.scss62
-rw-r--r--src/layouts/_media.scss47
-rw-r--r--src/layouts/_overflow.scss9
7 files changed, 0 insertions, 302 deletions
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
deleted file mode 100644
index a70d27a..0000000
--- a/src/layouts/_button-group.scss
+++ /dev/null
@@ -1,16 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('button-group') {
5 @include iro.props-store((
6 --dims: (
7 --spacing: fn.global-dim(--size --150),
8 ),
9 ));
10
11 @include iro.bem-layout(iro.props-namespace()) {
12 display: flex;
13 gap: fn.dim(--spacing);
14 flex-wrap: wrap;
15 }
16}
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
deleted file mode 100644
index 65b6a66..0000000
--- a/src/layouts/_card-list.scss
+++ /dev/null
@@ -1,96 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use 'include-media/dist/include-media' as media;
4
5@include iro.props-namespace('card-list') {
6 @include iro.props-store((
7 --dims: (
8 --row-gap: fn.global-dim(--size --800),
9 --col-gap: fn.global-dim(--size --400),
10
11 --grid: (
12 --row-gap: fn.global-dim(--size --800),
13 --col-gap: fn.global-dim(--size --400),
14 --col-width: fn.global-dim(--size --3200),
15 ),
16 --masonry: (
17 --row-gap: fn.global-dim(--size --800),
18 --col-gap: fn.global-dim(--size --400),
19 --col-width: fn.global-dim(--size --3200),
20 ),
21 --masonry-h: (
22 --row-gap: fn.global-dim(--size --800),
23 --col-gap: fn.global-dim(--size --400),
24 --row-height: fn.global-dim(--size --3200),
25 )
26 ),
27 --colors: (
28 --border: fn.global-color(--border),
29 ),
30 ));
31
32 @include iro.bem-layout(iro.props-namespace()) {
33 display: flex;
34 flex-direction: column;
35 gap: fn.dim(--row-gap) fn.dim(--col-gap);
36
37 @include iro.bem-modifier('grid') {
38 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
40 gap: fn.dim(--grid --col-gap);
41
42 @include iro.bem-modifier('quiet') {
43 row-gap: fn.dim(--grid --row-gap);
44 }
45 }
46
47 @include iro.bem-modifier('masonry') {
48 display: block;
49 columns: auto fn.dim(--masonry --col-width);
50 column-gap: fn.dim(--masonry --col-gap);
51
52 @include iro.bem-elem('card') {
53 margin-block-end: fn.dim(--masonry --col-gap);
54 break-inside: avoid;
55 }
56
57 @include iro.bem-modifier('quiet') {
58 @include iro.bem-elem('card') {
59 margin-block-end: fn.dim(--masonry --row-gap);
60 }
61 }
62 }
63
64 @include iro.bem-modifier('masonry-h') {
65 flex-flow: row wrap;
66 gap: fn.dim(--masonry-h --col-gap);
67
68 &::after {
69 content: '';
70 display: block;
71 flex: 1 0 auto;
72 inline-size: fn.dim(--masonry-h --row-height);
73 block-size: 0;
74 }
75
76 @include iro.bem-elem('card') {
77 flex: 1 0 auto;
78 max-inline-size: 100%;
79 }
80
81 @include iro.bem-elem('card-image') {
82 block-size: fn.dim(--masonry-h --row-height);
83 }
84
85 @include iro.bem-modifier('quiet') {
86 row-gap: fn.dim(--masonry-h --row-gap);
87 }
88 }
89
90 @include iro.bem-modifier('aspect-5\\/4') {
91 @include iro.bem-elem('card-image') {
92 aspect-ratio: 5 / 4;
93 }
94 }
95 }
96}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
deleted file mode 100644
index d13c4f3..0000000
--- a/src/layouts/_container.scss
+++ /dev/null
@@ -1,45 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('container') {
5 @include iro.props-store((
6 --dims: (
7 --narrow-125: iro.fn-px-to-rem(720px),
8 --narrow: iro.fn-px-to-rem(610px),
9 --narrow-75: iro.fn-px-to-rem(500px),
10 --pad-i: fn.global-dim(--size --400),
11 --pad-b: fn.global-dim(--size --800),
12 )
13 ));
14
15 @include iro.props-store((
16 --dims: (
17 --pad-i: fn.global-dim(--size --200),
18 --pad-b: fn.global-dim(--size --600),
19 )
20 ), 'sm');
21
22 @include iro.props-store((
23 --dims: (
24 --pad-i: fn.global-dim(--size --150),
25 --pad-b: fn.global-dim(--size --450),
26 )
27 ), 'xs');
28
29 @include iro.bem-layout(iro.props-namespace()) {
30 @each $size in 'narrow-125' 'narrow' 'narrow-75' {
31 @include iro.bem-modifier($size) {
32 max-inline-size: fn.dim(--#{$size});
33 margin-inline: auto;
34 }
35 }
36
37 @include iro.bem-modifier('pad-i') {
38 padding-inline: fn.dim(--pad-i);
39 }
40
41 @include iro.bem-modifier('pad-b') {
42 padding-block: fn.dim(--pad-b);
43 }
44 }
45}
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
deleted file mode 100644
index d3f4f9c..0000000
--- a/src/layouts/_flex.scss
+++ /dev/null
@@ -1,27 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('flex') {
4 @include iro.bem-layout(iro.props-namespace()) {
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
deleted file mode 100644
index f6b60ea..0000000
--- a/src/layouts/_form.scss
+++ /dev/null
@@ -1,62 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4// @use '../objects/field-label';
5
6@include iro.props-namespace('form') {
7 @include iro.props-store((
8 --dims: (
9 --item-spacing-b: fn.global-dim(--size --325),
10 --label-spacing-i: fn.global-dim(--size --325),
11 --hint-font-size: fn.global-dim(--font-size --75),
12 ),
13 ));
14
15 @include iro.bem-layout(iro.props-namespace()) {
16 display: flex;
17 flex-direction: column;
18 gap: fn.dim(--item-spacing-b) fn.dim(--label-spacing-i);
19
20 @include iro.bem-elem('item') {
21 display: block;
22 }
23
24 @include iro.bem-elem('item-content') {
25 @include iro.bem-modifier('align-start') {
26 align-self: start;
27 }
28 }
29
30 @include iro.bem-modifier('row') {
31 flex-direction: row;
32 align-items: flex-end;
33 }
34
35 @include iro.bem-modifier('labels-start', 'labels-end') {
36 display: grid;
37 grid-template-columns: auto 1fr;
38 grid-template-rows: auto;
39 align-items: baseline;
40
41 @include iro.bem-elem('item') {
42 display: contents;
43 }
44
45 @include iro.bem-elem('item-label') {
46 grid-column: 1;
47 padding-inline-end: 0;
48 }
49
50 @include iro.bem-elem('item-content') {
51 grid-column: 2;
52 margin-block-start: 0;
53 }
54 }
55
56 @include iro.bem-modifier('labels-end') {
57 @include iro.bem-elem('item-label') {
58 text-align: end;
59 }
60 }
61 }
62}
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
deleted file mode 100644
index c42aa3e..0000000
--- a/src/layouts/_media.scss
+++ /dev/null
@@ -1,47 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$sizes: 'gapless' 'sm' 'lg' 'xl' !default;
5
6@include iro.props-namespace('media') {
7 @include iro.props-store((
8 --dims: (
9 --gap: fn.global-dim(--size --150),
10
11 --gapless: 0,
12 --sm: fn.global-dim(--size --100),
13 --lg: fn.global-dim(--size --300),
14 --xl: fn.global-dim(--size --450),
15 )
16 ));
17
18 @include iro.bem-layout(iro.props-namespace()) {
19 display: flex;
20 align-items: center;
21 gap: fn.dim(--gap);
22 line-height: 1.4;
23
24 @each $size in $sizes {
25 @include iro.bem-modifier($size) {
26 gap: fn.dim(--#{$size});
27 }
28 }
29
30 @include iro.bem-modifier('wrap') {
31 flex-wrap: wrap;
32 }
33
34 @include iro.bem-elem('block') {
35 flex: 0 0 auto;
36
37 @include iro.bem-modifier('shrink', 'main') {
38 flex-shrink: 1;
39 min-inline-size: 0;
40 }
41
42 @include iro.bem-modifier('main') {
43 inline-size: 100%;
44 }
45 }
46 }
47}
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
deleted file mode 100644
index 8643bbf..0000000
--- a/src/layouts/_overflow.scss
+++ /dev/null
@@ -1,9 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow') {
5 @include iro.bem-layout(iro.props-namespace()) {
6 overflow: auto;
7 scrollbar-color: fn.global-color(--text-disabled) transparent;
8 }
9}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 08:18:44 +0000