summaryrefslogtreecommitdiffstats
path: root/src/objects/_checkbox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_checkbox.scss')
-rw-r--r--src/objects/_checkbox.scss238
1 files changed, 238 insertions, 0 deletions
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}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 02:29:39 +0000