@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/_type.scss CHANGED
@@ -1,194 +1,195 @@
1
- @if ($enable-atlas-custom-properties) {
2
- $b-font-weight: var(--b-font-weight, $font-weight-semi-bold);
1
+ $b-font-weight: var(--b-font-weight, $font-weight-semi-bold) !default;
3
2
 
4
- $strong-font-weight: var(--strong-font-weight, $font-weight-semi-bold);
3
+ $strong-font-weight: var(--strong-font-weight, $font-weight-semi-bold) !default;
5
4
 
6
- $reference-mark-font-size: var(--reference-mark-font-size, 12px);
7
- $reference-mark-vertical-align: var(--reference-mark-vertical-align, super);
5
+ $reference-mark-font-size: var(--reference-mark-font-size, 12px) !default;
6
+ $reference-mark-vertical-align: var(
7
+ --reference-mark-vertical-align,
8
+ super
9
+ ) !default;
8
10
 
9
- $reference-mark: ();
10
- $reference-mark: map-deep-merge(
11
- (
12
- display: inline-block,
13
- font-size: $reference-mark-font-size,
14
- position: relative,
15
- vertical-align: $reference-mark-vertical-align,
11
+ $reference-mark: () !default;
12
+ $reference-mark: map-deep-merge(
13
+ (
14
+ display: inline-block,
15
+ font-size: $reference-mark-font-size,
16
+ position: relative,
17
+ vertical-align: $reference-mark-vertical-align,
16
18
 
17
- lexicon-icon: (
18
- vertical-align: $reference-mark-vertical-align,
19
- ),
20
- ),
21
- $reference-mark
22
- );
23
-
24
- // C Kbd
25
-
26
- $c-kbd-group: ();
27
- $c-kbd-group: map-deep-merge(
28
- (
29
- font-size: var(--c-kbd-group-font-size, 14px),
30
- c-kbd: (
31
- font-size: inherit,
32
- ),
33
- ),
34
- $c-kbd-group
35
- );
36
-
37
- $c-kbd: ();
38
- $c-kbd: map-deep-merge(
39
- (
40
- background-color: var(--c-kbd-background-color, transparent),
41
- border-radius: var(--c-kbd-border-radius, 2px),
42
- border-color: var(--c-kbd-border-color, transparent),
43
- border-style: var(--c-kbd-border-style, solid),
44
- border-width: var(--c-kbd-border-width, 1px),
45
- box-shadow: var(--c-kbd-box-shadow, none),
46
- color: var(--c-kbd-color, inherit),
47
- display: var(--c-kbd-display, inline-block),
48
- font-family: var(--c-kbd-font-family, $font-family-sans-serif),
49
- font-size: var(--c-kbd-font-size, 14px),
50
- font-weight: var(--c-kbd-font-weight, $font-weight-semi-bold),
51
- height: var(--c-kbd-height, 24px),
52
- line-height: var(--c-kbd-line-height, 22px),
53
- min-width: var(--c-kbd-min-width, 24px),
54
- padding-bottom: var(--c-kbd-padding-bottom, 0),
55
- padding-left: var(--c-kbd-padding-left, 5px),
56
- padding-right: var(--c-kbd-padding-right, 5px),
57
- padding-top: var(--c-kbd-padding-top, 0),
58
- text-align: center,
59
- text-transform: capitalize,
19
+ lexicon-icon: (
20
+ vertical-align: $reference-mark-vertical-align,
60
21
  ),
61
- $c-kbd
62
- );
22
+ ),
23
+ $reference-mark
24
+ );
63
25
 
64
- // .c-kbd > .c-kbd
26
+ // C Kbd
65
27
 
66
- $c-kbd-c-kbd: ();
67
- $c-kbd-c-kbd: map-merge(
68
- (
69
- border-width: 0,
28
+ $c-kbd-group: () !default;
29
+ $c-kbd-group: map-deep-merge(
30
+ (
31
+ font-size: var(--c-kbd-group-font-size, 14px),
32
+ c-kbd: (
70
33
  font-size: inherit,
71
- font-weight: inherit,
72
- height: auto,
73
- line-height: inherit,
74
- min-width: 0,
75
- padding: 0,
76
- ),
77
- $c-kbd-c-kbd
78
- );
79
-
80
- $c-kbd-monospaced: ();
81
- $c-kbd-monospaced: map-deep-merge(
82
- (
83
- padding: 0,
84
- ),
85
- $c-kbd-monospaced
86
- );
87
-
88
- $c-kbd-inline: ();
89
- $c-kbd-inline: map-deep-merge(
90
- (
91
- border-width: 0,
92
- font-weight: $font-weight-light,
93
- height: auto,
94
- line-height: inherit,
95
- min-width: 0,
96
- padding: 0,
97
- ),
98
- $c-kbd-inline
99
- );
100
-
101
- // Kbd Separator
102
-
103
- // .c-kbd > .c-kbd-separator
104
-
105
- $c-kbd-c-kbd-separator: ();
106
- $c-kbd-c-kbd-separator: map-merge(
107
- (
108
- font-weight: $font-weight-normal,
109
- ),
110
- $c-kbd-c-kbd-separator
111
- );
112
-
113
- // .c-kbd-inline > .c-kbd-separator
114
-
115
- $c-kbd-inline-c-kbd-separator: ();
116
- $c-kbd-inline-c-kbd-separator: map-merge(
117
- (
118
- font-weight: inherit,
119
- ),
120
- $c-kbd-inline-c-kbd-separator
121
- );
122
-
123
- // Kbd Sizes
124
-
125
- $c-kbd-group-sm: ();
126
- $c-kbd-group-sm: map-deep-merge(
127
- (
128
- font-size: var(--c-kbd-group-sm-font-size, 12px),
129
- ),
130
- $c-kbd-group-sm
131
- );
132
-
133
- $c-kbd-sm: ();
134
- $c-kbd-sm: map-deep-merge(
135
- (
136
- font-size: var(--c-kbd-sm-font-size, 12px),
137
- ),
138
- $c-kbd-sm
139
- );
140
-
141
- $c-kbd-group-lg: ();
142
- $c-kbd-group-lg: map-deep-merge(
143
- (
144
- font-size: var(--c-kbd-group-lg-font-size, 16px),
145
- ),
146
- $c-kbd-group-lg
147
- );
148
-
149
- $c-kbd-lg: ();
150
- $c-kbd-lg: map-deep-merge(
151
- (
152
- font-size: var(--c-kbd-lg-font-size, 16px),
153
- ),
154
- $c-kbd-lg
155
- );
156
-
157
- // Kbd Variants
158
-
159
- $c-kbd-group-light: ();
160
- $c-kbd-group-light: map-deep-merge(
161
- (
162
- color: var(--c-kbd-group-light-color, $secondary),
163
- ),
164
- $c-kbd-group-light
165
- );
166
-
167
- $c-kbd-light: ();
168
- $c-kbd-light: map-deep-merge(
169
- (
170
- background-color: var(--c-kbd-light-background-color, $white),
171
- border-color: var(--c-kbd-light-border-color, $gray-400),
172
- color: var(--c-kbd-light-color, $secondary),
173
- ),
174
- $c-kbd-light
175
- );
176
-
177
- $c-kbd-group-dark: ();
178
- $c-kbd-group-dark: map-deep-merge(
179
- (
180
- color: var(--c-kbd-group-dark-color, $white),
181
- ),
182
- $c-kbd-group-dark
183
- );
184
-
185
- $c-kbd-dark: ();
186
- $c-kbd-dark: map-deep-merge(
187
- (
188
- background-color: var(--c-kbd-dark-background-color, $dark-l2),
189
- border-color: var(--c-kbd-dark-border-color, $dark-l2),
190
- color: var(--c-kbd-dark-color, $white),
191
34
  ),
192
- $c-kbd-dark
193
- );
194
- }
35
+ ),
36
+ $c-kbd-group
37
+ );
38
+
39
+ $c-kbd: () !default;
40
+ $c-kbd: map-deep-merge(
41
+ (
42
+ background-color: var(--c-kbd-background-color, transparent),
43
+ border-radius: var(--c-kbd-border-radius, 2px),
44
+ border-color: var(--c-kbd-border-color, transparent),
45
+ border-style: var(--c-kbd-border-style, solid),
46
+ border-width: var(--c-kbd-border-width, 1px),
47
+ box-shadow: var(--c-kbd-box-shadow, none),
48
+ color: var(--c-kbd-color, inherit),
49
+ display: var(--c-kbd-display, inline-block),
50
+ font-family: var(--c-kbd-font-family, $font-family-sans-serif),
51
+ font-size: var(--c-kbd-font-size, 14px),
52
+ font-weight: var(--c-kbd-font-weight, $font-weight-semi-bold),
53
+ height: var(--c-kbd-height, 24px),
54
+ line-height: var(--c-kbd-line-height, 22px),
55
+ min-width: var(--c-kbd-min-width, 24px),
56
+ padding-bottom: var(--c-kbd-padding-bottom, 0),
57
+ padding-left: var(--c-kbd-padding-left, 5px),
58
+ padding-right: var(--c-kbd-padding-right, 5px),
59
+ padding-top: var(--c-kbd-padding-top, 0),
60
+ text-align: center,
61
+ text-transform: capitalize,
62
+ ),
63
+ $c-kbd
64
+ );
65
+
66
+ // .c-kbd > .c-kbd
67
+
68
+ $c-kbd-c-kbd: () !default;
69
+ $c-kbd-c-kbd: map-merge(
70
+ (
71
+ border-width: 0,
72
+ font-size: inherit,
73
+ font-weight: inherit,
74
+ height: auto,
75
+ line-height: inherit,
76
+ min-width: 0,
77
+ padding: 0,
78
+ ),
79
+ $c-kbd-c-kbd
80
+ );
81
+
82
+ $c-kbd-monospaced: () !default;
83
+ $c-kbd-monospaced: map-deep-merge(
84
+ (
85
+ padding: 0,
86
+ ),
87
+ $c-kbd-monospaced
88
+ );
89
+
90
+ $c-kbd-inline: () !default;
91
+ $c-kbd-inline: map-deep-merge(
92
+ (
93
+ border-width: 0,
94
+ font-weight: $font-weight-light,
95
+ height: auto,
96
+ line-height: inherit,
97
+ min-width: 0,
98
+ padding: 0,
99
+ ),
100
+ $c-kbd-inline
101
+ );
102
+
103
+ // Kbd Separator
104
+
105
+ // .c-kbd > .c-kbd-separator
106
+
107
+ $c-kbd-c-kbd-separator: () !default;
108
+ $c-kbd-c-kbd-separator: map-merge(
109
+ (
110
+ font-weight: $font-weight-normal,
111
+ ),
112
+ $c-kbd-c-kbd-separator
113
+ );
114
+
115
+ // .c-kbd-inline > .c-kbd-separator
116
+
117
+ $c-kbd-inline-c-kbd-separator: () !default;
118
+ $c-kbd-inline-c-kbd-separator: map-merge(
119
+ (
120
+ font-weight: inherit,
121
+ ),
122
+ $c-kbd-inline-c-kbd-separator
123
+ );
124
+
125
+ // Kbd Sizes
126
+
127
+ $c-kbd-group-sm: () !default;
128
+ $c-kbd-group-sm: map-deep-merge(
129
+ (
130
+ font-size: var(--c-kbd-group-sm-font-size, 12px),
131
+ ),
132
+ $c-kbd-group-sm
133
+ );
134
+
135
+ $c-kbd-sm: () !default;
136
+ $c-kbd-sm: map-deep-merge(
137
+ (
138
+ font-size: var(--c-kbd-sm-font-size, 12px),
139
+ ),
140
+ $c-kbd-sm
141
+ );
142
+
143
+ $c-kbd-group-lg: () !default;
144
+ $c-kbd-group-lg: map-deep-merge(
145
+ (
146
+ font-size: var(--c-kbd-group-lg-font-size, 16px),
147
+ ),
148
+ $c-kbd-group-lg
149
+ );
150
+
151
+ $c-kbd-lg: () !default;
152
+ $c-kbd-lg: map-deep-merge(
153
+ (
154
+ font-size: var(--c-kbd-lg-font-size, 16px),
155
+ ),
156
+ $c-kbd-lg
157
+ );
158
+
159
+ // Kbd Variants
160
+
161
+ $c-kbd-group-light: () !default;
162
+ $c-kbd-group-light: map-deep-merge(
163
+ (
164
+ color: var(--c-kbd-group-light-color, $secondary),
165
+ ),
166
+ $c-kbd-group-light
167
+ );
168
+
169
+ $c-kbd-light: () !default;
170
+ $c-kbd-light: map-deep-merge(
171
+ (
172
+ background-color: var(--c-kbd-light-background-color, $white),
173
+ border-color: var(--c-kbd-light-border-color, $gray-400),
174
+ color: var(--c-kbd-light-color, $secondary),
175
+ ),
176
+ $c-kbd-light
177
+ );
178
+
179
+ $c-kbd-group-dark: () !default;
180
+ $c-kbd-group-dark: map-deep-merge(
181
+ (
182
+ color: var(--c-kbd-group-dark-color, $white),
183
+ ),
184
+ $c-kbd-group-dark
185
+ );
186
+
187
+ $c-kbd-dark: () !default;
188
+ $c-kbd-dark: map-deep-merge(
189
+ (
190
+ background-color: var(--c-kbd-dark-background-color, $dark-l2),
191
+ border-color: var(--c-kbd-dark-border-color, $dark-l2),
192
+ color: var(--c-kbd-dark-color, $white),
193
+ ),
194
+ $c-kbd-dark
195
+ );