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.scss380
1 files changed, 190 insertions, 190 deletions
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 82dd596..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,223 +9,223 @@
9@use 'checkbox.vars' as vars; 9@use 'checkbox.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('checkbox') { 14 @include bem.object('checkbox') {
15 position: relative; 15 position: relative;
16 display: inline-block; 16 display: inline-block;
17 padding-block: props.get(vars.$pad-b); 17 padding-block: props.get(vars.$pad-b);
18 padding-inline: props.get(vars.$pad-i); 18 padding-inline: props.get(vars.$pad-i);
19 margin-inline: 19 margin-inline:
20 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 20 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
21 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); 21 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
22 22
23 @include bem.elem('box') { 23 @include bem.elem('box') {
24 position: relative; 24 position: relative;
25 display: inline-block; 25 display: inline-block;
26 flex: 0 0 auto; 26 flex: 0 0 auto;
27 inline-size: props.get(vars.$size); 27 inline-size: props.get(vars.$size);
28 block-size: props.get(vars.$size); 28 block-size: props.get(vars.$size);
29 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); 29 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
30 vertical-align: top; 30 vertical-align: top;
31 background-color: props.get(vars.$box-border-color); 31 background-color: props.get(vars.$box-border-color);
32 background-clip: padding-box; 32 background-clip: padding-box;
33 border: props.get(vars.$key-focus--border-offset) solid transparent; 33 border: props.get(vars.$key-focus--border-offset) solid transparent;
34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); 34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
35 35
36 &::before, 36 &::before,
37 &::after { 37 &::after {
38 position: absolute; 38 position: absolute;
39 display: block; 39 display: block;
40 content: ''; 40 content: '';
41 } 41 }
42 42
43 &::before { 43 &::before {
44 inset-block-start: props.get(vars.$border-width); 44 inset-block-start: props.get(vars.$border-width);
45 inset-inline-start: props.get(vars.$border-width); 45 inset-inline-start: props.get(vars.$border-width);
46 z-index: 2; 46 z-index: 2;
47 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); 47 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
48 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); 48 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
49 background-color: props.get(vars.$box-bg-color); 49 background-color: props.get(vars.$box-bg-color);
50 transition: transform .2s ease; 50 transition: transform .2s ease;
51 } 51 }
52 52
53 &::after { 53 &::after {
54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px); 54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px);
55 inset-inline-start: calc(1.5 * props.get(vars.$border-width)); 55 inset-inline-start: calc(1.5 * props.get(vars.$border-width));
56 z-index: 3; 56 z-index: 3;
57 box-sizing: border-box; 57 box-sizing: border-box;
58 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); 58 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
59 block-size: 0; 59 block-size: 0;
60 border-color: props.get(vars.$box-bg-color); 60 border-color: props.get(vars.$box-bg-color);
61 border-style: solid; 61 border-style: solid;
62 border-radius: 2px; 62 border-radius: 2px;
63 transition: transform .2s ease; 63 transform: scale(0);
64 transform: scale(0); 64 transition: transform .2s ease;
65 border-block-width: 0 2px; 65 border-block-width: 0 2px;
66 border-inline-width: 0 2px; 66 border-inline-width: 0 2px;
67 } 67 }
68 } 68 }
69 69
70 @include bem.elem('check-icon') { 70 @include bem.elem('check-icon') {
71 position: absolute; 71 position: absolute;
72 inset-block-start: calc(1 * props.get(vars.$border-width)); 72 inset-block-start: calc(1 * props.get(vars.$border-width));
73 inset-inline-start: calc(1 * props.get(vars.$border-width)); 73 inset-inline-start: calc(1 * props.get(vars.$border-width));
74 z-index: 2; 74 z-index: 2;
75 display: block; 75 display: block;
76 inline-size: calc(100% - 2 * props.get(vars.$border-width)); 76 inline-size: calc(100% - 2 * props.get(vars.$border-width));
77 block-size: calc(100% - 2 * props.get(vars.$border-width)); 77 block-size: calc(100% - 2 * props.get(vars.$border-width));
78 margin: 0; 78 margin: 0;
79 color: props.get(vars.$box-bg-color); 79 color: props.get(vars.$box-bg-color);
80 stroke-width: fn.px-to-rem(3px); 80 stroke-width: fn.px-to-rem(3px);
81 transition: transform .2s ease; 81 transform: scale(0);
82 transform: scale(0); 82 transform-origin: 40% 90%;
83 transform-origin: 40% 90%; 83 transition: transform .2s ease;
84 } 84 }
85 85
86 @include bem.elem('label') { 86 @include bem.elem('label') {
87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); 87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
88 } 88 }
89 89
90 @include bem.elem('native') { 90 @include bem.elem('native') {
91 position: absolute; 91 position: absolute;
92 inset-block-start: 0; 92 inset-block-start: 0;
93 inset-inline-start: 0; 93 inset-inline-start: 0;
94 z-index: -1; 94 z-index: -1;
95 inline-size: 100%; 95 inline-size: 100%;
96 block-size: 100%; 96 block-size: 100%;
97 padding: 0; 97 padding: 0;
98 margin: 0; 98 margin: 0;
99 overflow: hidden; 99 overflow: hidden;
100 appearance: none; 100 appearance: none;
101 border-radius: props.get(vars.$rounding); 101 border-radius: props.get(vars.$rounding);
102 102
103 &:hover, 103 &:hover,
104 &:focus-visible { 104 &:focus-visible {
105 @include bem.sibling-elem('label') { 105 @include bem.sibling-elem('label') {
106 color: props.get(vars.$hover--label-color); 106 color: props.get(vars.$hover--label-color);
107 } 107 }
108 108
109 @include bem.sibling-elem('box') { 109 @include bem.sibling-elem('box') {
110 background-color: props.get(vars.$hover--box-border-color); 110 background-color: props.get(vars.$hover--box-border-color);
111 } 111 }
112 } 112 }
113 113
114 &:checked { 114 &:checked {
115 @include bem.sibling-elem('box') { 115 @include bem.sibling-elem('box') {
116 &::before { 116 &::before {
117 transform: scale(0); 117 transform: scale(0);
118 } 118 }
119 119
120 @include bem.elem('check-icon') { 120 @include bem.elem('check-icon') {
121 transform: scale(1); 121 transform: scale(1);
122 } 122 }
123 } 123 }
124 } 124 }
125 125
126 &:indeterminate { 126 &:indeterminate {
127 @include bem.sibling-elem('box') { 127 @include bem.sibling-elem('box') {
128 &::before { 128 &::before {
129 transform: scale(0); 129 transform: scale(0);
130 } 130 }
131 131
132 &::after { 132 &::after {
133 transform: scale(1); 133 transform: scale(1);
134 } 134 }
135 135
136 @include bem.elem('check-icon') { 136 @include bem.elem('check-icon') {
137 transform: scale(0); 137 transform: scale(0);
138 } 138 }
139 } 139 }
140 } 140 }
141 141
142 &:disabled { 142 &:disabled {
143 @include bem.sibling-elem('label') { 143 @include bem.sibling-elem('label') {
144 color: props.get(vars.$disabled--label-color); 144 color: props.get(vars.$disabled--label-color);
145 } 145 }
146 146
147 @include bem.sibling-elem('box') { 147 @include bem.sibling-elem('box') {
148 background-color: props.get(vars.$disabled--box-border-color); 148 background-color: props.get(vars.$disabled--box-border-color);
149 149
150 &::before { 150 &::before {
151 background-color: props.get(vars.$disabled--box-bg-color); 151 background-color: props.get(vars.$disabled--box-bg-color);
152 } 152 }
153 } 153 }
154 } 154 }
155 155
156 &:focus-visible { 156 &:focus-visible {
157 @include bem.sibling-elem('label') { 157 @include bem.sibling-elem('label') {
158 color: props.get(vars.$key-focus--label-color); 158 color: props.get(vars.$key-focus--label-color);
159 } 159 }
160 160
161 @include bem.sibling-elem('box') { 161 @include bem.sibling-elem('box') {
162 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 162 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
163 box-shadow: 163 box-shadow:
164 0 164 0
165 0 165 0
166 0 166 0
167 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 167 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
168 props.get(vars.$key-focus--outline-color); 168 props.get(vars.$key-focus--outline-color);
169 } 169 }
170 } 170 }
171 } 171 }
172 172
173 @include bem.modifier('standalone') { 173 @include bem.modifier('standalone') {
174 @include bem.elem('box') { 174 @include bem.elem('box') {
175 margin-block-start: 0; 175 margin-block-start: 0;
176 } 176 }
177 } 177 }
178 178
179 @include bem.modifier('accent') { 179 @include bem.modifier('accent') {
180 @include bem.elem('native') { 180 @include bem.elem('native') {
181 &:checked { 181 &:checked {
182 @include bem.sibling-elem('box') { 182 @include bem.sibling-elem('box') {
183 background-color: props.get(vars.$accent--box-border-color); 183 background-color: props.get(vars.$accent--box-border-color);
184 } 184 }
185 185
186 &:hover, 186 &:hover,
187 &:focus-visible { 187 &:focus-visible {
188 @include bem.sibling-elem('box') { 188 @include bem.sibling-elem('box') {
189 background-color: props.get(vars.$accent--hover--box-border-color); 189 background-color: props.get(vars.$accent--hover--box-border-color);
190 } 190 }
191 } 191 }
192 } 192 }
193 193
194 &:indeterminate { 194 &:indeterminate {
195 @include bem.sibling-elem('box') { 195 @include bem.sibling-elem('box') {
196 background-color: props.get(vars.$accent--box-border-color); 196 background-color: props.get(vars.$accent--box-border-color);
197 } 197 }
198 198
199 &:hover, 199 &:hover,
200 &:focus-visible { 200 &:focus-visible {
201 @include bem.sibling-elem('box') { 201 @include bem.sibling-elem('box') {
202 background-color: props.get(vars.$accent--hover--box-border-color); 202 background-color: props.get(vars.$accent--hover--box-border-color);
203 } 203 }
204 } 204 }
205 } 205 }
206 206
207 &:disabled { 207 &:disabled {
208 @include bem.sibling-elem('box') { 208 @include bem.sibling-elem('box') {
209 background-color: props.get(vars.$disabled--box-border-color); 209 background-color: props.get(vars.$disabled--box-border-color);
210 210
211 &::before { 211 &::before {
212 background-color: props.get(vars.$disabled--box-bg-color); 212 background-color: props.get(vars.$disabled--box-bg-color);
213 } 213 }
214 } 214 }
215 215
216 &:checked { 216 &:checked {
217 @include bem.sibling-elem('box') { 217 @include bem.sibling-elem('box') {
218 background-color: props.get(vars.$disabled--box-border-color); 218 background-color: props.get(vars.$disabled--box-border-color);
219 } 219 }
220 } 220 }
221 221
222 &:indeterminate { 222 &:indeterminate {
223 @include bem.sibling-elem('box') { 223 @include bem.sibling-elem('box') {
224 background-color: props.get(vars.$disabled--box-border-color); 224 background-color: props.get(vars.$disabled--box-border-color);
225 } 225 }
226 } 226 }
227 } 227 }
228 } 228 }
229 } 229 }
230 } 230 }
231} 231}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 02:38:23 +0000