diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/index.scss | 2 | ||||
-rw-r--r-- | src/objects/_button.scss | 11 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 238 | ||||
-rw-r--r-- | src/objects/_radio.scss | 56 | ||||
-rw-r--r-- | src/objects/_switch.scss | 217 |
5 files changed, 496 insertions, 28 deletions
diff --git a/src/index.scss b/src/index.scss index faa053e..c945321 100644 --- a/src/index.scss +++ b/src/index.scss | |||
@@ -13,6 +13,8 @@ | |||
13 | @import 'objects/text-field'; | 13 | @import 'objects/text-field'; |
14 | @import 'objects/field-label'; | 14 | @import 'objects/field-label'; |
15 | @import 'objects/radio'; | 15 | @import 'objects/radio'; |
16 | @import 'objects/checkbox'; | ||
17 | @import 'objects/switch'; | ||
16 | 18 | ||
17 | :root { | 19 | :root { |
18 | @include iro.props-assign; | 20 | @include iro.props-assign; |
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 5da1fbd..3932575 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -55,7 +55,7 @@ | |||
55 | --accent: ( | 55 | --accent: ( |
56 | --bg: iro.props-get(--colors --accent --primary, $global: true), | 56 | --bg: iro.props-get(--colors --accent --primary, $global: true), |
57 | --label: iro.props-get(--colors --accent --primary-fg, $global: true), | 57 | --label: iro.props-get(--colors --accent --primary-fg, $global: true), |
58 | --outline-label: iro.props-get(--colors --accent --primary-lo2, $global: true), | 58 | --outline-label: iro.props-get(--colors --accent --primary-lo, $global: true), |
59 | --shadow: 0 0 0 0 transparent, | 59 | --shadow: 0 0 0 0 transparent, |
60 | 60 | ||
61 | --hover: ( | 61 | --hover: ( |
@@ -130,12 +130,9 @@ | |||
130 | 130 | ||
131 | @include button-variant('secondary'); | 131 | @include button-variant('secondary'); |
132 | 132 | ||
133 | @each $mod in ('accent' 'primary' 'secondary') { | 133 | @each $mod in ('accent' 'primary') { |
134 | @if $mod != 'secondary' { | 134 | @include iro.bem-modifier($mod) { |
135 | @include iro.bem-modifier($mod) { | 135 | @include button-variant($mod); |
136 | // sass-lint:disable-block function-name-format | ||
137 | @include button-variant($mod); | ||
138 | } | ||
139 | } | 136 | } |
140 | } | 137 | } |
141 | 138 | ||
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss new file mode 100644 index 0000000..606b717 --- /dev/null +++ b/src/objects/_checkbox.scss | |||
@@ -0,0 +1,238 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | |||
3 | @include iro.props-namespace('checkbox') { | ||
4 | @include iro.props-store(( | ||
5 | --dims: ( | ||
6 | --size: iro.fn-px-to-rem(14px), | ||
7 | --label-gap: .6rem, | ||
8 | --border-width: iro.props-get(--dims --border-width --medium, $global: true), | ||
9 | --padding-x: .3rem, | ||
10 | --padding-y: .3rem, | ||
11 | --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), | ||
12 | ), | ||
13 | --colors: ( | ||
14 | --box-border: iro.props-get(--colors --fg-hi, $global: true), | ||
15 | --box-bg: iro.props-get(--colors --bg-hi, $global: true), | ||
16 | |||
17 | --hover: ( | ||
18 | --label: iro.props-get(--colors --fg-lo, $global: true), | ||
19 | --box-border: iro.props-get(--colors --fg, $global: true), | ||
20 | ), | ||
21 | --accent: ( | ||
22 | --box-border: iro.props-get(--colors --accent --primary, $global: true), | ||
23 | |||
24 | --hover: ( | ||
25 | --box-border: iro.props-get(--colors --accent --primary-lo, $global: true), | ||
26 | ), | ||
27 | ), | ||
28 | --key-focus: ( | ||
29 | --label: iro.props-get(--colors --focus --text, $global: true), | ||
30 | --box-border: iro.props-get(--colors --focus --fill, $global: true), | ||
31 | --shadow: iro.props-get(--colors --focus --shadow, $global: true), | ||
32 | ), | ||
33 | --disabled: ( | ||
34 | --label: iro.props-get(--colors --fg-hi3, $global: true), | ||
35 | --box-border: iro.props-get(--colors --obj-lo, $global: true), | ||
36 | --box-bg: iro.props-get(--colors --bg-hi, $global: true), | ||
37 | ) | ||
38 | ), | ||
39 | )); | ||
40 | |||
41 | @include iro.bem-object(iro.props-namespace()) { | ||
42 | display: inline-flex; | ||
43 | position: relative; | ||
44 | align-items: flex-start; | ||
45 | margin-right: calc(-1 * #{iro.props-get(--dims --padding-x)} + #{iro.props-get(--dims --margin-right)}); | ||
46 | margin-left: calc(-1 * #{iro.props-get(--dims --padding-x)}); | ||
47 | padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values | ||
48 | |||
49 | @include iro.bem-elem('box') { | ||
50 | display: block; | ||
51 | position: relative; | ||
52 | flex: 0 0 auto; | ||
53 | width: iro.props-get(--dims --size); | ||
54 | height: iro.props-get(--dims --size); | ||
55 | margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --size)})); | ||
56 | border-radius: iro.props-get(--dims --border-width); | ||
57 | background-color: iro.props-get(--colors --box-border); | ||
58 | |||
59 | &::before, | ||
60 | &::after { | ||
61 | content: ''; | ||
62 | display: block; | ||
63 | position: absolute; | ||
64 | } | ||
65 | |||
66 | &::before { | ||
67 | z-index: 2; | ||
68 | top: iro.props-get(--dims --border-width); | ||
69 | left: iro.props-get(--dims --border-width); | ||
70 | width: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width)); | ||
71 | height: calc(iro.props-get(--dims --size) - 2 * iro.props-get(--dims --border-width)); | ||
72 | transition: transform .2s ease; | ||
73 | background-color: iro.props-get(--colors --box-bg); | ||
74 | } | ||
75 | |||
76 | &::after { | ||
77 | z-index: 3; | ||
78 | top: calc(.5 * #{iro.props-get(--dims --size)} - 1px); | ||
79 | left: calc(1.5 * #{iro.props-get(--dims --border-width)}); | ||
80 | box-sizing: border-box; | ||
81 | width: calc(iro.props-get(--dims --size) - 3 * iro.props-get(--dims --border-width)); | ||
82 | height: 0; | ||
83 | transform: scale(0); | ||
84 | transition: transform .2s ease; | ||
85 | border-width: 0 2px 2px 0; | ||
86 | border-style: solid; | ||
87 | border-radius: 2px; | ||
88 | border-color: iro.props-get(--colors --box-bg); | ||
89 | } | ||
90 | } | ||
91 | |||
92 | @include iro.bem-elem('check-icon') { | ||
93 | display: block; | ||
94 | position: absolute; | ||
95 | z-index: 2; | ||
96 | top: calc(1 * iro.props-get(--dims --border-width)); | ||
97 | left: calc(1 * iro.props-get(--dims --border-width)); | ||
98 | width: calc(100% - 2 * iro.props-get(--dims --border-width)); | ||
99 | height: calc(100% - 2 * iro.props-get(--dims --border-width)); | ||
100 | transform: scale(0); | ||
101 | transform-origin: 40% 90%; | ||
102 | transition: transform .2s ease; | ||
103 | stroke-width: iro.fn-px-to-rem(3px); | ||
104 | color: iro.props-get(--colors --box-bg); | ||
105 | } | ||
106 | |||
107 | @include iro.bem-elem('label') { | ||
108 | margin-left: iro.props-get(--dims --label-gap); | ||
109 | } | ||
110 | |||
111 | @include iro.bem-elem('native') { | ||
112 | position: absolute; | ||
113 | top: 0; | ||
114 | left: 0; | ||
115 | width: 100%; | ||
116 | height: 100%; | ||
117 | margin: 0; | ||
118 | padding: 0; | ||
119 | overflow: hidden; | ||
120 | opacity: .0001; | ||
121 | |||
122 | &:hover { | ||
123 | @include iro.bem-sibling-elem('label') { | ||
124 | color: iro.props-get(--colors --hover --label); | ||
125 | } | ||
126 | |||
127 | @include iro.bem-sibling-elem('box') { | ||
128 | background-color: iro.props-get(--colors --hover --box-border); | ||
129 | } | ||
130 | } | ||
131 | |||
132 | &:checked { | ||
133 | @include iro.bem-sibling-elem('box') { | ||
134 | &::before { | ||
135 | transform: scale(0); | ||
136 | } | ||
137 | |||
138 | @include iro.bem-elem('check-icon') { | ||
139 | transform: scale(1); | ||
140 | } | ||
141 | } | ||
142 | } | ||
143 | |||
144 | &:indeterminate { | ||
145 | @include iro.bem-sibling-elem('box') { | ||
146 | &::before { | ||
147 | transform: scale(0); | ||
148 | } | ||
149 | |||
150 | &::after { | ||
151 | transform: scale(1); | ||
152 | } | ||
153 | |||
154 | @include iro.bem-elem('check-icon') { | ||
155 | transform: scale(0); | ||
156 | } | ||
157 | } | ||
158 | } | ||
159 | |||
160 | &:disabled { | ||
161 | @include iro.bem-sibling-elem('label') { | ||
162 | color: iro.props-get(--colors --disabled --label); | ||
163 | } | ||
164 | |||
165 | @include iro.bem-sibling-elem('box') { | ||
166 | background-color: iro.props-get(--colors --disabled --box-border); | ||
167 | |||
168 | &::before { | ||
169 | background-color: iro.props-get(--colors --disabled --box-bg); | ||
170 | } | ||
171 | } | ||
172 | } | ||
173 | |||
174 | @include iro.bem-at-theme('keyboard') { | ||
175 | &:focus { | ||
176 | @include iro.bem-sibling-elem('label') { | ||
177 | color: iro.props-get(--colors --key-focus --label); | ||
178 | } | ||
179 | |||
180 | @include iro.bem-sibling-elem('box') { | ||
181 | background-color: iro.props-get(--colors --key-focus --box-border); | ||
182 | box-shadow: iro.props-get(--colors --key-focus --shadow); | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | } | ||
187 | |||
188 | @include iro.bem-modifier('accent') { | ||
189 | @include iro.bem-elem('native') { | ||
190 | &:checked { | ||
191 | @include iro.bem-sibling-elem('box') { | ||
192 | background-color: iro.props-get(--colors --accent --box-border); | ||
193 | } | ||
194 | |||
195 | &:hover { | ||
196 | @include iro.bem-sibling-elem('box') { | ||
197 | background-color: iro.props-get(--colors --accent --hover --box-border); | ||
198 | } | ||
199 | } | ||
200 | } | ||
201 | |||
202 | &:indeterminate { | ||
203 | @include iro.bem-sibling-elem('box') { | ||
204 | background-color: iro.props-get(--colors --accent --box-border); | ||
205 | } | ||
206 | |||
207 | &:hover { | ||
208 | @include iro.bem-sibling-elem('box') { | ||
209 | background-color: iro.props-get(--colors --accent --hover --box-border); | ||
210 | } | ||
211 | } | ||
212 | } | ||
213 | |||
214 | &:disabled { | ||
215 | @include iro.bem-sibling-elem('box') { | ||
216 | background-color: iro.props-get(--colors --disabled --box-border); | ||
217 | |||
218 | &::before { | ||
219 | background-color: iro.props-get(--colors --disabled --box-bg); | ||
220 | } | ||
221 | } | ||
222 | |||
223 | &:checked { | ||
224 | @include iro.bem-sibling-elem('box') { | ||
225 | background-color: iro.props-get(--colors --disabled --box-border); | ||
226 | } | ||
227 | } | ||
228 | |||
229 | &:indeterminate { | ||
230 | @include iro.bem-sibling-elem('box') { | ||
231 | background-color: iro.props-get(--colors --disabled --box-border); | ||
232 | } | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | } | ||
237 | } | ||
238 | } | ||
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 635a260..bb32cdf 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
@@ -11,14 +11,14 @@ | |||
11 | --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), | 11 | --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), |
12 | ), | 12 | ), |
13 | --colors: ( | 13 | --colors: ( |
14 | --circle-border: iro.props-get(--colors --fg-hi2, $global: true), | 14 | --circle-border: iro.props-get(--colors --fg-hi, $global: true), |
15 | --circle-bg: iro.props-get(--colors --bg-hi, $global: true), | 15 | --circle-bg: iro.props-get(--colors --bg-hi, $global: true), |
16 | 16 | ||
17 | --hover: ( | 17 | --hover: ( |
18 | --label: iro.props-get(--colors --fg-lo, $global: true), | 18 | --label: iro.props-get(--colors --fg-lo, $global: true), |
19 | --circle-border: iro.props-get(--colors --fg-hi, $global: true), | 19 | --circle-border: iro.props-get(--colors --fg, $global: true), |
20 | ), | 20 | ), |
21 | --active: ( | 21 | --accent: ( |
22 | --circle-border: iro.props-get(--colors --accent --primary, $global: true), | 22 | --circle-border: iro.props-get(--colors --accent --primary, $global: true), |
23 | 23 | ||
24 | --hover: ( | 24 | --hover: ( |
@@ -34,10 +34,6 @@ | |||
34 | --label: iro.props-get(--colors --fg-hi3, $global: true), | 34 | --label: iro.props-get(--colors --fg-hi3, $global: true), |
35 | --circle-border: iro.props-get(--colors --obj-lo, $global: true), | 35 | --circle-border: iro.props-get(--colors --obj-lo, $global: true), |
36 | --circle-bg: iro.props-get(--colors --bg-hi, $global: true), | 36 | --circle-bg: iro.props-get(--colors --bg-hi, $global: true), |
37 | |||
38 | --active: ( | ||
39 | --circle-border: iro.props-get(--colors --obj-lo, $global: true), | ||
40 | ), | ||
41 | ) | 37 | ) |
42 | ), | 38 | ), |
43 | )); | 39 | )); |
@@ -104,18 +100,10 @@ | |||
104 | 100 | ||
105 | &:checked { | 101 | &:checked { |
106 | @include iro.bem-sibling-elem('circle') { | 102 | @include iro.bem-sibling-elem('circle') { |
107 | background-color: iro.props-get(--colors --active --circle-border); | ||
108 | |||
109 | &::after { | 103 | &::after { |
110 | transform: translateY(-50%) scale(.44); | 104 | transform: translateY(-50%) scale(.44); |
111 | } | 105 | } |
112 | } | 106 | } |
113 | |||
114 | &:hover { | ||
115 | @include iro.bem-sibling-elem('circle') { | ||
116 | background-color: iro.props-get(--colors --active --hover --circle-border); | ||
117 | } | ||
118 | } | ||
119 | } | 107 | } |
120 | 108 | ||
121 | &:disabled { | 109 | &:disabled { |
@@ -130,12 +118,6 @@ | |||
130 | background-color: iro.props-get(--colors --disabled --circle-bg); | 118 | background-color: iro.props-get(--colors --disabled --circle-bg); |
131 | } | 119 | } |
132 | } | 120 | } |
133 | |||
134 | &:checked { | ||
135 | @include iro.bem-sibling-elem('circle') { | ||
136 | background-color: iro.props-get(--colors --disabled --active --circle-border); | ||
137 | } | ||
138 | } | ||
139 | } | 121 | } |
140 | 122 | ||
141 | @include iro.bem-at-theme('keyboard') { | 123 | @include iro.bem-at-theme('keyboard') { |
@@ -151,5 +133,37 @@ | |||
151 | } | 133 | } |
152 | } | 134 | } |
153 | } | 135 | } |
136 | |||
137 | @include iro.bem-modifier('accent') { | ||
138 | @include iro.bem-elem('native') { | ||
139 | &:checked { | ||
140 | @include iro.bem-sibling-elem('circle') { | ||
141 | background-color: iro.props-get(--colors --accent --circle-border); | ||
142 | } | ||
143 | |||
144 | &:hover { | ||
145 | @include iro.bem-sibling-elem('circle') { | ||
146 | background-color: iro.props-get(--colors --accent --hover --circle-border); | ||
147 | } | ||
148 | } | ||
149 | } | ||
150 | |||
151 | &:disabled { | ||
152 | @include iro.bem-sibling-elem('circle') { | ||
153 | background-color: iro.props-get(--colors --disabled --circle-border); | ||
154 | |||
155 | &::after { | ||
156 | background-color: iro.props-get(--colors --disabled --circle-bg); | ||
157 | } | ||
158 | } | ||
159 | |||
160 | &:checked { | ||
161 | @include iro.bem-sibling-elem('circle') { | ||
162 | background-color: iro.props-get(--colors --disabled --circle-border); | ||
163 | } | ||
164 | } | ||
165 | } | ||
166 | } | ||
167 | } | ||
154 | } | 168 | } |
155 | } | 169 | } |
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss new file mode 100644 index 0000000..25125da --- /dev/null +++ b/src/objects/_switch.scss | |||
@@ -0,0 +1,217 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | |||
3 | @include iro.props-namespace('switch') { | ||
4 | @include iro.props-store(( | ||
5 | --dims: ( | ||
6 | --width: iro.fn-px-to-rem(26px), | ||
7 | --height: iro.fn-px-to-rem(15px), | ||
8 | --label-gap: .6rem, | ||
9 | --border-width: iro.props-get(--dims --border-width --medium, $global: true), | ||
10 | --padding-x: .3rem, | ||
11 | --padding-y: .3rem, | ||
12 | --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), | ||
13 | ), | ||
14 | --colors: ( | ||
15 | --track-bg: iro.props-get(--colors --obj, $global: true), | ||
16 | --handle-border: iro.props-get(--colors --fg-hi, $global: true), | ||
17 | --handle-bg: iro.props-get(--colors --bg-hi, $global: true), | ||
18 | |||
19 | --hover: ( | ||
20 | --label: iro.props-get(--colors --fg-lo, $global: true), | ||
21 | --handle-border: iro.props-get(--colors --fg, $global: true), | ||
22 | ), | ||
23 | --accent: ( | ||
24 | --handle-border: iro.props-get(--colors --accent --primary, $global: true), | ||
25 | |||
26 | --hover: ( | ||
27 | --handle-border: iro.props-get(--colors --accent --primary-lo, $global: true), | ||
28 | ), | ||
29 | ), | ||
30 | --key-focus: ( | ||
31 | --label: iro.props-get(--colors --focus --text, $global: true), | ||
32 | --track-bg: iro.props-get(--colors --focus --fill, $global: true), | ||
33 | --handle-border: iro.props-get(--colors --focus --fill, $global: true), | ||
34 | --shadow: iro.props-get(--colors --focus --shadow, $global: true), | ||
35 | ), | ||
36 | --disabled: ( | ||
37 | --label: iro.props-get(--colors --fg-hi3, $global: true), | ||
38 | --track-bg: iro.props-get(--colors --obj, $global: true), | ||
39 | --handle-border: iro.props-get(--colors --obj-lo, $global: true), | ||
40 | --handle-bg: iro.props-get(--colors --bg-hi, $global: true), | ||
41 | ) | ||
42 | ), | ||
43 | )); | ||
44 | |||
45 | @include iro.bem-object(iro.props-namespace()) { | ||
46 | display: inline-flex; | ||
47 | position: relative; | ||
48 | align-items: flex-start; | ||
49 | margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); | ||
50 | margin-left: calc(-1 * iro.props-get(--dims --padding-x)); | ||
51 | padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); // sass-lint:disable-line shorthand-values | ||
52 | |||
53 | @include iro.bem-elem('indicator') { | ||
54 | display: block; | ||
55 | position: relative; | ||
56 | box-sizing: border-box; | ||
57 | flex: 0 0 auto; | ||
58 | width: iro.props-get(--dims --width); | ||
59 | height: iro.props-get(--dims --height); | ||
60 | margin-top: calc(.5 * ($line-height * 1em - iro.props-get(--dims --height))); | ||
61 | transition: background-color .2s ease; | ||
62 | border-radius: 2em; | ||
63 | background-color: iro.props-get(--colors --track-bg); | ||
64 | |||
65 | &::after { | ||
66 | content: ''; | ||
67 | display: block; | ||
68 | position: absolute; | ||
69 | z-index: 10; | ||
70 | top: 50%; | ||
71 | left: 0; | ||
72 | width: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); | ||
73 | height: calc(iro.props-get(--dims --height) - 2 * iro.props-get(--dims --border-width)); | ||
74 | transform: translateY(-50%); | ||
75 | transition: left .2s ease; | ||
76 | border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --handle-border); | ||
77 | border-radius: iro.props-get(--dims --width); | ||
78 | background-color: iro.props-get(--colors --handle-bg); | ||
79 | } | ||
80 | } | ||
81 | |||
82 | @include iro.bem-elem('label') { | ||
83 | margin-left: iro.props-get(--dims --label-gap); | ||
84 | } | ||
85 | |||
86 | @include iro.bem-elem('native') { | ||
87 | position: absolute; | ||
88 | top: 0; | ||
89 | left: 0; | ||
90 | width: 100%; | ||
91 | height: 100%; | ||
92 | margin: 0; | ||
93 | padding: 0; | ||
94 | overflow: hidden; | ||
95 | opacity: .0001; | ||
96 | |||
97 | &:hover { | ||
98 | @include iro.bem-sibling-elem('label') { | ||
99 | color: iro.props-get(--colors --hover --label); | ||
100 | } | ||
101 | |||
102 | @include iro.bem-sibling-elem('indicator') { | ||
103 | &::after { | ||
104 | border-color: iro.props-get(--colors --hover --handle-border); | ||
105 | } | ||
106 | } | ||
107 | } | ||
108 | |||
109 | &:checked { | ||
110 | @include iro.bem-sibling-elem('indicator') { | ||
111 | background-color: iro.props-get(--colors --handle-border); | ||
112 | |||
113 | &::after { | ||
114 | left: calc(#{iro.props-get(--dims --width)} - #{iro.props-get(--dims --height)} + .5px); | ||
115 | border-color: iro.props-get(--colors --handle-border); | ||
116 | } | ||
117 | } | ||
118 | |||
119 | &:hover { | ||
120 | @include iro.bem-sibling-elem('indicator') { | ||
121 | background-color: iro.props-get(--colors --hover --handle-border); | ||
122 | |||
123 | &::after { | ||
124 | border-color: iro.props-get(--colors --hover --handle-border); | ||
125 | } | ||
126 | } | ||
127 | } | ||
128 | } | ||
129 | |||
130 | &:disabled { | ||
131 | @include iro.bem-sibling-elem('label') { | ||
132 | color: iro.props-get(--colors --disabled --label); | ||
133 | } | ||
134 | |||
135 | @include iro.bem-sibling-elem('indicator') { | ||
136 | background-color: iro.props-get(--colors --disabled --track-bg); | ||
137 | |||
138 | &::after { | ||
139 | border-color: iro.props-get(--colors --disabled --handle-border); | ||
140 | background-color: iro.props-get(--colors --disabled --handle-bg); | ||
141 | } | ||
142 | } | ||
143 | |||
144 | &:checked { | ||
145 | @include iro.bem-sibling-elem('indicator') { | ||
146 | background-color: iro.props-get(--colors --disabled --handle-border); | ||
147 | |||
148 | &::after { | ||
149 | border-color: iro.props-get(--colors --disabled --handle-border); | ||
150 | } | ||
151 | } | ||
152 | } | ||
153 | } | ||
154 | |||
155 | @include iro.bem-at-theme('keyboard') { | ||
156 | &:focus { | ||
157 | @include iro.bem-sibling-elem('label') { | ||
158 | color: iro.props-get(--colors --key-focus --label); | ||
159 | } | ||
160 | |||
161 | @include iro.bem-sibling-elem('indicator') { | ||
162 | &::after { | ||
163 | border-color: iro.props-get(--colors --key-focus --handle-border); | ||
164 | box-shadow: iro.props-get(--colors --key-focus --shadow); | ||
165 | } | ||
166 | } | ||
167 | |||
168 | &:checked { | ||
169 | @include iro.bem-sibling-elem('indicator') { | ||
170 | background-color: iro.props-get(--colors --key-focus --track-bg); | ||
171 | } | ||
172 | } | ||
173 | } | ||
174 | } | ||
175 | } | ||
176 | |||
177 | @include iro.bem-modifier('accent') { | ||
178 | @include iro.bem-elem('native') { | ||
179 | &:checked { | ||
180 | @include iro.bem-sibling-elem('indicator') { | ||
181 | background-color: iro.props-get(--colors --accent --handle-border); | ||
182 | |||
183 | &::after { | ||
184 | border-color: iro.props-get(--colors --accent --handle-border); | ||
185 | } | ||
186 | } | ||
187 | |||
188 | &:hover { | ||
189 | @include iro.bem-sibling-elem('indicator') { | ||
190 | background-color: iro.props-get(--colors --accent --hover --handle-border); | ||
191 | |||
192 | &::after { | ||
193 | border-color: iro.props-get(--colors --accent --hover --handle-border); | ||
194 | } | ||
195 | } | ||
196 | } | ||
197 | } | ||
198 | |||
199 | &:disabled { | ||
200 | @include iro.bem-sibling-elem('label') { | ||
201 | color: iro.props-get(--colors --disabled --label); | ||
202 | } | ||
203 | |||
204 | &:checked { | ||
205 | @include iro.bem-sibling-elem('indicator') { | ||
206 | background-color: iro.props-get(--colors --disabled --handle-border); | ||
207 | |||
208 | &::after { | ||
209 | border-color: iro.props-get(--colors --disabled --handle-border); | ||
210 | } | ||
211 | } | ||
212 | } | ||
213 | } | ||
214 | } | ||
215 | } | ||
216 | } | ||
217 | } | ||