@clayui/css 3.161.0 → 3.163.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 (97) hide show
  1. package/lib/css/atlas.css +136 -6
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +134 -5
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css +74 -7
  6. package/lib/css/cadmin.css.map +1 -1
  7. package/lib/images/icons/arrow-key-down.svg +9 -0
  8. package/lib/images/icons/arrow-key-left.svg +9 -0
  9. package/lib/images/icons/arrow-key-right.svg +9 -0
  10. package/lib/images/icons/arrow-key-up.svg +9 -0
  11. package/lib/images/icons/icons.svg +1 -1
  12. package/package.json +1 -1
  13. package/src/images/icons/arrow-key-down.svg +9 -0
  14. package/src/images/icons/arrow-key-left.svg +9 -0
  15. package/src/images/icons/arrow-key-right.svg +9 -0
  16. package/src/images/icons/arrow-key-up.svg +9 -0
  17. package/src/images/icons/icons.svg +1 -1
  18. package/src/scss/_components.scss +2 -0
  19. package/src/scss/_license-text.scss +1 -1
  20. package/src/scss/atlas/variables/_forms.scss +3 -1
  21. package/src/scss/atlas/variables/_reorder.scss +1 -1
  22. package/src/scss/atlas-custom-properties/_variables.scss +0 -2
  23. package/src/scss/atlas-custom-properties/variables/_alerts.scss +928 -935
  24. package/src/scss/atlas-custom-properties/variables/_application-bar.scss +54 -56
  25. package/src/scss/atlas-custom-properties/variables/_aspect-ratio.scss +25 -27
  26. package/src/scss/atlas-custom-properties/variables/_badges.scss +298 -309
  27. package/src/scss/atlas-custom-properties/variables/_breadcrumbs.scss +175 -187
  28. package/src/scss/atlas-custom-properties/variables/_buttons.scss +1164 -1220
  29. package/src/scss/atlas-custom-properties/variables/_c-root.scss +343 -353
  30. package/src/scss/atlas-custom-properties/variables/_cards.scss +1009 -1014
  31. package/src/scss/atlas-custom-properties/variables/_clay-color.scss +560 -590
  32. package/src/scss/atlas-custom-properties/variables/_custom-forms.scss +766 -797
  33. package/src/scss/atlas-custom-properties/variables/_date-picker.scss +532 -614
  34. package/src/scss/atlas-custom-properties/variables/_drilldown.scss +244 -252
  35. package/src/scss/atlas-custom-properties/variables/_dropdowns.scss +1052 -1073
  36. package/src/scss/atlas-custom-properties/variables/_dual-listbox.scss +65 -68
  37. package/src/scss/atlas-custom-properties/variables/_empty-state.scss +90 -92
  38. package/src/scss/atlas-custom-properties/variables/_forms.scss +1918 -1955
  39. package/src/scss/atlas-custom-properties/variables/_globals-z-index.scss +27 -29
  40. package/src/scss/atlas-custom-properties/variables/_globals.scss +799 -801
  41. package/src/scss/atlas-custom-properties/variables/_icons.scss +71 -73
  42. package/src/scss/atlas-custom-properties/variables/_images.scss +8 -13
  43. package/src/scss/atlas-custom-properties/variables/_labels.scss +1091 -1202
  44. package/src/scss/atlas-custom-properties/variables/_links.scss +394 -410
  45. package/src/scss/atlas-custom-properties/variables/_list-group.scss +455 -460
  46. package/src/scss/atlas-custom-properties/variables/_loaders.scss +187 -204
  47. package/src/scss/atlas-custom-properties/variables/_management-bar.scss +135 -137
  48. package/src/scss/atlas-custom-properties/variables/_menubar.scss +605 -663
  49. package/src/scss/atlas-custom-properties/variables/_modals.scss +582 -587
  50. package/src/scss/atlas-custom-properties/variables/_multi-step-nav.scss +342 -312
  51. package/src/scss/atlas-custom-properties/variables/_navbar.scss +170 -172
  52. package/src/scss/atlas-custom-properties/variables/_navigation-bar.scss +337 -361
  53. package/src/scss/atlas-custom-properties/variables/_navs.scss +501 -495
  54. package/src/scss/atlas-custom-properties/variables/_pagination.scss +851 -888
  55. package/src/scss/atlas-custom-properties/variables/_panels.scss +467 -480
  56. package/src/scss/atlas-custom-properties/variables/_popovers.scss +483 -515
  57. package/src/scss/atlas-custom-properties/variables/_progress-bars.scss +146 -139
  58. package/src/scss/atlas-custom-properties/variables/_quick-action.scss +24 -23
  59. package/src/scss/atlas-custom-properties/variables/_range.scss +215 -220
  60. package/src/scss/atlas-custom-properties/variables/_reorder.scss +82 -82
  61. package/src/scss/atlas-custom-properties/variables/_resizer.scss +27 -16
  62. package/src/scss/atlas-custom-properties/variables/_sheets.scss +275 -275
  63. package/src/scss/atlas-custom-properties/variables/_side-navigation.scss +2 -4
  64. package/src/scss/atlas-custom-properties/variables/_sidebar.scss +413 -445
  65. package/src/scss/atlas-custom-properties/variables/_slideout.scss +300 -310
  66. package/src/scss/atlas-custom-properties/variables/_stickers.scss +551 -553
  67. package/src/scss/atlas-custom-properties/variables/_tables.scss +1094 -1079
  68. package/src/scss/atlas-custom-properties/variables/_tbar.scss +491 -557
  69. package/src/scss/atlas-custom-properties/variables/_time.scss +121 -130
  70. package/src/scss/atlas-custom-properties/variables/_timelines.scss +50 -43
  71. package/src/scss/atlas-custom-properties/variables/_toggle-switch.scss +562 -566
  72. package/src/scss/atlas-custom-properties/variables/_tooltip.scss +295 -306
  73. package/src/scss/atlas-custom-properties/variables/_treeview.scss +276 -278
  74. package/src/scss/atlas-custom-properties/variables/_type.scss +186 -185
  75. package/src/scss/atlas-custom-properties/variables/_utilities.scss +705 -788
  76. package/src/scss/atlas-variables.scss +0 -2
  77. package/src/scss/atlas.scss +0 -2
  78. package/src/scss/base-variables.scss +0 -2
  79. package/src/scss/base.scss +0 -2
  80. package/src/scss/cadmin/components/_focus-ring.scss +74 -0
  81. package/src/scss/cadmin/components/_forms.scss +2 -0
  82. package/src/scss/cadmin/components/_menubar.scss +8 -0
  83. package/src/scss/cadmin/components/_resizer.scss +19 -4
  84. package/src/scss/cadmin/variables/_breadcrumbs.scss +3 -1
  85. package/src/scss/cadmin/variables/_forms.scss +3 -1
  86. package/src/scss/cadmin/variables/_reorder.scss +1 -0
  87. package/src/scss/cadmin/variables/_resizer.scss +16 -3
  88. package/src/scss/cadmin.scss +1 -0
  89. package/src/scss/components/_focus-ring.scss +64 -0
  90. package/src/scss/components/_forms.scss +2 -0
  91. package/src/scss/components/_keyboard-arrows-indicator.scss +82 -0
  92. package/src/scss/components/_menubar.scss +8 -0
  93. package/src/scss/components/_resizer.scss +15 -4
  94. package/src/scss/functions/_lx-icons-generated.scss +8 -0
  95. package/src/scss/variables/_breadcrumbs.scss +4 -2
  96. package/src/scss/variables/_forms.scss +2 -0
  97. package/src/scss/variables/_resizer.scss +16 -3
