@clayui/css 3.133.0 → 3.135.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 (42) hide show
  1. package/lib/css/atlas.css +92 -32
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +93 -32
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +39 -33
  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/package.json +2 -2
  12. package/src/images/icons/flags-en-IE.svg +12 -0
  13. package/src/images/icons/flags-en-LV.svg +11 -0
  14. package/src/images/icons/flags-my-MM.svg +13 -0
  15. package/src/scss/_license-text.scss +1 -1
  16. package/src/scss/atlas/variables/_labels.scss +1 -0
  17. package/src/scss/atlas/variables/_modals.scss +1 -0
  18. package/src/scss/cadmin/variables/_labels.scss +4 -5
  19. package/src/scss/cadmin/variables/_modals.scss +18 -2
  20. package/src/scss/cadmin/variables/_utilities.scss +7 -0
  21. package/src/scss/functions/_lx-icons-generated.scss +6 -0
  22. package/src/scss/mixins/_forms.scss +690 -432
  23. package/src/scss/mixins/_input-groups.scss +222 -107
  24. package/src/scss/mixins/_labels.scss +100 -48
  25. package/src/scss/mixins/_menubar.scss +131 -60
  26. package/src/scss/mixins/_modals.scss +36 -20
  27. package/src/scss/mixins/_nav.scss +86 -34
  28. package/src/scss/mixins/_navbar.scss +436 -270
  29. package/src/scss/mixins/_pagination.scss +241 -151
  30. package/src/scss/mixins/_panels.scss +86 -51
  31. package/src/scss/mixins/_popovers.scss +82 -32
  32. package/src/scss/mixins/_sheet.scss +19 -7
  33. package/src/scss/mixins/_sidebar.scss +195 -89
  34. package/src/scss/mixins/_slideout.scss +96 -46
  35. package/src/scss/mixins/_stickers.scss +86 -39
  36. package/src/scss/mixins/_tables.scss +527 -308
  37. package/src/scss/mixins/_tbar.scss +165 -87
  38. package/src/scss/mixins/_toggle-switch.scss +705 -380
  39. package/src/scss/mixins/_tooltip.scss +53 -21
  40. package/src/scss/variables/_labels.scss +4 -5
  41. package/src/scss/variables/_modals.scss +18 -2
  42. package/src/scss/variables/_utilities.scss +6 -0
package/src/scss/mixins/_slideout.scss CHANGED
@@ -21,78 +21,128 @@
21
21
  $enabled: setter(map-get($map, enabled), true);
22
22
 
