@clayui/css 3.81.0 → 3.82.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 (39) hide show
  1. package/lib/css/atlas.css +440 -95
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +435 -90
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +341 -124
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/icons.svg +1 -1
  8. package/package.json +2 -2
  9. package/src/scss/_license-text.scss +1 -1
  10. package/src/scss/atlas/variables/_clay-color.scss +23 -9
  11. package/src/scss/atlas/variables/_date-picker.scss +31 -13
  12. package/src/scss/atlas/variables/_modals.scss +60 -28
  13. package/src/scss/atlas/variables/_panels.scss +3 -3
  14. package/src/scss/atlas/variables/_tbar.scss +7 -3
  15. package/src/scss/atlas/variables/_time.scss +3 -1
  16. package/src/scss/cadmin/components/_utilities.scss +22 -0
  17. package/src/scss/cadmin/variables/_cards.scss +48 -19
  18. package/src/scss/cadmin/variables/_clay-color.scss +17 -7
  19. package/src/scss/cadmin/variables/_date-picker.scss +42 -22
  20. package/src/scss/cadmin/variables/_modals.scss +60 -28
  21. package/src/scss/cadmin/variables/_sheets.scss +9 -5
  22. package/src/scss/cadmin/variables/_tbar.scss +177 -91
  23. package/src/scss/cadmin/variables/_time.scss +6 -2
  24. package/src/scss/cadmin/variables/_utilities.scss +21 -6
  25. package/src/scss/components/_progress-bars.scss +29 -2
  26. package/src/scss/components/_utilities.scss +22 -0
  27. package/src/scss/mixins/_globals.scss +2 -0
  28. package/src/scss/mixins/_input-groups.scss +6 -2
  29. package/src/scss/mixins/_modals.scss +8 -4
  30. package/src/scss/mixins/_panels.scss +4 -4
  31. package/src/scss/mixins/_tbar.scss +116 -28
  32. package/src/scss/variables/_clay-color.scss +13 -7
  33. package/src/scss/variables/_date-picker.scss +38 -18
  34. package/src/scss/variables/_forms.scss +7 -3
  35. package/src/scss/variables/_modals.scss +60 -28
  36. package/src/scss/variables/_panels.scss +8 -8
  37. package/src/scss/variables/_progress-bars.scss +24 -8
  38. package/src/scss/variables/_tbar.scss +168 -87
  39. package/src/scss/variables/_utilities.scss +17 -2
