@clayui/css 3.57.0 → 3.59.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 (24) hide show
  1. package/lib/css/atlas.css +219 -225
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +205 -211
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +224 -225
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/folder-lock-line.svg +11 -0
  8. package/lib/images/icons/folder-lock.svg +10 -0
  9. package/lib/images/icons/icons.svg +1 -1
  10. package/package.json +2 -2
  11. package/src/images/icons/folder-lock-line.svg +11 -0
  12. package/src/images/icons/folder-lock.svg +10 -0
  13. package/src/scss/_license-text.scss +1 -1
  14. package/src/scss/atlas/variables/_tables.scss +1 -1
  15. package/src/scss/cadmin/components/_tables.scss +9 -500
  16. package/src/scss/cadmin/components/_treeview.scss +67 -16
  17. package/src/scss/cadmin/variables/_tables.scss +497 -52
  18. package/src/scss/cadmin/variables/_treeview.scss +19 -5
  19. package/src/scss/components/_tables.scss +8 -498
  20. package/src/scss/components/_treeview.scss +60 -16
  21. package/src/scss/functions/_lx-icons-generated.scss +4 -0
  22. package/src/scss/mixins/_tables.scss +333 -0
  23. package/src/scss/variables/_tables.scss +423 -61
  24. package/src/scss/variables/_treeview.scss +19 -4
package/src/scss/mixins/_tables.scss CHANGED
@@ -47,6 +47,339 @@
47
47
  }
48
48
  }
49
49
 
