@clayui/css 3.43.0 → 3.45.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 (49) hide show
  1. package/lib/css/atlas.css +382 -47
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +382 -47
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/bootstrap.css.map +1 -1
  6. package/lib/css/cadmin.css +157 -14
  7. package/lib/css/cadmin.css.map +1 -1
  8. package/lib/images/icons/add-cell.svg +1 -1
  9. package/lib/images/icons/corner-radius.svg +12 -0
  10. package/lib/images/icons/date-time.svg +12 -0
  11. package/lib/images/icons/font-family.svg +10 -0
  12. package/lib/images/icons/font-size.svg +10 -0
  13. package/lib/images/icons/icons.svg +1 -1
  14. package/lib/images/icons/shadow.svg +9 -0
  15. package/package.json +2 -2
  16. package/src/images/icons/add-cell.svg +1 -1
  17. package/src/images/icons/corner-radius.svg +12 -0
  18. package/src/images/icons/date-time.svg +12 -0
  19. package/src/images/icons/font-family.svg +10 -0
  20. package/src/images/icons/font-size.svg +10 -0
  21. package/src/images/icons/shadow.svg +9 -0
  22. package/src/scss/_components.scss +1 -0
  23. package/src/scss/_variables.scss +1 -0
  24. package/src/scss/atlas/variables/_forms.scss +2 -1
  25. package/src/scss/cadmin/components/_custom-forms.scss +4 -0
  26. package/src/scss/cadmin/components/_forms.scss +1 -1
  27. package/src/scss/cadmin/components/_input-groups.scss +2 -0
  28. package/src/scss/cadmin/components/_links.scss +1 -6
  29. package/src/scss/cadmin/components/_navs.scss +20 -0
  30. package/src/scss/cadmin/components/_treeview.scss +135 -211
  31. package/src/scss/cadmin/variables/_custom-forms.scss +3 -0
  32. package/src/scss/cadmin/variables/_forms.scss +3 -2
  33. package/src/scss/cadmin/variables/_navs.scss +44 -1
  34. package/src/scss/cadmin/variables/_treeview.scss +21 -16
  35. package/src/scss/components/_cards.scss +16 -116
  36. package/src/scss/components/_forms.scss +1 -1
  37. package/src/scss/components/_links.scss +12 -0
  38. package/src/scss/components/_navs.scss +13 -1
  39. package/src/scss/components/_treeview.scss +310 -0
  40. package/src/scss/functions/_lx-icons-generated.scss +10 -0
  41. package/src/scss/mixins/_buttons.scss +27 -64
  42. package/src/scss/mixins/_cards.scss +751 -557
  43. package/src/scss/mixins/_custom-forms.scss +404 -383
  44. package/src/scss/mixins/_navbar.scss +32 -0
  45. package/src/scss/variables/_cards.scss +273 -1
  46. package/src/scss/variables/_forms.scss +3 -2
  47. package/src/scss/variables/_links.scss +17 -0
  48. package/src/scss/variables/_navs.scss +43 -1
  49. package/src/scss/variables/_treeview.scss +222 -0
package/src/scss/mixins/_custom-forms.scss CHANGED
@@ -100,401 +100,437 @@
100
100
  /// );
101
101
 