package/src/scss/atlas-custom-properties/variables/_dual-listbox.scss CHANGED
@@ -1,75 +1,72 @@
1
- @if ($enable-atlas-custom-properties) {
2
- $clay-dual-listbox: ();
3
- $clay-dual-listbox: map-deep-merge(
4
- (
5
- display: flex,
6
- flex-direction: row,
7
- ),
8
- $clay-dual-listbox
9
- );
1
+ $clay-dual-listbox: () !default;
2
+ $clay-dual-listbox: map-deep-merge(
3
+ (
4
+ display: flex,
5
+ flex-direction: row,
6
+ ),
7
+ $clay-dual-listbox
8
+ );
10
9
 
11
- $clay-dual-listbox-label: ();
12
- $clay-dual-listbox-label: map-deep-merge(
13
- (
14
- margin-bottom: var(--dual-listbox-label-margin-bottom, 16px),
15
- ),
16
- $clay-dual-listbox-label
17
- );
10
+ $clay-dual-listbox-label: () !default;
11
+ $clay-dual-listbox-label: map-deep-merge(
12
+ (
13
+ margin-bottom: var(--dual-listbox-label-margin-bottom, 16px),
14
+ ),
15
+ $clay-dual-listbox-label
16
+ );
18
17
 
19
- $clay-dual-listbox-clay-reorder: ();
20
- $clay-dual-listbox-clay-reorder: map-deep-merge(
21
- (
22
- display: flex,
23
- flex-direction: column,
24
- flex-grow: 1,
25
- ),
26
- $clay-dual-listbox-clay-reorder
27
- );
18
+ $clay-dual-listbox-clay-reorder: () !default;
19
+ $clay-dual-listbox-clay-reorder: map-deep-merge(
20
+ (
21
+ display: flex,
22
+ flex-direction: column,
23
+ flex-grow: 1,
24
+ ),
25
+ $clay-dual-listbox-clay-reorder
26
+ );
28
27
 
29
- $clay-dual-listbox-item: ();
30
- $clay-dual-listbox-item: map-deep-merge(
31
- (
32
- display: flex,
33
- flex-direction: column,
34
- margin-right: var(--dual-listbox-item-margin-right, 4px),
35
- ),
36
- $clay-dual-listbox-item
37
- );
28
+ $clay-dual-listbox-item: () !default;
29
+ $clay-dual-listbox-item: map-deep-merge(
30
+ (
31
+ display: flex,
32
+ flex-direction: column,
33
+ margin-right: var(--dual-listbox-item-margin-right, 4px),
34
+ ),
35
+ $clay-dual-listbox-item
36
+ );
38
37
 
39
- $clay-dual-listbox-item-sm-up: ();
40
- $clay-dual-listbox-item-sm-up: map-deep-merge(
41
- (
42
- margin-right: var(--dual-listbox-item-sm-up-margin-right, 24px),
43
- ),
44
- $clay-dual-listbox-item-sm-up
45
- );
38
+ $clay-dual-listbox-item-sm-up: () !default;
39
+ $clay-dual-listbox-item-sm-up: map-deep-merge(
40
+ (
41
+ margin-right: var(--dual-listbox-item-sm-up-margin-right, 24px),
42
+ ),
43
+ $clay-dual-listbox-item-sm-up
44
+ );
46
45
 
47
- $clay-dual-listbox-item-last-child: ();
48
- $clay-dual-listbox-item-last-child: map-deep-merge(
49
- (
50
- margin-right:
51
- var(--clay-dual-listbox-item-last-child-margin-right, 0),
52
- ),
53
- $clay-dual-listbox-item-last-child
54
- );
46
+ $clay-dual-listbox-item-last-child: () !default;
47
+ $clay-dual-listbox-item-last-child: map-deep-merge(
48
+ (
49
+ margin-right: var(--clay-dual-listbox-item-last-child-margin-right, 0),
50
+ ),
51
+ $clay-dual-listbox-item-last-child
52
+ );
55
53
 
56
- $clay-dual-listbox-item-expand: ();
57
- $clay-dual-listbox-item-expand: map-deep-merge(
58
- (
59
- flex-grow: 1,
60
- width: var(--clay-dual-listbox-item-expand-width, 48px),
61
- word-wrap: break-word,
62
- ),
63
- $clay-dual-listbox-item-expand
64
- );
54
+ $clay-dual-listbox-item-expand: () !default;
55
+ $clay-dual-listbox-item-expand: map-deep-merge(
56
+ (
57
+ flex-grow: 1,
58
+ width: var(--clay-dual-listbox-item-expand-width, 48px),
59
+ word-wrap: break-word,
60
+ ),
61
+ $clay-dual-listbox-item-expand
62
+ );
65
63
 
66
- $clay-dual-listbox-actions: ();
67
- $clay-dual-listbox-actions: map-deep-merge(
68
- (
69
- align-self: center,
70
- margin-top:
71
- var(--clay-dual-listbox-actions-margin-top, calc(21px + 16px)),
72
- ),
73
- $clay-dual-listbox-actions
74
- );
75
- }
64
+ $clay-dual-listbox-actions: () !default;
65
+ $clay-dual-listbox-actions: map-deep-merge(
66
+ (
67
+ align-self: center,
68
+ margin-top:
69
+ var(--clay-dual-listbox-actions-margin-top, calc(21px + 16px)),
70
+ ),
71
+ $clay-dual-listbox-actions
72
+ );
package/src/scss/atlas-custom-properties/variables/_empty-state.scss CHANGED
@@ -1,104 +1,102 @@
1
- @if ($enable-atlas-custom-properties) {
2
- $c-empty-state: ();
1
+ $c-empty-state: () !default;
3
2
 
4
- $c-empty-state-animation: ();
5
- $c-empty-state-animation: map-deep-merge(
6
- (
7
- align-items: center,
8
- display: flex,
9
- flex-direction: column,
10
- flex-shrink: 0,
11
- margin: 5rem auto 1.5rem,
12
- max-width: 340px,
13
- text-align: center,
14
- ),
15
- $c-empty-state-animation
16
- );
3
+ $c-empty-state-animation: () !default;
4
+ $c-empty-state-animation: map-deep-merge(
5
+ (
6
+ align-items: center,
7
+ display: flex,
8
+ flex-direction: column,
9
+ flex-shrink: 0,
10
+ margin: 5rem auto 1.5rem,
11
+ max-width: 340px,
12
+ text-align: center,
13
+ ),
14
+ $c-empty-state-animation
15
+ );
17
16
 
18
- $c-empty-state-image: ();
19
- $c-empty-state-image: map-deep-merge(
20
- (
21
- margin-bottom: -0.5rem,
22
- max-width: 250px,
23
- width: 100%,
24
- word-wrap: break-word,
25
- ),
26
- $c-empty-state-image
27
- );
17
+ $c-empty-state-image: () !default;
18
+ $c-empty-state-image: map-deep-merge(
19
+ (
20
+ margin-bottom: -0.5rem,
21
+ max-width: 250px,
22
+ width: 100%,
23
+ word-wrap: break-word,
24
+ ),
25
+ $c-empty-state-image
26
+ );
28
27
 
29
- $c-empty-state-aspect-ratio: ();
30
- $c-empty-state-aspect-ratio: map-deep-merge(
31
- (
32
- background-repeat: no-repeat,
33
- background-position: center,
34
- background-size: 100%,
35
- display: block,
36
- padding-bottom: 100%,
37
- position: relative,
38
- width: 100%,
39
- ),
40
- $c-empty-state-aspect-ratio
41
- );
28
+ $c-empty-state-aspect-ratio: () !default;
29
+ $c-empty-state-aspect-ratio: map-deep-merge(
30
+ (
31
+ background-repeat: no-repeat,
32
+ background-position: center,
33
+ background-size: 100%,
34
+ display: block,
35
+ padding-bottom: 100%,
36
+ position: relative,
37
+ width: 100%,
38
+ ),
39
+ $c-empty-state-aspect-ratio
40
+ );
42
41
 
43
- $c-empty-state-title: ();
44
- $c-empty-state-title: map-deep-merge(
45
- (
46
- font-size: 1.25rem,
47
- font-weight: $font-weight-semi-bold,
48
- line-height: $headings-line-height,
49
- margin-bottom: 0rem,
50
- margin-top: 2.5rem,
51
- max-width: 100%,
52
- word-wrap: break-word,
53
- ),
54
- $c-empty-state-title
55
- );
42
+ $c-empty-state-title: () !default;
43
+ $c-empty-state-title: map-deep-merge(
44
+ (
45
+ font-size: 1.25rem,
46
+ font-weight: $font-weight-semi-bold,
47
+ line-height: $headings-line-height,
48
+ margin-bottom: 0rem,
49
+ margin-top: 2.5rem,
50
+ max-width: 100%,
51
+ word-wrap: break-word,
52
+ ),
53
+ $c-empty-state-title
54
+ );
56
55
 
57
- $c-empty-state-text: ();
58
- $c-empty-state-text: map-deep-merge(
59
- (
60
- color: $secondary,
61
- margin-bottom: 0rem,
62
- margin-top: 0.5rem,
63
- max-width: 100%,
64
- word-wrap: break-word,
65
- ),
66
- $c-empty-state-text
67
- );
56
+ $c-empty-state-text: () !default;
57
+ $c-empty-state-text: map-deep-merge(
58
+ (
59
+ color: $secondary,
60
+ margin-bottom: 0rem,
61
+ margin-top: 0.5rem,
62
+ max-width: 100%,
63
+ word-wrap: break-word,
64
+ ),
65
+ $c-empty-state-text
66
+ );
68
67
 
69
- $c-empty-state-footer: ();
70
- $c-empty-state-footer: map-deep-merge(
71
- (
72
- margin-top: 1rem,
73
- max-width: 100%,
74
- word-wrap: break-word,
75
- ),
76
- $c-empty-state-footer
77
- );
68
+ $c-empty-state-footer: () !default;
69
+ $c-empty-state-footer: map-deep-merge(
70
+ (
71
+ margin-top: 1rem,
72
+ max-width: 100%,
73
+ word-wrap: break-word,
74
+ ),
75
+ $c-empty-state-footer
76
+ );
78
77
 
79
- // .c-empty-state-sm
78
+ // .c-empty-state-sm
80
79
 
81
- $c-empty-state-sm: ();
82
- $c-empty-state-sm: map-deep-merge(
83
- (
84
- c-empty-state-animation: (
85
- margin: 2.5rem auto 2rem,
86
- max-width: 268px,
87
- ),
80
+ $c-empty-state-sm: () !default;
81
+ $c-empty-state-sm: map-deep-merge(
82
+ (
83
+ c-empty-state-animation: (
84
+ margin: 2.5rem auto 2rem,
85
+ max-width: 268px,
86
+ ),
88
87
 
89
- c-empty-state-image: (
90
- max-width: 120px,
91
- ),
88
+ c-empty-state-image: (
89
+ max-width: 120px,
90
+ ),
92
91
 
93
- c-empty-state-title: (
94
- font-size: 1rem,
95
- line-height: 1.5,
96
- ),
92
+ c-empty-state-title: (
93
+ font-size: 1rem,
94
+ line-height: 1.5,
95
+ ),
97
96
 
98
- c-empty-state-text: (
99
- font-size: 0.875rem,
100
- ),
97
+ c-empty-state-text: (
98
+ font-size: 0.875rem,
101
99
  ),
102
- $c-empty-state-sm
103
- );
104
- }
100
+ ),
101
+ $c-empty-state-sm
102
+ );