@clayui/css 3.132.0 → 3.134.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 (38) hide show
  1. package/lib/css/atlas.css +63 -8
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +64 -8
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +38 -9
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/flags-en-IE.svg +12 -0
  8. package/lib/images/icons/flags-en-LV.svg +11 -0
  9. package/lib/images/icons/flags-my-MM.svg +13 -0
  10. package/lib/images/icons/icons.svg +1 -1
  11. package/lib/images/icons/slash.svg +9 -0
  12. package/package.json +2 -2
  13. package/src/images/icons/flags-en-IE.svg +12 -0
  14. package/src/images/icons/flags-en-LV.svg +11 -0
  15. package/src/images/icons/flags-my-MM.svg +13 -0
  16. package/src/images/icons/slash.svg +9 -0
  17. package/src/scss/_license-text.scss +1 -1
  18. package/src/scss/atlas/variables/_labels.scss +1 -0
  19. package/src/scss/atlas/variables/_modals.scss +1 -0
  20. package/src/scss/cadmin/variables/_labels.scss +4 -5
  21. package/src/scss/cadmin/variables/_modals.scss +18 -2
  22. package/src/scss/cadmin/variables/_utilities.scss +7 -0
  23. package/src/scss/functions/_lx-icons-generated.scss +8 -0
  24. package/src/scss/mixins/_forms.scss +690 -432
  25. package/src/scss/mixins/_input-groups.scss +222 -107
  26. package/src/scss/mixins/_labels.scss +100 -48
  27. package/src/scss/mixins/_menubar.scss +131 -60
  28. package/src/scss/mixins/_modals.scss +36 -20
  29. package/src/scss/mixins/_nav.scss +86 -34
  30. package/src/scss/mixins/_pagination.scss +241 -151
  31. package/src/scss/mixins/_panels.scss +86 -51
  32. package/src/scss/mixins/_popovers.scss +82 -32
  33. package/src/scss/mixins/_sheet.scss +19 -7
  34. package/src/scss/mixins/_sidebar.scss +195 -89
  35. package/src/scss/mixins/_slideout.scss +96 -46
  36. package/src/scss/variables/_labels.scss +4 -5
  37. package/src/scss/variables/_modals.scss +18 -2
  38. package/src/scss/variables/_utilities.scss +6 -0
package/src/scss/mixins/_popovers.scss CHANGED
@@ -27,22 +27,40 @@
27
27
  $enabled: setter(map-get($map, enabled), true);
28
28
 
