@clayui/css 3.47.0 → 3.48.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 (24) hide show
  1. package/lib/css/atlas.css +34 -10
  2. package/lib/css/atlas.css.map +1 -1
  3. package/lib/css/base.css +34 -10
  4. package/lib/css/base.css.map +1 -1
  5. package/lib/css/cadmin.css.map +1 -1
  6. package/lib/images/icons/icons.svg +1 -1
  7. package/package.json +2 -2
  8. package/src/scss/_cadmin-variables.scss +2 -0
  9. package/src/scss/atlas-variables.scss +2 -0
  10. package/src/scss/atlas.scss +2 -0
  11. package/src/scss/base-variables.scss +2 -0
  12. package/src/scss/base.scss +2 -0
  13. package/src/scss/cadmin.scss +2 -0
  14. package/src/scss/components/_custom-forms.scss +2 -2
  15. package/src/scss/components/_dropdowns.scss +0 -28
  16. package/src/scss/components/_multi-step-nav.scss +11 -5
  17. package/src/scss/mixins/_alerts.scss +180 -113
  18. package/src/scss/mixins/_dropdown-menu.scss +17 -0
  19. package/src/scss/variables/_custom-forms.scss +19 -4
  20. package/src/scss/variables/_dropdowns.scss +45 -0
  21. package/src/scss/variables/_multi-step-nav.scss +6 -0
  22. package/src/scss/variables/_range.scss +4 -2
  23. package/src/scss/variables/_stickers.scss +3 -3
  24. package/src/scss/variables/_toggle-switch.scss +14 -2
package/src/scss/mixins/_alerts.scss CHANGED
@@ -1,3 +1,7 @@
1
+ ////
2
+ /// @group Alerts
3
+ ////
4
+
1
5
  /// This is Bootstrap 4's Alert Variant Mixin.
2
6
  /// @deprecated use the mixin `clay-alert-variant` instead
3
7
  /// @param {Color} $background
@@ -22,153 +26,216 @@
22
26
  /// A mixin to create alert variants.
23
27
  /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
24
28
  /// @example
25
- /// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
26
- /// hr: {Map | Null}, // See mixin `clay-css`
27
- /// alert-btn: {Map | Null}, // See mixin `clay-button-variant`
28
- /// btn-group: {Map | Null}, // See mixin `clay-container`
29
- /// btn-group-item: {Map | Null}, // See mixin `clay-container`
30
- /// close: {Map | Null}, // See mixin `clay-close`
31
- /// lead: {Map | Null}, // See mixin `clay-css`
32
- /// alert-link: {Map | Null}, // See mixin `clay-link`
33
- /// component-title: {Map | Null}, // See mixin `clay-text-typography`
34
- /// component-subtitle: {Map | Null}, // See mixin `clay-text-typography`
29
+ /// (
30
+ /// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
31
+ /// // .alert
32
+ /// first-child: (
33
+ /// // .alert:first-child
34
+ /// ),
35
+ /// last-child: (
36
+ /// // .alert:last-child
37
+ /// ),
38
+ /// hr: (
39
+ /// // .alert hr
40
+ /// ),
41
+ /// alert-dismissible: (
42
+ /// // .alert.alert-dismissible
43
+ /// container-fluid: (
44
+ /// // .alert.alert-dismissible .container, .alert.alert-dismissible .container-fluid
45
+ /// ),
46
+ /// ),
47
+ /// alert-indicator: (
48
+ /// // .alert .alert-indicator
49
+ /// lexicon-icon: (
50
+ /// // .alert .alert-indicator .lexicon-icon
51
+ /// ),
52
+ /// lead: (
53
+ /// // .alert .alert-indicator + .lead
54
+ /// ),
55
+ /// ),
56
+ /// alert-btn: (
57
+ /// // .alert .alert-btn
58
+ /// ),
59
+ /// btn-group: (
60
+ /// // .alert .btn-group
61
+ /// ),
62
+ /// btn-group-item: (
63
+ /// // .alert .btn-group-item
64
+ /// ),
65
+ /// close: (
66
+ /// // .alert .close
67
+ /// ),
68
+ /// container-fluid: (
69
+ /// // .alert .container, .alert .container-fluid
70
+ /// ),
71
+ /// lead: (
72
+ /// // .alert .lead
73
+ /// ),
74
+ /// alert-link: (
75
+ /// // .alert .alert-link
76
+ /// ),
77
+ /// component-title: (
78
+ /// // .alert .component-title
79
+ /// ),
80
+ /// component-subtitle: (
81
+ /// // .alert .component-subtitle
82
+ /// ),
83
+ /// )
35
84
 
