@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/_multi-step-nav.scss CHANGED
@@ -1,324 +1,354 @@
1
- @if ($enable-atlas-custom-properties) {
2
- $multi-step-nav-margin-bottom: var(--multi-step-nav-margin-bottom, 15px);
3
- $multi-step-nav-padding-x: var(--multi-step-nav-padding-x, 15px);
4
- $multi-step-nav-padding-y: var(--multi-step-nav-padding-y, 0);
5
-
6
- $multi-step-icon-bg: var(--multi-step-icon-bg, $gray-200);
7
- $multi-step-icon-border-color: var(
8
- --multi-step-icon-border-color,
9
- transparent
10
- );
11
- $multi-step-icon-border-radius: var(--multi-step-icon-border-radius, 100px);
12
- $multi-step-icon-border-style: var(--multi-step-icon-border-style, solid);
13
- $multi-step-icon-border-width: var(--multi-step-icon-border-width, 0);
14
- $multi-step-icon-color: var(--multi-step-icon-color, $gray-600);
15
- $multi-step-icon-cursor: var(--multi-step-icon-cursor, $link-cursor);
16
- $multi-step-icon-font-size: var(--multi-step-icon-font-size, 14px);
17
- $multi-step-icon-font-weight: var(
18
- --multi-step-icon-font-weight,
19
- $font-weight-semi-bold
20
- );
21
- $multi-step-icon-padding-bottom: var(--multi-step-icon-padding-bottom, 0);
22
- $multi-step-icon-padding-left: var(--multi-step-icon-padding-left, 0);
23
- $multi-step-icon-padding-right: var(--multi-step-icon-padding-right, 0);
24
- $multi-step-icon-padding-top: var(--multi-step-icon-padding-top, 0);
25
- $multi-step-icon-size: var(--multi-step-icon-size, 32px);
26
- $multi-step-icon-transition: var(
27
- --multi-step-icon-transition,
28
- box-shadow 0.15s ease-in-out
29
- );
30
-
31
- $multi-step-icon-hover-bg: var(
32
- --multi-step-icon-hover-bg,
33
- $multi-step-icon-bg
34
- );
35
- $multi-step-icon-hover-color: var(
36
- --multi-step-icon-hover-color,
37
- $multi-step-icon-color
38
- );
39
- $multi-step-icon-hover-text-decoration: var(
40
- --multi-step-icon-hover-text-decoration,
41
- none
42
- );
43
-
44
- $multi-step-icon-focus-bg: var(--multi-step-icon-focus-bg, transparent);
45
- $multi-step-icon-focus-box-shadow: var(
46
- --multi-step-icon-focus-box-shadow,
47
- $component-focus-box-shadow
48
- );
49
- $multi-step-icon-focus-color: var(--multi-step-icon-focus-color, inherit);
50
- $multi-step-icon-focus-outline: var(--multi-step-icon-focus-outline, 0);
51
- $multi-step-icon-focus-text-decoration: var(
52
- --multi-step-icon-focus-text-decoration,
53
- $multi-step-icon-hover-text-decoration
54
- );
55
-
56
- // See https://issues.liferay.com/browse/LPS-147457.
57
-
58
- $data-multi-step-icon-before-content: unquote(
59
- "'\\FEFF' attr(data-multi-step-icon)"
60
- );
61
-
62
- $multi-step-divider-bg: var(--multi-step-divider-bg, $gray-200);
63
- $multi-step-divider-height: var(--multi-step-divider-height, 4px);
64
- $multi-step-divider-spacer-x: var(--multi-step-divider-spacer-x, 0);
65
- $multi-step-divider-top: var(
66
- --multi-step-divider-top,
67
- calc(
68
- #{$multi-step-divider-height} * 0.5 + #{$multi-step-icon-size} * 0.5
69
- )
70
- );
71
-
72
- $multi-step-indicator-width: var(
73
- --multi-step-indicator-width,
74
- calc(#{$multi-step-icon-size} + #{$multi-step-divider-spacer-x} * 2)
75
- );
76
-
77
- $multi-step-indicator-label-color: var(
78
- --multi-step-indicator-label-color,
79
- $gray-600
80
- );
81
- $multi-step-indicator-label-font-size: var(
82
- --multi-step-indicator-label-font-size,
83
- 14px
84
- );
85
- $multi-step-indicator-label-font-weight: var(
86
- --multi-step-indicator-label-font-weight,
87
- $font-weight-semi-bold
88
- );
89
- $multi-step-indicator-label-max-width: var(
90
- --multi-step-indicator-label-max-width,
91
- 100px
92
- );
93
-
94
- $multi-step-indicator: ();
95
- $multi-step-indicator: map-deep-merge(
96
- (
97
- position: relative,
98
- width: $multi-step-indicator-width,
99
-
100
- multi-step-indicator-label: (
101
- color: $multi-step-indicator-label-color,
102
- font-size: $multi-step-indicator-label-font-size,
103
- font-weight: $multi-step-indicator-label-font-weight,
104
- left: 50%,
105
- max-width: $multi-step-indicator-label-max-width,
106
- overflow: hidden,
107
- position: absolute,
108
- text-overflow: ellipsis,
109
- transform: translateX(-50%),
110
- white-space: nowrap,
111
- ),
1
+ $multi-step-nav-margin-bottom: var(
2
+ --multi-step-nav-margin-bottom,
3
+ 15px
4
+ ) !default;
5
+ $multi-step-nav-padding-x: var(--multi-step-nav-padding-x, 15px) !default;
6
+ $multi-step-nav-padding-y: var(--multi-step-nav-padding-y, 0) !default;
7
+
8
+ $multi-step-icon-bg: var(--multi-step-icon-bg, $gray-200) !default;
9
+ $multi-step-icon-border-color: var(
10
+ --multi-step-icon-border-color,
11
+ transparent
12
+ ) !default;
13
+ $multi-step-icon-border-radius: var(
14
+ --multi-step-icon-border-radius,
15
+ 100px
16
+ ) !default;
17
+ $multi-step-icon-border-style: var(
18
+ --multi-step-icon-border-style,
19
+ solid
20
+ ) !default;
21
+ $multi-step-icon-border-width: var(--multi-step-icon-border-width, 0) !default;
22
+ $multi-step-icon-color: var(--multi-step-icon-color, $gray-600) !default;
23
+ $multi-step-icon-cursor: var(--multi-step-icon-cursor, $link-cursor) !default;
24
+ $multi-step-icon-font-size: var(--multi-step-icon-font-size, 14px) !default;
25
+ $multi-step-icon-font-weight: var(
26
+ --multi-step-icon-font-weight,
27
+ $font-weight-semi-bold
28
+ ) !default;
29
+ $multi-step-icon-padding-bottom: var(
30
+ --multi-step-icon-padding-bottom,
31
+ 0
32
+ ) !default;
33
+ $multi-step-icon-padding-left: var(--multi-step-icon-padding-left, 0) !default;
34
+ $multi-step-icon-padding-right: var(
35
+ --multi-step-icon-padding-right,
36
+ 0
37
+ ) !default;
38
+ $multi-step-icon-padding-top: var(--multi-step-icon-padding-top, 0) !default;
39
+ $multi-step-icon-size: var(--multi-step-icon-size, 32px) !default;
40
+ $multi-step-icon-transition: var(
41
+ --multi-step-icon-transition,
42
+ box-shadow 0.15s ease-in-out
43
+ ) !default;
44
+
45
+ $multi-step-icon-hover-bg: var(
46
+ --multi-step-icon-hover-bg,
47
+ $multi-step-icon-bg
48
+ ) !default;
49
+ $multi-step-icon-hover-color: var(
50
+ --multi-step-icon-hover-color,
51
+ $multi-step-icon-color
52
+ ) !default;
53
+ $multi-step-icon-hover-text-decoration: var(
54
+ --multi-step-icon-hover-text-decoration,
55
+ none
56
+ ) !default;
57
+
58
+ $multi-step-icon-focus-bg: var(
59
+ --multi-step-icon-focus-bg,
60
+ transparent
61
+ ) !default;
62
+ $multi-step-icon-focus-box-shadow: var(
63
+ --multi-step-icon-focus-box-shadow,
64
+ $component-focus-box-shadow
65
+ ) !default;
66
+ $multi-step-icon-focus-color: var(
67
+ --multi-step-icon-focus-color,
68
+ inherit
69
+ ) !default;
70
+ $multi-step-icon-focus-outline: var(
71
+ --multi-step-icon-focus-outline,
72
+ 0
73
+ ) !default;
74
+ $multi-step-icon-focus-text-decoration: var(
75
+ --multi-step-icon-focus-text-decoration,
76
+ $multi-step-icon-hover-text-decoration
77
+ ) !default;
78
+
79
+ // See https://issues.liferay.com/browse/LPS-147457.
80
+
81
+ $data-multi-step-icon-before-content: unquote(
82
+ "'\\FEFF' attr(data-multi-step-icon)"
83
+ ) !default;
84
+
85
+ $multi-step-divider-bg: var(--multi-step-divider-bg, $gray-200) !default;
86
+ $multi-step-divider-height: var(--multi-step-divider-height, 4px) !default;
87
+ $multi-step-divider-spacer-x: var(--multi-step-divider-spacer-x, 0) !default;
88
+ $multi-step-divider-top: var(
89
+ --multi-step-divider-top,
90
+ calc(#{$multi-step-divider-height} * 0.5 + #{$multi-step-icon-size} * 0.5)
91
+ ) !default;
92
+
93
+ $multi-step-indicator-width: var(
94
+ --multi-step-indicator-width,
95
+ calc(#{$multi-step-icon-size} + #{$multi-step-divider-spacer-x} * 2)
96
+ ) !default;
97
+
98
+ $multi-step-indicator-label-color: var(
99
+ --multi-step-indicator-label-color,
100
+ $gray-600
101
+ ) !default;
102
+ $multi-step-indicator-label-font-size: var(
103
+ --multi-step-indicator-label-font-size,
104
+ 14px
105
+ ) !default;
106
+ $multi-step-indicator-label-font-weight: var(
107
+ --multi-step-indicator-label-font-weight,
108
+ $font-weight-semi-bold
109
+ ) !default;
110
+ $multi-step-indicator-label-max-width: var(
111
+ --multi-step-indicator-label-max-width,
112
+ 100px
113
+ ) !default;
114
+
115
+ $multi-step-indicator: () !default;
116
+ $multi-step-indicator: map-deep-merge(
117
+ (
118
+ position: relative,
119
+ width: $multi-step-indicator-width,
120
+
121
+ multi-step-indicator-label: (
122
+ color: $multi-step-indicator-label-color,
123
+ font-size: $multi-step-indicator-label-font-size,
124
+ font-weight: $multi-step-indicator-label-font-weight,
125
+ left: 50%,
126
+ max-width: $multi-step-indicator-label-max-width,
127
+ overflow: hidden,
128
+ position: absolute,
129
+ text-overflow: ellipsis,
130
+ transform: translateX(-50%),
131
+ white-space: nowrap,
112
132
  ),
113
- $multi-step-indicator
114
- );
115
-
116
- $multi-step-title-color: var(--multi-step-title-color, $gray-600);
117
- $multi-step-title-font-size: var(--multi-step-title-font-size, 14px);
118
- $multi-step-title-font-weight: var(
119
- --multi-step-title-font-weight,
120
- $font-weight-semi-bold
121
- );
122
- $multi-step-title-margin-bottom: var(
123
- --multi-step-title-margin-bottom,
124
- 10px
125
- );
126
- $multi-step-title-max-width: var(--multi-step-title-max-width, 100px);
127
-
128
- $multi-step-title: ();
129
- $multi-step-title: map-deep-merge(
130
- (
131
- color: $multi-step-title-color,
132
- font-size: $multi-step-title-font-size,
133
- font-weight: $multi-step-title-font-weight,
134
- line-height: normal,
135
- margin-bottom: $multi-step-title-margin-bottom,
136
- word-wrap: break-word,
133
+ ),
134
+ $multi-step-indicator
135
+ );
136
+
137
+ $multi-step-title-color: var(--multi-step-title-color, $gray-600) !default;
138
+ $multi-step-title-font-size: var(--multi-step-title-font-size, 14px) !default;
139
+ $multi-step-title-font-weight: var(
140
+ --multi-step-title-font-weight,
141
+ $font-weight-semi-bold
142
+ ) !default;
143
+ $multi-step-title-margin-bottom: var(
144
+ --multi-step-title-margin-bottom,
145
+ 10px
146
+ ) !default;
147
+ $multi-step-title-max-width: var(--multi-step-title-max-width, 100px) !default;
148
+
149
+ $multi-step-title: () !default;
150
+ $multi-step-title: map-deep-merge(
151
+ (
152
+ color: $multi-step-title-color,
153
+ font-size: $multi-step-title-font-size,
154
+ font-weight: $multi-step-title-font-weight,
155
+ line-height: normal,
156
+ margin-bottom: $multi-step-title-margin-bottom,
157
+ word-wrap: break-word,
158
+ ),
159
+ $multi-step-title
160
+ );
161
+
162
+ $multi-step-title-center: () !default;
163
+ $multi-step-title-center: map-deep-merge(
164
+ (
165
+ multi-step-title: (
166
+ margin-left: calc(#{$multi-step-icon-size} * 0.5),
167
+ max-width: $multi-step-title-max-width,
168
+ overflow: hidden,
169
+ position: relative,
170
+ text-align: center,
171
+ text-overflow: ellipsis,
172
+ transform: translateX(-50%),
173
+ white-space: nowrap,
174
+ width: auto,
137
175
  ),
138
- $multi-step-title
139
- );
140
-
141
- $multi-step-title-center: ();
142
- $multi-step-title-center: map-deep-merge(
143
- (
144
- multi-step-title: (
145
- margin-left: calc(#{$multi-step-icon-size} * 0.5),
146
- max-width: $multi-step-title-max-width,
147
- overflow: hidden,
148
- position: relative,
149
- text-align: center,
150
- text-overflow: ellipsis,
151
- transform: translateX(-50%),
152
- white-space: nowrap,
153
- width: auto,
154
- ),
176
+ ),
177
+ $multi-step-title-center
178
+ );
179
+
180
+ $multi-step-item-margin-bottom: var(
181
+ --multi-step-item-margin-bottom,
182
+ 10px
183
+ ) !default;
184
+ $multi-step-item-width: var(--multi-step-item-width, 75px) !default;
185
+
186
+ $multi-step-item-fixed-width: var(
187
+ --multi-step-item-fixed-width,
188
+ 150px
189
+ ) !default;
190
+
191
+ $multi-step-nav-center: () !default;
192
+ $multi-step-nav-center: map-deep-merge(
193
+ (
194
+ padding: 0,
195
+ text-align: center,
196
+
197
+ multi-step-item: (
198
+ flex-grow: 1,
199
+ width: $multi-step-item-width,
155
200
  ),
156
- $multi-step-title-center
157
- );
158
-
159
- $multi-step-item-margin-bottom: var(--multi-step-item-margin-bottom, 10px);
160
- $multi-step-item-width: var(--multi-step-item-width, 75px);
161
-
162
- $multi-step-item-fixed-width: var(--multi-step-item-fixed-width, 150px);
163
-
164
- $multi-step-nav-center: ();
165
- $multi-step-nav-center: map-deep-merge(
166
- (
167
- padding: 0,
168
- text-align: center,
169
-
170
- multi-step-item: (
171
- flex-grow: 1,
172
- width: $multi-step-item-width,
173
- ),
174
201
 
175
- multi-step-divider: (
176
- left: 50%,
177
- margin-left: 1rem,
178
- width: calc(100% - #{$multi-step-icon-size}),
179
- ),
202
+ multi-step-divider: (
203
+ left: 50%,
204
+ margin-left: 1rem,
205
+ width: calc(100% - #{$multi-step-icon-size}),
206
+ ),
180
207
 
181
- multi-step-indicator: (
182
- left: 50%,
183
- transform: translateX(-50%),
184
- ),
208
+ multi-step-indicator: (
209
+ left: 50%,
210
+ transform: translateX(-50%),
211
+ ),
185
212
 
186
- multi-step-title: (
187
- margin-left: 12.5%,
188
- max-width: 75%,
189
- ),
213
+ multi-step-title: (
214
+ margin-left: 12.5%,
215
+ max-width: 75%,
190
216
  ),
191
- $multi-step-nav-center
192
- );
193
-
194
- // data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.
195
-
196
- $multi-step-item-error: ();
197
- $multi-step-item-error: map-deep-merge(
198
- (
199
- multi-step-icon: (
200
- background-color:
201
- var(
202
- --multi-step-item-error-multi-step-icon-background-color,
203
- $danger
204
- ),
205
- background-image:
206
- var(
207
- --multi-step-item-error-multi-step-icon-background-image,
208
- clay-icon(times, #fff)
209
- ),
210
- color:
211
- var(--multi-step-item-error-multi-step-icon-color, $white),
212
- text-indent: -100px,
213
-
214
- data-multi-step-icon: (
215
- before: (
216
- content: none,
217
- ),
217
+ ),
218
+ $multi-step-nav-center
219
+ );
220
+
221
+ // data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.
222
+
223
+ $multi-step-item-error: () !default;
224
+ $multi-step-item-error: map-deep-merge(
225
+ (
226
+ multi-step-icon: (
227
+ background-color:
228
+ var(
229
+ --multi-step-item-error-multi-step-icon-background-color,
230
+ $danger
231
+ ),
232
+ background-image:
233
+ var(
234
+ --multi-step-item-error-multi-step-icon-background-image,
235
+ clay-icon(times, #fff)
218
236
  ),
237
+ color: var(--multi-step-item-error-multi-step-icon-color, $white),
238
+ text-indent: -100px,
219
239
 
220
- lexicon-icon: (
221
- display: none,
240
+ data-multi-step-icon: (
241
+ before: (
242
+ content: none,
222
243
  ),
223
244
  ),
245
+
246
+ lexicon-icon: (
247
+ display: none,
248
+ ),
224
249
  ),
225
- $multi-step-item-error
226
- );
227
-
228
- $multi-step-icon-complete-color: var(
229
- --multi-step-icon-complete-color,
230
- $white
231
- );
232
-
233
- $multi-step-icon-complete-bg: var(--multi-step-icon-complete-bg, $gray-600);
234
- $multi-step-icon-complete-bg-image: var(
235
- --multi-step-icon-complete-bg-image,
236
- clay-icon(check, #fff)
237
- );
238
- $multi-step-icon-complete-bg-position: var(
239
- --multi-step-icon-complete-bg-position,
240
- center
241
- );
242
- $multi-step-icon-complete-bg-size: var(
243
- --multi-step-icon-complete-bg-size,
244
- $multi-step-icon-font-size
245
- );
246
-
247
- $multi-step-divider-complete-bg: var(
248
- --multi-step-divider-complete-bg,
249
- $multi-step-icon-complete-bg
250
- );
251
-
252
- $multi-step-dropdown-indicator-complete-icon: var(
253
- --multi-step-dropdown-indicator-complete-icon,
254
- clay-icon(check, #272833)
255
- );
256
- $multi-step-dropdown-indicator-complete-width: var(
257
- --multi-step-dropdown-indicator-complete-width,
258
- 14px
259
- );
260
-
261
- $multi-step-icon-active-color: var(
262
- --multi-step-icon-active-color,
263
- $component-active-color
264
- );
265
-
266
- $multi-step-icon-active-bg: var(
267
- --multi-step-icon-active-bg,
268
- $component-active-bg
269
- );
270
- $multi-step-icon-active-bg-image: null;
271
- $multi-step-icon-active-bg-position: null;
272
- $multi-step-icon-active-bg-size: var(
273
- --multi-step-icon-active-bg-size,
274
- $multi-step-icon-font-size
275
- );
276
-
277
- $multi-step-divider-active-bg: $multi-step-divider-bg;
278
-
279
- $multi-step-icon-disabled-color: $gray-500;
280
-
281
- $multi-step-icon-disabled-bg: var(
282
- --multi-step-icon-disabled-bg,
283
- $multi-step-icon-bg
284
- );
285
- $multi-step-icon-disabled-bg-image: null;
286
- $multi-step-icon-disabled-bg-position: null;
287
- $multi-step-icon-disabled-bg-size: var(--multi-step-icon-disabled-bg-size);
288
- $multi-step-icon-disabled-cursor: var(
289
- --multi-step-icon-disabled-cursor,
290
- $disabled-cursor
291
- );
292
- $multi-step-icon-disabled-opacity: var(
293
- --multi-step-icon-disabled-opacity,
294
- 1
295
- );
296
-
297
- $multi-step-icon-disabled-focus-box-shadow: var(
298
- --multi-step-icon-disabled-focus-box-shadow,
299
- none
300
- );
301
-
302
- $multi-step-divider-disabled-bg: var(
303
- --multi-step-divider-disabled-bg,
304
- $multi-step-icon-disabled-bg
305
- );
306
-
307
- $multi-step-title-disabled-color: var(
308
- --multi-step-title-disabled-color,
309
- $multi-step-icon-disabled-color
310
- );
311
-
312
- $multi-step-indicator-label-disabled-color: var(
313
- --multi-step-indicator-label-disabled-color,
314
- $multi-step-title-disabled-color
315
- );
316
-
317
- $multi-step-title-disabled: ();
318
- $multi-step-title-disabled: map-deep-merge(
319
- (
320
- color: $multi-step-title-disabled-color,
321
- ),
322
- $multi-step-title-disabled
323
- );
324
- }
250
+ ),
251
+ $multi-step-item-error
252
+ );
253
+
254
+ $multi-step-icon-complete-color: var(
255
+ --multi-step-icon-complete-color,
256
+ $white
257
+ ) !default;
258
+
259
+ $multi-step-icon-complete-bg: var(
260
+ --multi-step-icon-complete-bg,
261
+ $gray-600
262
+ ) !default;
263
+ $multi-step-icon-complete-bg-image: var(
264
+ --multi-step-icon-complete-bg-image,
265
+ clay-icon(check, #fff)
266
+ ) !default;
267
+ $multi-step-icon-complete-bg-position: var(
268
+ --multi-step-icon-complete-bg-position,
269
+ center
270
+ ) !default;
271
+ $multi-step-icon-complete-bg-size: var(
272
+ --multi-step-icon-complete-bg-size,
273
+ $multi-step-icon-font-size
274
+ ) !default;
275
+
276
+ $multi-step-divider-complete-bg: var(
277
+ --multi-step-divider-complete-bg,
278
+ $multi-step-icon-complete-bg
279
+ ) !default;
280
+
281
+ $multi-step-dropdown-indicator-complete-icon: var(
282
+ --multi-step-dropdown-indicator-complete-icon,
283
+ clay-icon(check, #272833)
284
+ ) !default;
285
+ $multi-step-dropdown-indicator-complete-width: var(
286
+ --multi-step-dropdown-indicator-complete-width,
287
+ 14px
288
+ ) !default;
289
+
290
+ $multi-step-icon-active-color: var(
291
+ --multi-step-icon-active-color,
292
+ $component-active-color
293
+ ) !default;
294
+
295
+ $multi-step-icon-active-bg: var(
296
+ --multi-step-icon-active-bg,
297
+ $component-active-bg
298
+ ) !default;
299
+ $multi-step-icon-active-bg-image: null !default;
300
+ $multi-step-icon-active-bg-position: null !default;
301
+ $multi-step-icon-active-bg-size: var(
302
+ --multi-step-icon-active-bg-size,
303
+ $multi-step-icon-font-size
304
+ ) !default;
305
+
306
+ $multi-step-divider-active-bg: $multi-step-divider-bg !default;
307
+
308
+ $multi-step-icon-disabled-color: $gray-500 !default;
309
+
310
+ $multi-step-icon-disabled-bg: var(
311
+ --multi-step-icon-disabled-bg,
312
+ $multi-step-icon-bg
313
+ ) !default;
314
+ $multi-step-icon-disabled-bg-image: null !default;
315
+ $multi-step-icon-disabled-bg-position: null !default;
316
+ $multi-step-icon-disabled-bg-size: var(
317
+ --multi-step-icon-disabled-bg-size
318
+ ) !default;
319
+ $multi-step-icon-disabled-cursor: var(
320
+ --multi-step-icon-disabled-cursor,
321
+ $disabled-cursor
322
+ ) !default;
323
+ $multi-step-icon-disabled-opacity: var(
324
+ --multi-step-icon-disabled-opacity,
325
+ 1
326
+ ) !default;
327
+
328
+ $multi-step-icon-disabled-focus-box-shadow: var(
329
+ --multi-step-icon-disabled-focus-box-shadow,
330
+ none
331
+ ) !default;
332
+
333
+ $multi-step-divider-disabled-bg: var(
334
+ --multi-step-divider-disabled-bg,
335
+ $multi-step-icon-disabled-bg
336
+ ) !default;
337
+
338
+ $multi-step-title-disabled-color: var(
339
+ --multi-step-title-disabled-color,
340
+ $multi-step-icon-disabled-color
341
+ ) !default;
342
+
343
+ $multi-step-indicator-label-disabled-color: var(
344
+ --multi-step-indicator-label-disabled-color,
345
+ $multi-step-title-disabled-color
346
+ ) !default;
347
+
348
+ $multi-step-title-disabled: () !default;
349
+ $multi-step-title-disabled: map-deep-merge(
350
+ (
351
+ color: $multi-step-title-disabled-color,
352
+ ),
353
+ $multi-step-title-disabled
354
+ );