102
102
  @mixin clay-custom-control-input-variant($map) {
103
- $enabled: setter(map-get($map, enabled), true);
103
+ @if (type-of($map) == 'map') {
104
+ $enabled: setter(map-get($map, enabled), true);
104
105
 
105
- @if ($enabled) {
106
- @include clay-css(setter($map, ()));
106
+ @if ($enabled) {
107
+ @include clay-css($map);
107
108
 
108
- ~ .custom-control-label::before {
109
- @include clay-css(
110
- setter(map-deep-get($map, custom-control-label, before), ())
111
- );
112
- }
109
+ ~ .custom-control-label::before {
110
+ @include clay-css(
111
+ map-deep-get($map, custom-control-label, before)
112
+ );
113
+ }
113
114
 
114
- ~ .custom-control-label::after {
115
- @include clay-css(
116
- setter(map-deep-get($map, custom-control-label, after), ())
117
- );
118
- }
115
+ ~ .custom-control-label::after {
116
+ @include clay-css(
117
+ map-deep-get($map, custom-control-label, after)
118
+ );
119
+ }
119
120
 
120
- &:hover ~ .custom-control-label::before {
121
- @include clay-css(
122
- setter(
123
- map-deep-get($map, hover, custom-control-label, before),
124
- ()
125
- )
126
- );
127
- }
121
+ ~ .card {
122
+ @include clay-card-variant(map-deep-get($map, card));
123
+ }
128
124
 
129
- &:hover ~ .custom-control-label::after {
130
- @include clay-css(
131
- setter(
132
- map-deep-get($map, hover, custom-control-label, after),
133
- ()
134
- )
135
- );
136
- }
125
+ &:hover {
126
+ ~ .custom-control-label::before {
127
+ @include clay-css(
128
+ map-deep-get($map, hover, custom-control-label, before)
129
+ );
130
+ }
137
131
 
138
- &:focus ~ .custom-control-label::before {
139
- @include clay-css(
140
- setter(
141
- map-deep-get($map, focus, custom-control-label, before),
142
- ()
143
- )
144
- );
145
- }
132
+ ~ .custom-control-label::after {
133
+ @include clay-css(
134
+ map-deep-get($map, hover, custom-control-label, after)
135
+ );
136
+ }
146
137
 
147
- &:focus ~ .custom-control-label::after {
148
- @include clay-css(
149
- setter(
150
- map-deep-get($map, focus, custom-control-label, after),
151
- ()
152
- )
153
- );
154
- }
138
+ ~ .card {
139
+ @include clay-card-variant(map-deep-get($map, hover, card));
140
+ }
141
+ }
155
142
 
156
- &:active ~ .custom-control-label::before {
157
- @include clay-css(
158
- setter(
159
- map-deep-get($map, active, custom-control-label, before),
160
- ()
161
- )
162
- );
163
- }
143
+ &:focus {
144
+ ~ .custom-control-label::before {
145
+ @include clay-css(
146
+ map-deep-get($map, focus, custom-control-label, before)
147
+ );
148
+ }
164
149
 
165
- &:active ~ .custom-control-label::after {
166
- @include clay-css(
167
- setter(
168
- map-deep-get($map, active, custom-control-label, after),
169
- ()
170
- )
171
- );
172
- }
150
+ ~ .custom-control-label::after {
151
+ @include clay-css(
152
+ map-deep-get($map, focus, custom-control-label, after)
153
+ );
154
+ }
173
155
 
174
- // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
156
+ ~ .card {
157
+ @include clay-card-variant(map-deep-get($map, focus, card));
158
+ }
159
+ }
175
160
 
176
- &[disabled],
177
- &:disabled {
178
- @include clay-css(setter(map-deep-get($map, disabled), ()));
161
+ &:active {
162
+ ~ .custom-control-label::before {
163
+ @include clay-css(
164
+ map-deep-get($map, active, custom-control-label, before)
165
+ );
166
+ }
179
167
 
180
- ~ .custom-control-label {
181
- @include clay-css(
182
- setter(
183
- map-deep-get($map, disabled, custom-control-label),
184
- ()
185
- )
186
- );
168
+ ~ .custom-control-label::after {
169
+ @include clay-css(
170
+ map-deep-get($map, active, custom-control-label, after)
171
+ );
172
+ }
173
+
174
+ ~ .card {
175
+ @include clay-card-variant(
176
+ map-deep-get($map, active, card)
177
+ );
178
+ }
187
179
  }
188
- }
189
180
 
190
- &[disabled] ~ .custom-control-label::before,
191
- &:disabled ~ .custom-control-label::before {
192
- @include clay-css(
193
- setter(
194
- map-deep-get($map, disabled, custom-control-label, before),
195
- ()
196
- )
197
- );
198
- }
181
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
199
182
 
200
- &[disabled] ~ .custom-control-label::after,
201
- &:disabled ~ .custom-control-label::after {
202
- @include clay-css(
203
- setter(
204
- map-deep-get($map, disabled, custom-control-label, after),
205
- ()
206
- )
207
- );
208
- }
183
+ &[disabled],
184
+ &:disabled {
185
+ @include clay-css(map-deep-get($map, disabled));
209
186
 
210
- &:checked ~ .custom-control-label::before {
211
- @include clay-css(
212
- setter(
213
- map-deep-get($map, checked, custom-control-label, before),
214
- ()
215
- )
216
- );
217
- }
187
+ ~ .custom-control-label {
188
+ @include clay-css(
189
+ map-deep-get($map, disabled, custom-control-label)
190
+ );
191
+ }
218
192
 
219
- &:checked ~ .custom-control-label::after {
220
- @include clay-css(
221
- setter(
222
- map-deep-get($map, checked, custom-control-label, after),
223
- ()
224
- )
225
- );
226
- }
193
+ ~ .custom-control-label::before {
194
+ @include clay-css(
195
+ map-deep-get(
196
+ $map,
197
+ disabled,
198
+ custom-control-label,
199
+ before
200
+ )
201
+ );
202
+ }
227
203
 
228
- &:checked:hover ~ .custom-control-label::before {
229
- @include clay-css(
230
- setter(
231
- map-deep-get(
232
- $map,
233
- checked,
234
- hover,
235
- custom-control-label,
236
- before
237
- ),
238
- ()
239
- )
240
- );
241
- }
204
+ ~ .custom-control-label::after {
205
+ @include clay-css(
206
+ map-deep-get(
207
+ $map,
208
+ disabled,
209
+ custom-control-label,
210
+ after
211
+ )
212
+ );
213
+ }
242
214
 
243
- &:checked:hover ~ .custom-control-label::after {
244
- @include clay-css(
245
- setter(
246
- map-deep-get(
247
- $map,
248
- checked,
249
- hover,
250
- custom-control-label,
251
- after
252
- ),
253
- ()
254
- )
255
- );
256
- }
215
+ ~ .card {
216
+ @include clay-card-variant(
217
+ map-deep-get($map, disabled, card)
218
+ );
219
+ }
220
+ }
257
221
 
258
- &:checked:focus ~ .custom-control-label::before {
259
- @include clay-css(
260
- setter(
261
- map-deep-get(
262
- $map,
263
- checked,
264
- focus,
265
- custom-control-label,
266
- before
267
- ),
268
- ()
269
- )
270
- );
271
- }
222
+ &:checked {
223
+ ~ .custom-control-label::before {
224
+ @include clay-css(
225
+ map-deep-get(
226
+ $map,
227
+ checked,
228
+ custom-control-label,
229
+ before
230
+ )
231
+ );
232
+ }
272
233
 
273
- &:checked:focus ~ .custom-control-label::after {
274
- @include clay-css(
275
- setter(
276
- map-deep-get(
277
- $map,
278
- checked,
279
- focus,
280
- custom-control-label,
281
- after
282
- ),
283
- ()
284
- )
285
- );
286
- }
234
+ ~ .custom-control-label::after {
235
+ @include clay-css(
236
+ map-deep-get($map, checked, custom-control-label, after)
237
+ );
238
+ }
287
239
 
288
- &:checked:active ~ .custom-control-label::before {
289
- @include clay-css(
290
- setter(
291
- map-deep-get(
292
- $map,
293
- checked,
294
- active,
295
- custom-control-label,
296
- before
297
- ),
298
- ()
299
- )
300
- );
301
- }
240
+ ~ .card {
241
+ @include clay-card-variant(
242
+ map-deep-get($map, checked, card)
243
+ );
244
+ }
245
+ }
302
246
 
303
- &:checked:active ~ .custom-control-label::after {
304
- @include clay-css(
305
- setter(
306
- map-deep-get(
307
- $map,
308
- checked,
309
- active,
310
- custom-control-label,
311
- after
312
- ),
313
- ()
314
- )
315
- );
316
- }
247
+ &:checked:hover {
248
+ ~ .custom-control-label::before {
249
+ @include clay-css(
250
+ map-deep-get(
251
+ $map,
252
+ checked,
253
+ hover,
254
+ custom-control-label,
255
+ before
256
+ )
257
+ );
258
+ }
317
259
 
318
- &:checked[disabled] ~ .custom-control-label::before,
319
- &:checked:disabled ~ .custom-control-label::before {
320
- @include clay-css(
321
- setter(
322
- map-deep-get(
323
- $map,
324
- checked,
325
- disabled,
326
- custom-control-label,
327
- before
328
- ),
329
- ()
330
- )
331
- );
332
- }
260
+ ~ .custom-control-label::after {
261
+ @include clay-css(
262
+ map-deep-get(
263
+ $map,
264
+ checked,
265
+ hover,
266
+ custom-control-label,
267
+ after
268
+ )
269
+ );
270
+ }
333
271
 
334
- &:checked[disabled] ~ .custom-control-label::after,
335
- &:checked:disabled ~ .custom-control-label::after {
336
- @include clay-css(
337
- setter(
338
- map-deep-get(
339
- $map,
340
- checked,
341
- disabled,
342
- custom-control-label,
343
- after
344
- ),
345
- ()
346
- )
347
- );
348
- }
272
+ ~ .card {
273
+ @include clay-card-variant(
274
+ map-deep-get($map, checked, hover, card)
275
+ );
276
+ }
277
+ }
349
278
 
350
- &:indeterminate ~ .custom-control-label::before {
351
- @include clay-css(
352
- setter(
353
- map-deep-get(
354
- $map,
355
- indeterminate,
356
- custom-control-label,
357
- before
358
- ),
359
- ()
360
- )
361
- );
362
- }
279
+ &:checked:focus {
280
+ ~ .custom-control-label::before {
281
+ @include clay-css(
282
+ map-deep-get(
283
+ $map,
284
+ checked,
285
+ focus,
286
+ custom-control-label,
287
+ before
288
+ )
289
+ );
290
+ }
363
291
 
364
- &:indeterminate ~ .custom-control-label::after {
365
- @include clay-css(
366
- setter(
367
- map-deep-get(
368
- $map,
369
- indeterminate,
370
- custom-control-label,
371
- after
372
- ),
373
- ()
374
- )
375
- );
376
- }
292
+ ~ .custom-control-label::after {
293
+ @include clay-css(
294
+ map-deep-get(
295
+ $map,
296
+ checked,
297
+ focus,
298
+ custom-control-label,
299
+ after
300
+ )
301
+ );
302
+ }
377
303
 
378
- &:indeterminate:hover ~ .custom-control-label::before {
379
- @include clay-css(
380
- setter(
381
- map-deep-get(
382
- $map,
383
- indeterminate,
384
- hover,
385
- custom-control-label,
386
- before
387
- ),
388
- ()
389
- )
390
- );
391
- }
304
+ ~ .card {
305
+ @include clay-card-variant(
306
+ map-deep-get($map, checked, focus, card)
307
+ );
308
+ }
309
+ }
392
310
 
393
- &:indeterminate:hover ~ .custom-control-label::after {
394
- @include clay-css(
395
- setter(
396
- map-deep-get(
397
- $map,
398
- indeterminate,
399
- hover,
400
- custom-control-label,
401
- after
402
- ),
403
- ()
404
- )
405
- );
406
- }
311
+ &:checked:active {
312
+ ~ .custom-control-label::before {
313
+ @include clay-css(
314
+ map-deep-get(
315
+ $map,
316
+ checked,
317
+ active,
318
+ custom-control-label,
319
+ before
320
+ )
321
+ );
322
+ }
407
323
 
408
- &:indeterminate:focus ~ .custom-control-label::before {
409
- @include clay-css(
410
- setter(
411
- map-deep-get(
412
- $map,
413
- indeterminate,
414
- focus,
415
- custom-control-label,
416
- before
417
- ),
418
- ()
419
- )
420
- );
421
- }
324
+ ~ .custom-control-label::after {
325
+ @include clay-css(
326
+ map-deep-get(
327
+ $map,
328
+ checked,
329
+ active,
330
+ custom-control-label,
331
+ after
332
+ )
333
+ );
334
+ }
422
335
 
423
- &:indeterminate:focus ~ .custom-control-label::after {
424
- @include clay-css(
425
- setter(
426
- map-deep-get(
427
- $map,
428
- indeterminate,
429
- focus,
430
- custom-control-label,
431
- after
432
- ),
433
- ()
434
- )
435
- );
436
- }
336
+ ~ .card {
337
+ @include clay-card-variant(
338
+ map-deep-get($map, checked, active, card)
339
+ );
340
+ }
341
+ }
437
342
 
438
- &:indeterminate:active ~ .custom-control-label::before {
439
- @include clay-css(
440
- setter(
441
- map-deep-get(
442
- $map,
443
- indeterminate,
444
- active,
445
- custom-control-label,
446
- before
447
- ),
448
- ()
449
- )
450
- );
451
- }
343
+ &:checked[disabled],
344
+ &:checked:disabled {
345
+ ~ .custom-control-label::before {
346
+ @include clay-css(
347
+ map-deep-get(
348
+ $map,
349
+ checked,
350
+ disabled,
351
+ custom-control-label,
352
+ before
353
+ )
354
+ );
355
+ }
452
356
 
453
- &:indeterminate:active ~ .custom-control-label::after {
454
- @include clay-css(
455
- setter(
456
- map-deep-get(
457
- $map,
458
- indeterminate,
459
- active,
460
- custom-control-label,
461
- after
462
- ),
463
- ()
464
- )
465
- );
466
- }
357
+ ~ .custom-control-label::after {
358
+ @include clay-css(
359
+ map-deep-get(
360
+ $map,
361
+ checked,
362
+ disabled,
363
+ custom-control-label,
364
+ after
365
+ )
366
+ );
367
+ }
467
368
 
468
- &:indeterminate[disabled] ~ .custom-control-label::before,
469
- &:indeterminate:disabled ~ .custom-control-label::before {
470
- @include clay-css(
471
- setter(
472
- map-deep-get(
473
- $map,
474
- indeterminate,
475
- disabled,
476
- custom-control-label,
477
- before
478
- ),
479
- ()
480
- )
481
- );
482
- }
369
+ ~ .card {
370
+ @include clay-card-variant(
371
+ map-deep-get($map, checked, disabled, card)
372
+ );
373
+ }
374
+ }
375
+
376
+ &:indeterminate {
377
+ ~ .custom-control-label::before {
378
+ @include clay-css(
379
+ map-deep-get(
380
+ $map,
381
+ indeterminate,
382
+ custom-control-label,
383
+ before
384
+ )
385
+ );
386
+ }
387
+
388
+ ~ .custom-control-label::after {
389
+ @include clay-css(
390
+ map-deep-get(
391
+ $map,
392
+ indeterminate,
393
+ custom-control-label,
394
+ after
395
+ )
396
+ );
397
+ }
398
+
399
+ ~ .card {
400
+ @include clay-card-variant(
401
+ map-deep-get($map, indeterminate, card)
402
+ );
403
+ }
404
+ }
405
+
406
+ &:indeterminate:hover {
407
+ ~ .custom-control-label::before {
408
+ @include clay-css(
409
+ map-deep-get(
410
+ $map,
411
+ indeterminate,
412
+ hover,
413
+ custom-control-label,
414
+ before
415
+ )
416
+ );
417
+ }
418
+
419
+ ~ .custom-control-label::after {
420
+ @include clay-css(
421
+ map-deep-get(
422
+ $map,
423
+ indeterminate,
424
+ hover,
425
+ custom-control-label,
426
+ after
427
+ )
428
+ );
429
+ }
430
+
431
+ ~ .card {
432
+ @include clay-card-variant(
433
+ map-deep-get($map, indeterminate, hover, card)
434
+ );
435
+ }
436
+ }
437
+
438
+ &:indeterminate:focus {
439
+ ~ .custom-control-label::before {
440
+ @include clay-css(
441
+ map-deep-get(
442
+ $map,
443
+ indeterminate,
444
+ focus,
445
+ custom-control-label,
446
+ before
447
+ )
448
+ );
449
+ }
450
+
451
+ ~ .custom-control-label::after {
452
+ @include clay-css(
453
+ map-deep-get(
454
+ $map,
455
+ indeterminate,
456
+ focus,
457
+ custom-control-label,
458
+ after
459
+ )
460
+ );
461
+ }
462
+
463
+ ~ .card {
464
+ @include clay-card-variant(
465
+ map-deep-get($map, indeterminate, focus, card)
466
+ );
467
+ }
468
+ }
469
+
470
+ &:indeterminate:active {
471
+ ~ .custom-control-label::before {
472
+ @include clay-css(
473
+ map-deep-get(
474
+ $map,
475
+ indeterminate,
476
+ active,
477
+ custom-control-label,
478
+ before
479
+ )
480
+ );
481
+ }
482
+
483
+ ~ .custom-control-label::after {
484
+ @include clay-css(
485
+ map-deep-get(
486
+ $map,
487
+ indeterminate,
488
+ active,
489
+ custom-control-label,
490
+ after
491
+ )
492
+ );
493
+ }
494
+
495
+ ~ .card {
496
+ @include clay-card-variant(
497
+ map-deep-get($map, indeterminate, active, card)
498
+ );
499
+ }
500
+ }
501
+
502
+ &:indeterminate[disabled],
503
+ &:indeterminate:disabled {
504
+ ~ .custom-control-label::before {
505
+ @include clay-css(
506
+ map-deep-get(
507
+ $map,
508
+ indeterminate,
509
+ disabled,
510
+ custom-control-label,
511
+ before
512
+ )
513
+ );
514
+ }
483
515
 
484
- &:indeterminate[disabled] ~ .custom-control-label::after,
485
- &:indeterminate:disabled ~ .custom-control-label::after {
486
- @include clay-css(
487
- setter(
488
- map-deep-get(
489
- $map,
490
- indeterminate,
491
- disabled,
492
- custom-control-label,
493
- after
494
- ),
495
- ()
496
- )
497
- );
516
+ ~ .custom-control-label::after {
517
+ @include clay-css(
518
+ map-deep-get(
519
+ $map,
520
+ indeterminate,
521
+ disabled,
522
+ custom-control-label,
523
+ after
524
+ )
525
+ );
526
+ }
527
+
528
+ ~ .card {
529
+ @include clay-card-variant(
530
+ map-deep-get($map, indeterminate, disabled, card)
531
+ );
532
+ }
533
+ }
498
534
  }
499
535
  }
500
536
  }
@@ -619,60 +655,45 @@
619
655
  @if (type-of($map) == 'map') {
620
656
  $enabled: setter(map-get($map, enabled), true);
621
657
 
622
- @include clay-css(setter($map, ()));
658
+ @include clay-css($map);
623
659
 
624
660
  @if ($enabled) {
625
661
  label {
626
- @include clay-css(setter(map-deep-get($map, label), ()));
662
+ @include clay-css(map-deep-get($map, label));
627
663
  }
628
664
 
629
665
  .custom-control-label {
630
- @include clay-css(
631
- setter(map-deep-get($map, custom-control-label), ())
632
- );
666
+ @include clay-css(map-deep-get($map, custom-control-label));
633
667
 
634
668
  &::before {
635
669
  @include clay-css(
636
- setter(
637
- map-deep-get($map, custom-control-label, before),
638
- ()
639
- )
670
+ map-deep-get($map, custom-control-label, before)
640
671
  );
641
672
  }
642
673
 
643
674
  &::after {
644
675
  @include clay-css(
645
- setter(
646
- map-deep-get($map, custom-control-label, after),
647
- ()
648
- )
676
+ map-deep-get($map, custom-control-label, after)
649
677
  );
650
678
  }
651
679
  }
652
680
 
653
681
  .custom-control-label-text {
654
682
  @include clay-css(
655
- setter(map-deep-get($map, custom-control-label-text), ())
683
+ map-deep-get($map, custom-control-label-text)
656
684
  );
657
685
 
658
686
  small,
659
687
  .small {
660
688
  @include clay-css(
661
- setter(
662
- map-deep-get(
663
- $map,
664
- custom-control-label-text,
665
- small
666
- ),
667
- ()
668
- )
689
+ map-deep-get($map, custom-control-label-text, small)
669
690
  );
670
691
  }
671
692
  }
672
693
 
673
694
  .custom-control-input {
674
695
  @include clay-custom-control-input-variant(
675
- setter(map-deep-get($map, custom-control-input), ())
696
+ map-deep-get($map, custom-control-input)
676
697
  );
677
698
  }
678
699
  }