36
85
  @mixin clay-alert-variant($map) {
37
- $enabled: setter(map-get($map, enabled), true);
86
+ @if (type-of($map) == 'map') {
87
+ $enabled: setter(map-get($map, enabled), true);
38
88
 
39
- $base: map-merge(
40
- $map,
41
- (
42
- background-color:
43
- setter(map-get($map, bg), map-get($map, background-color)),
44
- )
45
- );
89
+ $base: map-merge(
90
+ $map,
91
+ (
92
+ background-color:
93
+ setter(map-get($map, bg), map-get($map, background-color)),
94
+ )
95
+ );
46
96
 
47
- $hr: setter(map-get($map, hr), ());
97
+ $hr: setter(map-get($map, hr), ());
48
98
 
49
- $alert-indicator: setter(map-get($map, alert-indicator), ());
99
+ $alert-indicator: setter(map-get($map, alert-indicator), ());
50
100
 
51
- $alert-indicator-lead: setter(map-get($alert-indicator, lead), ());
101
+ $alert-indicator-lead: setter(map-get($alert-indicator, lead), ());
52
102
 
53
- $alert-btn: setter(map-get($map, alert-btn), ());
103
+ $alert-btn: setter(map-get($map, alert-btn), ());
54
104
 
55
- $btn-group: setter(map-get($map, btn-group), ());
105
+ $btn-group: setter(map-get($map, btn-group), ());
56
106
 
57
- $btn-group-item: setter(map-get($map, btn-group-item), ());
107
+ $btn-group-item: setter(map-get($map, btn-group-item), ());
58
108
 
59
- $close: setter(map-get($map, close), ());
60
- $close: map-deep-merge(
61
- $close,
62
- (
63
- color: setter(map-get($map, close-color), map-get($close, color)),
64
- hover: (
109
+ $close: setter(map-get($map, close), ());
110
+ $close: map-deep-merge(
111
+ $close,
112
+ (
65
113
  color:
66
- setter(
67
- map-get($map, close-hover-color),
68
- map-deep-get($close, hover, color)
69
- ),
70
- ),
71
- )
72
- );
73
-
74
- $lead: setter(map-get($map, lead), ());
75
- $lead: map-deep-merge(
76
- $lead,
77
- (
78
- color: setter(map-get($map, lead-color), map-get($lead, color)),
79
- )
80
- );
81
-
82
- $alert-link: setter(map-get($map, alert-link), ());
83
- $alert-link: map-deep-merge(
84
- $alert-link,
85
- (
86
- color:
87
- setter(map-get($map, link-color), map-get($alert-link, color)),
88
- hover: (
114
+ setter(map-get($map, close-color), map-get($close, color)),
115
+ hover: (
116
+ color:
117
+ setter(
118
+ map-get($map, close-hover-color),
119
+ map-deep-get($close, hover, color)
120
+ ),
121
+ ),
122
+ )
123
+ );
124
+
125
+ $lead: setter(map-get($map, lead), ());
126
+ $lead: map-deep-merge(
127
+ $lead,
128
+ (
129
+ color: setter(map-get($map, lead-color), map-get($lead, color)),
130
+ )
131
+ );
132
+
133
+ $alert-link: setter(map-get($map, alert-link), ());
134
+ $alert-link: map-deep-merge(
135
+ $alert-link,
136
+ (
89
137
  color:
90
138
  setter(
91
- map-get($map, link-hover-color),
92
- map-deep-get($alert-link, hover, color)
139
+ map-get($map, link-color),
140
+ map-get($alert-link, color)
93
141
  ),
94
- ),
95
- )
96
- );
142
+ hover: (
143
+ color:
144
+ setter(
145
+ map-get($map, link-hover-color),
146
+ map-deep-get($alert-link, hover, color)
147
+ ),
148
+ ),
149
+ )
150
+ );
97
151
 
98
- $component-title: setter(map-get($map, component-title), ());
152
+ $component-title: setter(map-get($map, component-title), ());
99
153
 
100
- $component-subtitle: setter(map-get($map, component-subtitle), ());
154
+ $component-subtitle: setter(map-get($map, component-subtitle), ());
101
155
 
102
- @if ($enabled) {
103
- @include clay-css($base);
104
-
105
- hr {
106
- @include clay-css($hr);
107
- }
156
+ @if ($enabled) {
157
+ @include clay-css($base);
108
158
 
109
- &.alert-dismissible {
110
- @include clay-css(setter(map-get($map, alert-dismissible), ()));
159
+ &:first-child {
160
+ @include clay-css(map-get($map, first-child));
161
+ }
111
162
 
112
- .container,
113
- .container-fluid {
114
- @include clay-css(
115
- setter(
116
- map-deep-get($map, alert-dismissible, container-fluid),
117
- ()
118
- )
119
- );
163
+ &:last-child {
164
+ @include clay-css(map-get($map, last-child));
120
165
  }
121
- }
122
166
 
123
- .alert-indicator {
124
- @include clay-css($alert-indicator);
167
+ hr {
168
+ @include clay-css($hr);
169
+ }
125
170
 
126
- .lexicon-icon {
127
- @include clay-css(
128
- setter(map-get($alert-indicator, lexicon-icon), ())
129
- );
171
+ &.alert-dismissible {
172
+ @include clay-css(setter(map-get($map, alert-dismissible), ()));
173
+
174
+ .container,
175
+ .container-fluid {
176
+ @include clay-css(
177
+ setter(
178
+ map-deep-get(
179
+ $map,
180
+ alert-dismissible,
181
+ container-fluid
182
+ ),
183
+ ()
184
+ )
185
+ );
186
+ }
130
187
  }
131
188
 
132
- + .lead {
133
- @include clay-css($alert-indicator-lead);
189
+ .alert-indicator {
190
+ @include clay-css($alert-indicator);
191
+
192
+ .lexicon-icon {
193
+ @include clay-css(
194
+ setter(map-get($alert-indicator, lexicon-icon), ())
195
+ );
196
+ }
197
+
198
+ + .lead {
199
+ @include clay-css($alert-indicator-lead);
200
+ }
134
201
  }
135
- }
136
202
 
137
- .alert-btn {
138
- @include clay-button-variant($alert-btn);
139
- }
203
+ .alert-btn {
204
+ @include clay-button-variant($alert-btn);
205
+ }
140
206
 
141
- .btn-group {
142
- @include clay-container($btn-group);
143
- }
207
+ .btn-group {
208
+ @include clay-container($btn-group);
209
+ }
144
210
 
145
- .btn-group-item {
146
- @include clay-container($btn-group-item);
147
- }
211
+ .btn-group-item {
212
+ @include clay-container($btn-group-item);
213
+ }
148
214
 
149
- .close {
150
- @include clay-close($close);
151
- }
215
+ .close {
216
+ @include clay-close($close);
217
+ }
152
218
 
153
- .container,
154
- .container-fluid {
155
- @include clay-css(setter(map-get($map, container-fluid), ()));
156
- }
219
+ .container,
220
+ .container-fluid {
221
+ @include clay-css(setter(map-get($map, container-fluid), ()));
222
+ }
157
223
 
158
- .lead {
159
- @include clay-css($lead);
160
- }
224
+ .lead {
225
+ @include clay-css($lead);
226
+ }
161
227
 
162
- .alert-link {
163
- @include clay-link($alert-link);
164
- }
228
+ .alert-link {
229
+ @include clay-link($alert-link);
230
+ }
165
231
 
166
- .component-title {
167
- @include clay-text-typography($component-title);
168
- }
232
+ .component-title {
233
+ @include clay-text-typography($component-title);
234
+ }
169
235
 
170
- .component-subtitle {
171
- @include clay-text-typography($component-subtitle);
236
+ .component-subtitle {
237
+ @include clay-text-typography($component-subtitle);
238
+ }
172
239
  }
173
240
  }
174
241
  }
package/src/scss/mixins/_dropdown-menu.scss CHANGED
@@ -20,6 +20,15 @@
20
20
  /// show: (
21
21
  /// // .dropdown-menu.show
22
22
  /// ),
23
+ /// dropdown-item: (
24
+ /// // .dropdown-menu .dropdown-item
25
+ /// ),
26
+ /// alert: (
27
+ /// // .dropdown-menu .alert
28
+ /// ),
29
+ /// alert-fluid: (
30
+ /// // .dropdown-menu .alert-fluid
31
+ /// ),
23
32
  /// )
24
33
  /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
25
34
  /// bg: {Color | String | Null}, // deprecated after 3.9.0
@@ -95,6 +104,14 @@
95
104
  map-deep-get($map, dropdown-item)
96
105
  );
97
106
  }
107
+
108
+ .alert {
109
+ @include clay-alert-variant(map-get($map, alert));
110
+ }
111
+
112
+ .alert-fluid {
113
+ @include clay-alert-variant(map-get($map, alert-fluid));
114
+ }
98
115
  }
99
116
  }
100
117
  }
