@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/_range.scss CHANGED
@@ -1,267 +1,262 @@
1
- @if ($enable-atlas-custom-properties) {
2
- $clay-range-disabled-color: var(--clay-range-disabled-color, $gray-500);
1
+ $clay-range-disabled-color: var(
2
+ --clay-range-disabled-color,
3
+ $gray-500
4
+ ) !default;
3
5
 
4
- $clay-range-input-group: ();
5
- $clay-range-input-group: map-merge(
6
- (
7
- align-items: center,
8
- ),
9
- $clay-range-input-group
10
- );
6
+ $clay-range-input-group: () !default;
7
+ $clay-range-input-group: map-merge(
8
+ (
9
+ align-items: center,
10
+ ),
11
+ $clay-range-input-group
12
+ );
11
13
 
12
- $clay-range-input-group-item: ();
13
- $clay-range-input-group-item: map-merge(
14
- (
15
- flex-direction: column,
16
- ),
17
- $clay-range-input-group-item
18
- );
14
+ $clay-range-input-group-item: () !default;
15
+ $clay-range-input-group-item: map-merge(
16
+ (
17
+ flex-direction: column,
18
+ ),
19
+ $clay-range-input-group-item
20
+ );
19
21
 
20
- $clay-range-input-group-text: ();
21
- $clay-range-input-group-text: map-merge(
22
- (
23
- background-color:
24
- var(
25
- --clay-range-input-group-text-background-color,
26
- setter(
27
- map-get($clay-range-input-group-text, bg),
28
- transparent
29
- )
30
- ),
31
- border-width: 0,
32
- color: var(--clay-range-input-group-text-color, $gray-500),
33
- font-size: var(--clay-range-input-group-text-font-size, 14px),
34
- font-weight:
22
+ $clay-range-input-group-text: () !default;
23
+ $clay-range-input-group-text: map-merge(
24
+ (
25
+ background-color:
26
+ var(
27
+ --clay-range-input-group-text-background-color,
28
+ setter(map-get($clay-range-input-group-text, bg), transparent)
29
+ ),
30
+ border-width: 0,
31
+ color: var(--clay-range-input-group-text-color, $gray-500),
32
+ font-size: var(--clay-range-input-group-text-font-size, 14px),
33
+ font-weight:
34
+ var(
35
+ --clay-range-input-group-text-font-weight,
36
+ $font-weight-semi-bold
37
+ ),
38
+ min-width: var(--clay-range-input-group-text-min-width, 24px),
39
+ padding-bottom: 0,
40
+ padding-left: 0,
41
+ padding-right: 0,
42
+ padding-top: 0,
43
+ ),
44
+ $clay-range-input-group-text
45
+ );
46
+
47
+ $clay-range-title: () !default;
48
+ $clay-range-title: map-deep-merge(
49
+ (
50
+ color: var(--clay-range-title-color),
51
+ display: block,
52
+ font-size: var(--clay-range-title-font-size),
53
+ font-weight: var(--clay-range-title-font-weight, $font-weight-semi-bold),
54
+ line-height: var(--clay-range-title-line-height, 1),
55
+ margin-bottom: var(--clay-range-title-margin-bottom, 8px),
56
+ text-align: center,
57
+ ),
58
+ $clay-range-title
59
+ );
60
+
61
+ $clay-range-input: () !default;
62
+ $clay-range-input: map-deep-merge(
63
+ (
64
+ color: var(--clay-range-input-color, $gray-500),
65
+ display: block,
66
+ padding-bottom: 0.1px,
67
+ position: relative,
68
+ vertical-align: middle,
69
+ width: 100%,
70
+
71
+ clay-range-thumb: (
72
+ background-color: var(--clay-range-thumb-background-color, $white),
73
+ border: var(--clay-range-thumb-border),
74
+ border-radius: var(--clay-range-thumb-border-radius, 100px),
75
+ border-width: var(--clay-range-thumb-border-width, 0),
76
+ box-shadow:
35
77
  var(
36
- --clay-range-input-group-text-font-weight,
37
- $font-weight-semi-bold
78
+ --clay-range-thumb-box-shadow,
79
+ 0 1px 5px -1px rgba(0, 0, 0, 0.3)
38
80
  ),
39
- min-width: var(--clay-range-input-group-text-min-width, 24px),
40
- padding-bottom: 0,
41
- padding-left: 0,
42
- padding-right: 0,
43
- padding-top: 0,
81
+ height: var(--clay-range-thumb-height, 24px),
82
+ margin-top: var(--clay-range-thumb-margin-top, -0.75rem),
83
+ width: var(--clay-range-thumb-width, 24px),
44
84
  ),
45
- $clay-range-input-group-text
46
- );
47
85
 
48
- $clay-range-title: ();
49
- $clay-range-title: map-deep-merge(
50
- (
51
- color: var(--clay-range-title-color),
52
- display: block,
53
- font-size: var(--clay-range-title-font-size),
54
- font-weight:
55
- var(--clay-range-title-font-weight, $font-weight-semi-bold),
56
- line-height: var(--clay-range-title-line-height, 1),
57
- margin-bottom: var(--clay-range-title-margin-bottom, 8px),
58
- text-align: center,
59
- ),
60
- $clay-range-title
61
- );
62
-
63
- $clay-range-input: ();
64
- $clay-range-input: map-deep-merge(
65
- (
66
- color: var(--clay-range-input-color, $gray-500),
67
- display: block,
68
- padding-bottom: 0.1px,
69
- position: relative,
70
- vertical-align: middle,
86
+ clay-range-track: (
87
+ background-color:
88
+ var(--clay-range-track-background-color, $gray-200),
89
+ border-radius: var(--clay-range-track-border-radius, 100px),
90
+ height: var(--clay-range-track-height, 4px),
91
+ position: absolute,
92
+ top: 50%,
71
93
  width: 100%,
94
+ ),
72
95
 
73
- clay-range-thumb: (
74
- background-color:
75
- var(--clay-range-thumb-background-color, $white),
76
- border: var(--clay-range-thumb-border),
77
- border-radius: var(--clay-range-thumb-border-radius, 100px),
78
- border-width: var(--clay-range-thumb-border-width, 0),
79
- box-shadow:
80
- var(
81
- --clay-range-thumb-box-shadow,
82
- 0 1px 5px -1px rgba(0, 0, 0, 0.3)
83
- ),
84
- height: var(--clay-range-thumb-height, 24px),
85
- margin-top: var(--clay-range-thumb-margin-top, -0.75rem),
86
- width: var(--clay-range-thumb-width, 24px),
87
- ),
96
+ clay-range-progress: (
97
+ background-color:
98
+ var(--clay-range-progress-background-color, $primary),
99
+ border-radius:
100
+ var(--clay-range-progress-border-radius, 100px 0 0 100px),
101
+ position: absolute,
102
+ top: 50%,
103
+ width: 50%,
104
+ ),
88
105
 
89
- clay-range-track: (
90
- background-color:
91
- var(--clay-range-track-background-color, $gray-200),
92
- border-radius: var(--clay-range-track-border-radius, 100px),
93
- height: var(--clay-range-track-height, 4px),
94
- position: absolute,
95
- top: 50%,
96
- width: 100%,
97
- ),
106
+ tooltip: (
107
+ margin-left: 13px,
108
+ transition: opacity 0.15s linear,
109
+ visibility: hidden,
110
+ white-space: nowrap,
111
+ ),
98
112
 
99
- clay-range-progress: (
100
- background-color:
101
- var(--clay-range-progress-background-color, $primary),
102
- border-radius:
103
- var(--clay-range-progress-border-radius, 100px 0 0 100px),
104
- position: absolute,
105
- top: 50%,
106
- width: 50%,
107
- ),
113
+ tooltip-inner: (
114
+ padding: 8px 12px,
115
+ ),
108
116
 
109
- tooltip: (
110
- margin-left: 13px,
111
- transition: opacity 0.15s linear,
112
- visibility: hidden,
113
- white-space: nowrap,
114
- ),
117
+ tooltip-arrow: (
118
+ height: 6px,
119
+ width: 6px,
120
+ ),
115
121
 
116
- tooltip-inner: (
117
- padding: 8px 12px,
122
+ clay-tooltip-bottom: (
123
+ margin-top: 4px,
124
+ padding-top: 3px,
125
+ top: 100%,
126
+ transform: translateX(-50%),
127
+ tooltip-arrow: (
128
+ margin-left: -4px,
118
129
  ),
130
+ ),
119
131
 
132
+ clay-tooltip-top: (
133
+ bottom: 100%,
134
+ margin-bottom: 4px,
135
+ padding-bottom: 3px,
136
+ transform: translateX(-50%),
120
137
  tooltip-arrow: (
121
- height: 6px,
122
- width: 6px,
138
+ margin-left: -4px,
123
139
  ),
140
+ ),
141
+ form-control-range: (
142
+ appearance: none,
143
+ background-color: transparent,
144
+ height: var(--form-control-range-height, $input-height),
145
+ position: relative,
124
146
 
125
- clay-tooltip-bottom: (
126
- margin-top: 4px,
127
- padding-top: 3px,
128
- top: 100%,
129
- transform: translateX(-50%),
130
- tooltip-arrow: (
131
- margin-left: -4px,
132
- ),
133
- ),
147
+ hover: (
148
+ cursor: $link-cursor,
134
149
 
135
- clay-tooltip-top: (
136
- bottom: 100%,
137
- margin-bottom: 4px,
138
- padding-bottom: 3px,
139
- transform: translateX(-50%),
140
- tooltip-arrow: (
141
- margin-left: -4px,
150
+ clay-range-thumb: (
151
+ background-color:
152
+ var(
153
+ --clay-range-thumb-hover-background-color,
154
+ $primary-l3
155
+ ),
142
156
  ),
143
157
  ),
144
- form-control-range: (
145
- appearance: none,
146
- background-color: transparent,
147
- height: var(--form-control-range-height, $input-height),
148
- position: relative,
149
158
 
150
- hover: (
151
- cursor: $link-cursor,
159
+ focus: (
160
+ outline: 0,
152
161
 
153
- clay-range-thumb: (
154
- background-color:
155
- var(
156
- --clay-range-thumb-hover-background-color,
157
- $primary-l3
158
- ),
159
- ),
162
+ clay-range-thumb: (
163
+ box-shadow:
164
+ var(
165
+ --clay-range-thumb-focus-box-shadow,
166
+ $component-focus-inset-box-shadow
167
+ ),
160
168
  ),
169
+ ),
161
170
 
162
- focus: (
163
- outline: 0,
164
-
165
- clay-range-thumb: (
166
- box-shadow:
167
- var(
168
- --clay-range-thumb-focus-box-shadow,
169
- $component-focus-inset-box-shadow
170
- ),
171
+ disabled: (
172
+ color:
173
+ var(
174
+ --clay-range-input-disabled-color,
175
+ $clay-range-disabled-color
171
176
  ),
172
- ),
177
+ cursor: $disabled-cursor,
173
178
 
174
- disabled: (
175
- color:
179
+ clay-range-thumb: (
180
+ background-color:
176
181
  var(
177
- --clay-range-input-disabled-color,
178
- $clay-range-disabled-color
182
+ --clay-range-thumb-disabled-background-color,
183
+ $gray-100
179
184
  ),
180
- cursor: $disabled-cursor,
181
-
182
- clay-range-thumb: (
183
- background-color:
184
- var(
185
- --clay-range-thumb-disabled-background-color,
186
- $gray-100
187
- ),
188
- ),
185
+ ),
189
186
 
190
- clay-range-progress: (
191
- background-color:
192
- var(
193
- --clay-range-progress-disabled-clay-range-progress,
194
- $primary-l2
195
- ),
196
- ),
187
+ clay-range-progress: (
188
+ background-color:
189
+ var(
190
+ --clay-range-progress-disabled-clay-range-progress,
191
+ $primary-l2
192
+ ),
193
+ ),
197
194
 
198
- clay-range-track: (
199
- background-color:
200
- var(
201
- --clay-range-track-disabled-clay-range-track,
202
- $gray-200
203
- ),
204
- ),
195
+ clay-range-track: (
196
+ background-color:
197
+ var(
198
+ --clay-range-track-disabled-clay-range-track,
199
+ $gray-200
200
+ ),
205
201
  ),
206
202
  ),
203
+ ),
207
204
 
208
- data-label-min-max: (
209
- margin-bottom: var(--data-label-spacer, 16px),
210
- ),
205
+ data-label-min-max: (
206
+ margin-bottom: var(--data-label-spacer, 16px),
207
+ ),
211
208
 
212
- before-after: (
213
- font-size: var(--data-label-font-size, 14px),
214
- font-weight:
215
- var(--data-label-font-weight, $font-weight-semi-bold),
216
- line-height: var(--data-label-line-height, 1),
217
- margin-top: var(--data-label-margin-top, 40px),
218
- position: absolute,
219
- text-align: center,
220
- top: var(--data-label-top, 0),
221
- width: var(--data-label-width, 24px),
222
- ),
209
+ before-after: (
210
+ font-size: var(--data-label-font-size, 14px),
211
+ font-weight: var(--data-label-font-weight, $font-weight-semi-bold),
212
+ line-height: var(--data-label-line-height, 1),
213
+ margin-top: var(--data-label-margin-top, 40px),
214
+ position: absolute,
215
+ text-align: center,
216
+ top: var(--data-label-top, 0),
217
+ width: var(--data-label-width, 24px),
218
+ ),
223
219
 
224
- data-label-min: (
225
- before: (
226
- content: unquote("'\\FEFF' attr(data-label-min)"),
227
- ),
220
+ data-label-min: (
221
+ before: (
222
+ content: unquote("'\\FEFF' attr(data-label-min)"),
228
223
  ),
224
+ ),
229
225
 
230
- data-label-max: (
231
- after: (
232
- content: unquote("'\\FEFF' attr(data-label-max)"),
233
- right: 0,
234
- ),
226
+ data-label-max: (
227
+ after: (
228
+ content: unquote("'\\FEFF' attr(data-label-max)"),
229
+ right: 0,
235
230
  ),
236
231
  ),
237
- $clay-range-input
238
- );
232
+ ),
233
+ $clay-range-input
234
+ );
239
235
 
240
- $clay-range-progress-none: ();
241
- $clay-range-progress-none: map-deep-merge(
242
- (
243
- clay-range-input: (
244
- ms-thumb: (
245
- visibility: visible,
246
- ),
236
+ $clay-range-progress-none: () !default;
237
+ $clay-range-progress-none: map-deep-merge(
238
+ (
239
+ clay-range-input: (
240
+ ms-thumb: (
241
+ visibility: visible,
242
+ ),
247
243
 
248
- moz-range-thumb: (
249
- visibility: visible,
250
- ),
244
+ moz-range-thumb: (
245
+ visibility: visible,
246
+ ),
251
247
 
252
- webkit-slider-thumb: (
253
- visibility: visible,
254
- ),
248
+ webkit-slider-thumb: (
249
+ visibility: visible,
250
+ ),
255
251
 
256
- clay-range-thumb: (
257
- visibility: hidden,
258
- ),
252
+ clay-range-thumb: (
253
+ visibility: hidden,
254
+ ),
259
255
 
260
- clay-range-progress: (
261
- visibility: hidden,
262
- ),
256
+ clay-range-progress: (
257
+ visibility: hidden,
263
258
  ),
264
259
  ),
265
- $clay-range-progress-none
266
- );
267
- }
260
+ ),
261
+ $clay-range-progress-none
262
+ );
package/src/scss/atlas-custom-properties/variables/_reorder.scss CHANGED
@@ -1,91 +1,91 @@
1
- @if ($enable-atlas-custom-properties) {
2
- $clay-reorder: ();
3
- $clay-reorder: map-deep-merge(
4
- (
5
- padding: var(--clay-reorder-padding, 2px),
6
- position: relative,
7
- z-index: 0,
8
- ),
9
- $clay-reorder
10
- );
1
+ $clay-reorder: () !default;
2
+ $clay-reorder: map-deep-merge(
3
+ (
4
+ padding: var(--clay-reorder-padding, 2px),
5
+ position: relative,
6
+ z-index: 0,
7
+ ),
8
+ $clay-reorder
9
+ );
11
10
 
12
- $clay-reorder-input-inset: ();
13
- $clay-reorder-input-inset: map-deep-merge(
14
- (
15
- margin-bottom: 0,
16
- margin-top: 0,
17
- overflow: auto,
18
- padding-bottom: $input-padding-y,
19
- padding-top: $input-padding-y,
20
- width: 100%,
11
+ $clay-reorder-input-inset: () !default;
12
+ $clay-reorder-input-inset: map-deep-merge(
13
+ (
14
+ margin-bottom: 0,
15
+ margin-top: 0,
16
+ overflow: auto,
17
+ padding-bottom: $input-padding-y,
18
+ padding-top: $input-padding-y,
19
+ width: 100%,
21
20
 
22
- focus: (
23
- background-color: transparent,
24
- box-shadow: none,
25
- ),
21
+ focus: (
22
+ background-color: transparent,
23
+ box-shadow: none,
26
24
  ),
27
- $clay-reorder-input-inset
28
- );
25
+ ),
26
+ $clay-reorder-input-inset
27
+ );
29
28
 
30
- $clay-reorder-underlay: ();
31
- $clay-reorder-underlay: map-deep-merge(
32
- (
33
- bottom: 0,
34
- left: 0,
35
- position: absolute,
36
- right: 0,
37
- top: 0,
38
- z-index: -1,
39
- ),
40
- $clay-reorder-underlay
41
- );
29
+ $clay-reorder-underlay: () !default;
30
+ $clay-reorder-underlay: map-deep-merge(
31
+ (
32
+ bottom: 0,
33
+ left: 0,
34
+ position: absolute,
35
+ right: 0,
36
+ top: 0,
37
+ z-index: -1,
38
+ ),
39
+ $clay-reorder-underlay
40
+ );
42
41
 
43
- $clay-reorder-underlay-focus: ();
44
- $clay-reorder-underlay-focus: map-deep-merge(
45
- (
46
- background-color:
47
- var(
48
- --clay-reorder-underlay-focus-background-color,
49
- $input-focus-bg
50
- ),
51
- border-color:
52
- var(
53
- --clay-reorder-underlay-focus-border-color,
54
- $input-focus-border-color
55
- ),
56
- ),
57
- $clay-reorder-underlay-focus
58
- );
42
+ $clay-reorder-underlay-focus: () !default;
43
+ $clay-reorder-underlay-focus: map-deep-merge(
44
+ (
45
+ background-color:
46
+ var(--clay-reorder-underlay-focus-background-color, $input-focus-bg),
47
+ border-color:
48
+ var(
49
+ --clay-reorder-underlay-focus-border-color,
50
+ $input-focus-border-color
51
+ ),
52
+ box-shadow:
53
+ var(
54
+ --clay-reorder-underlay-focus-box-shadow,
55
+ $input-focus-box-shadow
56
+ ),
57
+ ),
58
+ $clay-reorder-underlay-focus
59
+ );
59
60
 
60
- $clay-reorder-footer: ();
61
- $clay-reorder-footer: map-deep-merge(
62
- (
63
- padding: var(--clay-reoder-footer-padding, 8px),
64
- ),
65
- $clay-reorder-footer
66
- );
61
+ $clay-reorder-footer: () !default;
62
+ $clay-reorder-footer: map-deep-merge(
63
+ (
64
+ padding: var(--clay-reoder-footer-padding, 8px),
65
+ ),
66
+ $clay-reorder-footer
67
+ );
67
68
 
68
- $clay-reorder-footer-invisible: ();
69
- $clay-reorder-footer-invisible: map-deep-merge(
70
- (
71
- visibility: hidden,
72
- ),
73
- $clay-reorder-footer-invisible
74
- );
69
+ $clay-reorder-footer-invisible: () !default;
70
+ $clay-reorder-footer-invisible: map-deep-merge(
71
+ (
72
+ visibility: hidden,
73
+ ),
74
+ $clay-reorder-footer-invisible
75
+ );
75
76
 
76
- $clay-reorder-footer-center: ();
77
- $clay-reorder-footer-center: map-deep-merge(
78
- (
79
- text-align: center,
80
- ),
81
- $clay-reorder-footer-center
82
- );
77
+ $clay-reorder-footer-center: () !default;
78
+ $clay-reorder-footer-center: map-deep-merge(
79
+ (
80
+ text-align: center,
81
+ ),
82
+ $clay-reorder-footer-center
83
+ );
83
84
 
84
- $clay-reorder-footer-end: ();
85
- $clay-reorder-footer-end: map-deep-merge(
86
- (
87
- text-align: right,
88
- ),
89
- $clay-reorder-footer-end
90
- );
91
- }
85
+ $clay-reorder-footer-end: () !default;
86
+ $clay-reorder-footer-end: map-deep-merge(
87
+ (
88
+ text-align: right,
89
+ ),
90
+ $clay-reorder-footer-end
91
+ );