@clayui/css 3.44.2 → 3.47.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 (76) hide show
  1. package/README.md +23 -69
  2. package/lib/css/atlas.css +457 -86
  3. package/lib/css/atlas.css.map +1 -1
  4. package/lib/css/base.css +411 -68
  5. package/lib/css/base.css.map +1 -1
  6. package/lib/css/cadmin.css +204 -90
  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/export.svg +11 -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/export.svg +11 -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 +2 -0
  24. package/src/scss/atlas/variables/_buttons.scss +3 -0
  25. package/src/scss/atlas/variables/_cards.scss +12 -0
  26. package/src/scss/atlas/variables/_forms.scss +2 -1
  27. package/src/scss/atlas/variables/_globals.scss +42 -13
  28. package/src/scss/atlas/variables/_list-group.scss +28 -12
  29. package/src/scss/cadmin/_variables.scss +1 -0
  30. package/src/scss/cadmin/components/_aspect-ratio.scss +25 -38
  31. package/src/scss/cadmin/components/_cards.scss +10 -120
  32. package/src/scss/cadmin/components/_custom-forms.scss +4 -0
  33. package/src/scss/cadmin/components/_empty-state.scss +36 -0
  34. package/src/scss/cadmin/components/_forms.scss +1 -1
  35. package/src/scss/cadmin/components/_links.scss +1 -14
  36. package/src/scss/cadmin/components/_navs.scss +8 -0
  37. package/src/scss/cadmin/components/_treeview.scss +191 -210
  38. package/src/scss/cadmin/components/_type.scss +27 -42
  39. package/src/scss/cadmin/components/_utilities-functional-important.scss +35 -15
  40. package/src/scss/cadmin/variables/_aspect-ratio.scss +26 -0
  41. package/src/scss/cadmin/variables/_cards.scss +164 -1
  42. package/src/scss/cadmin/variables/_custom-forms.scss +3 -0
  43. package/src/scss/cadmin/variables/_empty-state.scss +23 -0
  44. package/src/scss/cadmin/variables/_forms.scss +3 -2
  45. package/src/scss/cadmin/variables/_globals.scss +173 -11
  46. package/src/scss/cadmin/variables/_links.scss +14 -0
  47. package/src/scss/cadmin/variables/_list-group.scss +32 -16
  48. package/src/scss/cadmin/variables/_sidebar.scss +1 -1
  49. package/src/scss/cadmin/variables/_treeview.scss +38 -17
  50. package/src/scss/cadmin/variables/_utilities.scss +42 -0
  51. package/src/scss/components/_aspect-ratio.scss +25 -38
  52. package/src/scss/components/_cards.scss +28 -122
  53. package/src/scss/components/_empty-state.scss +30 -0
  54. package/src/scss/components/_forms.scss +1 -1
  55. package/src/scss/components/_links.scss +12 -8
  56. package/src/scss/components/_tables.scss +0 -8
  57. package/src/scss/components/_treeview.scss +367 -0
  58. package/src/scss/components/_type.scss +27 -41
  59. package/src/scss/components/_utilities-functional-important.scss +35 -15
  60. package/src/scss/functions/_lx-icons-generated.scss +10 -0
  61. package/src/scss/mixins/_buttons.scss +4 -0
  62. package/src/scss/mixins/_cards.scss +59 -25
  63. package/src/scss/mixins/_grid.scss +29 -0
  64. package/src/scss/mixins/_links.scss +22 -2
  65. package/src/scss/variables/_aspect-ratio.scss +26 -0
  66. package/src/scss/variables/_buttons.scss +6 -0
  67. package/src/scss/variables/_cards.scss +158 -4
  68. package/src/scss/variables/_empty-state.scss +23 -0
  69. package/src/scss/variables/_forms.scss +3 -2
  70. package/src/scss/variables/_globals.scss +172 -11
  71. package/src/scss/variables/_links.scss +38 -3
  72. package/src/scss/variables/_list-group.scss +22 -12
  73. package/src/scss/variables/_sidebar.scss +3 -3
  74. package/src/scss/variables/_tables.scss +14 -0
  75. package/src/scss/variables/_treeview.scss +242 -0
  76. package/src/scss/variables/_utilities.scss +42 -0
package/src/scss/cadmin/components/_treeview.scss CHANGED
@@ -2,61 +2,45 @@
2
2
  @include clay-css($cadmin-treeview);
3
3
 
4
4
  .btn {
5
- $btn: setter(map-get($cadmin-treeview, btn), ());
6
-
7
- @include clay-button-variant($btn);
5
+ @include clay-button-variant(map-get($cadmin-treeview, btn));
8
6
  }