29
29
  @if ($enabled) {
30
- @include clay-css($map);
30
+ @if (length($map) != 0) {
31
+ @include clay-css($map);
32
+ }
33
+
34
+ $_before: map-get($map, before);
31
35
 
32
- &::before {
33
- @include clay-css(map-get($map, before));
36
+ @if ($_before) {
37
+ &::before {
38
+ @include clay-css($_before);
39
+ }
34
40
  }
35
41
 
36
- &::after {
37
- @include clay-css(map-get($map, after));
42
+ $_after: map-get($map, after);
43
+
44
+ @if ($_after) {
45
+ &::after {
46
+ @include clay-css($_after);
47
+ }
38
48
  }
39
49
 
40
- &:empty {
41
- @include clay-css(map-get($map, empty));
50
+ $_empty: map-get($map, empty);
51
+
52
+ @if ($_empty) {
53
+ &:empty {
54
+ @include clay-css($_empty);
55
+ }
42
56
  }
43
57
 
44
- .close {
45
- @include clay-close(map-get($map, close));
58
+ $_close: map-get($map, close);
59
+
60
+ @if ($_close) {
61
+ .close {
62
+ @include clay-close($_close);
63
+ }
46
64
  }
47
65
  }
48
66
  }
@@ -91,43 +109,75 @@
91
109
  $enabled: setter(map-get($map, enabled), true);
92
110
 
93
111
  @if ($enabled) {
94
- @include clay-css($map);
112
+ @if (length($map) != 0) {
113
+ @include clay-css($map);
114
+ }
95
115
 
96
- .arrow {
97
- @include clay-css(map-get($map, arrow));
116
+ $_arrow: map-get($map, arrow);
98
117
 
99
- &::before {
100
- @include clay-css(map-deep-get($map, arrow, before));
101
- }
118
+ @if ($_arrow) {
119
+ .arrow {
120
+ @include clay-css($_arrow);
102
121
 
103
- &::after {
104
- @include clay-css(map-deep-get($map, arrow, after));
122
+ $_before: map-get($_arrow, before);
123
+
124
+ @if ($_before) {
125
+ &::before {
126
+ @include clay-css($_before);
127
+ }
128
+ }
129
+
130
+ $_after: map-get($_arrow, after);
131
+
132
+ @if ($_after) {
133
+ &::after {
134
+ @include clay-css($_after);
135
+ }
136
+ }
105
137
  }
106
138
  }
107
139
 
108
- .popover-header {
109
- @include clay-popover-header-variant(
110
- map-get($map, popover-header)
111
- );
140
+ $_popover-header: map-get($map, popover-header);
141
+
142
+ @if ($_popover-header) {
143
+ .popover-header {
144
+ @include clay-popover-header-variant($_popover-header);
145
+ }
112
146
  }
113
147
 
114
- .popover-body {
115
- @include clay-css(map-get($map, popover-body));
148
+ $_popover-body: map-get($map, popover-body);
149
+
150
+ @if ($_popover-body) {
151
+ .popover-body {
152
+ @include clay-css($_popover-body);
153
+ }
116
154
  }
117
155
 
118
- .inline-scroller {
119
- @include clay-css(map-get($map, inline-scroller));
156
+ $_inline-scroller: map-get($map, inline-scroller);
157
+
158
+ @if ($_inline-scroller) {
159
+ .inline-scroller {
160
+ @include clay-css($_inline-scroller);
161
+ }
120
162
  }
121
163
 
122
- .close {
123
- @include clay-close(map-get($map, close));
164
+ $_close: map-get($map, close);
165
+
166
+ @if ($_close) {
167
+ .close {
168
+ @include clay-close($_close);
169
+ }
124
170
  }
125
171
 
126
- @at-root {
127
- &.focus,
128
- #{$focus-visible-selector},
129
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
130
- @include clay-popover-variant(map-get($map, focus));
172
+ $_focus: map-get($map, focus);
173
+
174
+ @if ($_focus) {
175
+ @at-root {
176
+ &.focus,
177
+ #{$focus-visible-selector},
178
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
179
+ @include clay-popover-variant($_focus);
180
+ }
131
181
  }
132
182
  }
133
183
  }
package/src/scss/mixins/_sheet.scss CHANGED
@@ -33,18 +33,30 @@
33
33
 
34
34
  @if ($enabled) {
35
35
  @include media-breakpoint-down($breakpoint-down) {
36
- @include clay-css($mobile);
36
+ @if (length($mobile) != 0) {
37
+ @include clay-css($mobile);
38
+ }
37
39
 
38
- .btn {
39
- @include clay-css($btn-mobile);
40
+ @if (length($btn-mobile) != 0) {
41
+ .btn {
42
+ @include clay-css($btn-mobile);
43
+ }
40
44
  }
41
45
 
42
- .btn-group {
43
- @include clay-css(map-get($mobile, btn-group));
46
+ $_btn-group: map-get($mobile, btn-group);
47
+
48
+ @if ($_btn-group) {
49
+ .btn-group {
50
+ @include clay-css($_btn-group);
51
+ }
44
52
  }
45
53
 
46
- .btn-group-item {
47
- @include clay-css(map-get($mobile, btn-group-item));
54
+ $_btn-group-item: map-get($mobile, btn-group-item);
55
+
56
+ @if ($_btn-group-item) {
57
+ .btn-group-item {
58
+ @include clay-css($_btn-group-item);
59
+ }
48
60
  }
49
61
  }
50
62
  }
package/src/scss/mixins/_sidebar.scss CHANGED
@@ -230,159 +230,265 @@
230
230
  );
231
231
 
232
232
  @if ($enabled) {
233
- @include clay-css($base);
233
+ @if (length($base) != 0) {
234
+ @include clay-css($base);
235
+ }
234
236
 
235
237
  @at-root {
236
- #{clay-insert-before(clay-parent(&), '.sidenav-start ')},
237
- #{clay-insert-before(clay-parent(&), '.sidenav-left ')} {
238
- $sidenav-start: setter(map-get($map, sidenav-start), ());
238
+ $_sidenav-start: map-get($map, sidenav-start);
239
+
240
+ @if ($_sidenav-start) {
241
+ #{clay-insert-before(clay-parent(&), '.sidenav-start ')},
242
+ #{clay-insert-before(clay-parent(&), '.sidenav-left ')} {
243
+ @include clay-css($_sidenav-start);
244
+
245
+ $_focus: map-get($_sidenav-start, focus);
246
+
247
+ @if ($_focus) {
248
+ &.focus,
249
+ #{$focus-visible-selector},
250
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
251
+ @include clay-css($_focus);
252
+ }
253
+ }
254
+ }
255
+ }
239
256
 
240
- @include clay-css($sidenav-start);
257
+ $_sidenav-end: map-get($map, sidenav-right);
241
258
 
242
- &.focus,
243
- #{$focus-visible-selector},
244
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
245
- @include clay-css(map-get($sidenav-start, focus));
259
+ @if ($_sidenav-end) {
260
+ #{clay-insert-before(clay-parent(&), '.sidenav-end ')},
261
+ #{clay-insert-before(clay-parent(&), '.sidenav-right ')} {
262
+ @include clay-css($_sidenav-end);
263
+
264
+ $_focus: map-get($sidenav-end, focus);
265
+
266
+ @if ($_focus) {
267
+ &.focus,
268
+ #{$focus-visible-selector},
269
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
270
+ @include clay-css($_focus);
271
+ }
272
+ }
246
273
  }
247
274
  }
275
+ }
248
276
 
249
- #{clay-insert-before(clay-parent(&), '.sidenav-end ')},
250
- #{clay-insert-before(clay-parent(&), '.sidenav-right ')} {
251
- $sidenav-end: setter(map-get($map, sidenav-right), ());
252
-
253
- @include clay-css($sidenav-end);
277
+ $_focus: map-get($map, focus);
254
278
 
279
+ @if ($_focus) {
280
+ @at-root {
255
281
  &.focus,
256
282
  #{$focus-visible-selector},
257
283
  #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
258
- @include clay-css(map-get($sidenav-end, focus));
284
+ @include clay-css($_focus);
259
285
  }
260
286
  }
261
287
  }
262
288
 
263
- @at-root {
264
- &.focus,
265
- #{$focus-visible-selector},
266
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
267
- @include clay-css(map-get($map, focus));
289
+ $_component-link: map-get($map, component-link);
290
+
291
+ @if ($_component-link) {
292
+ .component-link {
293
+ @include clay-text-typography($_component-link);
268
294
  }
269
295
  }
270
296
 
271
- .component-link {
272
- @include clay-text-typography(map-get($map, component-link));
273
- }
297
+ $_close: map-get($map, close);
274
298
 
275
- .close {
276
- @include clay-close(map-get($map, close));
299
+ @if ($_close) {
300
+ .close {
301
+ @include clay-close($_close);
302
+ }
277
303
  }
278
304
 
279
- .sidebar-header {
280
- @include clay-css($header);
305
+ @if (length($header) != 0) {
306
+ .sidebar-header {
307
+ @include clay-css($header);
281
308
 
282
- .component-title {
283
- @include clay-text-typography($header-component-title);
284
- }
309
+ @if (length($header-component-title) != 0) {
310
+ .component-title {
311
+ @include clay-text-typography(
312
+ $header-component-title
313
+ );
314
+ }
315
+ }
285
316
 
286
- .component-subtitle {
287
- @include clay-text-typography($header-component-subtitle);
317
+ @if (length($header-component-subtitle) != 0) {
318
+ .component-subtitle {
319
+ @include clay-text-typography(
320
+ $header-component-subtitle
321
+ );
322
+ }
323
+ }
288
324
  }
289
325
  }
290
326
 
291
- .sidebar-body {
292
- @include clay-css($body);
327
+ @if (length($body) != 0) {
328
+ .sidebar-body {
329
+ @include clay-css($body);
330
+ }
293
331
  }
294
332
 
295
- .sidebar-footer {
296
- @include clay-css($footer);
333
+ @if (length($footer) != 0) {
334
+ .sidebar-footer {
335
+ @include clay-css($footer);
336
+ }
297
337
  }
298
338
 
299
- .nav-nested {
300
- @include clay-css($nav-nested);
339
+ @if (length($nav-nested) != 0) {
340
+ .nav-nested {
341
+ @include clay-css($nav-nested);
301
342
 
302
- .nav-link {
303
- @include clay-link($nav-nested-nav-link);
343
+ @if (length($nav-nested-nav-link) != 0) {
344
+ .nav-link {
345
+ @include clay-link($nav-nested-nav-link);
346
+ }
347
+ }
304
348
  }
305
349
  }
306
350
 
307
- .sidebar-list-group {
308
- @include clay-css($sidebar-list-group);
351
+ @if (length($sidebar-list-group) != 0) {
352
+ .sidebar-list-group {
353
+ @include clay-css($sidebar-list-group);
309
354
 
310
- .list-group-item {
311
- @include clay-css($sidebar-list-group-item);
312
- }
355
+ @if (length($sidebar-list-group-item) != 0) {
356
+ .list-group-item {
357
+ @include clay-css($sidebar-list-group-item);
358
+ }
359
+ }
313
360
 
314
- .list-group-title {
315
- @include clay-text-typography($sidebar-list-group-title);
316
- }
361
+ @if (length($sidebar-list-group-title) != 0) {
362
+ .list-group-title {
363
+ @include clay-text-typography(
364
+ $sidebar-list-group-title
365
+ );
366
+ }
367
+ }
317
368
 
318
- .list-group-subtitle {
319
- @include clay-text-typography($sidebar-list-group-subtitle);
320
- }
369
+ @if (length($sidebar-list-group-subtitle) != 0) {
370
+ .list-group-subtitle {
371
+ @include clay-text-typography(
372
+ $sidebar-list-group-subtitle
373
+ );
374
+ }
375
+ }
321
376
 
322
- .list-group-text {
323
- @include clay-text-typography($sidebar-list-group-text);
324
- }
377
+ @if (length($sidebar-list-group-text) != 0) {
378
+ .list-group-text {
379
+ @include clay-text-typography(
380
+ $sidebar-list-group-text
381
+ );
382
+ }
383
+ }
325
384
 
326
- .list-group-subtext {
327
- @include clay-text-typography($sidebar-list-group-subtext);
328
- }
385
+ @if (length($sidebar-list-group-subtext) != 0) {
386
+ .list-group-subtext {
387
+ @include clay-text-typography(
388
+ $sidebar-list-group-subtext
389
+ );
390
+ }
391
+ }
329
392
 
330
- .sticker {
331
- @include clay-sticker-variant($sidebar-list-group-sticker);
332
- }
393
+ @if (length($sidebar-list-group-sticker) != 0) {
394
+ .sticker {
395
+ @include clay-sticker-variant(
396
+ $sidebar-list-group-sticker
397
+ );
398
+ }
399
+ }
333
400
 
334
- .sticker-secondary {
335
- @include clay-sticker-variant(
336
- $sidebar-list-group-sticker-secondary
337
- );
401
+ @if (length($sidebar-list-group-sticker-secondary) != 0) {
402
+ .sticker-secondary {
403
+ @include clay-sticker-variant(
404
+ $sidebar-list-group-sticker-secondary
405
+ );
406
+ }
407
+ }
338
408
  }
339
409
  }
340
410
 
341
- .sidebar-panel {
342
- @include clay-css($panel);
411
+ @if (length($panel) != 0) {
412
+ .sidebar-panel {
413
+ @include clay-css($panel);
414
+ }
343
415
  }
344
416
 
345
- .sidebar-dt {
346
- @include clay-text-typography($dt);
417
+ @if (length($dt) != 0) {
418
+ .sidebar-dt {
419
+ @include clay-text-typography($dt);
420
+ }
347
421
  }
348
422
 
349
- .sidebar-dd {
350
- @include clay-text-typography($dd);
423
+ @if (length($dd) != 0) {
424
+ .sidebar-dd {
425
+ @include clay-text-typography($dd);
426
+ }
351
427
  }
352
428
 
353
- .panel-unstyled {
354
- @include clay-panel-variant(map-get($map, panel-unstyled));
429
+ $_panel-unstyled: map-get($map, panel-unstyled);
430
+
431
+ @if ($_panel-unstyled) {
432
+ .panel-unstyled {
433
+ @include clay-panel-variant($_panel-unstyled);
434
+ }
355
435
  }
356
436
 
357
- .component-navigation-bar {
358
- @include clay-navbar-variant(
359
- map-get($map, component-navigation-bar)
360
- );
437
+ $_component-navigation-bar: map-get($map, component-navigation-bar);
438
+
439
+ @if ($_component-navigation-bar) {
440
+ .component-navigation-bar {
441
+ @include clay-navbar-variant($_component-navigation-bar);
442
+ }
361
443
  }
362
444
 
363
- .panel-group {
364
- @include clay-map-to-css(map-get($map, panel-group));
445
+ $_panel-group: map-get($map, panel-group);
446
+
447
+ @if ($_panel-group) {
448
+ .panel-group {
449
+ @include clay-map-to-css($_panel-group);
450
+ }
365
451
  }
366
452
 
367
- .btn {
368
- @include clay-map-to-css(map-get($map, btn));
453
+ $_btn: map-get($map, btn);
454
+
455
+ @if ($_btn) {
456
+ .btn {
457
+ @include clay-map-to-css($_btn);
458
+ }
369
459
  }
370
460
 
371
- .form-control {
372
- @include clay-map-to-css(map-get($map, form-control));
461
+ $_form-control: map-get($map, form-control);
462
+
463
+ @if ($_form-control) {
464
+ .form-control {
465
+ @include clay-map-to-css($_form-control);
466
+ }
373
467
  }
374
468
 
375
- select.form-control,
376
- .form-control-select {
377
- @include clay-map-to-css(map-get($map, form-control-select));
469
+ $_form-control-select: map-get($map, form-control-select);
470
+
471
+ @if ($_form-control-select) {
472
+ select.form-control,
473
+ .form-control-select {
474
+ @include clay-map-to-css($_form-control-select);
475
+ }
378
476
  }
379
477
 
380
- .form-control-tag-group {
381
- @include clay-map-to-css(map-get($map, form-control-tag-group));
478
+ $_form-control-tag-group: map-get($map, form-control-tag-group);
479
+
480
+ @if ($_form-control-tag-group) {
481
+ .form-control-tag-group {
482
+ @include clay-map-to-css($_form-control-tag-group);
483
+ }
382
484
  }
383
485
 
384
- .input-group {
385
- @include clay-map-to-css(map-get($map, input-group));
486
+ $_input-group: map-get($map, input-group);
487
+
488
+ @if ($_input-group) {
489
+ .input-group {
490
+ @include clay-map-to-css($_input-group);
491
+ }
386
492
  }
387
493
  }
388
494
  }