@carbon/ibm-products 2.29.0-alpha.10 → 2.29.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +1362 -0
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon.css +1362 -0
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +1362 -0
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/AboutModal/AboutModal.d.ts +73 -2
- package/es/components/AboutModal/AboutModal.js +16 -12
- package/es/components/Decorator/Decorator.d.ts +5 -0
- package/es/components/Decorator/Decorator.js +348 -0
- package/es/components/Decorator/DecoratorIcon.d.ts +5 -0
- package/es/components/Decorator/DecoratorIcon.js +95 -0
- package/es/components/Decorator/index.d.ts +1 -0
- package/es/components/Decorator/utils.d.ts +8 -0
- package/es/components/Decorator/utils.js +43 -0
- package/es/components/index.d.ts +1 -0
- package/es/global/js/package-settings.d.ts +1 -0
- package/es/global/js/package-settings.js +1 -0
- package/es/index.js +1 -0
- package/es/settings.d.ts +1 -0
- package/lib/components/AboutModal/AboutModal.d.ts +73 -2
- package/lib/components/AboutModal/AboutModal.js +16 -12
- package/lib/components/Decorator/Decorator.d.ts +5 -0
- package/lib/components/Decorator/Decorator.js +355 -0
- package/lib/components/Decorator/DecoratorIcon.d.ts +5 -0
- package/lib/components/Decorator/DecoratorIcon.js +102 -0
- package/lib/components/Decorator/index.d.ts +1 -0
- package/lib/components/Decorator/utils.d.ts +8 -0
- package/lib/components/Decorator/utils.js +48 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/global/js/package-settings.d.ts +1 -0
- package/lib/global/js/package-settings.js +1 -0
- package/lib/index.js +5 -0
- package/lib/settings.d.ts +1 -0
- package/package.json +4 -4
- package/scss/components/Decorator/_carbon-imports.scss +9 -0
- package/scss/components/Decorator/_decorator.scss +400 -0
- package/scss/components/Decorator/_index-with-carbon.scss +9 -0
- package/scss/components/Decorator/_index.scss +8 -0
- package/scss/components/_index-with-carbon.scss +1 -0
- package/scss/components/_index.scss +1 -0
@@ -0,0 +1,48 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
|
+
*
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
|
8
|
+
'use strict';
|
9
|
+
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
11
|
+
|
12
|
+
var getMagnitude = function getMagnitude(score, thresholds) {
|
13
|
+
if (typeof score === 'number') {
|
14
|
+
if (score <= thresholds[0]) {
|
15
|
+
return 'Benign';
|
16
|
+
}
|
17
|
+
if (score < thresholds[1]) {
|
18
|
+
return 'Low';
|
19
|
+
}
|
20
|
+
if (score < thresholds[2]) {
|
21
|
+
return 'Medium';
|
22
|
+
}
|
23
|
+
if (score < thresholds[3]) {
|
24
|
+
return 'High';
|
25
|
+
}
|
26
|
+
if (score >= thresholds[3]) {
|
27
|
+
return 'Critical';
|
28
|
+
}
|
29
|
+
}
|
30
|
+
return 'Unknown';
|
31
|
+
};
|
32
|
+
|
33
|
+
// If a "midline" truncation has been defined,
|
34
|
+
// then return the formatted midline value generated here,
|
35
|
+
// else return to the original value.
|
36
|
+
var truncate = function truncate(inputText) {
|
37
|
+
var truncateValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
38
|
+
var maxLength = truncateValue.maxLength,
|
39
|
+
front = truncateValue.front,
|
40
|
+
back = truncateValue.back;
|
41
|
+
if (maxLength && inputText.length > maxLength) {
|
42
|
+
return "".concat(inputText.substring(0, front), "\u2026").concat(inputText.substr(inputText.length - back));
|
43
|
+
}
|
44
|
+
return inputText;
|
45
|
+
};
|
46
|
+
|
47
|
+
exports.getMagnitude = getMagnitude;
|
48
|
+
exports.truncate = truncate;
|
@@ -40,6 +40,7 @@ export { InterstitialScreen } from "./InterstitialScreen";
|
|
40
40
|
export { InterstitialScreenView } from "./InterstitialScreenView";
|
41
41
|
export { InterstitialScreenViewModule } from "./InterstitialScreenViewModule";
|
42
42
|
export { DelimitedList } from "./DelimitedList";
|
43
|
+
export { Decorator } from "./Decorator";
|
43
44
|
export { DescriptionList } from "./DescriptionList";
|
44
45
|
export { FullPageError } from "./FullPageError";
|
45
46
|
export { SearchBar } from "./SearchBar";
|
package/lib/index.js
CHANGED
@@ -109,6 +109,7 @@ var InterstitialScreen = require('./components/InterstitialScreen/InterstitialSc
|
|
109
109
|
var InterstitialScreenView = require('./components/InterstitialScreenView/InterstitialScreenView.js');
|
110
110
|
var InterstitialScreenViewModule = require('./components/InterstitialScreenViewModule/InterstitialScreenViewModule.js');
|
111
111
|
var DelimitedList = require('./components/DelimitedList/DelimitedList.js');
|
112
|
+
var Decorator = require('./components/Decorator/Decorator.js');
|
112
113
|
var DescriptionList = require('./components/DescriptionList/DescriptionList.js');
|
113
114
|
var FullPageError = require('./components/FullPageError/FullPageError.js');
|
114
115
|
var SearchBar = require('./components/SearchBar/SearchBar.js');
|
@@ -450,6 +451,10 @@ Object.defineProperty(exports, 'DelimitedList', {
|
|
450
451
|
enumerable: true,
|
451
452
|
get: function () { return DelimitedList.DelimitedList; }
|
452
453
|
});
|
454
|
+
Object.defineProperty(exports, 'Decorator', {
|
455
|
+
enumerable: true,
|
456
|
+
get: function () { return Decorator.Decorator; }
|
457
|
+
});
|
453
458
|
Object.defineProperty(exports, 'DescriptionList', {
|
454
459
|
enumerable: true,
|
455
460
|
get: function () { return DescriptionList.DescriptionList; }
|
package/lib/settings.d.ts
CHANGED
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "2.29.0
|
4
|
+
"version": "2.29.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -76,7 +76,7 @@
|
|
76
76
|
"fs-extra": "^11.2.0",
|
77
77
|
"glob": "^10.3.10",
|
78
78
|
"jest": "^29.7.0",
|
79
|
-
"jest-config-ibm-cloud-cognitive": "^1.1.
|
79
|
+
"jest-config-ibm-cloud-cognitive": "^1.1.5",
|
80
80
|
"jest-environment-jsdom": "^29.7.0",
|
81
81
|
"namor": "^1.1.2",
|
82
82
|
"npm-check-updates": "^16.14.12",
|
@@ -90,7 +90,7 @@
|
|
90
90
|
},
|
91
91
|
"dependencies": {
|
92
92
|
"@babel/runtime": "^7.23.9",
|
93
|
-
"@carbon/ibm-products-styles": "^2.
|
93
|
+
"@carbon/ibm-products-styles": "^2.28.0",
|
94
94
|
"@carbon/telemetry": "^0.1.0",
|
95
95
|
"@dnd-kit/core": "^6.0.8",
|
96
96
|
"@dnd-kit/sortable": "^8.0.0",
|
@@ -113,5 +113,5 @@
|
|
113
113
|
"react": "^16.8.6 || ^17.0.1 || ^18.2.0",
|
114
114
|
"react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
|
115
115
|
},
|
116
|
-
"gitHead": "
|
116
|
+
"gitHead": "b42dcb92fc964b2cbc0f93891937da118da01f60"
|
117
117
|
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2024, 2024
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
|
+
// Import any Carbon component styles used from Decorator in this file.
|
9
|
+
// Decorator uses the following Carbon components:
|
@@ -0,0 +1,400 @@
|
|
1
|
+
/* stylelint-disable carbon/theme-token-use */
|
2
|
+
/* stylelint-disable carbon/type-token-use */
|
3
|
+
/* stylelint-disable carbon/layout-token-use */
|
4
|
+
/* stylelint-disable function-no-unknown */
|
5
|
+
|
6
|
+
//
|
7
|
+
// Copyright IBM Corp. 2024, 2024
|
8
|
+
//
|
9
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
10
|
+
// LICENSE file in the root directory of this source tree.
|
11
|
+
//
|
12
|
+
|
13
|
+
// Standard imports.
|
14
|
+
@use '../../global/styles/project-settings' as c4p-settings;
|
15
|
+
@use '../../global/styles/mixins';
|
16
|
+
|
17
|
+
// Decorator uses the following Carbon for IBM Products components:
|
18
|
+
@use '@carbon/layout/scss/convert' as *;
|
19
|
+
@use '@carbon/react/scss/colors' as *;
|
20
|
+
@use '@carbon/styles/scss/colors' as *;
|
21
|
+
@use '@carbon/styles/scss/spacing' as *;
|
22
|
+
@use '@carbon/styles/scss/theme' as *;
|
23
|
+
@use '@carbon/styles/scss/themes';
|
24
|
+
@use '@carbon/styles/scss/type';
|
25
|
+
|
26
|
+
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
|
+
$block-class: #{c4p-settings.$pkg-prefix}--decorator;
|
28
|
+
//
|
29
|
+
$default: #{$block-class}--default;
|
30
|
+
$link: #{$block-class}--link;
|
31
|
+
$button: '#{$block-class}--button:not(.#{$block-class}-disabled)';
|
32
|
+
$button-disabled: '#{$block-class}--button.#{$block-class}-disabled';
|
33
|
+
$buttons: '#{$block-class}--buttons:not(.#{$block-class}-disabled)';
|
34
|
+
$buttons-disabled: '#{$block-class}--buttons.#{$block-class}-disabled';
|
35
|
+
//
|
36
|
+
//
|
37
|
+
$icon: #{$block-class}-icon;
|
38
|
+
$label: #{$block-class}__label;
|
39
|
+
$value: #{$block-class}__value;
|
40
|
+
|
41
|
+
// Use value-divider() by default for the component's dividing line.
|
42
|
+
@mixin value-divider($top: 0, $bottom: 0, $left: 0, $color: $border-subtle-02) {
|
43
|
+
&::after {
|
44
|
+
position: absolute;
|
45
|
+
top: #{$top};
|
46
|
+
bottom: #{$bottom};
|
47
|
+
left: #{$left};
|
48
|
+
border-left: 1px solid #{$color};
|
49
|
+
content: '';
|
50
|
+
}
|
51
|
+
}
|
52
|
+
// Use label-divider() only when hovering/focusing the label.
|
53
|
+
@mixin label-divider(
|
54
|
+
// Nudge the line over so it occupies the same space as the value divider.
|
55
|
+
$top: -1px,
|
56
|
+
$right: -1px,
|
57
|
+
$bottom: -1px,
|
58
|
+
$color: $border-strong
|
59
|
+
) {
|
60
|
+
&::after {
|
61
|
+
position: absolute;
|
62
|
+
z-index: 1;
|
63
|
+
top: #{$top};
|
64
|
+
right: #{$right};
|
65
|
+
bottom: #{$bottom};
|
66
|
+
border-right: 1px solid #{$color};
|
67
|
+
content: '';
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
.#{$block-class}--light {
|
72
|
+
@include theme(themes.$g10, true);
|
73
|
+
}
|
74
|
+
.#{$block-class}--dark {
|
75
|
+
@include theme(themes.$g100, true);
|
76
|
+
}
|
77
|
+
|
78
|
+
// BASE STYLING FOR ALL DECORATORS
|
79
|
+
.#{$block-class} {
|
80
|
+
display: inline-flex;
|
81
|
+
max-width: 100%;
|
82
|
+
align-items: normal;
|
83
|
+
border-radius: $spacing-12;
|
84
|
+
}
|
85
|
+
.#{$block-class} .#{$label} {
|
86
|
+
@include type.type-style('label-01');
|
87
|
+
|
88
|
+
position: relative;
|
89
|
+
display: inline-flex;
|
90
|
+
height: $spacing-06;
|
91
|
+
align-items: normal;
|
92
|
+
padding: 0 $spacing-03;
|
93
|
+
border-width: to-rem(1px) 0 to-rem(1px) to-rem(1px);
|
94
|
+
border-style: solid;
|
95
|
+
border-color: $border-subtle-02;
|
96
|
+
border-radius: $spacing-12 0 0 $spacing-12;
|
97
|
+
background-color: $layer-01;
|
98
|
+
color: $text-secondary;
|
99
|
+
line-height: 1.8;
|
100
|
+
}
|
101
|
+
.#{$block-class} .#{$value} {
|
102
|
+
@include type.type-style('label-01');
|
103
|
+
|
104
|
+
position: relative;
|
105
|
+
display: inline-flex;
|
106
|
+
overflow: hidden;
|
107
|
+
height: $spacing-06;
|
108
|
+
align-items: normal;
|
109
|
+
padding: 0 $spacing-03;
|
110
|
+
border-width: to-rem(1px) to-rem(1px) to-rem(1px) 0;
|
111
|
+
border-style: solid;
|
112
|
+
border-color: $border-subtle-02;
|
113
|
+
border-radius: 0 $spacing-12 $spacing-12 0;
|
114
|
+
background-color: $layer-01;
|
115
|
+
color: $text-primary;
|
116
|
+
line-height: 1.8;
|
117
|
+
}
|
118
|
+
.#{$block-class} .#{$icon} {
|
119
|
+
margin-top: to-rem(3px);
|
120
|
+
margin-right: $spacing-02;
|
121
|
+
}
|
122
|
+
|
123
|
+
//
|
124
|
+
// STYLING FOR DEFAULT (NON-INTERACTIVE)
|
125
|
+
//
|
126
|
+
.#{$default} .#{$value} {
|
127
|
+
@include value-divider();
|
128
|
+
}
|
129
|
+
|
130
|
+
//
|
131
|
+
// STYLING FOR LINK
|
132
|
+
//
|
133
|
+
.#{$link} {
|
134
|
+
cursor: pointer;
|
135
|
+
text-decoration: none;
|
136
|
+
}
|
137
|
+
.#{$link} .#{$label} {
|
138
|
+
background-color: $layer-02;
|
139
|
+
}
|
140
|
+
.#{$link} .#{$value} {
|
141
|
+
@include value-divider();
|
142
|
+
|
143
|
+
background-color: $layer-02;
|
144
|
+
color: $link-primary;
|
145
|
+
}
|
146
|
+
.#{$link}:hover .#{$value} {
|
147
|
+
color: $link-primary-hover;
|
148
|
+
text-decoration: underline;
|
149
|
+
}
|
150
|
+
.#{$link}:focus {
|
151
|
+
text-decoration: none;
|
152
|
+
}
|
153
|
+
.#{$link}:focus .#{$value} {
|
154
|
+
@include value-divider($color: $focus);
|
155
|
+
|
156
|
+
border-color: $focus;
|
157
|
+
}
|
158
|
+
.#{$link}:active .#{$value} {
|
159
|
+
color: $text-primary;
|
160
|
+
}
|
161
|
+
|
162
|
+
//
|
163
|
+
// STYLING FOR SINGLE BUTTON
|
164
|
+
//
|
165
|
+
.#{$button} {
|
166
|
+
display: flex;
|
167
|
+
padding: 0;
|
168
|
+
border: 0;
|
169
|
+
cursor: pointer;
|
170
|
+
}
|
171
|
+
.#{$button} .#{$label} {
|
172
|
+
background-color: $layer-02;
|
173
|
+
}
|
174
|
+
.#{$button} .#{$value} {
|
175
|
+
@include value-divider();
|
176
|
+
|
177
|
+
background-color: $layer-02;
|
178
|
+
}
|
179
|
+
.#{$button}:hover .#{$label} {
|
180
|
+
border-color: $border-strong;
|
181
|
+
background-color: $layer-hover-02;
|
182
|
+
}
|
183
|
+
.#{$button}:hover .#{$value} {
|
184
|
+
@include value-divider($color: $border-strong);
|
185
|
+
|
186
|
+
border-color: $border-strong;
|
187
|
+
background-color: $layer-hover-02;
|
188
|
+
}
|
189
|
+
.#{$button}:focus {
|
190
|
+
// Disable browser's default "focus" style.
|
191
|
+
outline: none;
|
192
|
+
}
|
193
|
+
.#{$button}:focus .#{$label} {
|
194
|
+
border-color: $focus;
|
195
|
+
background-color: $layer-02;
|
196
|
+
}
|
197
|
+
.#{$button}:focus .#{$value} {
|
198
|
+
@include value-divider();
|
199
|
+
|
200
|
+
border-color: $focus;
|
201
|
+
background-color: $layer-02;
|
202
|
+
}
|
203
|
+
.#{$button}:active .#{$label} {
|
204
|
+
background-color: $layer-selected-02;
|
205
|
+
}
|
206
|
+
.#{$button}:active .#{$value} {
|
207
|
+
@include value-divider();
|
208
|
+
|
209
|
+
background-color: $layer-selected-02;
|
210
|
+
}
|
211
|
+
.#{$button-disabled} {
|
212
|
+
padding: 0;
|
213
|
+
border: 0;
|
214
|
+
cursor: not-allowed;
|
215
|
+
}
|
216
|
+
.#{$button-disabled} .#{$label} {
|
217
|
+
background-color: $layer-02;
|
218
|
+
color: $icon-on-color-disabled;
|
219
|
+
}
|
220
|
+
.#{$button-disabled} .#{$value} {
|
221
|
+
@include value-divider();
|
222
|
+
|
223
|
+
background-color: $layer-02;
|
224
|
+
color: $icon-on-color-disabled;
|
225
|
+
}
|
226
|
+
|
227
|
+
//
|
228
|
+
// STYLING FOR DUAL BUTTONS
|
229
|
+
//
|
230
|
+
.#{$buttons} .#{$label} {
|
231
|
+
background-color: $layer-02;
|
232
|
+
cursor: pointer;
|
233
|
+
}
|
234
|
+
.#{$buttons}:not(:hover) .#{$value} {
|
235
|
+
@include value-divider();
|
236
|
+
}
|
237
|
+
.#{$buttons} .#{$value} {
|
238
|
+
background-color: $layer-02;
|
239
|
+
cursor: pointer;
|
240
|
+
}
|
241
|
+
.#{$buttons} .#{$label}:hover {
|
242
|
+
@include label-divider($color: $border-strong);
|
243
|
+
|
244
|
+
border-color: $border-strong;
|
245
|
+
background-color: $layer-hover-02;
|
246
|
+
}
|
247
|
+
.#{$buttons} .#{$value}:hover {
|
248
|
+
@include value-divider($color: $border-strong);
|
249
|
+
|
250
|
+
border-color: $border-strong;
|
251
|
+
background-color: $layer-hover-02;
|
252
|
+
}
|
253
|
+
.#{$buttons} .#{$label}:focus {
|
254
|
+
@include label-divider($color: $focus);
|
255
|
+
|
256
|
+
border-color: $focus;
|
257
|
+
// Disable browser's default "focus" style.
|
258
|
+
outline: none;
|
259
|
+
}
|
260
|
+
.#{$buttons} .#{$value}:focus {
|
261
|
+
@include value-divider($color: $focus);
|
262
|
+
|
263
|
+
border-color: $focus;
|
264
|
+
// Disable browser's default "focus" style.
|
265
|
+
outline: none;
|
266
|
+
}
|
267
|
+
.#{$buttons} .#{$label}:active {
|
268
|
+
background-color: $layer-hover-02;
|
269
|
+
}
|
270
|
+
.#{$buttons} .#{$value}:active {
|
271
|
+
background-color: $layer-hover-02;
|
272
|
+
}
|
273
|
+
.#{$buttons-disabled} .#{$label} {
|
274
|
+
background-color: $layer-02;
|
275
|
+
color: $icon-on-color-disabled;
|
276
|
+
}
|
277
|
+
.#{$buttons-disabled} .#{$value} {
|
278
|
+
@include value-divider();
|
279
|
+
|
280
|
+
background-color: $layer-02;
|
281
|
+
color: $icon-on-color-disabled;
|
282
|
+
}
|
283
|
+
|
284
|
+
//
|
285
|
+
// MODIFIER, SMALL
|
286
|
+
//
|
287
|
+
.#{$block-class}--sm .#{$label} {
|
288
|
+
height: to-rem(18px);
|
289
|
+
padding: 0 $spacing-02 0 $spacing-03;
|
290
|
+
line-height: 1.333;
|
291
|
+
}
|
292
|
+
.#{$block-class}--sm .#{$value} {
|
293
|
+
height: to-rem(18px);
|
294
|
+
// When "small", the divider takes up 1px of 4px of the available space: so "+1px".
|
295
|
+
padding: 0 $spacing-03 0 calc($spacing-02 + 1px);
|
296
|
+
line-height: 1.333;
|
297
|
+
}
|
298
|
+
|
299
|
+
//
|
300
|
+
// MODIFIER, TRUNCATION
|
301
|
+
//
|
302
|
+
.#{$block-class}--truncate-end .#{$value} {
|
303
|
+
display: inline;
|
304
|
+
overflow: hidden;
|
305
|
+
text-overflow: ellipsis;
|
306
|
+
white-space: nowrap;
|
307
|
+
}
|
308
|
+
.#{$block-class}--truncate-start .#{$value} {
|
309
|
+
display: inline;
|
310
|
+
overflow: hidden;
|
311
|
+
direction: rtl;
|
312
|
+
text-overflow: ellipsis;
|
313
|
+
white-space: nowrap;
|
314
|
+
}
|
315
|
+
|
316
|
+
//
|
317
|
+
// MAGNITUDE ICON COLORS AND SIZES
|
318
|
+
//
|
319
|
+
.#{$icon}__magnitude-unknown {
|
320
|
+
fill: $icon-secondary;
|
321
|
+
}
|
322
|
+
.#{$icon}__magnitude-benign {
|
323
|
+
fill: $teal-60;
|
324
|
+
}
|
325
|
+
.#{$icon}__magnitude-low {
|
326
|
+
fill: $support-warning;
|
327
|
+
}
|
328
|
+
.#{$icon}__magnitude-medium {
|
329
|
+
fill: $orange-40;
|
330
|
+
}
|
331
|
+
.#{$icon}__magnitude-high {
|
332
|
+
fill: $support-error;
|
333
|
+
}
|
334
|
+
.#{$icon}__magnitude-critical {
|
335
|
+
fill: $support-error;
|
336
|
+
}
|
337
|
+
.#{$block-class}-disabled svg {
|
338
|
+
fill: $icon-on-color-disabled;
|
339
|
+
}
|
340
|
+
|
341
|
+
// MODIFIER, SMALL ICON
|
342
|
+
.#{$block-class} .#{$icon}--sm {
|
343
|
+
width: $spacing-04;
|
344
|
+
height: $spacing-04;
|
345
|
+
margin-top: to-rem(2.5px);
|
346
|
+
}
|
347
|
+
|
348
|
+
// DUAL BUTTONS ICON ENHANCED ACCESSIBILITY
|
349
|
+
// Add a border to the icon on hover & active to increase contrast.
|
350
|
+
.#{$block-class}--light {
|
351
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-low,
|
352
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-low {
|
353
|
+
stroke: $yellow-60;
|
354
|
+
stroke-width: 1px;
|
355
|
+
}
|
356
|
+
// The "diamond-fill/medium" icon has an inner and outer path.
|
357
|
+
// Fill the outer path to simulate a 1px border.
|
358
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-medium path:first-child,
|
359
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-medium path:first-child {
|
360
|
+
fill: $orange-60;
|
361
|
+
}
|
362
|
+
}
|
363
|
+
.#{$block-class}--dark {
|
364
|
+
// The "caution/high" icon has an inner and outer path.
|
365
|
+
// Fill the outer path to simulate a 1px border.
|
366
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-high path:first-child,
|
367
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-high path:first-child {
|
368
|
+
fill: $red-40;
|
369
|
+
}
|
370
|
+
&.#{$buttons} .#{$label}:hover .#{$icon}__magnitude-critical,
|
371
|
+
&.#{$buttons} .#{$label}:active .#{$icon}__magnitude-critical {
|
372
|
+
stroke: $red-40;
|
373
|
+
stroke-width: to-rem(0.5px);
|
374
|
+
}
|
375
|
+
}
|
376
|
+
|
377
|
+
// SINGLE BUTTON ICON ENHANCED ACCESSIBILITY
|
378
|
+
// Add a border to the icon on hover & active to increase contrast.
|
379
|
+
.#{$block-class}--light {
|
380
|
+
&.#{$button}:hover .#{$icon}__magnitude-low,
|
381
|
+
&.#{$button}:active .#{$icon}__magnitude-low {
|
382
|
+
stroke: $yellow-60;
|
383
|
+
stroke-width: 1px;
|
384
|
+
}
|
385
|
+
&.#{$button}:hover .#{$icon}__magnitude-medium path:first-child,
|
386
|
+
&.#{$button}:active .#{$icon}__magnitude-medium path:first-child {
|
387
|
+
fill: $orange-60;
|
388
|
+
}
|
389
|
+
}
|
390
|
+
.#{$block-class}--dark {
|
391
|
+
&.#{$button}:hover .#{$icon}__magnitude-high path:first-child,
|
392
|
+
&.#{$button}:active .#{$icon}__magnitude-high path:first-child {
|
393
|
+
fill: $red-40;
|
394
|
+
}
|
395
|
+
&.#{$button}:hover .#{$icon}__magnitude-critical,
|
396
|
+
&.#{$button}:active .#{$icon}__magnitude-critical {
|
397
|
+
stroke: $red-40;
|
398
|
+
stroke-width: to-rem(0.5px);
|
399
|
+
}
|
400
|
+
}
|
@@ -60,6 +60,7 @@
|
|
60
60
|
@use './CoachmarkOverlayElements/index-with-carbon' as *;
|
61
61
|
@use './CoachmarkStack/index-with-carbon' as *;
|
62
62
|
@use './DelimitedList/index-with-carbon' as *;
|
63
|
+
@use './Decorator/index-with-carbon' as *;
|
63
64
|
@use './DescriptionList/index-with-carbon' as *;
|
64
65
|
@use './FullPageError/index-with-carbon' as *;
|
65
66
|
@use './SearchBar/index-with-carbon' as *;
|