diff options
Diffstat (limited to 'src/layouts')
-rw-r--r-- | src/layouts/_button-group.scss | 16 | ||||
-rw-r--r-- | src/layouts/_card-list.scss | 96 | ||||
-rw-r--r-- | src/layouts/_container.scss | 45 | ||||
-rw-r--r-- | src/layouts/_flex.scss | 27 | ||||
-rw-r--r-- | src/layouts/_form.scss | 62 | ||||
-rw-r--r-- | src/layouts/_media.scss | 47 | ||||
-rw-r--r-- | src/layouts/_overflow.scss | 9 |
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 | } | ||