@carbon/styles 0.11.0-rc.0 → 0.11.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.
- package/index.scss +2 -0
- package/package.json +4 -4
- package/scss/_layer.scss +112 -0
- package/scss/_theme.scss +0 -69
- package/scss/_zone.scss +2 -0
- package/scss/components/button/_tokens.scss +2 -2
- package/scss/components/tabs/_tabs.scss +86 -103
- package/scss/utilities/_layer-set.scss +0 -38
package/index.scss
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "0.11.0
|
|
4
|
+
"version": "0.11.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"@carbon/grid": "^10.39.0",
|
|
26
26
|
"@carbon/layout": "^10.34.0",
|
|
27
27
|
"@carbon/motion": "^10.26.0",
|
|
28
|
-
"@carbon/themes": "^10.48.0
|
|
29
|
-
"@carbon/type": "^10.39.0
|
|
28
|
+
"@carbon/themes": "^10.48.0",
|
|
29
|
+
"@carbon/type": "^10.39.0",
|
|
30
30
|
"@ibm/plex": "6.0.0-next.6"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@carbon/test-utils": "^10.20.0",
|
|
34
34
|
"css": "^3.0.0"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "3e014d3be20089ade76dddea87c94ab2171e6fd7"
|
|
37
37
|
}
|
package/scss/_layer.scss
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2021
|
|
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 'sass:list';
|
|
9
|
+
@use 'sass:map';
|
|
10
|
+
@use './config' as *;
|
|
11
|
+
@use './theme';
|
|
12
|
+
@use './utilities/custom-property';
|
|
13
|
+
|
|
14
|
+
$-default-layer-sets: (
|
|
15
|
+
layer: (
|
|
16
|
+
theme.$layer-01,
|
|
17
|
+
theme.$layer-02,
|
|
18
|
+
theme.$layer-03,
|
|
19
|
+
),
|
|
20
|
+
layer-active: (
|
|
21
|
+
theme.$layer-active-01,
|
|
22
|
+
theme.$layer-active-02,
|
|
23
|
+
theme.$layer-active-03,
|
|
24
|
+
),
|
|
25
|
+
layer-hover: (
|
|
26
|
+
theme.$layer-hover-01,
|
|
27
|
+
theme.$layer-hover-02,
|
|
28
|
+
theme.$layer-hover-03,
|
|
29
|
+
),
|
|
30
|
+
layer-selected: (
|
|
31
|
+
theme.$layer-selected-01,
|
|
32
|
+
theme.$layer-selected-02,
|
|
33
|
+
theme.$layer-selected-03,
|
|
34
|
+
),
|
|
35
|
+
layer-selected-hover: (
|
|
36
|
+
theme.$layer-selected-hover-01,
|
|
37
|
+
theme.$layer-selected-hover-02,
|
|
38
|
+
theme.$layer-selected-hover-03,
|
|
39
|
+
),
|
|
40
|
+
layer-accent: (
|
|
41
|
+
theme.$layer-accent-01,
|
|
42
|
+
theme.$layer-accent-02,
|
|
43
|
+
theme.$layer-accent-03,
|
|
44
|
+
),
|
|
45
|
+
layer-accent-hover: (
|
|
46
|
+
theme.$layer-accent-hover-01,
|
|
47
|
+
theme.$layer-accent-hover-02,
|
|
48
|
+
theme.$layer-accent-hover-03,
|
|
49
|
+
),
|
|
50
|
+
layer-accent-active: (
|
|
51
|
+
theme.$layer-accent-active-01,
|
|
52
|
+
theme.$layer-accent-active-02,
|
|
53
|
+
theme.$layer-accent-active-03,
|
|
54
|
+
),
|
|
55
|
+
field: (
|
|
56
|
+
theme.$field-01,
|
|
57
|
+
theme.$field-02,
|
|
58
|
+
theme.$field-03,
|
|
59
|
+
),
|
|
60
|
+
field-hover: (
|
|
61
|
+
theme.$field-hover-01,
|
|
62
|
+
theme.$field-hover-02,
|
|
63
|
+
theme.$field-hover-03,
|
|
64
|
+
),
|
|
65
|
+
border-subtle: (
|
|
66
|
+
theme.$border-subtle-01,
|
|
67
|
+
theme.$border-subtle-02,
|
|
68
|
+
theme.$border-subtle-03,
|
|
69
|
+
),
|
|
70
|
+
border-subtle-selected: (
|
|
71
|
+
theme.$border-subtle-selected-01,
|
|
72
|
+
theme.$border-subtle-selected-02,
|
|
73
|
+
theme.$border-subtle-selected-03,
|
|
74
|
+
),
|
|
75
|
+
border-strong: (
|
|
76
|
+
theme.$border-strong-01,
|
|
77
|
+
theme.$border-strong-02,
|
|
78
|
+
theme.$border-strong-03,
|
|
79
|
+
),
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
/// Define a map of layer sets, each set should have values for each layer in
|
|
83
|
+
/// the application. The key of this map is used for the CSS Custom Property
|
|
84
|
+
/// name whose value is updated as more layers are added.
|
|
85
|
+
/// @type {Map}
|
|
86
|
+
$layer-sets: () !default;
|
|
87
|
+
$layer-sets: map.deep-merge($-default-layer-sets, $layer-sets);
|
|
88
|
+
|
|
89
|
+
/// Emit the layer tokens defined in $layer-sets for the given $level
|
|
90
|
+
/// @param {Number} $level
|
|
91
|
+
@mixin -emit-layer-tokens($level) {
|
|
92
|
+
@each $key, $layer-set in $layer-sets {
|
|
93
|
+
$value: list.nth($layer-set, $level);
|
|
94
|
+
@include custom-property.declaration($key, $value);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
:root {
|
|
99
|
+
@include -emit-layer-tokens(1);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.#{$prefix}--layer-one {
|
|
103
|
+
@include -emit-layer-tokens(1);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.#{$prefix}--layer-two {
|
|
107
|
+
@include -emit-layer-tokens(2);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.#{$prefix}--layer-three {
|
|
111
|
+
@include -emit-layer-tokens(3);
|
|
112
|
+
}
|
package/scss/_theme.scss
CHANGED
|
@@ -19,75 +19,6 @@
|
|
|
19
19
|
@forward '@carbon/themes/scss/modules/tokens';
|
|
20
20
|
@use '@carbon/themes/scss/modules/tokens';
|
|
21
21
|
@use './utilities/custom-property';
|
|
22
|
-
@use './utilities/layer-set' with (
|
|
23
|
-
$layer-sets: (
|
|
24
|
-
layer: (
|
|
25
|
-
tokens.$layer-01,
|
|
26
|
-
tokens.$layer-02,
|
|
27
|
-
tokens.$layer-03,
|
|
28
|
-
),
|
|
29
|
-
layer-active: (
|
|
30
|
-
tokens.$layer-active-01,
|
|
31
|
-
tokens.$layer-active-02,
|
|
32
|
-
tokens.$layer-active-03,
|
|
33
|
-
),
|
|
34
|
-
layer-hover: (
|
|
35
|
-
tokens.$layer-hover-01,
|
|
36
|
-
tokens.$layer-hover-02,
|
|
37
|
-
tokens.$layer-hover-03,
|
|
38
|
-
),
|
|
39
|
-
layer-selected: (
|
|
40
|
-
tokens.$layer-selected-01,
|
|
41
|
-
tokens.$layer-selected-02,
|
|
42
|
-
tokens.$layer-selected-03,
|
|
43
|
-
),
|
|
44
|
-
layer-selected-hover: (
|
|
45
|
-
tokens.$layer-selected-hover-01,
|
|
46
|
-
tokens.$layer-selected-hover-02,
|
|
47
|
-
tokens.$layer-selected-hover-03,
|
|
48
|
-
),
|
|
49
|
-
layer-accent: (
|
|
50
|
-
tokens.$layer-accent-01,
|
|
51
|
-
tokens.$layer-accent-02,
|
|
52
|
-
tokens.$layer-accent-03,
|
|
53
|
-
),
|
|
54
|
-
layer-accent-hover: (
|
|
55
|
-
tokens.$layer-accent-hover-01,
|
|
56
|
-
tokens.$layer-accent-hover-02,
|
|
57
|
-
tokens.$layer-accent-hover-03,
|
|
58
|
-
),
|
|
59
|
-
layer-accent-active: (
|
|
60
|
-
tokens.$layer-accent-active-01,
|
|
61
|
-
tokens.$layer-accent-active-02,
|
|
62
|
-
tokens.$layer-accent-active-03,
|
|
63
|
-
),
|
|
64
|
-
field: (
|
|
65
|
-
tokens.$field-01,
|
|
66
|
-
tokens.$field-02,
|
|
67
|
-
tokens.$field-03,
|
|
68
|
-
),
|
|
69
|
-
field-hover: (
|
|
70
|
-
tokens.$field-hover-01,
|
|
71
|
-
tokens.$field-hover-02,
|
|
72
|
-
tokens.$field-hover-03,
|
|
73
|
-
),
|
|
74
|
-
border-subtle: (
|
|
75
|
-
tokens.$border-subtle-01,
|
|
76
|
-
tokens.$border-subtle-02,
|
|
77
|
-
tokens.$border-subtle-03,
|
|
78
|
-
),
|
|
79
|
-
border-subtle-selected: (
|
|
80
|
-
tokens.$border-subtle-selected-01,
|
|
81
|
-
tokens.$border-subtle-selected-02,
|
|
82
|
-
tokens.$border-subtle-selected-03,
|
|
83
|
-
),
|
|
84
|
-
border-strong: (
|
|
85
|
-
tokens.$border-strong-01,
|
|
86
|
-
tokens.$border-strong-02,
|
|
87
|
-
tokens.$border-strong-03,
|
|
88
|
-
),
|
|
89
|
-
),
|
|
90
|
-
);
|
|
91
22
|
|
|
92
23
|
// Layer sets
|
|
93
24
|
$layer: custom-property.get-var('layer');
|
package/scss/_zone.scss
CHANGED
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
@use './config';
|
|
11
11
|
@use './themes';
|
|
12
12
|
@use './theme';
|
|
13
|
+
// Inline themes depend on layer styles to property reset the layer level
|
|
14
|
+
@use './layer';
|
|
13
15
|
@use './utilities/custom-property';
|
|
14
16
|
|
|
15
17
|
/// Specify a Map of zones where the key will be used as part of the selector
|
|
@@ -330,11 +330,11 @@ $button-disabled: (
|
|
|
330
330
|
),
|
|
331
331
|
(
|
|
332
332
|
theme: themes.$g90,
|
|
333
|
-
value:
|
|
333
|
+
value: rgba(141, 141, 141, 0.3),
|
|
334
334
|
),
|
|
335
335
|
(
|
|
336
336
|
theme: themes.$g100,
|
|
337
|
-
value:
|
|
337
|
+
value: rgba(141, 141, 141, 0.3),
|
|
338
338
|
),
|
|
339
339
|
),
|
|
340
340
|
) !default;
|
|
@@ -33,7 +33,6 @@
|
|
|
33
33
|
/// @access public
|
|
34
34
|
/// @group tabs
|
|
35
35
|
@mixin tabs {
|
|
36
|
-
// TODO: remove namespace and suffix in next major release
|
|
37
36
|
.#{$prefix}--tabs {
|
|
38
37
|
@include reset;
|
|
39
38
|
@include type-style('body-short-01');
|
|
@@ -44,7 +43,7 @@
|
|
|
44
43
|
min-height: rem(40px);
|
|
45
44
|
color: $text-primary;
|
|
46
45
|
|
|
47
|
-
&.#{$prefix}--tabs--
|
|
46
|
+
&.#{$prefix}--tabs--contained {
|
|
48
47
|
min-height: rem(48px);
|
|
49
48
|
}
|
|
50
49
|
|
|
@@ -95,11 +94,11 @@
|
|
|
95
94
|
background-image: linear-gradient(to right, transparent, $layer);
|
|
96
95
|
}
|
|
97
96
|
|
|
98
|
-
&.#{$prefix}--tabs--
|
|
97
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--left {
|
|
99
98
|
background-image: linear-gradient(to left, transparent, $layer-accent);
|
|
100
99
|
}
|
|
101
100
|
|
|
102
|
-
&.#{$prefix}--tabs--
|
|
101
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--right {
|
|
103
102
|
background-image: linear-gradient(to right, transparent, $layer-accent);
|
|
104
103
|
}
|
|
105
104
|
|
|
@@ -124,7 +123,7 @@
|
|
|
124
123
|
);
|
|
125
124
|
}
|
|
126
125
|
|
|
127
|
-
&.#{$prefix}--tabs--
|
|
126
|
+
&.#{$prefix}--tabs--contained
|
|
128
127
|
.#{$prefix}--tabs__overflow-indicator--left {
|
|
129
128
|
background-image: linear-gradient(
|
|
130
129
|
to left,
|
|
@@ -133,7 +132,7 @@
|
|
|
133
132
|
);
|
|
134
133
|
}
|
|
135
134
|
|
|
136
|
-
&.#{$prefix}--tabs--
|
|
135
|
+
&.#{$prefix}--tabs--contained
|
|
137
136
|
.#{$prefix}--tabs__overflow-indicator--right {
|
|
138
137
|
background-image: linear-gradient(
|
|
139
138
|
to right,
|
|
@@ -162,7 +161,7 @@
|
|
|
162
161
|
display: none;
|
|
163
162
|
}
|
|
164
163
|
|
|
165
|
-
&.#{$prefix}--tabs--
|
|
164
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
|
|
166
165
|
width: $spacing-09;
|
|
167
166
|
margin: 0;
|
|
168
167
|
background-color: $layer-accent;
|
|
@@ -189,11 +188,11 @@
|
|
|
189
188
|
margin-left: rem(1px);
|
|
190
189
|
}
|
|
191
190
|
|
|
192
|
-
&.#{$prefix}--tabs--
|
|
191
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item {
|
|
193
192
|
background-color: $layer-accent;
|
|
194
193
|
}
|
|
195
194
|
|
|
196
|
-
&.#{$prefix}--tabs--
|
|
195
|
+
&.#{$prefix}--tabs--contained
|
|
197
196
|
.#{$prefix}--tabs__nav-item
|
|
198
197
|
+ .#{$prefix}--tabs__nav-item {
|
|
199
198
|
margin-left: 0;
|
|
@@ -201,87 +200,12 @@
|
|
|
201
200
|
box-shadow: rem(-1px) 0 0 0 $border-strong;
|
|
202
201
|
}
|
|
203
202
|
|
|
204
|
-
&.#{$prefix}--tabs--container
|
|
205
|
-
.#{$prefix}--tabs__nav-item
|
|
206
|
-
+ .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
|
|
207
|
-
&.#{$prefix}--tabs--container
|
|
208
|
-
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected
|
|
209
|
-
+ .#{$prefix}--tabs__nav-item {
|
|
210
|
-
box-shadow: none;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
203
|
.#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
|
|
214
204
|
transition: color $duration-fast-01 motion(standard, productive),
|
|
215
205
|
border-bottom-color $duration-fast-01 motion(standard, productive),
|
|
216
206
|
outline $duration-fast-01 motion(standard, productive);
|
|
217
207
|
}
|
|
218
208
|
|
|
219
|
-
//-----------------------------
|
|
220
|
-
// Item Hover
|
|
221
|
-
//-----------------------------
|
|
222
|
-
&.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item:hover {
|
|
223
|
-
background-color: $layer-selected-hover;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
//---------------------------------------------
|
|
227
|
-
// Item Disabled
|
|
228
|
-
//---------------------------------------------
|
|
229
|
-
.#{$prefix}--tabs__nav-item--disabled,
|
|
230
|
-
.#{$prefix}--tabs__nav-item--disabled:hover {
|
|
231
|
-
background-color: transparent;
|
|
232
|
-
cursor: not-allowed;
|
|
233
|
-
outline: none;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
&.#{$prefix}--tabs--container
|
|
237
|
-
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
|
|
238
|
-
&.#{$prefix}--tabs--container
|
|
239
|
-
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
|
|
240
|
-
background-color: button.$button-disabled;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
//-----------------------------
|
|
244
|
-
// Item Selected
|
|
245
|
-
//-----------------------------
|
|
246
|
-
.#{$prefix}--tabs__nav-item--selected {
|
|
247
|
-
transition: color $duration-fast-01 motion(standard, productive);
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link,
|
|
251
|
-
.#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:focus,
|
|
252
|
-
.#{$prefix}--tabs__nav-item--selected .#{$prefix}--tabs__nav-link:active {
|
|
253
|
-
@include type-style('productive-heading-01');
|
|
254
|
-
|
|
255
|
-
border-bottom: 2px solid $border-interactive;
|
|
256
|
-
color: $text-primary;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
&.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected,
|
|
260
|
-
&.#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item--selected:hover {
|
|
261
|
-
background-color: $layer;
|
|
262
|
-
|
|
263
|
-
.#{$prefix}--tabs__nav-link:focus,
|
|
264
|
-
.#{$prefix}--tabs__nav-link:active {
|
|
265
|
-
box-shadow: none;
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
&.#{$prefix}--tabs--container
|
|
270
|
-
.#{$prefix}--tabs__nav-item--selected
|
|
271
|
-
.#{$prefix}--tabs__nav-link {
|
|
272
|
-
// Draws the border without affecting the inner-content
|
|
273
|
-
box-shadow: inset 0 2px 0 0 $border-interactive;
|
|
274
|
-
// height - vertical padding
|
|
275
|
-
line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
&.#{$prefix}--tabs--light.#{$prefix}--tabs--container
|
|
279
|
-
.#{$prefix}--tabs__nav-item--selected,
|
|
280
|
-
&.#{$prefix}--tabs--light.#{$prefix}--tabs--container
|
|
281
|
-
.#{$prefix}--tabs__nav-item--selected:hover {
|
|
282
|
-
background-color: $background;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
209
|
//-----------------------------
|
|
286
210
|
// Link
|
|
287
211
|
//-----------------------------
|
|
@@ -295,10 +219,10 @@
|
|
|
295
219
|
}
|
|
296
220
|
|
|
297
221
|
overflow: hidden;
|
|
222
|
+
max-width: 10rem;
|
|
298
223
|
padding: $spacing-04 $spacing-05 $spacing-03;
|
|
299
224
|
border-bottom: $tab-underline-color;
|
|
300
225
|
color: $text-secondary;
|
|
301
|
-
text-align: left;
|
|
302
226
|
text-decoration: none;
|
|
303
227
|
text-overflow: ellipsis;
|
|
304
228
|
transition: border $duration-fast-01 motion(standard, productive),
|
|
@@ -311,12 +235,70 @@
|
|
|
311
235
|
}
|
|
312
236
|
}
|
|
313
237
|
|
|
314
|
-
&.#{$prefix}--tabs--
|
|
238
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
|
|
315
239
|
height: rem(48px);
|
|
316
240
|
padding: $spacing-03 $spacing-05;
|
|
317
241
|
border-bottom: 0;
|
|
318
242
|
// height - vertical padding
|
|
319
243
|
line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
|
|
244
|
+
text-align: left;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
//-----------------------------
|
|
248
|
+
// Item Hover
|
|
249
|
+
//-----------------------------
|
|
250
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item:hover {
|
|
251
|
+
background-color: $layer-selected-hover;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
//-----------------------------
|
|
255
|
+
// Item Selected
|
|
256
|
+
//-----------------------------
|
|
257
|
+
.#{$prefix}--tabs__nav-item--selected {
|
|
258
|
+
border-bottom: 2px solid $border-interactive;
|
|
259
|
+
transition: color $duration-fast-01 motion(standard, productive);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&.#{$prefix}--tabs--contained
|
|
263
|
+
.#{$prefix}--tabs__nav-item--selected
|
|
264
|
+
+ .#{$prefix}--tabs__nav-item {
|
|
265
|
+
box-shadow: none;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
&.#{$prefix}--tabs--contained
|
|
269
|
+
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected {
|
|
270
|
+
// Draws the border without affecting the inner-content
|
|
271
|
+
box-shadow: inset 0 2px 0 0 $border-interactive;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
|
|
275
|
+
.#{$prefix}--tabs__nav-item--selected,
|
|
276
|
+
.#{$prefix}--tabs__nav-item--selected:focus
|
|
277
|
+
.#{$prefix}--tabs__nav-link:focus,
|
|
278
|
+
.#{$prefix}--tabs__nav-item--selected:active
|
|
279
|
+
.#{$prefix}--tabs__nav-link:active {
|
|
280
|
+
@include type-style('productive-heading-01');
|
|
281
|
+
|
|
282
|
+
color: $text-primary;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
|
|
286
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected:hover {
|
|
287
|
+
background-color: $layer;
|
|
288
|
+
// height - vertical padding
|
|
289
|
+
line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
|
|
290
|
+
|
|
291
|
+
.#{$prefix}--tabs__nav-link:focus,
|
|
292
|
+
.#{$prefix}--tabs__nav-link:active {
|
|
293
|
+
box-shadow: none;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
&.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
|
|
298
|
+
.#{$prefix}--tabs__nav-item--selected,
|
|
299
|
+
&.#{$prefix}--tabs--light.#{$prefix}--tabs--contained
|
|
300
|
+
.#{$prefix}--tabs__nav-item--selected:hover {
|
|
301
|
+
background-color: $background;
|
|
320
302
|
}
|
|
321
303
|
|
|
322
304
|
//-----------------------------
|
|
@@ -327,31 +309,35 @@
|
|
|
327
309
|
color: $text-primary;
|
|
328
310
|
}
|
|
329
311
|
|
|
330
|
-
&.#{$prefix}--tabs--container
|
|
331
|
-
.#{$prefix}--tabs__nav-item
|
|
332
|
-
.#{$prefix}--tabs__nav-link {
|
|
333
|
-
border-bottom: none;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
312
|
//-----------------------------
|
|
337
|
-
//
|
|
313
|
+
// Item Disabled
|
|
338
314
|
//-----------------------------
|
|
339
|
-
|
|
315
|
+
|
|
316
|
+
.#{$prefix}--tabs__nav-item--disabled {
|
|
340
317
|
border-bottom: $tab-underline-disabled;
|
|
318
|
+
background-color: transparent;
|
|
341
319
|
color: $tab-text-disabled;
|
|
320
|
+
outline: none;
|
|
342
321
|
}
|
|
343
322
|
|
|
344
|
-
.#{$prefix}--tabs__nav-item--disabled:hover
|
|
323
|
+
.#{$prefix}--tabs__nav-item--disabled:hover {
|
|
345
324
|
border-bottom: $tab-underline-disabled;
|
|
346
325
|
color: $tab-text-disabled;
|
|
347
326
|
cursor: not-allowed;
|
|
348
|
-
pointer-events: none;
|
|
349
327
|
}
|
|
350
328
|
|
|
351
|
-
|
|
352
|
-
|
|
329
|
+
&.#{$prefix}--tabs--contained
|
|
330
|
+
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
|
|
331
|
+
&.#{$prefix}--tabs--contained
|
|
332
|
+
.#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
|
|
333
|
+
background-color: button.$button-disabled;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.#{$prefix}--tabs__nav-item--disabled:focus,
|
|
337
|
+
.#{$prefix}--tabs__nav-item--disabled:active {
|
|
353
338
|
border-bottom: $tab-underline-disabled;
|
|
354
339
|
outline: none;
|
|
340
|
+
pointer-events: none;
|
|
355
341
|
}
|
|
356
342
|
|
|
357
343
|
.#{$prefix}--tabs--light
|
|
@@ -375,9 +361,7 @@
|
|
|
375
361
|
border-bottom-color: $border-subtle;
|
|
376
362
|
}
|
|
377
363
|
|
|
378
|
-
&.#{$prefix}--tabs--
|
|
379
|
-
.#{$prefix}--tabs__nav-item--disabled
|
|
380
|
-
.#{$prefix}--tabs__nav-link {
|
|
364
|
+
&.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--disabled {
|
|
381
365
|
border-bottom: none;
|
|
382
366
|
color: $text-on-color-disabled;
|
|
383
367
|
}
|
|
@@ -401,7 +385,7 @@
|
|
|
401
385
|
pointer-events: none;
|
|
402
386
|
}
|
|
403
387
|
|
|
404
|
-
.#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--
|
|
388
|
+
.#{$prefix}--skeleton.#{$prefix}--tabs:not(.#{$prefix}--tabs--contained)
|
|
405
389
|
.#{$prefix}--tabs__nav-link {
|
|
406
390
|
border-bottom: 2px solid $skeleton-element;
|
|
407
391
|
}
|
|
@@ -429,7 +413,6 @@
|
|
|
429
413
|
@include high-contrast-mode('focus');
|
|
430
414
|
}
|
|
431
415
|
|
|
432
|
-
// stylelint-disable-next-line no-duplicate-selectors
|
|
433
416
|
.#{$prefix}--tabs
|
|
434
417
|
.#{$prefix}--tabs__nav-item--disabled
|
|
435
418
|
.#{$prefix}--tabs__nav-link {
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright IBM Corp. 2021
|
|
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 'sass:list';
|
|
9
|
-
@use 'sass:meta';
|
|
10
|
-
@use '../config' as *;
|
|
11
|
-
@use './custom-property';
|
|
12
|
-
|
|
13
|
-
/// Define a map of layer sets, each set should have values for each layer in
|
|
14
|
-
/// the application. The key of this map is used for the CSS Custom Property
|
|
15
|
-
/// name whose value is updated as more layers are added.
|
|
16
|
-
/// @type {Map}
|
|
17
|
-
$layer-sets: () !default;
|
|
18
|
-
|
|
19
|
-
/// Emit the layer tokens defined in $layer-sets for the given $level
|
|
20
|
-
/// @param {Number} $level
|
|
21
|
-
@mixin -emit-layer-tokens($level) {
|
|
22
|
-
@each $key, $layer-set in $layer-sets {
|
|
23
|
-
$value: list.nth($layer-set, $level);
|
|
24
|
-
@include custom-property.declaration($key, $value);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
:root {
|
|
29
|
-
@include -emit-layer-tokens(1);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.#{$prefix}--layer {
|
|
33
|
-
@include -emit-layer-tokens(2);
|
|
34
|
-
|
|
35
|
-
.#{$prefix}--layer {
|
|
36
|
-
@include -emit-layer-tokens(3);
|
|
37
|
-
}
|
|
38
|
-
}
|