diff options
Diffstat (limited to 'src/objects/_checkbox.scss')
-rw-r--r-- | src/objects/_checkbox.scss | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss new file mode 100644 index 0000000..8e9e64c --- /dev/null +++ b/src/objects/_checkbox.scss | |||
@@ -0,0 +1,271 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('checkbox') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --size: fn.global-dim(--size --175), | ||
8 | --label-gap: fn.global-dim(--size --125), | ||
9 | --border: fn.global-dim(--border --medium), | ||
10 | --pad-i: fn.global-dim(--size --65), | ||
11 | --pad-b: fn.global-dim(--size --65), | ||
12 | --rounding: fn.global-dim(--rounding), | ||
13 | --spacing-sibling: fn.global-dim(--size --300), | ||
14 | ), | ||
15 | --colors: ( | ||
16 | --box-border: fn.global-color(--text-mute), | ||
17 | --box-bg: fn.global-color(--base --75), | ||
18 | |||
19 | --hover: ( | ||
20 | --label: fn.global-color(--heading), | ||
21 | --box-border: fn.global-color(--text), | ||
22 | ), | ||
23 | --accent: ( | ||
24 | --box-border: fn.global-color(--accent --900), | ||
25 | |||
26 | --hover: ( | ||
27 | --box-border: fn.global-color(--accent --1000), | ||
28 | ), | ||
29 | ), | ||
30 | --key-focus: ( | ||
31 | --bg: fn.global-color(--focus-static --400), | ||
32 | --label: fn.global-color(--focus-static --400-text), | ||
33 | --box-border: fn.global-color(--focus-static --1000), | ||
34 | --box-bg: fn.global-color(--focus-static --1000-text), | ||
35 | ), | ||
36 | --disabled: ( | ||
37 | --label: fn.global-color(--text-disabled), | ||
38 | --box-border: fn.global-color(--border-strong), | ||
39 | --box-bg: fn.global-color(--base --75), | ||
40 | ) | ||
41 | ), | ||
42 | )); | ||
43 | |||
44 | @include iro.bem-object(iro.props-namespace()) { | ||
45 | display: inline-flex; | ||
46 | position: relative; | ||
47 | align-items: flex-start; | ||
48 | margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b)); | ||
49 | padding-block: fn.dim(--pad-b); | ||
50 | padding-inline: fn.dim(--pad-i); | ||
51 | |||
52 | @include iro.bem-elem('bg') { | ||
53 | display: block; | ||
54 | position: absolute; | ||
55 | z-index: -1; | ||
56 | inset-block: 0; | ||
57 | inset-inline: 0; | ||
58 | border-radius: fn.dim(--rounding); | ||
59 | pointer-events: none; | ||
60 | } | ||
61 | |||
62 | @include iro.bem-elem('box') { | ||
63 | display: block; | ||
64 | position: relative; | ||
65 | flex: 0 0 auto; | ||
66 | inline-size: fn.dim(--size); | ||
67 | block-size: fn.dim(--size); | ||
68 | margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); | ||
69 | border-radius: fn.dim(--border); | ||
70 | background-color: fn.color(--box-border); | ||
71 | |||
72 | &::before, | ||
73 | &::after { | ||
74 | content: ''; | ||
75 | display: block; | ||
76 | position: absolute; | ||
77 | } | ||
78 | |||
79 | &::before { | ||
80 | z-index: 2; | ||
81 | inset-block-start: fn.dim(--border); | ||
82 | inset-inline-start: fn.dim(--border); | ||
83 | inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | ||
84 | block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); | ||
85 | transition: transform .2s ease; | ||
86 | background-color: fn.color(--box-bg); | ||
87 | } | ||
88 | |||
89 | &::after { | ||
90 | z-index: 3; | ||
91 | inset-block-start: calc(.5 * fn.dim(--size) - 1px); | ||
92 | inset-inline-start: calc(1.5 * fn.dim(--border)); | ||
93 | box-sizing: border-box; | ||
94 | inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); | ||
95 | block-size: 0; | ||
96 | transform: scale(0); | ||
97 | transition: transform .2s ease; | ||
98 | border-block-width: 0 2px; | ||
99 | border-inline-width: 0 2px; | ||
100 | border-style: solid; | ||
101 | border-radius: 2px; | ||
102 | border-color: fn.color(--box-bg); | ||
103 | } | ||
104 | } | ||
105 | |||
106 | @include iro.bem-elem('check-icon') { | ||
107 | display: block; | ||
108 | position: absolute; | ||
109 | z-index: 2; | ||
110 | inset-block-start: calc(1 * fn.dim(--border)); | ||
111 | inset-inline-start: calc(1 * fn.dim(--border)); | ||
112 | inline-size: calc(100% - 2 * fn.dim(--border)); | ||
113 | block-size: calc(100% - 2 * fn.dim(--border)); | ||
114 | margin: 0; | ||
115 | transform: scale(0); | ||
116 | transform-origin: 40% 90%; | ||
117 | transition: transform .2s ease; | ||
118 | stroke-width: iro.fn-px-to-rem(3px); | ||
119 | color: fn.color(--box-bg); | ||
120 | } | ||
121 | |||
122 | @include iro.bem-elem('label') { | ||
123 | align-self: baseline; | ||
124 | margin-left: fn.dim(--label-gap); | ||
125 | } | ||
126 | |||
127 | @include iro.bem-elem('native') { | ||
128 | position: absolute; | ||
129 | inset-block-start: 0; | ||
130 | inset-inline-start: 0; | ||
131 | inline-size: 100%; | ||
132 | block-size: 100%; | ||
133 | margin: 0; | ||
134 | padding: 0; | ||
135 | overflow: hidden; | ||
136 | opacity: .0001; | ||
137 | |||
138 | &:hover { | ||
139 | @include iro.bem-sibling-elem('label') { | ||
140 | color: fn.color(--hover --label); | ||
141 | } | ||
142 | |||
143 | @include iro.bem-sibling-elem('box') { | ||
144 | background-color: fn.color(--hover --box-border); | ||
145 | } | ||
146 | } | ||
147 | |||
148 | &:checked { | ||
149 | @include iro.bem-sibling-elem('box') { | ||
150 | &::before { | ||
151 | transform: scale(0); | ||
152 | } | ||
153 | |||
154 | @include iro.bem-elem('check-icon') { | ||
155 | transform: scale(1); | ||
156 | } | ||
157 | } | ||
158 | } | ||
159 | |||
160 | &:indeterminate { | ||
161 | @include iro.bem-sibling-elem('box') { | ||
162 | &::before { | ||
163 | transform: scale(0); | ||
164 | } | ||
165 | |||
166 | &::after { | ||
167 | transform: scale(1); | ||
168 | } | ||
169 | |||
170 | @include iro.bem-elem('check-icon') { | ||
171 | transform: scale(0); | ||
172 | } | ||
173 | } | ||
174 | } | ||
175 | |||
176 | &:disabled { | ||
177 | @include iro.bem-sibling-elem('label') { | ||
178 | color: fn.color(--disabled --label); | ||
179 | } | ||
180 | |||
181 | @include iro.bem-sibling-elem('box') { | ||
182 | background-color: fn.color(--disabled --box-border); | ||
183 | |||
184 | &::before { | ||
185 | background-color: fn.color(--disabled --box-bg); | ||
186 | } | ||
187 | } | ||
188 | } | ||
189 | |||
190 | &:focus-visible { | ||
191 | @include iro.bem-sibling-elem('bg') { | ||
192 | background-color: fn.color(--key-focus --bg); | ||
193 | } | ||
194 | |||
195 | @include iro.bem-sibling-elem('label') { | ||
196 | color: fn.color(--key-focus --label); | ||
197 | } | ||
198 | |||
199 | @include iro.bem-sibling-elem('box') { | ||
200 | background-color: fn.color(--key-focus --box-border); | ||
201 | |||
202 | &::before { | ||
203 | background-color: fn.color(--key-focus --box-bg); | ||
204 | } | ||
205 | } | ||
206 | } | ||
207 | } | ||
208 | |||
209 | @include iro.bem-modifier('standalone') { | ||
210 | @include iro.bem-elem('box') { | ||
211 | margin-block-start: 0; | ||
212 | } | ||
213 | } | ||
214 | |||
215 | @include iro.bem-modifier('accent') { | ||
216 | @include iro.bem-elem('native') { | ||
217 | &:checked { | ||
218 | @include iro.bem-sibling-elem('box') { | ||
219 | background-color: fn.color(--accent --box-border); | ||
220 | } | ||
221 | |||
222 | &:hover { | ||
223 | @include iro.bem-sibling-elem('box') { | ||
224 | background-color: fn.color(--accent --hover --box-border); | ||
225 | } | ||
226 | } | ||
227 | } | ||
228 | |||
229 | &:indeterminate { | ||
230 | @include iro.bem-sibling-elem('box') { | ||
231 | background-color: fn.color(--accent --box-border); | ||
232 | } | ||
233 | |||
234 | &:hover { | ||
235 | @include iro.bem-sibling-elem('box') { | ||
236 | background-color: fn.color(--accent --hover --box-border); | ||
237 | } | ||
238 | } | ||
239 | } | ||
240 | |||
241 | &:disabled { | ||
242 | @include iro.bem-sibling-elem('box') { | ||
243 | background-color: fn.color(--disabled --box-border); | ||
244 | |||
245 | &::before { | ||
246 | background-color: fn.color(--disabled --box-bg); | ||
247 | } | ||
248 | } | ||
249 | |||
250 | &:checked { | ||
251 | @include iro.bem-sibling-elem('box') { | ||
252 | background-color: fn.color(--disabled --box-border); | ||
253 | } | ||
254 | } | ||
255 | |||
256 | &:indeterminate { | ||
257 | @include iro.bem-sibling-elem('box') { | ||
258 | background-color: fn.color(--disabled --box-border); | ||
259 | } | ||
260 | } | ||
261 | } | ||
262 | |||
263 | &:focus-visible { | ||
264 | @include iro.bem-sibling-elem('box') { | ||
265 | background-color: fn.color(--key-focus --box-border); | ||
266 | } | ||
267 | } | ||
268 | } | ||
269 | } | ||
270 | } | ||
271 | } | ||