23
23
  @if ($enabled) {
24
- @include clay-css($map);
24
+ @if (length($map) != 0) {
25
+ @include clay-css($map);
26
+ }
27
+
28
+ $_c-slideout-shown: map-get($map, c-slideout-shown);
25
29
 
26
- &.c-slideout-shown {
27
- @include clay-css(map-get($map, c-slideout-shown));
30
+ @if ($_c-slideout-shown) {
31
+ &.c-slideout-shown {
32
+ @include clay-css($_c-slideout-shown);
33
+ }
28
34
  }
29
35
 
30
- &.c-slideout-tbar-shown {
31
- @include clay-css(map-get($map, c-slideout-tbar-shown));
36
+ $_c-slideout-tbar-shown: map-get($map, c-slideout-tbar-shown);
37
+
38
+ @if ($_c-slideout-tbar-shown) {
39
+ &.c-slideout-tbar-shown {
40
+ @include clay-css($_c-slideout-tbar-shown);
41
+ }
32
42
  }
33
43
 
34
- &.c-slideout-tbar-shown .sidebar {
35
- @include clay-css(map-get($map, c-slideout-tbar-shown-sidebar));
44
+ $_c-slideout-tbar-shown-sidebar: map-get(
45
+ $map,
46
+ c-slideout-tbar-shown-sidebar
47
+ );
48
+
49
+ @if ($_c-slideout-tbar-shown-sidebar) {
50
+ &.c-slideout-tbar-shown .sidebar {
51
+ @include clay-css($_c-slideout-tbar-shown-sidebar);
52
+ }
36
53
  }
37
54
 
38
- .sidebar {
39
- @include clay-css(map-get($map, sidebar));
55
+ $_sidebar: map-get($map, sidebar);
56
+
57
+ @if ($_sidebar) {
58
+ .sidebar {
59
+ @include clay-css($_sidebar);
60
+ }
40
61
  }
41
62
 
42
- .sidebar.c-slideout-show {
43
- @include clay-css(map-get($map, sidebar-c-slideout-show));
63
+ $_sidebar-c-slideout-show: map-get($map, sidebar-c-slideout-show);
64
+
65
+ @if ($_sidebar-c-slideout-show) {
66
+ .sidebar.c-slideout-show {
67
+ @include clay-css($_sidebar-c-slideout-show);
68
+ }
44
69
  }
45
70
 
46
- .sidebar.c-slideout-transition {
47
- $_sidebar-c-slideout-transition: setter(
48
- map-get($map, sidebar-c-slideout-transition),
49
- ()
50
- );
71
+ $_sidebar-c-slideout-transition: map-get(
72
+ $map,
73
+ sidebar-c-slideout-transition
74
+ );
51
75
 
52
- @include clay-css($_sidebar-c-slideout-transition);
76
+ @if ($_sidebar-c-slideout-transition) {
77
+ .sidebar.c-slideout-transition {
78
+ @include clay-css($_sidebar-c-slideout-transition);
53
79
 
54
- .c-horizontal-resizer {
55
- @include clay-css(
56
- map-get(
57
- $_sidebar-c-slideout-transition,
58
- c-horizontal-resizer
59
- )
80
+ $_c-horizontal-resizer: map-get(
81
+ $_sidebar-c-slideout-transition,
82
+ c-horizontal-resizer
60
83
  );
84
+
85
+ @if ($_c-horizontal-resizer) {
86
+ .c-horizontal-resizer {
87
+ @include clay-css($_c-horizontal-resizer);
88
+ }
89
+ }
61
90
  }
62
91
  }
63
92
 
64
- .tbar-stacked {
65
- @include clay-css(map-get($map, tbar-stacked));
93
+ $_tbar-stacked: map-get($map, tbar-stacked);
94
+
95
+ @if ($_tbar-stacked) {
96
+ .tbar-stacked {
97
+ @include clay-css($_tbar-stacked);
98
+ }
66
99
  }
67
100
 
68
- .tbar-stacked.c-slideout-show {
69
- @include clay-css(map-get($map, tbar-stacked-c-slideout-show));
101
+ $_tbar-stacked-c-slideout-show: map-get(
102
+ $map,
103
+ tbar-stacked-c-slideout-show
104
+ );
105
+
106
+ @if ($_tbar-stacked-c-slideout-show) {
107
+ .tbar-stacked.c-slideout-show {
108
+ @include clay-css($_tbar-stacked-c-slideout-show);
109
+ }
70
110
  }
71
111
 
72
- .tbar-stacked.c-slideout-transition {
73
- @include clay-css(
74
- map-get($map, tbar-stacked-c-slideout-transition)
75
- );
112
+ $_tbar-stacked-c-slideout-transition: map-get(
113
+ $map,
114
+ tbar-stacked-c-slideout-transition
115
+ );
116
+
117
+ @if ($_tbar-stacked-c-slideout-transition) {
118
+ .tbar-stacked.c-slideout-transition {
119
+ @include clay-css($_tbar-stacked-c-slideout-transition);
120
+ }
76
121
  }
77
122
 
78
- .c-horizontal-resizer {
79
- $_c-horizontal-resizer: setter(
80
- map-get($map, c-horizontal-resizer),
81
- ()
82
- );
123
+ $_c-horizontal-resizer: map-get($map, c-horizontal-resizer);
83
124
 
84
- @include clay-css($_c-horizontal-resizer);
125
+ @if ($_c-horizontal-resizer) {
126
+ .c-horizontal-resizer {
127
+ @include clay-css($_c-horizontal-resizer);
85
128
 
86
- &:hover {
87
- @include clay-css(map-get($_c-horizontal-resizer, hover));
88
- }
129
+ $_hover: map-get($_c-horizontal-resizer, hover);
130
+
131
+ @if ($_hover) {
132
+ &:hover {
133
+ @include clay-css($_hover);
134
+ }
135
+ }
136
+
137
+ $_focus: map-get($_c-horizontal-resizer, focus);
89
138
 
90
- @at-root {
91
- #{$focus-visible-selector},
92
- #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
93
- @include clay-css(
94
- map-get($_c-horizontal-resizer, focus)
95
- );
139
+ @if ($_focus) {
140
+ @at-root {
141
+ #{$focus-visible-selector},
142
+ #{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
143
+ @include clay-css($_focus);
144
+ }
145
+ }
96
146
  }
97
147
  }
98
148
  }
package/src/scss/mixins/_stickers.scss CHANGED
@@ -217,73 +217,120 @@
217
217
  }
218
218
 
219
219
  @if ($enabled) {
220
- @include clay-css($base);
220
+ @if (length($base) != 0) {
221
+ @include clay-css($base);
222
+ }
221
223
 
222
- > .inline-item {
223
- @include clay-css($inline-item);
224
+ @if (length($inline-item) != 0) {
225
+ > .inline-item {
226
+ @include clay-css($inline-item);
224
227
 
225
- .lexicon-icon {
226
- @include clay-css(
227
- map-deep-get($map, inline-item, lexicon-icon)
228
- );
228
+ $_lexicon-icon: map-get($inline-item, lexicon-icon);
229
+
230
+ @if ($_lexicon-icon) {
231
+ .lexicon-icon {
232
+ @include clay-css($_lexicon-icon);
233
+ }
234
+ }
229
235
  }
230
236
  }
231
237
 
232
- .lexicon-icon {
233
- @include clay-css(map-get($map, lexicon-icon));
234
- }
238
+ $_lexicon-icon: map-get($map, lexicon-icon);
235
239
 
236
- .sticker-img {
237
- @include clay-css(map-get($map, sticker-img));
240
+ @if ($_lexicon-icon) {
241
+ .lexicon-icon {
242
+ @include clay-css($_lexicon-icon);
243
+ }
238
244
  }
239
245
 
240
- .sticker-overlay {
241
- @include clay-css(map-get($map, sticker-overlay));
246
+ $_sticker-img: map-get($map, sticker-img);
247
+
248
+ @if ($_sticker-img) {
249
+ .sticker-img {
250
+ @include clay-css($_sticker-img);
251
+ }
242
252
  }
243
253
 
244
- &.rounded {
245
- @include clay-css(map-get($map, rounded));
254
+ $_sticker-overlay: map-get($map, sticker-overlay);
246
255
 
256
+ @if ($_sticker-overlay) {
247
257
  .sticker-overlay {
248
- @include clay-css(
249
- map-deep-get($map, rounded, sticker-overlay)
250
- );
258
+ @include clay-css($_sticker-overlay);
251
259
  }
252
260
  }
253
261
 
254
- &.rounded-circle {
255
- @include clay-css(map-get($map, rounded-circle));
262
+ $_rounded: map-get($map, rounded);
256
263
 
257
- .sticker-overlay {
258
- @include clay-css(
259
- map-deep-get($map, rounded-circle, sticker-overlay)
260
- );
264
+ @if ($_rounded) {
265
+ &.rounded {
266
+ @include clay-css($_rounded);
267
+
268
+ $_sticker-overlay: map-get($_rounded, sticker-overlay);
269
+
270
+ @if ($_sticker-overlay) {
271
+ .sticker-overlay {
272
+ @include clay-css($_sticker-overlay);
273
+ }
274
+ }
261
275
  }
262
276
  }
263
277
 
264
- &.rounded-0 {
265
- @include clay-css(map-get($map, rounded-0));
278
+ $_rounded-circle: map-get($map, rounded-circle);
266
279
 
267
- .sticker-overlay {
268
- @include clay-css(
269
- map-deep-get($map, rounded-0, sticker-overlay)
280
+ @if ($_rounded-circle) {
281
+ &.rounded-circle {
282
+ @include clay-css($_rounded-circle);
283
+
284
+ $_sticker-overlay: map-get(
285
+ $_rounded-circle,
286
+ sticker-overlay
270
287
  );
288
+
289
+ @if ($_sticker-overlay) {
290
+ .sticker-overlay {
291
+ @include clay-css($_sticker-overlay);
292
+ }
293
+ }
271
294
  }
272
295
  }
273
296
 
274
- &.sticker-outside {
275
- @include clay-css($sticker-outside);
297
+ $_rounded-0: map-get($map, rounded-0);
276
298
 
277
- &.sticker-bottom-left {
278
- @include clay-css($sticker-outside-bottom-left);
279
- }
299
+ @if ($_rounded-0) {
300
+ &.rounded-0 {
301
+ @include clay-css($_rounded-0);
280
302
 
281
- &.sticker-bottom-right {
282
- @include clay-css($sticker-outside-bottom-right);
303
+ $_sticker-overlay: map-get($_rounded-0, sticker-overlay);
304
+
305
+ @if ($_sticker-overlay) {
306
+ .sticker-overlay {
307
+ @include clay-css($_sticker-overlay);
308
+ }
309
+ }
283
310
  }
311
+ }
284
312
 
285
- &.sticker-top-right {
286
- @include clay-css($sticker-outside-top-right);
313
+ @if (length($sticker-outside) != 0) {
314
+ &.sticker-outside {
315
+ @include clay-css($sticker-outside);
316
+
317
+ @if (length($sticker-outside-bottom-left) != 0) {
318
+ &.sticker-bottom-left {
319
+ @include clay-css($sticker-outside-bottom-left);
320
+ }
321
+ }
322
+
323
+ @if (length($sticker-outside-bottom-right) != 0) {
324
+ &.sticker-bottom-right {
325
+ @include clay-css($sticker-outside-bottom-right);
326
+ }
327
+ }
328
+
329
+ @if (length($sticker-outside-top-right) != 0) {
330
+ &.sticker-top-right {
331
+ @include clay-css($sticker-outside-top-right);
332
+ }
333
+ }
287
334
  }
288
335
  }
289
336
  }