package/src/scss/variables/_custom-forms.scss CHANGED
@@ -761,8 +761,23 @@ $custom-file-button-bg: $input-group-addon-bg !default;
761
761
 
762
762
  $custom-file-button-color: $custom-file-color !default;
763
763
 
764
- /// @deprecated as of v3.x with no replacement
764
+ // .custom-file-label::after
765
765
 
766
- $custom-file-text: (
767
- en: 'Browse',
768
- ) !default;
766
+ /// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395
767
+
768
+ $custom-file-label-after-content: unquote("'\\FEFF Browse'") !default;
769
+
770
+ $custom-file-text: () !default;
771
+
772
+ /// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395
773
+
774
+ $custom-file-text: map-deep-merge(
775
+ (
776
+ en: unquote("'\\FEFF Browse'"),
777
+ ),
778
+ $custom-file-text
779
+ );
780
+
781
+ /// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457.
782
+
783
+ $custom-file-text-data-browse: unquote("'\\FEFF' attr(data-browse)") !default;
package/src/scss/variables/_dropdowns.scss CHANGED
@@ -888,3 +888,48 @@ $dropdown-alert-line-height: normal !default;
888
888
  $dropdown-alert-margin: $spacer * 0.5 !default;
889
889
  $dropdown-alert-padding-x: $dropdown-header-padding-x !default;
