diff options
Diffstat (limited to 'src/objects/_rule.scss')
-rw-r--r-- | src/objects/_rule.scss | 66 |
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 | } |