@carbon/styles 1.27.0 → 1.28.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/css/styles.css +844 -2869
- package/css/styles.min.css +1 -1
- package/package.json +3 -3
- package/scss/_config.scss +1 -1
- package/scss/components/contained-list/_contained-list.scss +40 -0
- package/scss/components/list/_list.scss +4 -0
- package/scss/components/number-input/_number-input.scss +35 -5
- package/scss/components/tabs/_tabs.scss +10 -10
- package/scss/components/treeview/_treeview.scss +17 -0
- package/scss/grid/_index.scss +2 -2
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": "1.
|
|
4
|
+
"version": "1.28.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@carbon/test-utils": "^10.28.0",
|
|
46
46
|
"autoprefixer": "^10.4.7",
|
|
47
|
-
"browserslist-config-carbon": "^11.
|
|
47
|
+
"browserslist-config-carbon": "^11.2.0",
|
|
48
48
|
"css": "^3.0.0",
|
|
49
49
|
"cssnano": "^6.0.0",
|
|
50
50
|
"lodash.isequal": "^4.5.0",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"scss/**/*.css",
|
|
60
60
|
"css/**/*.css"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "75f69e49161bf54184d4392c3d48115f852dc8fc"
|
|
63
63
|
}
|
package/scss/_config.scss
CHANGED
|
@@ -62,7 +62,7 @@ $prefix: 'cds' !default;
|
|
|
62
62
|
/// @group @carbon/grid
|
|
63
63
|
$flex-grid-columns: 16 !default;
|
|
64
64
|
|
|
65
|
-
/// Specify if the
|
|
65
|
+
/// Specify if the flexbox grid styles should be emitted
|
|
66
66
|
/// @type Boolean
|
|
67
67
|
/// @group config
|
|
68
68
|
$use-flexbox-grid: false !default;
|
|
@@ -33,6 +33,46 @@
|
|
|
33
33
|
width: 100%;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
.#{$prefix}--contained-list .#{$prefix}--search {
|
|
37
|
+
position: sticky;
|
|
38
|
+
z-index: 1;
|
|
39
|
+
top: 48px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.#{$prefix}--search {
|
|
43
|
+
&.#{$prefix}--search--expandable .#{$prefix}--search-input {
|
|
44
|
+
background-color: $field;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.#{$prefix}--search .#{$prefix}--search-input {
|
|
49
|
+
border-bottom: 1px solid $border-subtle;
|
|
50
|
+
background-color: $background;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.#{$prefix}--search .#{$prefix}--search-close::before {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.#{$prefix}--search .#{$prefix}--search-close {
|
|
58
|
+
border-right: 2px solid transparent;
|
|
59
|
+
outline: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.#{$prefix}--search
|
|
63
|
+
.#{$prefix}--search-input
|
|
64
|
+
~ .#{$prefix}--search-close:hover {
|
|
65
|
+
border-bottom: 1px solid transparent;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.#{$prefix}--search
|
|
69
|
+
.#{$prefix}--search-input:focus
|
|
70
|
+
~ .#{$prefix}--search-close:hover {
|
|
71
|
+
border: 2px solid $focus;
|
|
72
|
+
border-left: 0;
|
|
73
|
+
outline: none;
|
|
74
|
+
}
|
|
75
|
+
|
|
36
76
|
// Sizes
|
|
37
77
|
|
|
38
78
|
$sizes: (
|
|
@@ -30,6 +30,10 @@
|
|
|
30
30
|
list-style: none;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
+
.#{$prefix}--list--unordered:not(.#{$prefix}--list--nested) {
|
|
34
|
+
margin-left: $spacing-05;
|
|
35
|
+
}
|
|
36
|
+
|
|
33
37
|
.#{$prefix}--list--expressive,
|
|
34
38
|
.#{$prefix}--list--expressive .#{$prefix}--list--nested {
|
|
35
39
|
@include type.type-style('body-02');
|
|
@@ -31,6 +31,12 @@
|
|
|
31
31
|
flex-direction: column;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
.#{$prefix}--number
|
|
35
|
+
.#{$prefix}--number__input-wrapper--warning
|
|
36
|
+
input[type='number'] {
|
|
37
|
+
padding-right: rem(128px);
|
|
38
|
+
}
|
|
39
|
+
|
|
34
40
|
.#{$prefix}--number input[type='number'] {
|
|
35
41
|
@include type-style('body-compact-01');
|
|
36
42
|
@include focus-outline('reset');
|
|
@@ -40,7 +46,7 @@
|
|
|
40
46
|
min-width: 9.375rem;
|
|
41
47
|
height: rem(40px);
|
|
42
48
|
box-sizing: border-box;
|
|
43
|
-
padding-right: rem(
|
|
49
|
+
padding-right: rem(96px);
|
|
44
50
|
padding-left: $spacing-05;
|
|
45
51
|
border: 0;
|
|
46
52
|
border-bottom: rem(1px) solid $border-strong;
|
|
@@ -77,14 +83,38 @@
|
|
|
77
83
|
&::-webkit-inner-spin-button {
|
|
78
84
|
appearance: none;
|
|
79
85
|
}
|
|
86
|
+
|
|
87
|
+
&[data-invalid] {
|
|
88
|
+
padding-right: rem(128px);
|
|
89
|
+
}
|
|
80
90
|
}
|
|
81
91
|
|
|
82
|
-
.#{$prefix}--number--lg.#{$prefix}--number
|
|
83
|
-
|
|
92
|
+
.#{$prefix}--number--lg.#{$prefix}--number {
|
|
93
|
+
input[type='number'] {
|
|
94
|
+
padding-right: rem(112px);
|
|
95
|
+
|
|
96
|
+
&[data-invalid] {
|
|
97
|
+
padding-right: rem(144px);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.#{$prefix}--number__input-wrapper--warning input[type='number'] {
|
|
102
|
+
padding-right: rem(144px);
|
|
103
|
+
}
|
|
84
104
|
}
|
|
85
105
|
|
|
86
|
-
.#{$prefix}--number--sm.#{$prefix}--number
|
|
87
|
-
|
|
106
|
+
.#{$prefix}--number--sm.#{$prefix}--number {
|
|
107
|
+
input[type='number'] {
|
|
108
|
+
padding-right: rem(80px);
|
|
109
|
+
|
|
110
|
+
&[data-invalid] {
|
|
111
|
+
padding-right: rem(112px);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.#{$prefix}--number__input-wrapper--warning input[type='number'] {
|
|
116
|
+
padding-right: rem(112px);
|
|
117
|
+
}
|
|
88
118
|
}
|
|
89
119
|
|
|
90
120
|
.#{$prefix}--number input[type='number']:disabled {
|
|
@@ -367,8 +367,16 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
|
|
|
367
367
|
//-----------------------------
|
|
368
368
|
// Item Hover
|
|
369
369
|
//-----------------------------
|
|
370
|
-
|
|
371
|
-
|
|
370
|
+
&:not(.#{$prefix}--tabs--contained)
|
|
371
|
+
.#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):hover {
|
|
372
|
+
border-bottom: $tab-underline-color-hover;
|
|
373
|
+
color: $text-primary;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
&.#{$prefix}--tabs--contained
|
|
377
|
+
.#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled):hover {
|
|
378
|
+
background-color: $layer-accent-hover;
|
|
379
|
+
color: $text-primary;
|
|
372
380
|
}
|
|
373
381
|
|
|
374
382
|
//-----------------------------
|
|
@@ -427,14 +435,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
|
|
|
427
435
|
background-color: $background;
|
|
428
436
|
}
|
|
429
437
|
|
|
430
|
-
//-----------------------------
|
|
431
|
-
// Link Hover
|
|
432
|
-
//-----------------------------
|
|
433
|
-
.#{$prefix}--tabs__nav-item:hover .#{$prefix}--tabs__nav-link {
|
|
434
|
-
border-bottom: $tab-underline-color-hover;
|
|
435
|
-
color: $text-primary;
|
|
436
|
-
}
|
|
437
|
-
|
|
438
438
|
//-----------------------------
|
|
439
439
|
// Item Disabled
|
|
440
440
|
//-----------------------------
|
|
@@ -36,6 +36,10 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
.#{$prefix}--tree-node--with-icon .#{$prefix}--tree-node {
|
|
40
|
+
margin-left: $spacing-03;
|
|
41
|
+
}
|
|
42
|
+
|
|
39
43
|
.#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
|
|
40
44
|
@include focus-outline('outline');
|
|
41
45
|
}
|
|
@@ -109,6 +113,11 @@
|
|
|
109
113
|
padding-left: $spacing-07;
|
|
110
114
|
}
|
|
111
115
|
|
|
116
|
+
.#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon
|
|
117
|
+
.#{$prefix}--tree-leaf-node {
|
|
118
|
+
padding-left: $spacing-06;
|
|
119
|
+
}
|
|
120
|
+
|
|
112
121
|
.#{$prefix}--tree-node__label__details {
|
|
113
122
|
display: flex;
|
|
114
123
|
align-items: center;
|
|
@@ -128,6 +137,7 @@
|
|
|
128
137
|
border: 0;
|
|
129
138
|
margin-top: $spacing-02;
|
|
130
139
|
margin-right: $spacing-02;
|
|
140
|
+
margin-left: -$spacing-02;
|
|
131
141
|
|
|
132
142
|
&:hover {
|
|
133
143
|
cursor: pointer;
|
|
@@ -154,9 +164,16 @@
|
|
|
154
164
|
align-self: flex-start;
|
|
155
165
|
margin-top: rem(1px);
|
|
156
166
|
margin-right: $spacing-03;
|
|
167
|
+
margin-left: $spacing-03;
|
|
157
168
|
fill: $icon-secondary;
|
|
158
169
|
}
|
|
159
170
|
|
|
171
|
+
.#{$prefix}--tree-parent-node__toggle
|
|
172
|
+
+ .#{$prefix}--tree-node__label__details
|
|
173
|
+
.#{$prefix}--tree-node__icon {
|
|
174
|
+
margin-left: $spacing-02;
|
|
175
|
+
}
|
|
176
|
+
|
|
160
177
|
.#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
|
|
161
178
|
background-color: $layer-selected-01;
|
|
162
179
|
color: $text-primary;
|