summaryrefslogtreecommitdiffstats
path: root/src/objects/_rule.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_rule.scss')
-rw-r--r--src/objects/_rule.scss66
1 files changed, 35 insertions, 31 deletions
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
index bfd1240..b0679ee 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_rule.scss
@@ -1,54 +1,58 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
2 3
3@include iro.props-namespace('rule') { 4@include iro.props-namespace('rule') {
4 @include iro.props-store(( 5 @include iro.props-store((
5 --dims: ( 6 --dims: (
6 --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true), 7 --margin-y: fn.dim(--spacing --y --xs, $global: true),
7 8
8 --strong: ( 9 --strong: (
9 --border-width: iro.props-get(--dims --border-width --thick, $global: true), 10 --border-width: fn.dim(--border-width --thick, $global: true),
10 --label-font-size: iro.props-get(--dims --font-size --md, $global: true), 11 --label-font-size: fn.dim(--font-size --md, $global: true),
11 ), 12 ),
12 --medium: ( 13 --medium: (
13 --border-width: iro.props-get(--dims --border-width --medium, $global: true), 14 --border-width: fn.dim(--border-width --medium, $global: true),
14 --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), 15 --label-font-size: fn.dim(--font-size --sm, $global: true),
15 ), 16 ),
16 --faint: ( 17 --faint: (
17 --border-width: iro.props-get(--dims --border-width --thin, $global: true), 18 --border-width: fn.dim(--border-width --thin, $global: true),
18 --label-font-size: iro.props-get(--dims --font-size --xs, $global: true), 19 --label-font-size: fn.dim(--font-size --xs, $global: true),
19 ), 20 ),
20 ), 21 ),
22 ), 'dims');
23
24 @include iro.props-store((
21 --colors: ( 25 --colors: (
22 --strong: ( 26 --strong: (
23 --bg: iro.props-get(--colors --fg, $global: true), 27 --bg: fn.color(--fg, $global: true),
24 --label: iro.props-get(--colors --fg, $global: true), 28 --label: fn.color(--fg, $global: true),
25 ), 29 ),
26 --medium: ( 30 --medium: (
27 --bg: iro.props-get(--colors --obj, $global: true), 31 --bg: fn.color(--obj, $global: true),
28 --label: iro.props-get(--colors --fg-hi, $global: true), 32 --label: fn.color(--fg-hi, $global: true),
29 ), 33 ),
30 --faint: ( 34 --faint: (
31 --bg: iro.props-get(--colors --obj, $global: true), 35 --bg: fn.color(--obj, $global: true),
32 --label: iro.props-get(--colors --fg-hi2, $global: true), 36 --label: fn.color(--fg-hi2, $global: true),
33 ), 37 ),
34 ), 38 ),
35 )); 39 ), 'colors');
36 40
37 @include iro.bem-object(iro.props-namespace()) { 41 @include iro.bem-object(iro.props-namespace()) {
38 display: block; 42 display: block;
39 height: iro.props-get(--dims --strong --border-width); 43 height: fn.dim(--strong --border-width);
40 margin-top: iro.props-get(--dims --margin-y); 44 margin-top: fn.dim(--margin-y);
41 margin-bottom: iro.props-get(--dims --margin-y); 45 margin-bottom: fn.dim(--margin-y);
42 background-color: iro.props-get(--colors --strong --bg); 46 background-color: fn.color(--strong --bg);
43 47
44 @include iro.bem-modifier('medium') { 48 @include iro.bem-modifier('medium') {
45 height: iro.props-get(--dims --medium --border-width); 49 height: fn.dim(--medium --border-width);
46 background-color: iro.props-get(--colors --medium --bg); 50 background-color: fn.color(--medium --bg);
47 } 51 }
48 52
49 @include iro.bem-modifier('faint') { 53 @include iro.bem-modifier('faint') {
50 height: iro.props-get(--dims --faint --border-width); 54 height: fn.dim(--faint --border-width);
51 background-color: iro.props-get(--colors --faint --bg); 55 background-color: fn.color(--faint --bg);
52 } 56 }
53 57
54 @include iro.bem-modifier('labelled') { 58 @include iro.bem-modifier('labelled') {
@@ -66,7 +70,7 @@
66 flex: 1 1 auto; 70 flex: 1 1 auto;
67 width: 100%; 71 width: 100%;
68 height: 3px; 72 height: 3px;
69 background-color: iro.props-get(--colors --strong --bg); 73 background-color: fn.color(--strong --bg);
70 } 74 }
71 75
72 &::before { 76 &::before {
@@ -79,8 +83,8 @@
79 83
80 @include iro.bem-elem('label') { 84 @include iro.bem-elem('label') {
81 flex: 0 0 auto; 85 flex: 0 0 auto;
82 color: iro.props-get(--colors --strong --label); 86 color: fn.color(--strong --label);
83 font-size: iro.props-get(--dims --strong --label-font-size); 87 font-size: fn.dim(--strong --label-font-size);
84 font-weight: 700; 88 font-weight: 700;
85 letter-spacing: .5px; 89 letter-spacing: .5px;
86 text-transform: uppercase; 90 text-transform: uppercase;
@@ -90,12 +94,12 @@
90 &::before, 94 &::before,
91 &::after { 95 &::after {
92 height: 2px; 96 height: 2px;
93 background-color: iro.props-get(--colors --medium --bg); 97 background-color: fn.color(--medium --bg);
94 } 98 }
95 99
96 @include iro.bem-elem('label') { 100 @include iro.bem-elem('label') {
97 color: iro.props-get(--colors --medium --label); 101 color: fn.color(--medium --label);
98 font-size: iro.props-get(--dims --medium --label-font-size); 102 font-size: fn.dim(--medium --label-font-size);
99 font-weight: 500; 103 font-weight: 500;
100 } 104 }
101 } 105 }
@@ -104,12 +108,12 @@
104 &::before, 108 &::before,
105 &::after { 109 &::after {
106 height: 1px; 110 height: 1px;
107 background-color: iro.props-get(--colors --faint --bg); 111 background-color: fn.color(--faint --bg);
108 } 112 }
109 113
110 @include iro.bem-elem('label') { 114 @include iro.bem-elem('label') {
111 color: iro.props-get(--colors --faint --label); 115 color: fn.color(--faint --label);
112 font-size: iro.props-get(--dims --faint --label-font-size); 116 font-size: fn.dim(--faint --label-font-size);
113 font-weight: 500; 117 font-weight: 500;
114 } 118 }
115 } 119 }