@clayui/css 3.40.1 → 3.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/lib/css/atlas.css +232 -164
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +196 -98
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +215 -152
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/atlas/variables/_forms.scss +33 -1
  10. package/src/scss/atlas/variables/_globals.scss +13 -0
  11. package/src/scss/cadmin/components/_form-validation.scss +10 -237
  12. package/src/scss/cadmin/components/_reboot.scss +1 -8
  13. package/src/scss/cadmin/components/_toggle-switch.scss +20 -358
  14. package/src/scss/cadmin/variables/_forms.scss +353 -2
  15. package/src/scss/cadmin/variables/_globals.scss +14 -0
  16. package/src/scss/cadmin/variables/_toggle-switch.scss +404 -1
  17. package/src/scss/components/_form-validation.scss +8 -237
  18. package/src/scss/components/_reboot.scss +1 -8
  19. package/src/scss/components/_toggle-switch.scss +36 -351
  20. package/src/scss/functions/_global-functions.scss +18 -0
  21. package/src/scss/mixins/_forms.scss +419 -4
  22. package/src/scss/mixins/_globals.scss +7 -0
  23. package/src/scss/mixins/_links.scss +248 -63
  24. package/src/scss/mixins/_toggle-switch.scss +1076 -14
  25. package/src/scss/variables/_forms.scss +295 -1
  26. package/src/scss/variables/_globals.scss +13 -0
  27. package/src/scss/variables/_toggle-switch.scss +404 -5
package/src/scss/cadmin/components/_toggle-switch.scss CHANGED
@@ -1,391 +1,53 @@
1
- // Simple Toggle Switch
2
-
3
- .simple-toggle-switch {
4
- &.toggle-switch {
5
- align-items: center;
6
- display: inline-flex;
7
- }
8
-
9
- .toggle-switch-check + .toggle-switch-label {
10
- margin-right: $cadmin-simple-toggle-switch-label-spacer-x;
11
- }
12
-
13
- .toggle-switch-label + .toggle-switch-check-bar {
14
- margin-left: $cadmin-simple-toggle-switch-label-spacer-x;
15
- }
16
-
17
- .toggle-switch-label {
18
- line-height: $cadmin-simple-toggle-switch-label-line-height;
19
- margin-bottom: 0;
20
- max-width: calc(
21
- 100% - #{clay-data-label-text-position(
22
- $cadmin-toggle-switch-bar-width,
23
- $cadmin-toggle-switch-bar-padding
24
- )}
25
- );
26
-
27
- @include clay-scale-component {
28
- max-width: calc(
29
- 100% - #{clay-data-label-text-position(
30
- $cadmin-toggle-switch-bar-width-mobile,
31
- $cadmin-toggle-switch-bar-padding-mobile
32
- )}
33
- );
34
- }
35
- }
36
- }
37
-
38
- .simple-toggle-switch-reverse {
39
- .toggle-switch-label {
40
- margin-right: $cadmin-simple-toggle-switch-label-spacer-x;
41
- }
42
-
43
- .toggle-switch-check-bar {
44
- order: 5;
45
-
46
- .toggle-switch-bar {
47
- order: 0;
48
- }
49
- }
50
-
51
- .toggle-switch-bar {
52
- order: 5;
53
- }
54
- }
55
-
56
1
  // Toggle Switch
57
2
 
58
- label.toggle-switch {
59
- cursor: $cadmin-toggle-switch-cursor;
60
-
61
- &.disabled {
62
- cursor: $cadmin-toggle-switch-disabled-cursor;
63
- }
64
- }
65
-
66
3
  .toggle-switch {
67
- display: inline-block;
68
- font-weight: $cadmin-toggle-switch-font-weight;
69
- max-width: 100%;
70
- position: relative;
71
-
72
- &.disabled {
73
- .toggle-switch-label {
74
- color: $cadmin-toggle-switch-label-disabled-color;
75
- cursor: $cadmin-toggle-switch-disabled-cursor;
76
- }
77
-
78
- .toggle-switch-text {
79
- color: $cadmin-toggle-switch-text-disabled-color;
80
- }
81
- }
4
+ @include clay-toggle-switch-variant($cadmin-toggle-switch);
82
5
  }