890
890
  $dropdown-alert-padding-y: $dropdown-header-padding-y !default;
891
+
892
+ $dropdown-menu-alert: () !default;
893
+ $dropdown-menu-alert: map-deep-merge(
894
+ (
895
+ font-size: $dropdown-alert-font-size,
896
+ line-height: $dropdown-alert-line-height,
897
+ margin: $dropdown-alert-margin,
898
+ padding: $dropdown-alert-padding-y $dropdown-alert-padding-x,
899
+ first-child: (
900
+ margin-top: 0,
901
+ ),
902
+ last-child: (
903
+ margin-bottom: 0,
904
+ ),
905
+ ),
906
+ $dropdown-menu-alert
907
+ );
908
+
909
+ $dropdown-menu-alert-fluid: () !default;
910
+ $dropdown-menu-alert-fluid: map-deep-merge(
911
+ (
912
+ margin-left: 0,
913
+ margin-right: 0,
914
+ first-child: (
915
+ margin-top: math-sign($dropdown-padding-y),
916
+ ),
917
+ last-child: (
918
+ margin-bottom: math-sign($dropdown-padding-y),
919
+ ),
920
+ ),
921
+ $dropdown-menu-alert-fluid
922
+ );
923
+
924
+ $dropdown-menu: map-deep-merge(
925
+ (
926
+ alert:
927
+ map-deep-merge($dropdown-menu-alert, map-get($dropdown-menu, alert)),
928
+ alert-fluid:
929
+ map-deep-merge(
930
+ $dropdown-menu-alert-fluid,
931
+ map-get($dropdown-menu, alert-fluid)
932
+ ),
933
+ ),
934
+ $dropdown-menu
935
+ );
package/src/scss/variables/_multi-step-nav.scss CHANGED
@@ -28,6 +28,12 @@ $multi-step-icon-focus-color: $multi-step-icon-hover-color !default;
28
28
  $multi-step-icon-focus-outline: 0 !default;
29
29
  $multi-step-icon-focus-text-decoration: $multi-step-icon-hover-text-decoration !default;
30
30
 
31
+ // See https://issues.liferay.com/browse/LPS-147457.
32
+
33
+ $data-multi-step-icon-before-content: unquote(
34
+ "'\\FEFF' attr(data-multi-step-icon)"
35
+ ) !default;
36
+
31
37
  $multi-step-divider-bg: $gray-200 !default;
32
38
  $multi-step-divider-height: 0.25rem !default;
33
39
  $multi-step-divider-spacer-x: 0 !default;