package/src/scss/variables/_tbar.scss CHANGED
@@ -10,39 +10,43 @@ $tbar-stacked: map-deep-merge(
10
10
  height: 100%,
11
11
  padding-bottom: 0.5rem,
12
12
  padding-top: 0.5rem,
13
- nav: (
13
+ tbar-nav: (
14
14
  flex-direction: column,
15
15
  min-width: 0,
16
16
  ),
17
- item: (
17
+ tbar-item: (
18
18
  align-items: center,
19
19
  justify-content: flex-start,
20
20
  padding-left: 0,
21
21
  padding-right: 0,
22
22
  ),
23
- item-expand: (
23
+ tbar-item-expand: (
24
24
  flex-shrink: 0,
25
25
  min-width: 0,
26
26
  ),
27
- divider-before: (
28
- background-color: $body-color,
29
- content: '',
30
- display: block,
31
- height: 1px,
32
- margin-bottom: 0.25rem,
33
- margin-top: 0.25rem,
34
- width: 2.5rem,
27
+ tbar-divider-before: (
28
+ before: (
29
+ background-color: $body-color,
30
+ content: '',
31
+ display: block,
32
+ height: 1px,
33
+ margin-bottom: 0.25rem,
34
+ margin-top: 0.25rem,
35
+ width: 2.5rem,
36
+ ),
35
37
  ),
36
- divider-after: (
37
- background-color: $body-color,
38
- content: '',
39
- display: block,
40
- height: 1px,
41
- margin-bottom: 0.25rem,
42
- margin-top: 0.25rem,
43
- width: 2.5rem,
38
+ tbar-divider-after: (
39
+ after: (
40
+ background-color: $body-color,
41
+ content: '',
42
+ display: block,
43
+ height: 1px,
44
+ margin-bottom: 0.25rem,
45
+ margin-top: 0.25rem,
46
+ width: 2.5rem,
47
+ ),
44
48
  ),
45
- btn-monospaced: (
49
+ tbar-btn-monospaced: (
46
50
  border-color: transparent,
47
51
  border-radius: 0px,
48
52
  border-width: 0px,
@@ -76,7 +80,9 @@ $tbar-inline-xs-down: () !default;
76
80
  $tbar-inline-xs-down: map-deep-merge(
77
81
  (
78
82
  breakpoint-down: nth(map-keys($grid-breakpoints), 1),
79
- item-padding-left: 0,
83
+ tbar-item: (
84
+ padding-left: 0,
85
+ ),
80
86
  ),
81
87
  $tbar-inline-xs-down
82
88
  );
@@ -85,7 +91,9 @@ $tbar-inline-sm-down: () !default;
85
91
  $tbar-inline-sm-down: map-deep-merge(
86
92
  (
87
93
  breakpoint-down: nth(map-keys($grid-breakpoints), 2),
88
- item-padding-left: 0,
94
+ tbar-item: (
95
+ padding-left: 0,
96
+ ),
89
97
  ),
90
98
  $tbar-inline-sm-down
91
99
  );
@@ -94,7 +102,9 @@ $tbar-inline-md-down: () !default;
94
102
  $tbar-inline-md-down: map-deep-merge(
95
103
  (
96
104
  breakpoint-down: nth(map-keys($grid-breakpoints), 3),
97
- item-padding-left: 0,
105
+ tbar-item: (
106
+ padding-left: 0,
107
+ ),
98
108
  ),
99
109
  $tbar-inline-md-down
100
110
  );
@@ -103,7 +113,9 @@ $tbar-inline-lg-down: () !default;
103
113
  $tbar-inline-lg-down: map-deep-merge(
104
114
  (
105
115
  breakpoint-down: nth(map-keys($grid-breakpoints), 4),
106
- item-padding-left: 0,
116
+ tbar-item: (
117
+ padding-left: 0,
118
+ ),
107
119
  ),
108
120
  $tbar-inline-lg-down
109
121
  );
@@ -112,7 +124,9 @@ $tbar-inline-xl-down: () !default;
112
124
  $tbar-inline-xl-down: map-deep-merge(
113
125
  (
114
126
  breakpoint-down: nth(map-keys($grid-breakpoints), 5),
115
- item-padding-left: 0,
127
+ tbar-item: (
128
+ padding-left: 0,
129
+ ),
116
130
  ),
117
131
  $tbar-inline-xl-down
118
132
  );
@@ -139,13 +153,17 @@ $tbar-light: map-deep-merge(
139
153
  box-shadow: #{inset 1px 0 0 0 $gray-200,
140
154
  inset -1px 0 0 0 $gray-200},
141
155
  color: $secondary,
142
- divider-before: (
143
- background-color: $gray-200,
156
+ tbar-divider-before: (
157
+ before: (
158
+ background-color: $gray-200,
159
+ ),
144
160
  ),
145
- divider-after: (
146
- background-color: $gray-200,
161
+ tbar-divider-after: (
162
+ after: (
163
+ background-color: $gray-200,
164
+ ),
147
165
  ),
148
- btn-monospaced: (
166
+ tbar-btn-monospaced: (
149
167
  hover: (
150
168
  color: $dark,
151
169
  ),
@@ -171,13 +189,17 @@ $tbar-dark-d1: map-deep-merge(
171
189
  box-shadow: #{inset 1px 0 0 0 rgba($white, 0.06),
172
190
  inset -1px 0 0 0 rgba($white, 0.06)},
173
191
  color: $gray-500,
174
- divider-before: (
175
- background-color: rgba($white, 0.06),
192
+ tbar-divider-before: (
193
+ before: (
194
+ background-color: rgba($white, 0.06),
195
+ ),
176
196
  ),
177
- divider-after: (
178
- background-color: rgba($white, 0.06),
197
+ tbar-divider-after: (
198
+ after: (
199
+ background-color: rgba($white, 0.06),
200
+ ),
179
201
  ),
180
- btn-monospaced: (
202
+ tbar-btn-monospaced: (
181
203
  hover: (
182
204
  color: $white,
183
205
  ),
@@ -191,15 +213,17 @@ $tbar-dark-d1: map-deep-merge(
191
213
  background-color: rgba($white, 0.06),
192
214
  color: $white,
193
215
  ),
194
- active-class-after: (
195
- background-color: $primary-l1,
196
- bottom: 0,
197
- content: '',
198
- display: block,
199
- left: 0,
200
- position: absolute,
201
- top: 0,
202
- width: 0.25rem,
216
+ active-class: (
217
+ after: (
218
+ background-color: $primary-l1,
219
+ bottom: 0,
220
+ content: '',
221
+ display: block,
222
+ left: 0,
223
+ position: absolute,
224
+ top: 0,
225
+ width: 0.25rem,
226
+ ),
203
227
  ),
204
228
  ),
205
229
  ),
@@ -214,13 +238,17 @@ $tbar-dark-l2: map-deep-merge(
214
238
  inset -1px 0 0 0 rgba($white, 0.06)},
215
239
  border-color: rgba($white, 0.06),
216
240
  color: $gray-500,
217
- divider-before: (
218
- background-color: rgba($white, 0.06),
241
+ tbar-divider-before: (
242
+ before: (
243
+ background-color: rgba($white, 0.06),
244
+ ),
219
245
  ),
220
- divider-after: (
221
- background-color: rgba($white, 0.06),
246
+ tbar-divider-after: (
247
+ after: (
248
+ background-color: rgba($white, 0.06),
249
+ ),
222
250
  ),
223
- btn-monospaced: (
251
+ tbar-btn-monospaced: (
224
252
  hover: (
225
253
  color: $white,
226
254
  ),
@@ -259,8 +287,13 @@ $subnav-tbar-component-link: () !default;
259
287
  $subnav-tbar-component-link: map-deep-merge(
260
288
  (
261
289
  color: $link-color,
262
- hover-color: $link-hover-color,
263
290
  font-weight: $font-weight-semi-bold,
291
+ hover: (
292
+ color: $link-hover-color,
293
+ ),
294
+ disabled: (
295
+ box-shadow: none,
296
+ ),
264
297
  ),
265
298
  $subnav-tbar-component-link
266
299
  );
@@ -281,26 +314,49 @@ $subnav-tbar: () !default;
281
314
  $subnav-tbar: map-deep-merge(
282
315
  (
283
316
  font-size: 0.875rem,
284
- section-text-align: left,
285
- strong-font-weight: $font-weight-semi-bold,
286
- item-padding-x: 0.5rem,
287
- btn-height: 1.5rem,
288
- btn-line-height: 1,
289
- btn-margin-y: 0.125rem,
290
- btn-padding-y: 0,
291
- btn-monospaced-margin-y: 0.125rem,
292
- btn-monospaced-padding: 0.25rem,
317
+ tbar-section: (
318
+ text-align: left,
319
+ ),
320
+ strong: (
321
+ font-weight: $font-weight-semi-bold,
322
+ ),
323
+ tbar-item: (
324
+ padding-left: 0.5rem,
325
+ padding-right: 0.5rem,
326
+ ),
327
+ tbar-btn: (
328
+ height: 1.5rem,
329
+ line-height: 1,
330
+ margin-bottom: 0.125rem,
331
+ margin-top: 0.125rem,
332
+ padding-left: 0,
333
+ padding-right: 0,
334
+ ),
335
+ tbar-btn-monospaced: (
336
+ margin-bottom: 0.125rem,
337
+ margin-top: 0.125rem,
338
+ padding: 0.25rem,
339
+ ),
293
340
  component-link: $subnav-tbar-component-link,
294
341
  component-title: $subnav-tbar-component-title,
295
342
  component-text: $subnav-tbar-component-text,
296
343
  component-label: (
297
344
  font-weight: $font-weight-normal,
298
345
  ),
299
- link-margin-y: 0.125rem,
300
- link-padding-x: 0.25rem,
301
- link-padding-y: 0.09375rem,
302
- link-monospaced-margin-y: 0.125rem,
303
- link-monospaced-size: 1.5rem,
346
+ tbar-link: (
347
+ margin-bottom: 0.125rem,
348
+ margin-top: 0.125rem,
349
+ padding-bottom: 0.09375rem,
350
+ padding-left: 0.25rem,
351
+ padding-right: 0.25rem,
352
+ padding-top: 0.09375rem,
353
+ ),
354
+ tbar-link-monospaced: (
355
+ height: 1.5rem,
356
+ margin-bottom: 0.125rem,
357
+ margin-top: 0.125rem,
358
+ width: 1.5rem,
359
+ ),
304
360
  ),
305
361
  $subnav-tbar
306
362
  );
@@ -310,14 +366,15 @@ $subnav-tbar: map-deep-merge(
310
366
  $subnav-tbar-light: () !default;
311
367
  $subnav-tbar-light: map-deep-merge(
312
368
  (
313
- bg-color: $light,
369
+ background-color: setter(map-get($subnav-tbar-light, bg-color), $light),
314
370
  color:
315
371
  if(
316
372
  variable-exists(navbar-light-color),
317
373
  $navbar-light-color,
318
374
  rgba($black, 0.5)
319
375
  ),
320
- padding-y: 0.125rem,
376
+ padding-bottom: 0.125rem,
377
+ padding-top: 0.125rem,
321
378
  ),
322
379
  $subnav-tbar-light
323
380
  );
@@ -328,11 +385,15 @@ $subnav-tbar-primary-component-link: () !default;
328
385
  $subnav-tbar-primary-component-link: map-deep-merge(
329
386
  (
330
387
  color: $gray-900,
331
- hover-color: $gray-900,
332
- disabled-color: $gray-600,
333
- disabled-cursor: $disabled-cursor,
334
- disabled-opacity: $component-disabled-opacity,
335
- disabled-text-decoration: none,
388
+ hover: (
389
+ color: $gray-900,
390
+ ),
391
+ disabled: (
392
+ color: $gray-600,
393
+ cursor: $disabled-cursor,
394
+ opacity: $component-disabled-opacity,
395
+ text-decoration: none,
396
+ ),
336
397
  ),
337
398
  $subnav-tbar-primary-component-link
338
399
  );
@@ -340,9 +401,13 @@ $subnav-tbar-primary-component-link: map-deep-merge(
340
401
  $subnav-tbar-primary-component-label-close: () !default;
341
402
  $subnav-tbar-primary-component-label-close: map-deep-merge(
342
403
  (
343
- focus-color: inherit,
344
- disabled-color: $gray-600,
345
- disabled-opacity: $component-disabled-opacity,
404
+ focus: (
405
+ color: inherit,
406
+ ),
407
+ disabled: (
408
+ color: $gray-600,
409
+ opacity: $component-disabled-opacity,
410
+ ),
346
411
  ),
347
412
  $subnav-tbar-primary-component-label-close
348
413
  );
@@ -360,8 +425,10 @@ $subnav-tbar-primary-tbar-label-size: map-deep-merge(
360
425
  (
361
426
  font-size: 0.75rem,
362
427
  margin-right: 0,
363
- padding-x: 0.625rem,
364
- padding-y: 0.3125rem,
428
+ padding-bottom: 0.3125rem,
429
+ padding-left: 0.625rem,
430
+ padding-right: 0.625rem,
431
+ padding-top: 0.3125rem,
365
432
  text-transform: none,
366
433
  ),
367
434
  $subnav-tbar-primary-tbar-label-size
@@ -370,18 +437,28 @@ $subnav-tbar-primary-tbar-label-size: map-deep-merge(
370
437
  $subnav-tbar-primary: () !default;
371
438
  $subnav-tbar-primary: map-deep-merge(
372
439
  (
373
- bg-color: $primary-l2,
374
- padding-x: 0.25rem,
375
- padding-y: 0.625rem,
376
- item-justify-content: flex-start,
377
- item-padding-x: 0.25rem,
378
- link-monospaced-border-radius: 0px,
379
- link-monospaced-border-width: 0px,
380
- link-monospaced-margin-y: -0.625rem,
381
- link-monospaced-size: 3rem,
440
+ background-color:
441
+ setter(map-get($subnav-tbar-primary, bg-color), $primary-l2),
442
+ padding-bottom: 0.625rem,
443
+ padding-left: 0.25rem,
444
+ padding-right: 0.25rem,
445
+ padding-top: 0.625rem,
446
+ tbar-item: (
447
+ justify-content: flex-start,
448
+ padding-left: 0.25rem,
449
+ padding-right: 0.25rem,
450
+ ),
451
+ tbar-link-monospaced: (
452
+ border-radius: 0px,
453
+ border-width: 0px,
454
+ height: 3rem,
455
+ margin-bottom: -0.625rem,
456
+ margin-top: -0.625rem,
457
+ width: 3rem,
458
+ ),
382
459
  component-link: $subnav-tbar-primary-component-link,
383
460
  component-label: $subnav-tbar-primary-component-label,
384
- tbar-label-size: $subnav-tbar-primary-tbar-label-size,
461
+ tbar-label: $subnav-tbar-primary-tbar-label-size,
385
462
  ),
386
463
  $subnav-tbar-primary
387
464
  );
@@ -399,7 +476,11 @@ $subnav-tbar-primary-disabled-component-label: map-deep-merge(
399
476
  $subnav-tbar-primary-disabled: () !default;
400
477
  $subnav-tbar-primary-disabled: map-deep-merge(
401
478
  (
402
- bg-color: clay-lighten(clay-desaturate($primary, 27.03), 37.06),
479
+ background-color:
480
+ setter(
481
+ map-get($subnav-tbar-primary-disabled, bg-color),
482
+ clay-lighten(clay-desaturate($primary, 27.03), 37.06)
483
+ ),
403
484
  color: #6c757d,
404
485
  component-label: $subnav-tbar-primary-disabled-component-label,
405
486
  ),
package/src/scss/variables/_utilities.scss CHANGED
@@ -174,6 +174,21 @@ $inline-item: map-deep-merge(
174
174
 
175
175
  $page-header-bg: $gray-200 !default;
176
176
 
177
+ // Clay Gap
178
+
179
+ $c-gap: () !default;
180
+ $c-gap: map-merge(
181
+ (
182
+ 0: map-get($spacers, 0),
183
+ 1: map-get($spacers, 1),
184
+ 2: map-get($spacers, 2),
185
+ 3: map-get($spacers, 3),
186
+ 4: map-get($spacers, 4),
187
+ 5: map-get($spacers, 5),
188
+ ),
189
+ $c-gap
190
+ );
191
+
177
192
  // Background
178
193
 
179
194
  $bg-theme-colors: () !default;
@@ -342,8 +357,8 @@ $border-theme-colors: map-deep-merge(
342
357
 
343
358
  // Display
344
359
 
345
- $displays: none, inline, inline-block, block, table, table-row, table-cell, flex,
346
- inline-flex !default;
360
+ $displays: none, inline, inline-block, block, grid, table, table-row, table-cell,
361
+ flex, inline-flex !default;
347
362
 
348
363
  // Overflow
349
364