50
+ /// A mixin to help create table variants.
51
+ /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
52
+
53
+ @mixin clay-table-variant($map) {
54
+ @if (type-of($map) == 'map') {
55
+ $enabled: setter(map-get($map, enabled), true);
56
+
57
+ @if ($enabled) {
58
+ @include clay-css($map);
59
+
60
+ thead {
61
+ @include clay-css(map-get($map, thead));
62
+
63
+ th,
64
+ td {
65
+ @include clay-css(map-deep-get($map, thead, table-cell));
66
+ }
67
+
68
+ th {
69
+ @include clay-css(map-deep-get($map, thead, th));
70
+
71
+ [href] {
72
+ @include clay-link(map-deep-get($map, thead, th, href));
73
+ }
74
+ }
75
+ }
76
+
77
+ th,
78
+ td {
79
+ @include clay-css(map-get($map, table-cell));
80
+
81
+ [href] {
82
+ @include clay-link(map-deep-get($map, table-cell, href));
83
+ }
84
+ }
85
+
86
+ th:first-child,
87
+ td:first-child,
88
+ .table-column-start {
89
+ @include clay-css(map-get($map, table-column-start));
90
+ }
91
+
92
+ th:last-child,
93
+ td:last-child,
94
+ .table-column-end {
95
+ @include clay-css(map-get($map, table-column-end));
96
+ }
97
+
98
+ th {
99
+ @include clay-css(map-get($map, th));
100
+ }
101
+
102
+ td {
103
+ @include clay-css(map-get($map, td));
104
+ }
105
+
106
+ thead:first-child,
107
+ tbody:first-child,
108
+ tfoot:first-child,
109
+ caption:first-child + thead {
110
+ tr:first-child {
111
+ @include clay-css(map-get($map, table-row-start));
112
+
113
+ th,
114
+ td {
115
+ @include clay-css(
116
+ map-deep-get($map, table-row-start, table-cell)
117
+ );
118
+
119
+ &:first-child {
120
+ @include clay-css(
121
+ map-deep-get(
122
+ $map,
123
+ table-row-start,
124
+ table-cell-start
125
+ )
126
+ );
127
+ }
128
+
129
+ &:last-child {
130
+ @include clay-css(
131
+ map-deep-get(
132
+ $map,
133
+ table-row-start,
134
+ table-cell-end
135
+ )
136
+ );
137
+ }
138
+ }
139
+ }
140
+ }
141
+
142
+ .table-row-start {
143
+ @include clay-css(map-get($map, table-row-start));
144
+
145
+ .table-cell-start {
146
+ @include clay-css(
147
+ map-deep-get($map, table-row-start, table-cell-start)
148
+ );
149
+ }
150
+
151
+ .table-cell-end {
152
+ @include clay-css(
153
+ map-deep-get($map, table-row-start, table-cell-end)
154
+ );
155
+ }
156
+ }
157
+
158
+ thead:last-child,
159
+ tbody:last-child,
160
+ tfoot:last-child {
161
+ tr:last-child {
162
+ @include clay-css(map-get($map, table-row-end));
163
+
164
+ th,
165
+ td {
166
+ &:first-child {
167
+ @include clay-css(
168
+ map-deep-get(
169
+ $map,
170
+ table-row-end,
171
+ table-cell-start
172
+ )
173
+ );
174
+ }
175
+
176
+ &:last-child {
177
+ @include clay-css(
178
+ map-deep-get(
179
+ $map,
180
+ table-row-end,
181
+ table-cell-end
182
+ )
183
+ );
184
+ }
185
+ }
186
+ }
187
+ }
188
+
189
+ .table-row-end {
190
+ @include clay-css(map-get($map, table-row-end));
191
+
192
+ .table-cell-start {
193
+ @include clay-css(
194
+ map-deep-get($map, table-row-end, table-cell-start)
195
+ );
196
+ }
197
+
198
+ .table-cell-end {
199
+ @include clay-css(
200
+ map-deep-get($map, table-row-end, table-cell-end)
201
+ );
202
+ }
203
+ }
204
+
205
+ tbody {
206
+ @include clay-css(map-get($map, tbody));
207
+
208
+ tr {
209
+ @include clay-css(map-deep-get($map, tbody, tr));
210
+
211
+ &:hover {
212
+ @include clay-css(map-deep-get($map, tbody, tr, hover));
213
+
214
+ th,
215
+ td {
216
+ @include clay-css(
217
+ map-deep-get($map, tbody, tr, hover, table-cell)
218
+ );
219
+ }
220
+
221
+ .quick-action-menu {
222
+ @include clay-css(
223
+ map-deep-get(
224
+ $map,
225
+ tbody,
226
+ tr,
227
+ hover,
228
+ quick-action-menu
229
+ )
230
+ );
231
+ }
232
+ }
233
+ }
234
+
235
+ th,
236
+ td {
237
+ @include clay-css(map-deep-get($map, tbody, table-cell));
238
+ }
239
+
240
+ + tbody {
241
+ @include clay-css(map-deep-get($map, tbody, tbody));
242
+ }
243
+ }
244
+
245
+ tfoot {
246
+ @include clay-css(map-get($map, tfoot));
247
+
248
+ th,
249
+ td {
250
+ @include clay-css(map-deep-get($map, tfoot, table-cell));
251
+ }
252
+ }
253
+
254
+ caption {
255
+ @include clay-css(map-get($map, caption));
256
+ }
257
+
258
+ .table-divider {
259
+ th,
260
+ td {
261
+ @include clay-css(
262
+ map-deep-get($map, table-divider, table-cell)
263
+ );
264
+ }
265
+ }
266
+
267
+ .table-active {
268
+ @include clay-css(map-get($map, table-active));
269
+
270
+ &:hover {
271
+ @include clay-css(map-deep-get($map, table-active, hover));
272
+
273
+ th,
274
+ td {
275
+ @include clay-css(
276
+ map-deep-get($map, table-active, hover, table-cell)
277
+ );
278
+ }
279
+
280
+ .quick-action-menu {
281
+ @include clay-css(
282
+ map-deep-get(
283
+ $map,
284
+ table-active,
285
+ hover,
286
+ quick-action-menu
287
+ )
288
+ );
289
+ }
290
+ }
291
+
292
+ th,
293
+ td {
294
+ @include clay-css(
295
+ map-deep-get($map, table-active, table-cell)
296
+ );
297
+ }
298
+
299
+ .quick-action-menu {
300
+ @include clay-css(
301
+ map-deep-get($map, table-active, quick-action-menu)
302
+ );
303
+ }
304
+ }
305
+
306
+ .table-disabled {
307
+ @include clay-css(map-get($map, table-disabled));
308
+
309
+ &:hover {
310
+ @include clay-css(
311
+ map-deep-get($map, table-disabled, hover)
312
+ );
313
+
314
+ th,
315
+ td {
316
+ @include clay-css(
317
+ map-deep-get(
318
+ $map,
319
+ table-disabled,
320
+ hover,
321
+ table-cell
322
+ )
323
+ );
324
+ }
325
+ }
326
+
327
+ th,
328
+ td {
329
+ @include clay-css(
330
+ map-deep-get($map, table-disabled, table-cell)
331
+ );
332
+
333
+ [href] {
334
+ @include clay-link(
335
+ map-deep-get($map, table-disabled, table-cell, href)
336
+ );
337
+ }
338
+ }
339
+
340
+ .table-title {
341
+ @include clay-text-typography(
342
+ map-deep-get($map, table-disabled, table-title)
343
+ );
344
+ }
345
+
346
+ .table-list-title {
347
+ @include clay-text-typography(
348
+ map-deep-get($map, table-disabled, table-list-title)
349
+ );
350
+ }
351
+ }
352
+
353
+ .autofit-col {
354
+ @include clay-css(map-get($map, autofit-col));
355
+
356
+ &:first-child {
357
+ @include clay-css(
358
+ map-deep-get($map, autofit-col, first-child)
359
+ );
360
+ }
361
+
362
+ &:last-child {
363
+ @include clay-css(
364
+ map-deep-get($map, autofit-col, last-child)
365
+ );
366
+ }
367
+ }
368
+
369
+ .custom-control,
370
+ .form-check {
371
+ @include clay-custom-control-variant(
372
+ map-get($map, custom-control)
373
+ );
374
+ }
375
+
376
+ .quick-action-menu {
377
+ @include clay-css(map-get($map, quick-action-menu));
378
+ }
379
+ }
380
+ }
381
+ }
382
+
50
383
  /// A mixin to help create table-drag variants.
51
384
  /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
52
385
  /// @example