package/src/scss/variables/_range.scss CHANGED
@@ -45,6 +45,8 @@ $clay-range-title: map-deep-merge(
45
45
  $clay-range-title
46
46
  );
47
47
 
48
+ // `data-label-before-content` and `data-label-after-content`, see https://issues.liferay.com/browse/LPS-147457
49
+
48
50
  $clay-range-input: () !default;
49
51
  $clay-range-input: map-deep-merge(
50
52
  (
@@ -92,8 +94,8 @@ $clay-range-input: map-deep-merge(
92
94
  data-label-text-align: center,
93
95
  data-label-top: 0,
94
96
  data-label-width: 1.5rem,
95
- data-label-before-content: attr(data-label-min),
96
- data-label-after-content: attr(data-label-max),
97
+ data-label-before-content: unquote("'\\FEFF' attr(data-label-min)"),
98
+ data-label-after-content: unquote("'\\FEFF' attr(data-label-max)"),
97
99
  data-label-after-right: 0,
98
100
  hover-cursor: $link-cursor,
99
101
  focus-outline: 0,
package/src/scss/variables/_stickers.scss CHANGED
@@ -79,7 +79,7 @@ $sticker-sm: map-deep-merge(
79
79
  bottom: -0.75rem,
80
80
  top: auto,
81
81
  ),
82
- sticker-bottomr-right: (
82
+ sticker-bottom-right: (
83
83
  bottom: -0.75rem,
84
84
  left: auto,
85
85
  right: -0.75rem,
@@ -110,7 +110,7 @@ $sticker-lg: map-deep-merge(
110
110
  bottom: -1.25rem,
111
111
  top: auto,
112
112
  ),
113
- sticker-bottomr-right: (
113
+ sticker-bottom-right: (
114
114
  bottom: -1.25rem,
115
115
  left: auto,
116
116
  right: -1.25rem,
@@ -141,7 +141,7 @@ $sticker-xl: map-deep-merge(
141
141
  bottom: -1.5rem,
142
142
  top: auto,
143
143
  ),
144
- sticker-bottomr-right: (
144
+ sticker-bottom-right: (
145
145
  bottom: -1.5rem,
146
146
  left: auto,
147
147
  right: -1.5rem,
package/src/scss/variables/_toggle-switch.scss CHANGED
@@ -34,6 +34,12 @@ $toggle-switch-button-font-size: $toggle-switch-bar-font-size !default;
34
34
  $toggle-switch-button-font-size-mobile: $toggle-switch-button-font-size !default; // null
35
35
  $toggle-switch-button-icon-color: $input-color !default;
36
36
 
37
+ // See https://issues.liferay.com/browse/LPS-147457.
38
+
39
+ $toggle-switch-handle-after-content: unquote(
40
+ "'\\FEFF' attr(data-label-off)"
41
+ ) !default;
42
+
37
43
  // Toggle Switch On
38
44
 
39
45
  $toggle-switch-bar-on-bg: $component-active-bg !default;
@@ -45,6 +51,12 @@ $toggle-switch-button-on-border-color: $toggle-switch-bar-on-bg !default;
45
51
  $toggle-switch-button-on-border-radius: 0 3px 3px 0 !default;
46
52
  $toggle-switch-button-on-icon-color: $toggle-switch-bar-on-bg !default;
47
53
 
54
+ // See https://issues.liferay.com/browse/LPS-147457.
55
+
56
+ $toggle-switch-handle-on-after-content: unquote(
57
+ "'\\FEFF' attr(data-label-on)"
58
+ ) !default;
59
+
48
60
  // Toggle Switch Disabled
49
61
 
50
62
  $toggle-switch-disabled-cursor: $disabled-cursor !default;
@@ -179,7 +191,7 @@ $toggle-switch-check: map-deep-merge(
179
191
  clay-enable-transitions($toggle-switch-transition),
180
192
  ),
181
193
  after: (
182
- content: attr(data-label-off),
194
+ content: $toggle-switch-handle-after-content,
183
195
  margin-left:
184
196
  clay-data-label-text-position(
185
197
  $toggle-switch-bar-width,
@@ -253,7 +265,7 @@ $toggle-switch-check: map-deep-merge(
253
265
  ),
254
266
  toggle-switch-handle: (
255
267
  after: (
256
- content: attr(data-label-on),
268
+ content: $toggle-switch-handle-on-after-content,
257
269
  ),
258
270
  ),
259
271
  toggle-switch-icon: (