summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 12:26:35 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 12:26:35 +0100
commit144b7a2ea83507c98544d14ad9435cc5e51ac071 (patch)
tree7b18227482fa9f5d29d358ce1540b7a6d105febd /src
parentInit (diff)
downloadiro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.gz
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.tar.bz2
iro-design-144b7a2ea83507c98544d14ad9435cc5e51ac071.zip
Update
Diffstat (limited to 'src')
-rw-r--r--src/_general.scss82
-rw-r--r--src/_vars.scss85
-rw-r--r--src/index.scss47
-rw-r--r--src/layouts/_card.scss38
-rw-r--r--src/layouts/_container.scss91
-rw-r--r--src/mixins/_grid.scss88
-rw-r--r--src/mixins/_typography.scss63
-rw-r--r--src/objects/_heading.scss68
-rw-r--r--src/objects/_rule.scss120
9 files changed, 635 insertions, 47 deletions
diff --git a/src/_general.scss b/src/_general.scss
new file mode 100644
index 0000000..82b9467
--- /dev/null
+++ b/src/_general.scss
@@ -0,0 +1,82 @@
1@use 'iro-sass/src/index' as iro;
2@use 'mixins/typography';
3@use 'vars';
4
5html,
6body {
7 height: 100%;
8}
9
10body {
11 @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md)));
12
13 margin: 0;
14 padding: 0;
15 background-color: iro.props-get(--colors --bg);
16 color: iro.props-get(--colors --fg);
17}
18
19h1,
20h2,
21h3,
22h4,
23h5,
24h6 {
25 @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md), weight: 400));
26
27 margin: 0;
28}
29
30p {
31 margin-top: iro.props-get(--dims --paragraph --margin-top);
32 margin-bottom: 0;
33
34 &:empty {
35 display: none;
36 }
37}
38
39ul,
40ol {
41 margin: iro.props-get(--dims --paragraph --margin-top) 0 0;
42 padding-left: iro.props-get(--dims --list --indent);
43}
44
45:focus {
46 outline: 0;
47}
48
49:link,
50:visited {
51 color: currentColor;
52 text-decoration: none;
53}
54
55button {
56 box-sizing: content-box;
57 margin: 0;
58 padding: 0;
59 border: 0;
60 background-color: transparent;
61 color: currentColor;
62 font: inherit;
63 letter-spacing: inherit;
64 text-align: left;
65 text-transform: inherit;
66 appearance: none;
67
68 &::-moz-focus-inner {
69 border: 0;
70 }
71}
72
73::selection {
74 background: iro.props-get(--colors --selection --bg);
75 color: iro.props-get(--colors --selection --fg);
76}
77
78img {
79 &::selection {
80 background: iro.props-get(--colors --selection --bg-img);
81 }
82}
diff --git a/src/_vars.scss b/src/_vars.scss
index 5a6c1d0..d2bdf38 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,13 +1,14 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
2 3
3iro.$vars-root-size: 16px; 4iro.$vars-root-size: 16px;
4 5
5$breakpoints: ( 6media.$breakpoints: (
6 md: 40rem, 7 md: 40rem,
7 sm: 28rem 8 sm: 28rem
8); 9);
9 10
10$unit-intervals: ( 11media.$unit-intervals: (
11 'px': 1, 12 'px': 1,
12 'em': .01, 13 'em': .01,
13 'rem': .01, 14 'rem': .01,
@@ -22,45 +23,15 @@ $font--main: (
22); 23);
23 24
24$font--headline: ( 25$font--headline: (
25 family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), 26 family: ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
26 line-height: 1.2, 27 line-height: 1.2,
27 weight: 700, 28 weight: 700,
28); 29);
29 30
30$line-height: map-get($font--main, line-height); 31$line-height: map-get($font--main, line-height);
31 32
32// 33//
33 34
34$theme-light: (
35 --gray1: hsl(210, 0%, 100%), // 1.11
36 --gray2: hsl(210, 0%, 98%), // 1.07
37 --gray3: hsl(210, 0%, 95%), // 1
38 --gray4: hsl(210, 0%, 90%), // 1.11
39 --gray5: hsl(210, 0%, 87%), // 1.2
40 --gray6: hsl(210, 0%, 78%), // 1.51
41 --gray7: hsl(210, 0%, 69%), // 1.93
42 --gray8: hsl(210, 0%, 55%), // 3
43 --gray9: hsl(210, 0%, 38%), // 5.53
44 --gray10: hsl(210, 0%, 19%), // 11.78
45 --gray11: hsl(210, 0%, 0%), // 18.75
46);
47
48$theme-lighter: (
49 --gray1: hsl(210, 0%, 100%), // 1
50 --gray2: hsl(210, 0%, 100%), // 1
51 --gray3: hsl(210, 0%, 100%), // 1
52 --gray4: hsl(210, 0%, 95%), // 1.11
53 --gray5: hsl(210, 0%, 92%), // 1.19
54 --gray6: hsl(210, 0%, 82%), // 1.52
55 --gray7: hsl(210, 0%, 73%), // 1.94
56 --gray8: hsl(210, 0%, 58%), // 3.03
57 --gray9: hsl(210, 0%, 41%), // 5.48
58 --gray10: hsl(210, 0%, 22%), // 11.72
59 --gray11: hsl(210, 0%, 0%), // 21
60);
61
62//
63
64@include iro.fn-execute { 35@include iro.fn-execute {
65 $primary-accent-base: hsl(222, 49.8%, 52.4%); 36 $primary-accent-base: hsl(222, 49.8%, 52.4%);
66 $error-accent-base: hsl(352, 49.8%, 52.4%); 37 $error-accent-base: hsl(352, 49.8%, 52.4%);
@@ -119,6 +90,18 @@ $theme-lighter: (
119 ), 90 ),
120 91
121 --colors: ( 92 --colors: (
93 --gray1: hsl(210, 0%, 100%), // 1.11
94 --gray2: hsl(210, 0%, 98%), // 1.07
95 --gray3: hsl(210, 0%, 95%), // 1
96 --gray4: hsl(210, 0%, 90%), // 1.11
97 --gray5: hsl(210, 0%, 87%), // 1.2
98 --gray6: hsl(210, 0%, 78%), // 1.51
99 --gray7: hsl(210, 0%, 69%), // 1.93
100 --gray8: hsl(210, 0%, 55%), // 3
101 --gray9: hsl(210, 0%, 38%), // 5.53
102 --gray10: hsl(210, 0%, 19%), // 11.78
103 --gray11: hsl(210, 0%, 0%), // 18.75
104
122 --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background 105 --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background
123 --bg-hi: iro.props-get(--colors --gray2, null), // Lighter background 106 --bg-hi: iro.props-get(--colors --gray2, null), // Lighter background
124 --bg: iro.props-get(--colors --gray3, null), // Background 107 --bg: iro.props-get(--colors --gray3, null), // Background
@@ -183,18 +166,44 @@ $theme-lighter: (
183 ), 166 ),
184 ), 167 ),
185 )); 168 ));
169
170 @include iro.props-store((
171 --colors: (
172 --gray1: hsl(210, 0%, 100%), // 1
173 --gray2: hsl(210, 0%, 100%), // 1
174 --gray3: hsl(210, 0%, 100%), // 1
175 --gray4: hsl(210, 0%, 95%), // 1.11
176 --gray5: hsl(210, 0%, 92%), // 1.19
177 --gray6: hsl(210, 0%, 82%), // 1.52
178 --gray7: hsl(210, 0%, 73%), // 1.94
179 --gray8: hsl(210, 0%, 58%), // 3.03
180 --gray9: hsl(210, 0%, 41%), // 5.48
181 --gray10: hsl(210, 0%, 22%), // 11.72
182 --gray11: hsl(210, 0%, 0%), // 21
183 )
184 ), 'light-raised');
186} 185}
187 186
188// 187//
189 188
190@include iro.fn-execute { 189@include iro.fn-execute {
191 @include iro.props-store((), 'dark'); 190 @include iro.fn-execute {
191 @include iro.props-store((
192 --colors: ()
193 ), 'dark');
194 }
195
196 @include iro.fn-execute {
197 @include iro.props-store((
198 --colors: ()
199 ), 'dark-raised');
200 }
192} 201}
193 202
194// 203//
195 204
196@each $breakpoint in map-keys($breakpoints) { 205@each $breakpoint in map-keys(media.$breakpoints) {
197 @include media('<=#{$breakpoint}') { 206 @include media.media('<=#{$breakpoint}') {
198 @include iro.props-store(( 207 @include iro.props-store((
199 --colors: () 208 --colors: ()
200 ), $breakpoint); 209 ), $breakpoint);
diff --git a/src/index.scss b/src/index.scss
index dc71caa..292785d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,19 +1,48 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/index' as iro;
2 2@use 'include-media/dist/include-media' as media;
3@import 'include-media/dist/include-media';
4 3
5@import 'vars'; 4@import 'vars';
5@import 'general';
6
7@import 'layouts/container';
8
9@import 'objects/heading';
10@import 'objects/rule';
6 11
7:root { 12:root {
8 @include props.assign; 13 @include iro.props-assign;
9 14
10 @each $breakpoint in map-keys($breakpoints) { 15 @each $breakpoint in map-keys(media.$breakpoints) {
11 @include media('<=#{$breakpoint}') { 16 @include media.media('<=#{$breakpoint}') {
12 @include props.assign($breakpoint); 17 @include iro.props-assign($breakpoint);
13 } 18 }
14 } 19 }
20}
21
22@include iro.bem-theme('grayscale') {
23 @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent);
24}
25
26@include iro.bem-theme('raised') {
27 @include iro.props-assign('light-raised');
15 28
16 @media (prefers-color-scheme: dark) { 29 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
17 @include props.assign('dark'); 30 @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent);
18 } 31 }
19} 32}
33
34/*@media (prefers-color-scheme: dark) {
35 @include iro.props-assign('dark');
36
37 @include iro.bem-theme('grayscale') {
38 @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
39 }
40
41 @include iro.bem-theme('raised') {
42 @include iro.props-assign('dark-raised');
43
44 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
45 @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
46 }
47 }
48}*/
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
new file mode 100644
index 0000000..f6b6b03
--- /dev/null
+++ b/src/layouts/_card.scss
@@ -0,0 +1,38 @@
1@include namespace('card') {
2 @include store((
3 --dims: (
4 --pad-x: iro-px-to-rem(11px),
5 --pad-y: iro-px-to-rem(8px),
6 --lg: (
7 --pad-x: iro-px-to-rem(14px),
8 --pad-y: iro-px-to-rem(11px),
9 )
10 )
11 ));
12
13 @include layout(namespace()) {
14 display: flex;
15 align-items: center;
16 padding: prop(--dims --pad-y) prop(--dims --pad-x);
17 gap: prop(--dims --pad-x);
18 line-height: 1.4;
19
20 @include modifier('lg') {
21 padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x);
22 gap: prop(--dims --lg --pad-x);
23 }
24
25 @include modifier('flush') {
26 padding: 0;
27 }
28
29 @include element('block') {
30 flex: 0 0 auto;
31
32 @include modifier('main') {
33 flex-shrink: 1;
34 width: 100%;
35 }
36 }
37 }
38}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
new file mode 100644
index 0000000..efe5203
--- /dev/null
+++ b/src/layouts/_container.scss
@@ -0,0 +1,91 @@
1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3
4@include iro.props-namespace('container') {
5 @include iro.props-store((
6 --dims: (
7 --content-width: iro.fn-px-to-rem(700px),
8 --sm-content-width: iro.fn-px-to-rem(360px),
9 --padding-x: 3rem,
10 --padding-y: 3rem,
11 --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true),
12 )
13 ));
14
15 @include iro.bem-layout(iro.props-namespace()) {
16 overflow: hidden;
17
18 @include iro.bem-elem('inner') {
19 margin-top: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
20 margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
21
22 &::before,
23 &::after {
24 content: '';
25 display: block;
26 width: 0;
27 height: 0;
28 }
29
30 &::before {
31 margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true);
32 }
33
34 &::after {
35 margin-top: iro.props-get(--dims --spacing --y --xl, $global: true);
36 }
37 }
38
39 @include iro.bem-modifier('pad-x') {
40 padding-right: iro.props-get(--dims --padding-x);
41 padding-left: iro.props-get(--dims --padding-x);
42 }
43
44 @include iro.bem-modifier('pad-y') {
45 padding-top: iro.props-get(--dims --padding-y);
46 padding-bottom: iro.props-get(--dims --padding-y);
47 }
48
49 @include iro.bem-modifier('narrow') {
50 max-width: iro.props-get(--dims --content-width);
51 margin-right: auto;
52 margin-left: auto;
53
54 @each $breakpoint in map-keys(media.$breakpoints) {
55 @include media.media('<=#{$breakpoint}') {
56 @include iro.bem-suffix('#{$breakpoint}-down') {
57 max-width: iro.props-get(--dims --content-width);
58 margin-right: auto;
59 margin-left: auto;
60 }
61 }
62 }
63 }
64
65 @include iro.bem-modifier('sm-narrow') {
66 max-width: iro.props-get(--dims --sm-content-width);
67 margin-right: auto;
68 margin-left: auto;
69
70 @each $breakpoint in map-keys(media.$breakpoints) {
71 @include media.media('<=#{$breakpoint}') {
72 @include iro.bem-suffix('#{$breakpoint}-down') {
73 max-width: iro.props-get(--dims --sm-content-width);
74 margin-right: auto;
75 margin-left: auto;
76 }
77 }
78 }
79 }
80
81 @include iro.bem-modifier('themed') {
82 background-color: iro.props-get(--colors --bg, $global: true);
83 color: iro.props-get(--colors --fg, $global: true);
84 }
85
86 @include iro.bem-modifier('in-page') {
87 margin-top: iro.props-get(--dims --in-page-spacing-y);
88 margin-bottom: iro.props-get(--dims --in-page-spacing-y);
89 }
90 }
91}
diff --git a/src/mixins/_grid.scss b/src/mixins/_grid.scss
new file mode 100644
index 0000000..e0a73d9
--- /dev/null
+++ b/src/mixins/_grid.scss
@@ -0,0 +1,88 @@
1$context-id: 'grid' !default;
2
3@include iro-context-stack-create($grid-context-id);
4
5@mixin native-grid {
6 @supports (display: grid) {
7 @content;
8 }
9}
10
11@mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) {
12 display: flex;
13 flex-flow: row wrap;
14 align-items: stretch;
15 justify-content: flex-start;
16 margin: (-.5 * $v-spacing) (-.5 * $h-spacing);
17
18 @if $reverse {
19 flex-direction: row-reverse;
20 }
21
22 @include iro-context-push($grid-context-id, 'grid', (
23 --h-spacing: $h-spacing,
24 --v-spacing: $v-spacing,
25 --columns: $columns,
26 --reverse: $reverse
27 ));
28
29 @content;
30
31 @include iro-context-pop($grid-context-id);
32}
33
34@mixin grid-col {
35 @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
36
37 $data: nth(iro-context-get($grid-context-id, 'grid'), 2);
38 $v-spacing: map-get($data, --v-spacing);
39 $h-spacing: map-get($data, --h-spacing);
40
41 box-sizing: border-box;
42 flex: 0 0 auto;
43 margin: .5 * $v-spacing .5 * $h-spacing;
44
45 @include iro-context-push($grid-context-id, 'grid__col');
46
47 @content;
48
49 @include iro-context-pop($grid-context-id);
50}
51
52@mixin grid-col-span($i) {
53 @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
54
55 $data: nth(iro-context-get($grid-context-id, 'grid'), 2);
56 $columns: map-get($data, --columns);
57 $h-spacing: map-get($data, --h-spacing);
58
59 @if $h-spacing != 0 {
60 width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing});
61 // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
62 } @else {
63 width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
64 }
65}
66
67@mixin grid-col-shift($i) {
68 @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
69
70 $data: nth(iro-context-get($grid-context-id, 'grid'), 2);
71 $columns: map-get($data, --columns);
72 $h-spacing: map-get($data, --h-spacing);
73 $reverse: map-get($data, --reverse);
74
75 $prop: if($reverse, margin-right, margin-left);
76
77 @if $i == 0 {
78 #{$prop}: 0;
79 } @else {
80 @if $h-spacing != 0 {
81 #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2});
82 // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
83 } @else {
84 #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
85 // ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
86 }
87 }
88}
diff --git a/src/mixins/_typography.scss b/src/mixins/_typography.scss
new file mode 100644
index 0000000..31e39f0
--- /dev/null
+++ b/src/mixins/_typography.scss
@@ -0,0 +1,63 @@
1@function set-font($basis, $values: ()) {
2 $font: map-merge($basis, $values);
3
4 $map: (font-family: map-get($font, 'family'));
5
6 @if (map-has-key($font, 'size')) {
7 $map: map-merge(
8 $map, (
9 font-size: map-get($font, 'size')
10 )
11 );
12 }
13
14 @if (map-has-key($font, 'weight')) {
15 $map: map-merge(
16 $map, (
17 font-weight: map-get($font, 'weight')
18 )
19 );
20 }
21
22 @if (map-has-key($font, 'style')) {
23 $map: map-merge(
24 $map, (
25 font-style: map-get($font, 'style')
26 )
27 );
28 }
29
30 @if (map-has-key($font, 'line-height')) {
31 $map: map-merge(
32 $map, (
33 line-height: map-get($font, 'line-height')
34 )
35 );
36 }
37
38 @if (map-has-key($font, 'transform')) {
39 $map: map-merge(
40 $map, (
41 text-transform: map-get($font, 'transform')
42 )
43 );
44 }
45
46 @if (map-has-key($font, 'variant-alternates')) {
47 $map: map-merge(
48 $map, (
49 font-variant-alternates: map-get($font, 'variant-alternates')
50 )
51 );
52 }
53
54 @return $map;
55}
56
57@mixin set-font($basis, $values: ()) {
58 $values: set-font($basis, $values);
59
60 @each $prop, $value in $values {
61 #{$prop}: $value;
62 }
63}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
new file mode 100644
index 0000000..a0ce052
--- /dev/null
+++ b/src/objects/_heading.scss
@@ -0,0 +1,68 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@include iro.props-namespace('heading') {
6 @include iro.props-store((
7 --dims: (
8 --in-page-margin: (
9 --top: iro.props-get(--dims --spacing --y --lg, $global: true),
10 --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true),
11 --bottom: iro.props-get(--dims --spacing --y --sm, $global: true),
12 ),
13 ),
14 --colors: (
15 --light: iro.props-get(--colors --fg-hi, $global: true),
16 --strong: iro.props-get(--colors --fg-lo, $global: true),
17 ),
18 ));
19
20 @include iro.bem-object(iro.props-namespace()) {
21 @include typography.set-font(vars.$font--headline);
22
23 display: block;
24 margin-top: iro.props-get(--dims --in-page-margin --top);
25 margin-bottom: 0;
26
27 & + & {
28 margin-top: iro.props-get(--dims --in-page-margin --top-sibling);
29 }
30
31 @include iro.bem-modifier('xxl') {
32 color: iro.props-get(--colors --strong);
33 font-size: iro.props-get(--dims --font-size --xxxl, $global: true);
34 }
35
36 @include iro.bem-modifier('xl') {
37 color: iro.props-get(--colors --strong);
38 font-size: iro.props-get(--dims --font-size --xxl, $global: true);
39 }
40
41 @include iro.bem-modifier('lg') {
42 color: iro.props-get(--colors --strong);
43 font-size: iro.props-get(--dims --font-size --xl, $global: true);
44 }
45
46 @include iro.bem-modifier('md') {
47 color: iro.props-get(--colors --strong);
48 font-size: iro.props-get(--dims --font-size --lg, $global: true);
49 }
50
51 @include iro.bem-modifier('sm') {
52 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
53
54 color: iro.props-get(--colors --strong);
55 font-size: iro.props-get(--dims --font-size --md, $global: true);
56 font-weight: 500;
57 }
58
59 @include iro.bem-modifier('xs') {
60 @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
61
62 color: iro.props-get(--colors --light);
63 font-size: iro.props-get(--dims --font-size --xs, $global: true);
64 font-weight: 500;
65 text-transform: uppercase;
66 }
67 }
68}
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
new file mode 100644
index 0000000..74987da
--- /dev/null
+++ b/src/objects/_rule.scss
@@ -0,0 +1,120 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@include iro.props-namespace('rule') {
6 @include iro.props-store((
7 --dims: (
8 --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true),
9
10 --strong: (
11 --border-width: iro.props-get(--dims --border-width --thick, $global: true),
12 --label-font-size: iro.props-get(--dims --font-size --md, $global: true),
13 ),
14 --medium: (
15 --border-width: iro.props-get(--dims --border-width --medium, $global: true),
16 --label-font-size: iro.props-get(--dims --font-size --sm, $global: true),
17 ),
18 --faint: (
19 --border-width: iro.props-get(--dims --border-width --thin, $global: true),
20 --label-font-size: iro.props-get(--dims --font-size --xs, $global: true),
21 ),
22 ),
23 --colors: (
24 --strong: (
25 --bg: iro.props-get(--colors --fg, $global: true),
26 --label: iro.props-get(--colors --fg, $global: true),
27 ),
28 --medium: (
29 --bg: iro.props-get(--colors --obj, $global: true),
30 --label: iro.props-get(--colors --fg-hi, $global: true),
31 ),
32 --faint: (
33 --bg: iro.props-get(--colors --obj, $global: true),
34 --label: iro.props-get(--colors --fg-hi2, $global: true),
35 ),
36 ),
37 ));
38
39 @include iro.bem-object(iro.props-namespace()) {
40 display: block;
41 height: iro.props-get(--dims --strong --border-width);
42 margin-top: iro.props-get(--dims --margin-y);
43 margin-bottom: iro.props-get(--dims --margin-y);
44 background-color: iro.props-get(--colors --strong --bg);
45
46 @include iro.bem-modifier('medium') {
47 height: iro.props-get(--dims --medium --border-width);
48 background-color: iro.props-get(--colors --medium --bg);
49 }
50
51 @include iro.bem-modifier('faint') {
52 height: iro.props-get(--dims --faint --border-width);
53 background-color: iro.props-get(--colors --faint --bg);
54 }
55
56 @include iro.bem-modifier('labelled') {
57 display: flex;
58 flex-direction: row;
59 align-items: center;
60 height: auto;
61 border-radius: 0;
62 background-color: transparent;
63
64 &::before,
65 &::after {
66 content: '';
67 display: block;
68 flex: 1 1 auto;
69 width: 100%;
70 height: 3px;
71 background-color: iro.props-get(--colors --strong --bg);
72 }
73
74 &::before {
75 margin-right: 1em;
76 }
77
78 &::after {
79 margin-left: 1em;
80 }
81
82 @include iro.bem-elem('label') {
83 flex: 0 0 auto;
84 color: iro.props-get(--colors --strong --label);
85 font-size: iro.props-get(--dims --strong --label-font-size);
86 font-weight: 700;
87 letter-spacing: .5px;
88 text-transform: uppercase;
89 }
90
91 @include iro.bem-modifier('medium') {
92 &::before,
93 &::after {
94 height: 2px;
95 background-color: iro.props-get(--colors --medium --bg);
96 }
97
98 @include iro.bem-elem('label') {
99 color: iro.props-get(--colors --medium --label);
100 font-size: iro.props-get(--dims --medium --label-font-size);
101 font-weight: 500;
102 }
103 }
104
105 @include iro.bem-modifier('faint') {
106 &::before,
107 &::after {
108 height: 1px;
109 background-color: iro.props-get(--colors --faint --bg);
110 }
111
112 @include iro.bem-elem('label') {
113 color: iro.props-get(--colors --faint --label);
114 font-size: iro.props-get(--dims --faint --label-font-size);
115 font-weight: 500;
116 }
117 }
118 }
119 }
120}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 06:24:35 +0000