83
6
 
84
7
  .toggle-switch-check-bar {
85
- display: inline-flex;
86
- position: relative;
8
+ @include clay-css($cadmin-toggle-switch-check-bar);
87
9
  }
88
10
 
89
11
  .toggle-switch-bar {
90
- .toggle-switch-handle {
91
- display: block;
92
- min-width: $cadmin-toggle-switch-bar-width;
93
- text-transform: uppercase;
94
- }
95
-
96
- .toggle-switch-icon {
97
- font-size: $cadmin-toggle-switch-bar-font-size;
98
-
99
- .lexicon-icon {
100
- margin-top: -0.2em;
101
- }
102
- }
103
-
104
- .button-icon {
105
- font-size: $cadmin-toggle-switch-button-font-size;
106
- }
12
+ @include clay-toggle-switch-bar-variant($cadmin-toggle-switch-bar);
107
13
  }
108
14
 
109
15
  .toggle-switch-check {
110
- bottom: 0;
111
- font-size: 62.5%;
112
- height: $cadmin-toggle-switch-bar-height;
113
- opacity: 0;
114
- position: absolute;
115
- width: $cadmin-toggle-switch-bar-width;
116
- z-index: 2;
117
-
118
- @include clay-scale-component {
119
- height: $cadmin-toggle-switch-bar-height-mobile;
120
- width: $cadmin-toggle-switch-bar-width-mobile;
121
- }
122
-
123
- &:empty ~ .toggle-switch-bar {
124
- display: inline-flex;
125
- font-size: $cadmin-toggle-switch-bar-font-size;
126
- height: $cadmin-toggle-switch-bar-height;
127
- line-height: $cadmin-toggle-switch-bar-height;
128
- position: relative;
129
- text-indent: 0;
130
-
131
- -ms-user-select: none;
132
- user-select: none;
133
-
134
- &:after {
135
- background-color: $cadmin-toggle-switch-button-bg;
136
- border-color: $cadmin-toggle-switch-button-border-color;
137
-
138
- @include border-radius($cadmin-toggle-switch-button-border-radius);
139
-
140
- border-style: solid;
141
- border-width: $cadmin-toggle-switch-button-border-width;
142
- bottom: $cadmin-toggle-switch-bar-padding;
143
- content: '';
144
- display: block;
145
- height: $cadmin-toggle-switch-button-width;
146
- left: $cadmin-toggle-switch-bar-padding;
147
- position: absolute;
148
- top: $cadmin-toggle-switch-bar-padding;
149
- transition: $cadmin-toggle-switch-transition;
150
- width: $cadmin-toggle-switch-button-width;
151
- }
152
-
153
- &:before {
154
- background-color: $cadmin-toggle-switch-bar-bg;
155
- border-color: $cadmin-toggle-switch-bar-border-color;
156
-
157
- @include border-radius($cadmin-toggle-switch-bar-border-radius);
158
-
159
- border-style: solid;
160
- border-width: $cadmin-toggle-switch-bar-border-width;
161
- bottom: 0;
162
- content: ' ';
163
- display: block;
164
- left: 0;
165
- position: absolute;
166
- top: 0;
167
- transition: $cadmin-toggle-switch-transition;
168
- width: $cadmin-toggle-switch-bar-width;
169
- }
170
-
171
- .toggle-switch-handle {
172
- &:after {
173
- content: attr(data-label-off);
174
- margin-left: clay-data-label-text-position(
175
- $cadmin-toggle-switch-bar-width,
176
- $cadmin-toggle-switch-bar-padding
177
- );
178
- transition: $cadmin-toggle-switch-transition;
179
- white-space: nowrap;
180
- }
181
-
182
- &:before {
183
- transition: $cadmin-toggle-switch-transition;
184
- }
185
- }
186
-
187
- .toggle-switch-icon {
188
- color: $cadmin-toggle-switch-bar-icon-color;
189
- left: $cadmin-toggle-switch-bar-padding;
190
- line-height: $cadmin-toggle-switch-button-width;
191
- position: absolute;
192
- text-align: center;
193
- text-indent: 0;
194
- top: $cadmin-toggle-switch-bar-padding;
195
- transition: $cadmin-toggle-switch-transition;
196
- width: $cadmin-toggle-switch-button-width;
197
- z-index: 1;
198
- }
199
-
200
- .toggle-switch-icon-on {
201
- left: $cadmin-toggle-switch-bar-padding;
202
- opacity: 0;
203
- }
204
-
205
- .toggle-switch-icon-off {
206
- left: $cadmin-toggle-switch-bar-width -
207
- $cadmin-toggle-switch-bar-padding -
208
- $cadmin-toggle-switch-button-width;
209
- }
210
-
211
- .button-icon {
212
- color: $cadmin-toggle-switch-button-icon-color;
213
- }
214
-
215
- .button-icon-on {
216
- opacity: 0;
217
- }
218
- }
219
-
220
- &:checked ~ .toggle-switch-bar {
221
- &:after {
222
- background-color: $cadmin-toggle-switch-button-on-bg;
223
- border-color: $cadmin-toggle-switch-button-on-border-color;
224
-
225
- @include border-radius(
226
- $cadmin-toggle-switch-button-on-border-radius
227
- );
228
-
229
- border-style: solid;
230
- border-width: $cadmin-toggle-switch-button-border-width;
231
- left: $cadmin-toggle-switch-bar-width -
232
- $cadmin-toggle-switch-bar-padding -
233
- $cadmin-toggle-switch-button-width;
234
- }
235
-
236
- &:before {
237
- background-color: $cadmin-toggle-switch-bar-on-bg;
238
- border-color: $cadmin-toggle-switch-bar-on-border-color;
239
-
240
- @include border-radius($cadmin-toggle-switch-bar-border-radius);
241
-
242
- border-style: solid;
243
- border-width: $cadmin-toggle-switch-bar-border-width;
244
- }
245
-
246
- .toggle-switch-handle:after {
247
- content: attr(data-label-on);
248
- }
249
-
250
- .toggle-switch-icon {
251
- color: $cadmin-toggle-switch-bar-on-icon-color;
252
- }
253
-
254
- .button-icon {
255
- color: $cadmin-toggle-switch-button-on-icon-color;
256
- left: $cadmin-toggle-switch-bar-width -
257
- $cadmin-toggle-switch-bar-padding -
258
- $cadmin-toggle-switch-button-width;
259
- }
260
-
261
- .button-icon-on,
262
- .toggle-switch-icon-on {
263
- opacity: 1;
264
- }
265
-
266
- .button-icon-off,
267
- .toggle-switch-icon-off {
268
- opacity: 0;
269
- }
270
- }
271
-
272
- &:disabled,
273
- &.disabled {
274
- ~ .toggle-switch-bar {
275
- cursor: $cadmin-toggle-switch-disabled-cursor;
276
- opacity: $cadmin-toggle-switch-disabled-opacity;
277
- }
278
- }
279
-
280
- &:focus ~ .toggle-switch-bar:before {
281
- box-shadow: $cadmin-toggle-switch-bar-focus-box-shadow;
282
- }
16
+ @include clay-toggle-switch-check-variant($cadmin-toggle-switch-check);
283
17
  }
