@carbon/ibm-products 2.31.0 → 2.31.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +802 -517
- 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-released-only.css +48 -75
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +802 -517
- 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 +731 -458
- 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/Decorator/Decorator.d.ts +1 -1
- package/es/components/Decorator/Decorator.js +16 -253
- package/es/components/DecoratorBase/DecoratorBase.d.ts +7 -0
- package/es/components/DecoratorBase/DecoratorBase.js +233 -0
- package/es/components/DecoratorBase/index.d.ts +1 -0
- package/{lib/components/Decorator → es/components/DecoratorBase}/utils.d.ts +1 -1
- package/es/components/{Decorator → DecoratorBase}/utils.js +19 -19
- package/es/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
- package/es/components/DecoratorDualButton/DecoratorDualButton.js +135 -0
- package/es/components/DecoratorDualButton/index.d.ts +1 -0
- package/es/components/DecoratorLink/DecoratorLink.d.ts +5 -0
- package/es/components/DecoratorLink/DecoratorLink.js +125 -0
- package/es/components/DecoratorLink/index.d.ts +1 -0
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
- package/es/components/DecoratorSingleButton/DecoratorSingleButton.js +125 -0
- package/es/components/DecoratorSingleButton/index.d.ts +1 -0
- package/es/components/index.d.ts +3 -0
- package/es/global/js/hooks/useFocus.js +2 -1
- package/es/global/js/package-settings.d.ts +3 -0
- package/es/global/js/package-settings.js +3 -0
- package/es/index.js +3 -0
- package/es/settings.d.ts +3 -0
- package/lib/components/Decorator/Decorator.d.ts +1 -1
- package/lib/components/Decorator/Decorator.js +15 -253
- package/lib/components/DecoratorBase/DecoratorBase.d.ts +7 -0
- package/lib/components/DecoratorBase/DecoratorBase.js +242 -0
- package/lib/components/DecoratorBase/index.d.ts +1 -0
- package/{es/components/Decorator → lib/components/DecoratorBase}/utils.d.ts +1 -1
- package/lib/components/{Decorator → DecoratorBase}/utils.js +19 -19
- package/lib/components/DecoratorDualButton/DecoratorDualButton.d.ts +5 -0
- package/lib/components/DecoratorDualButton/DecoratorDualButton.js +141 -0
- package/lib/components/DecoratorDualButton/index.d.ts +1 -0
- package/lib/components/DecoratorLink/DecoratorLink.d.ts +5 -0
- package/lib/components/DecoratorLink/DecoratorLink.js +131 -0
- package/lib/components/DecoratorLink/index.d.ts +1 -0
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.d.ts +5 -0
- package/lib/components/DecoratorSingleButton/DecoratorSingleButton.js +131 -0
- package/lib/components/DecoratorSingleButton/index.d.ts +1 -0
- package/lib/components/index.d.ts +3 -0
- package/lib/global/js/hooks/useFocus.js +2 -1
- package/lib/global/js/package-settings.d.ts +3 -0
- package/lib/global/js/package-settings.js +3 -0
- package/lib/index.js +15 -0
- package/lib/settings.d.ts +3 -0
- package/package.json +9 -9
- package/scss/components/Card/_card.scss +2 -2
- package/scss/components/Decorator/_decorator.scss +3 -380
- package/scss/components/DecoratorBase/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorBase/_decorator-base-mixins.scss +41 -0
- package/scss/components/DecoratorBase/_decorator-base.scss +146 -0
- package/scss/components/DecoratorBase/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorBase/_index.scss +8 -0
- package/scss/components/DecoratorDualButton/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorDualButton/_decorator-dual-button.scss +112 -0
- package/scss/components/DecoratorDualButton/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorDualButton/_index.scss +8 -0
- package/scss/components/DecoratorLink/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorLink/_decorator-link.scss +53 -0
- package/scss/components/DecoratorLink/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorLink/_index.scss +8 -0
- package/scss/components/DecoratorSingleButton/_carbon-imports.scss +9 -0
- package/scss/components/DecoratorSingleButton/_decorator-single-button.scss +117 -0
- package/scss/components/DecoratorSingleButton/_index-with-carbon.scss +9 -0
- package/scss/components/DecoratorSingleButton/_index.scss +8 -0
- package/scss/components/SidePanel/_side-panel.scss +1 -1
- package/scss/components/Tearsheet/_tearsheet.scss +1 -1
- package/scss/components/_index-with-carbon.scss +3 -0
- package/scss/components/_index.scss +3 -0
- /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
- /package/es/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
- /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.d.ts +0 -0
- /package/lib/components/{Decorator → DecoratorBase}/DecoratorIcon.js +0 -0
@@ -1,8 +1,3 @@
|
|
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
1
|
//
|
7
2
|
// Copyright IBM Corp. 2024, 2024
|
8
3
|
//
|
@@ -10,391 +5,19 @@
|
|
10
5
|
// LICENSE file in the root directory of this source tree.
|
11
6
|
//
|
12
7
|
|
13
|
-
// Standard imports.
|
14
8
|
@use '../../global/styles/project-settings' as c4p-settings;
|
15
9
|
@use '../../global/styles/mixins';
|
16
10
|
|
11
|
+
@use '../DecoratorBase/decorator-base-mixins' as *;
|
12
|
+
@use '../DecoratorBase/decorator-base';
|
13
|
+
|
17
14
|
// 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
15
|
|
26
16
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
17
|
$block-class: #{c4p-settings.$pkg-prefix}--decorator;
|
28
|
-
//
|
29
18
|
$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
19
|
$value: #{$block-class}__value;
|
40
20
|
|
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
21
|
.#{$default} .#{$value} {
|
127
22
|
@include value-divider();
|
128
23
|
}
|
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
|
-
}
|
@@ -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 DecoratorBase in this file.
|
9
|
+
// DecoratorBase uses the following Carbon components:
|
@@ -0,0 +1,41 @@
|
|
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
|
+
/* stylelint-disable carbon/layout-token-use */
|
9
|
+
|
10
|
+
@use '@carbon/styles/scss/theme' as *;
|
11
|
+
|
12
|
+
// Use value-divider() by default for the component's dividing line.
|
13
|
+
@mixin value-divider($top: 0, $bottom: 0, $left: 0, $color: $border-subtle-02) {
|
14
|
+
&::after {
|
15
|
+
position: absolute;
|
16
|
+
top: #{$top};
|
17
|
+
bottom: #{$bottom};
|
18
|
+
left: #{$left};
|
19
|
+
border-left: 1px solid #{$color};
|
20
|
+
content: '';
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
// Use label-divider() only when hovering/focusing the label.
|
25
|
+
@mixin label-divider(
|
26
|
+
// Nudge the line over so it occupies the same space as the value divider.
|
27
|
+
$top: -1px,
|
28
|
+
$right: -1px,
|
29
|
+
$bottom: -1px,
|
30
|
+
$color: $border-strong
|
31
|
+
) {
|
32
|
+
&::after {
|
33
|
+
position: absolute;
|
34
|
+
z-index: 1;
|
35
|
+
top: #{$top};
|
36
|
+
right: #{$right};
|
37
|
+
bottom: #{$bottom};
|
38
|
+
border-right: 1px solid #{$color};
|
39
|
+
content: '';
|
40
|
+
}
|
41
|
+
}
|
@@ -0,0 +1,146 @@
|
|
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
|
+
// DecoratorBase 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
|
+
$icon: #{$block-class}-icon;
|
29
|
+
$label: #{$block-class}__label;
|
30
|
+
$value: #{$block-class}__value;
|
31
|
+
|
32
|
+
.#{$block-class}--light {
|
33
|
+
@include theme(themes.$g10, true);
|
34
|
+
}
|
35
|
+
.#{$block-class}--dark {
|
36
|
+
@include theme(themes.$g100, true);
|
37
|
+
}
|
38
|
+
|
39
|
+
// BASE STYLING FOR ALL DECORATORS
|
40
|
+
.#{$block-class} {
|
41
|
+
display: inline-flex;
|
42
|
+
max-width: 100%;
|
43
|
+
align-items: normal;
|
44
|
+
border-radius: $spacing-12;
|
45
|
+
}
|
46
|
+
.#{$block-class} .#{$label} {
|
47
|
+
@include type.type-style('label-01');
|
48
|
+
|
49
|
+
position: relative;
|
50
|
+
display: inline-flex;
|
51
|
+
height: $spacing-06;
|
52
|
+
align-items: normal;
|
53
|
+
padding: 0 $spacing-03;
|
54
|
+
border-width: to-rem(1px) 0 to-rem(1px) to-rem(1px);
|
55
|
+
border-style: solid;
|
56
|
+
border-color: $border-subtle-02;
|
57
|
+
border-radius: $spacing-12 0 0 $spacing-12;
|
58
|
+
background-color: $layer-01;
|
59
|
+
color: $text-secondary;
|
60
|
+
line-height: 1.8;
|
61
|
+
}
|
62
|
+
.#{$block-class} .#{$value} {
|
63
|
+
@include type.type-style('label-01');
|
64
|
+
|
65
|
+
position: relative;
|
66
|
+
display: inline-flex;
|
67
|
+
overflow: hidden;
|
68
|
+
height: $spacing-06;
|
69
|
+
align-items: normal;
|
70
|
+
padding: 0 $spacing-03;
|
71
|
+
border-width: to-rem(1px) to-rem(1px) to-rem(1px) 0;
|
72
|
+
border-style: solid;
|
73
|
+
border-color: $border-subtle-02;
|
74
|
+
border-radius: 0 $spacing-12 $spacing-12 0;
|
75
|
+
background-color: $layer-01;
|
76
|
+
color: $text-primary;
|
77
|
+
line-height: 1.8;
|
78
|
+
}
|
79
|
+
.#{$block-class} .#{$icon} {
|
80
|
+
margin-top: to-rem(3px);
|
81
|
+
margin-right: $spacing-02;
|
82
|
+
}
|
83
|
+
|
84
|
+
//
|
85
|
+
// MODIFIER, SMALL
|
86
|
+
//
|
87
|
+
.#{$block-class}--sm .#{$label} {
|
88
|
+
height: to-rem(18px);
|
89
|
+
padding: 0 $spacing-02 0 $spacing-03;
|
90
|
+
line-height: 1.333;
|
91
|
+
}
|
92
|
+
.#{$block-class}--sm .#{$value} {
|
93
|
+
height: to-rem(18px);
|
94
|
+
// When "small", the divider takes up 1px of 4px of the available space: so "+1px".
|
95
|
+
padding: 0 $spacing-03 0 calc($spacing-02 + 1px);
|
96
|
+
line-height: 1.333;
|
97
|
+
}
|
98
|
+
|
99
|
+
//
|
100
|
+
// MODIFIER, TRUNCATION
|
101
|
+
//
|
102
|
+
.#{$block-class}--truncate-end .#{$value} {
|
103
|
+
display: inline;
|
104
|
+
overflow: hidden;
|
105
|
+
text-overflow: ellipsis;
|
106
|
+
white-space: nowrap;
|
107
|
+
}
|
108
|
+
.#{$block-class}--truncate-start .#{$value} {
|
109
|
+
display: inline;
|
110
|
+
overflow: hidden;
|
111
|
+
direction: rtl;
|
112
|
+
text-overflow: ellipsis;
|
113
|
+
white-space: nowrap;
|
114
|
+
}
|
115
|
+
|
116
|
+
//
|
117
|
+
// MAGNITUDE ICON COLORS AND SIZES
|
118
|
+
//
|
119
|
+
.#{$icon}__magnitude-unknown {
|
120
|
+
fill: $icon-secondary;
|
121
|
+
}
|
122
|
+
.#{$icon}__magnitude-benign {
|
123
|
+
fill: $teal-60;
|
124
|
+
}
|
125
|
+
.#{$icon}__magnitude-low {
|
126
|
+
fill: $support-warning;
|
127
|
+
}
|
128
|
+
.#{$icon}__magnitude-medium {
|
129
|
+
fill: $orange-40;
|
130
|
+
}
|
131
|
+
.#{$icon}__magnitude-high {
|
132
|
+
fill: $support-error;
|
133
|
+
}
|
134
|
+
.#{$icon}__magnitude-critical {
|
135
|
+
fill: $support-error;
|
136
|
+
}
|
137
|
+
.#{$block-class}-disabled svg {
|
138
|
+
fill: $icon-on-color-disabled;
|
139
|
+
}
|
140
|
+
|
141
|
+
// MODIFIER, SMALL ICON
|
142
|
+
.#{$block-class} .#{$icon}--sm {
|
143
|
+
width: $spacing-04;
|
144
|
+
height: $spacing-04;
|
145
|
+
margin-top: to-rem(2.5px);
|
146
|
+
}
|
@@ -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 DecoratorDualButton in this file.
|
9
|
+
// DecoratorDualButton uses the following Carbon components:
|