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