9
7
 
10
8
  .btn-monospaced {
11
- $btn-monospaced: setter(map-get($cadmin-treeview, btn-monospaced), ());
12
-
13
- @include clay-button-variant($btn-monospaced);
9
+ @include clay-button-variant(map-get($cadmin-treeview, btn-monospaced));
14
10
  }
15
11
 
16
12
  .custom-control {
17
- $custom-control: setter(map-get($cadmin-treeview, custom-control), ());
18
-
19
- @include clay-css($custom-control);
13
+ @include clay-css(map-get($cadmin-treeview, custom-control));
20
14
  }
21
15
 
22
16
  .component-expander {
23
- $component-expander: setter(
24
- map-get($cadmin-treeview, component-expander),
25
- ()
17
+ @include clay-button-variant(
18
+ map-get($cadmin-treeview, component-expander)
26
19
  );
27
20
 
28
- @include clay-button-variant($component-expander);
29
-
30
21
  .lexicon-icon:not(.component-expanded-d-none) {
31
22
  display: none;
32
23
  }
33
24
  }
34
25
 
35
26
  .component-action {
36
- $component-action: setter(
37
- map-get($cadmin-treeview, component-action),
38
- ()
27
+ @include clay-button-variant(
28
+ map-get($cadmin-treeview, component-action)
39
29
  );
40
-
41
- @include clay-button-variant($component-action);
42
30
  }
43
31
 
44
32
  .component-icon {
45
- $component-icon: setter(map-get($cadmin-treeview, component-icon), ());
46
-
47
- @include clay-css($component-icon);
33
+ @include clay-css(map-get($cadmin-treeview, component-icon));
48
34
 
49
35
  .lexicon-icon {
50
- $lexicon-icon: setter(map-get($component-icon, lexicon-icon), ());
51
-
52
- @include clay-css($lexicon-icon);
36
+ @include clay-css(
37
+ map-deep-get($cadmin-treeview, component-icon, lexicon-icon)
38
+ );
53
39
  }
54
40
  }
55
41
 
56
42
  .component-text {
57
- $component-text: setter(map-get($cadmin-treeview, component-text), ());
58
-
59
- @include clay-css($component-text);
43
+ @include clay-css(map-get($cadmin-treeview, component-text));
60
44
  }
61
45
 
62
46
  &.show-component-expander-on-hover {
@@ -64,124 +48,107 @@
64
48
 
65
49
  &:hover,
66
50
  &.hover {
67
- $hover: setter(
51
+ @include clay-css(
68
52
  map-get(
69
53
  $cadmin-treeview-show-component-expander-on-hover,
70
54
  hover
71
- ),
72
- ()
55
+ )
73
56
  );
74
57
 
75
- @include clay-css($hover);
76
-
77
58
  .component-expander {
78
- $component-expander: setter(
79
- map-get($hover, component-expander),
80
- ()
59
+ @include clay-css(
60
+ map-deep-get(
61
+ $cadmin-treeview-show-component-expander-on-hover,
62
+ hover,
63
+ component-expander
64
+ )
81
65
  );
82
-
83
- @include clay-css($component-expander);
84
66
  }
85
67
  }
86
68
 
87
69
  .treeview-link {
88
- $treeview-link: setter(
70
+ @include clay-css(
89
71
  map-get(
90
72
  $cadmin-treeview-show-component-expander-on-hover,
91
73
  treeview-link
92
- ),
93
- ()
74
+ )
94
75
  );
95
76
 
96
- @include clay-css($treeview-link);
97
-
98
77
  &:focus,
99
78
  &.focus {
100
- $focus: setter(map-get($treeview-link, focus), ());
101
-
102
- @include clay-css($focus);
79
+ @include clay-css(
80
+ map-deep-get(
81
+ $cadmin-treeview-show-component-expander-on-hover,
82
+ treeview-link,
83
+ focus
84
+ )
85
+ );
103
86
 
104
87
  .component-expander {
105
- $component-expander: setter(
106
- map-get($focus, component-expander)
88
+ @include clay-css(
89
+ map-deep-get(
90
+ $cadmin-treeview-show-component-expander-on-hover,
91
+ treeview-link,
92
+ focus,
93
+ component-expander
94
+ )
107
95
  );
108
-
109
- @include clay-css($component-expander);
110
96
  }
111
97
  }
112
98
  }
113
99
 
114
100
  .component-expander {
115
- $component-expander: setter(
101
+ @include clay-css(
116
102
  map-get(
117
103
  $cadmin-treeview-show-component-expander-on-hover,
118
104
  component-expander
119
- ),
120
- ()
105
+ )
121
106
  );
122
-
123
- @include clay-css($component-expander);
124
107
  }
125
108
  }
126
109
  }
127
110
 
128
111
  .treeview-group {
129
- $group: setter(map-get($cadmin-treeview, treeview-group), ());
130
-
131
- @include clay-css($group);
112
+ @include clay-css(map-get($cadmin-treeview, treeview-group));
132
113
  }
133
114
 
134
115
  .treeview-item {
135
- $item: setter(map-get($cadmin-treeview, treeview-item), ());
136
-
137
- @include clay-css($item);
116
+ @include clay-css(map-get($cadmin-treeview, treeview-item));
138
117
 
139
118
  &:last-child {
140
- $last-child: setter(map-get($item, last-child), ());
141
-
142
- @include clay-css($last-child);
143
- }
144
-
145
- &.disabled {
146
- cursor: $cadmin-disabled-cursor;
147
- opacity: 0.4;
148
-
149
- .treeview-dropping {
150
- &-bottom,
151
- &-middle,
152
- &-top {
153
- border-color: transparent;
154
- background-color: transparent;
155
- }
156
- }
119
+ @include clay-css(
120
+ map-deep-get($cadmin-treeview, treeview-item, last-child)
121
+ );
157
122
  }
158
123
  }
159
124
 
160
125
  .treeview-link {
161
- $link: setter(map-get($cadmin-treeview, link), ());
162
-
163
- @include clay-link($link);
164
-
165
- &.treeview-dropping {
166
- $dropping: setter(map-get($link, dropping), ());
167
-
168
- &-bottom {
169
- $dropping-bottom: setter(map-get($dropping, bottom), ());
170
-
171
- @include clay-css($dropping-bottom);
172
- }
173
-
174
- &-middle {
175
- $dropping-middle: setter(map-get($dropping, middle), ());
176
-
177
- @include clay-css($dropping-middle);
178
- }
126
+ @include clay-link(map-get($cadmin-treeview, treeview-link));
127
+
128
+ &.treeview-dropping-bottom {
129
+ @include clay-link(
130
+ map-deep-get(
131
+ $cadmin-treeview,
132
+ treeview-link,
133
+ treeview-dropping-bottom
134
+ )
135
+ );
136
+ }
179
137
 
180
- &-top {
181
- $dropping-top: setter(map-get($dropping, top), ());
138
+ &.treeview-dropping-middle {
139
+ @include clay-link(
140
+ map-deep-get(
141
+ $cadmin-treeview,
142
+ treeview-link,
143
+ treeview-dropping-middle
144
+ )
145
+ );
146
+ }
182
147
 
183
- @include clay-css($dropping-top);
184
- }
148
+ &.treeview-dropping-top {
149
+ @include clay-link(
150
+ map-deep-get($cadmin-treeview, treeview-link, treeview-dropping-top)
151
+ );
185
152
  }
186
153
 
187
154
  &.hover,
@@ -189,7 +156,14 @@
189
156
  &.focus,
190
157
  &:focus {
191
158
  .component-action {
192
- display: block;
159
+ display: flex;
160
+ }
161
+ }
162
+
163
+ &:disabled,
164
+ &.disabled {
165
+ .component-action {
166
+ display: none;
193
167
  }
194
168
  }
195
169
 
@@ -211,25 +185,38 @@
211
185
  @include clay-css($cadmin-treeview-nested-margins);
212
186
 
213
187
  .treeview-group {
214
- $group: setter(
215
- map-get($cadmin-treeview-nested-margins, treeview-group),
216
- ()
188
+ @include clay-css(
189
+ map-get($cadmin-treeview-nested-margins, treeview-group)
217
190
  );
218
191
 
219
- @include clay-css($group);
220
-
221
192
  .treeview-item {
222
- $item: setter(map-get($group, treeview-item), ());
223
-
224
- @include clay-css($item);
193
+ @include clay-css(
194
+ map-deep-get(
195
+ $cadmin-treeview-nested-margins,
196
+ treeview-group,
197
+ treeview-item
198
+ )
199
+ );
225
200
  }
226
201
  }
227
202
  }
228
203
 
229
- .treeview-dragging {
230
- $dragging: setter(map-get($cadmin-treeview, treeview-dragging), ());
204
+ .treeview-item-dragging {
205
+ @include clay-css(map-get($cadmin-treeview, treeview-item-dragging));
231
206
 
232
- @include clay-css($dragging);
207
+ .treeview-link {
208
+ @include clay-link(
209
+ map-deep-get(
210
+ $cadmin-treeview,
211
+ treeview-item-dragging,
212
+ treeview-link
213
+ )
214
+ );
215
+ }
216
+ }
217
+
218
+ .treeview-dragging {
219
+ @include clay-css(map-get($cadmin-treeview, treeview-dragging));
233
220
  }
234
221
 
235
222
  // Treeview Variants
@@ -238,90 +225,90 @@
238
225
  @include clay-css($cadmin-treeview-light);
239
226
 
240
227
  .btn {
241
- $btn: setter(map-get($cadmin-treeview-light, btn), ());
242
-
243
- @include clay-button-variant($btn);
228
+ @include clay-button-variant(map-get($cadmin-treeview-light, btn));
244
229
  }
245
230
 
246
231
  .btn-monospaced {
247
- $btn-monospaced: setter(
248
- map-get($cadmin-treeview-light, btn-monospaced),
249
- ()
232
+ @include clay-button-variant(
233
+ map-get($cadmin-treeview-light, btn-monospaced)
250
234
  );
251
-
252
- @include clay-button-variant($btn-monospaced);
253
235
  }
254
236
 
255
237
  .component-expander {
256
- $component-expander: setter(
257
- map-get($cadmin-treeview-light, component-expander),
258
- ()
238
+ @include clay-button-variant(
239
+ map-get($cadmin-treeview-light, component-expander)
259
240
  );
260
241
 
261
- @include clay-button-variant($component-expander);
262
-
263
242
  &.btn-secondary {
264
- $btn-secondary: setter(
265
- map-get($component-expander, btn-secondary),
266
- ()
243
+ @include clay-button-variant(
244
+ map-deep-get(
245
+ $cadmin-treeview-light,
246
+ component-expander,
247
+ btn-secondary
248
+ )
267
249
  );
268
-
269
- @include clay-button-variant($btn-secondary);
270
250
  }
271
251
  }
272
252
 
273
253
  .custom-control {
274
- $custom-control: setter(
275
- map-get($cadmin-treeview-light, custom-control),
276
- ()
277
- );
278
-
279
- @include clay-css($custom-control);
254
+ @include clay-css(map-get($cadmin-treeview-light, custom-control));
280
255
  }
281
256
 
282
257
  .treeview-group {
283
- $group: setter(map-get($cadmin-treeview-light, treeview-group), ());
284
-
285
- @include clay-css($group);
258
+ @include clay-css(map-get($cadmin-treeview-light, treeview-group));
286
259
  }
287
260
 
288
261
  .treeview-item {
289
- $item: setter(map-get($cadmin-treeview-light, treeview-item), ());
290
-
291
- @include clay-css($item);
262
+ @include clay-css(map-get($cadmin-treeview-light, treeview-item));
292
263
 
293
264
  &:last-child {
294
- $last-child: setter(map-get($item, last-child), ());
295
-
296
- @include clay-css($last-child);
265
+ @include clay-css(
266
+ map-deep-get($cadmin-treeview-light, treeview-item, last-child)
267
+ );
297
268
  }
298
269
  }
299
270
 
300
271
  .treeview-link {
301
- $link: setter(map-get($cadmin-treeview-light, link), ());
272
+ @include clay-link(map-get($cadmin-treeview-light, treeview-link));
273
+
274
+ &:disabled,
275
+ &.disabled {
276
+ .component-expander {
277
+ @include clay-css(
278
+ map-deep-get(
279
+ $cadmin-treeview-light,
280
+ treeview-link,
281
+ disabled,
282
+ component-expander
283
+ )
284
+ );
285
+ }
302
286
 
303
- @include clay-link($link);
287
+ .component-action {
288
+ @include clay-css(
289
+ map-deep-get(
290
+ $cadmin-treeview-light,
291
+ treeview-link,
292
+ disabled,
293
+ component-action
294
+ )
295
+ );
296
+ }
297
+ }
304
298
  }
305
299
 
306
300
  .component-action {
307
- $component-action: setter(
308
- map-get($cadmin-treeview-light, component-action),
309
- ()
301
+ @include clay-button-variant(
302
+ map-get($cadmin-treeview-light, component-action)
310
303
  );
311
-
312
- @include clay-button-variant($component-action);
313
304
  }
314
305
 
315
306
  .component-icon {
316
- $component: setter(map-get($cadmin-treeview-light, component), ());
317
-
318
- @include clay-css($component);
307
+ @include clay-css(map-get($cadmin-treeview-light, component));
319
308
  }
320
309
 
321
310
  .component-text {
322
- $component: setter(map-get($cadmin-treeview-light, component), ());
323
-
324
- @include clay-css($component);
311
+ @include clay-css(map-get($cadmin-treeview-light, component));
325
312
  }
326
313
  }
327
314
 
@@ -329,95 +316,89 @@
329
316
  @include clay-css($cadmin-treeview-dark);
330
317
 
331
318
  .btn {
332
- $btn: setter(map-get($cadmin-treeview-dark, btn), ());
333
-
334
- @include clay-button-variant($btn);
319
+ @include clay-button-variant(map-get($cadmin-treeview-dark, btn));
335
320
  }
336
321
 
337
322
  .btn-monospaced {
338
- $btn-monospaced: setter(
339
- map-get($cadmin-treeview-dark, btn-monospaced),
340
- ()
323
+ @include clay-button-variant(
324
+ map-get($cadmin-treeview-dark, btn-monospaced)
341
325
  );
342
-
343
- @include clay-button-variant($btn-monospaced);
344
326
  }
345
327
 
346
328
  .component-expander {
347
- $component-expander: setter(
348
- map-get($cadmin-treeview-dark, component-expander),
349
- ()
329
+ @include clay-button-variant(
330
+ map-get($cadmin-treeview-dark, component-expander)
350
331
  );
351
332
 
352
- @include clay-button-variant($component-expander);
353
-
354
333
  &.btn-secondary {
355
- $btn-secondary: setter(
356
- map-get($component-expander, btn-secondary),
357
- ()
334
+ @include clay-button-variant(
335
+ map-deep-get(
336
+ $cadmin-treeview-dark,
337
+ component-expander,
338
+ btn-secondary
339
+ )
358
340
  );
359
-
360
- @include clay-button-variant($btn-secondary);
361
341
  }
362
342
  }
363
343
 
364
344
  .custom-control {
365
- $custom-control: setter(
366
- map-get($cadmin-treeview-dark, custom-control),
367
- ()
368
- );
369
-
370
- @include clay-css($custom-control);
345
+ @include clay-css(map-get($cadmin-treeview-dark, custom-control));
371
346
  }
372
347
 
373
348
  .treeview-group {
374
- $group: setter(map-get($cadmin-treeview-dark, treeview-group), ());
375
-
376
- @include clay-css($group);
349
+ @include clay-css(map-get($cadmin-treeview-dark, treeview-group));
377
350
  }
378
351
 
379
352
  .treeview-item {
380
- $item: setter(map-get($cadmin-treeview-dark, treeview-item), ());
381
-
382
- @include clay-css($item);
353
+ @include clay-css(map-get($cadmin-treeview-dark, treeview-item));
383
354
 
384
355
  &:last-child {
385
- $last-child: setter(map-get($item, last-child), ());
386
-
387
- @include clay-css($last-child);
356
+ @include clay-css(
357
+ map-deep-get($cadmin-treeview-dark, treeview-item, last-child)
358
+ );
388
359
  }
389
360
  }
390
361
 
391
362
  .treeview-link {
392
- $link: setter(map-get($cadmin-treeview-dark, link), ());
363
+ @include clay-link(map-get($cadmin-treeview-dark, treeview-link));
393
364
 
394
- @include clay-link($link);
365
+ &:disabled,
366
+ &.disabled {
367
+ .component-expander {
368
+ @include clay-css(
369
+ map-deep-get(
370
+ $cadmin-treeview-dark,
371
+ treeview-link,
372
+ disabled,
373
+ component-expander
374
+ )
375
+ );
376
+ }
377
+
378
+ .component-action {
379
+ @include clay-css(
380
+ map-deep-get(
381
+ $cadmin-treeview-dark,
382
+ treeview-link,
383
+ disabled,
384
+ component-action
385
+ )
386
+ );
387
+ }
388
+ }
395
389
  }
396
390
 
397
391
  .component-action {
398
- $component-action: setter(
399
- map-get($cadmin-treeview-dark, component-action),
400
- ()
392
+ @include clay-button-variant(
393
+ map-get($cadmin-treeview-dark, component-action)
401
394
  );
402
-
403
- @include clay-button-variant($component-action);
404
395
  }
405
396
 
406
397
  .component-icon {
407
- $component-icon: setter(
408
- map-get($cadmin-treeview-dark, component-icon),
409
- ()
410
- );
411
-
412
- @include clay-css($component-icon);
398
+ @include clay-css(map-get($cadmin-treeview-dark, component-icon));
413
399
  }
414
400
 
415
401
  .component-text {
416
- $component-text: setter(
417
- map-get($cadmin-treeview-dark, component-text),
418
- ()
419
- );
420
-
421
- @include clay-css($component-text);
402
+ @include clay-css(map-get($cadmin-treeview-dark, component-text));
422
403
  }
423
404
  }