284
18
 
285
19
  .toggle-switch-label {
286
- display: block;
287
- margin-bottom: 2px;
20
+ @include clay-css($cadmin-toggle-switch-label);
288
21
  }
289
22
 
290
23
  .toggle-switch-text {
291
- display: block;
292
- font-size: $cadmin-toggle-switch-text-font-size;
24
+ @include clay-css($cadmin-toggle-switch-text);
293
25
  }
294
26
 
295
27
  .toggle-switch-text-left {
296
- display: inline-flex;
297
- line-height: $cadmin-toggle-switch-bar-height;
298
- margin-right: 8px;
28
+ @include clay-css($cadmin-toggle-switch-text-left);
299
29
  }
300
30
 
301
31
  .toggle-switch-text-right {
302
- display: inline-flex;
303
- line-height: $cadmin-toggle-switch-bar-height;
304
- margin-left: 8px;
32
+ @include clay-css($cadmin-toggle-switch-text-right);
305
33
  }
306
34
 
307
- @include clay-scale-component {
308
- .toggle-switch-bar {
309
- .toggle-switch-handle {
310
- min-width: $cadmin-toggle-switch-bar-width-mobile;
311
- }
312
-
313
- .toggle-switch-icon {
314
- font-size: $cadmin-toggle-switch-bar-font-size-mobile;
315
- }
316
-
317
- .button-icon {
318
- font-size: $cadmin-toggle-switch-button-font-size-mobile;
319
- }
320
- }
321
-
322
- .toggle-switch-check {
323
- &:empty ~ .toggle-switch-bar {
324
- height: $cadmin-toggle-switch-bar-height-mobile;
325
- line-height: $cadmin-toggle-switch-bar-height-mobile;
326
- text-indent: 0;
327
-
328
- &:after {
329
- bottom: $cadmin-toggle-switch-bar-padding-mobile;
330
- height: $cadmin-toggle-switch-button-width-mobile;
331
- left: $cadmin-toggle-switch-bar-padding-mobile;
332
- top: $cadmin-toggle-switch-bar-padding-mobile;
333
- width: $cadmin-toggle-switch-button-width-mobile;
334
- }
335
-
336
- &:before {
337
- width: $cadmin-toggle-switch-bar-width-mobile;
338
- }
339
-
340
- .toggle-switch-handle:after {
341
- margin-left: clay-data-label-text-position(
342
- $cadmin-toggle-switch-bar-width-mobile,
343
- $cadmin-toggle-switch-bar-padding-mobile
344
- );
345
- }
346
-
347
- .toggle-switch-icon {
348
- left: $cadmin-toggle-switch-bar-padding-mobile;
349
- line-height: $cadmin-toggle-switch-button-width-mobile;
350
- top: $cadmin-toggle-switch-bar-padding-mobile;
351
- width: $cadmin-toggle-switch-button-width-mobile;
352
- }
353
-
354
- .toggle-switch-icon-on {
355
- left: $cadmin-toggle-switch-bar-padding-mobile;
356
- }
357
-
358
- .toggle-switch-icon-off {
359
- left: $cadmin-toggle-switch-bar-width-mobile -
360
- $cadmin-toggle-switch-bar-padding-mobile -
361
- $cadmin-toggle-switch-button-width-mobile;
362
- }
363
- }
35
+ // Simple Toggle Switch
364
36
 
365
- &:checked ~ .toggle-switch-bar {
366
- &:after {
367
- left: $cadmin-toggle-switch-bar-width-mobile -
368
- $cadmin-toggle-switch-bar-padding-mobile -
369
- $cadmin-toggle-switch-button-width-mobile;
370
- }
37
+ .simple-toggle-switch {
38
+ @include clay-toggle-switch-variant($cadmin-simple-toggle-switch);
371
39
 
372
- .toggle-switch-handle:after {
373
- margin-left: clay-data-label-text-position(
374
- $cadmin-toggle-switch-bar-width-mobile,
375
- $cadmin-toggle-switch-bar-padding-mobile
376
- );
377
- }
40
+ // deprecated
378
41
 
379
- .button-icon {
380
- left: $cadmin-toggle-switch-bar-width-mobile -
381
- $cadmin-toggle-switch-bar-padding-mobile -
382
- $cadmin-toggle-switch-button-width-mobile;
383
- }
384
- }
42
+ .toggle-switch-check + .toggle-switch-label {
43
+ margin-right: $cadmin-simple-toggle-switch-label-spacer-x;
385
44
  }
386
45
 
387
- .toggle-switch-text-left,
388
- .toggle-switch-text-right {
389
- line-height: $cadmin-toggle-switch-bar-height-mobile;
46
+ .toggle-switch-label + .toggle-switch-check-bar {
47
+ margin-left: $cadmin-simple-toggle-switch-label-spacer-x;
390
48
  }
391
49
  }
50
+
51
+ .simple-toggle-switch-reverse {
52
+ @include clay-toggle-switch-variant($cadmin-simple-toggle-switch-reverse);
53
+ }