@carbon/styles 1.28.0 → 1.29.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 +57 -13
- package/css/styles.min.css +1 -1
- package/package.json +3 -3
- package/scss/components/contained-list/_contained-list.scss +13 -7
- package/scss/components/slider/_slider.scss +38 -5
- package/scss/components/structured-list/_structured-list.scss +5 -1
- package/scss/components/ui-shell/side-nav/_side-nav.scss +1 -0
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.29.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"lodash.isequal": "^4.5.0",
|
|
51
51
|
"postcss": "^8.4.14",
|
|
52
52
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
53
|
-
"rimraf": "^
|
|
53
|
+
"rimraf": "^5.0.0",
|
|
54
54
|
"sass": "^1.51.0"
|
|
55
55
|
},
|
|
56
56
|
"sideEffects": [
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"scss/**/*.css",
|
|
60
60
|
"css/**/*.css"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "044bb55aff8c9cddef1a7e42d2bfeac59a89c546"
|
|
63
63
|
}
|
|
@@ -37,35 +37,41 @@
|
|
|
37
37
|
position: sticky;
|
|
38
38
|
z-index: 1;
|
|
39
39
|
top: 48px;
|
|
40
|
-
}
|
|
41
40
|
|
|
42
|
-
.#{$prefix}--search {
|
|
43
41
|
&.#{$prefix}--search--expandable .#{$prefix}--search-input {
|
|
44
42
|
background-color: $field;
|
|
45
43
|
}
|
|
46
44
|
}
|
|
47
45
|
|
|
48
|
-
.#{$prefix}--search .#{$prefix}--search-input {
|
|
46
|
+
.#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input {
|
|
49
47
|
border-bottom: 1px solid $border-subtle;
|
|
50
48
|
background-color: $background;
|
|
51
49
|
}
|
|
52
50
|
|
|
53
|
-
.#{$prefix}--
|
|
51
|
+
.#{$prefix}--contained-list
|
|
52
|
+
.#{$prefix}--search
|
|
53
|
+
.#{$prefix}--search-close::before {
|
|
54
54
|
display: none;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.#{$prefix}--search .#{$prefix}--search-close {
|
|
57
|
+
.#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-close {
|
|
58
58
|
border-right: 2px solid transparent;
|
|
59
59
|
outline: none;
|
|
60
|
+
|
|
61
|
+
&:focus {
|
|
62
|
+
@include focus-outline('outline');
|
|
63
|
+
}
|
|
60
64
|
}
|
|
61
65
|
|
|
62
|
-
.#{$prefix}--
|
|
66
|
+
.#{$prefix}--contained-list
|
|
67
|
+
.#{$prefix}--search
|
|
63
68
|
.#{$prefix}--search-input
|
|
64
69
|
~ .#{$prefix}--search-close:hover {
|
|
65
70
|
border-bottom: 1px solid transparent;
|
|
66
71
|
}
|
|
67
72
|
|
|
68
|
-
.#{$prefix}--
|
|
73
|
+
.#{$prefix}--contained-list
|
|
74
|
+
.#{$prefix}--search
|
|
69
75
|
.#{$prefix}--search-input:focus
|
|
70
76
|
~ .#{$prefix}--search-close:hover {
|
|
71
77
|
border: 2px solid $focus;
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
//-----------------------------
|
|
11
11
|
|
|
12
12
|
@use '../../config' as *;
|
|
13
|
+
@use '../../colors' as *;
|
|
13
14
|
@use '../../motion' as *;
|
|
14
15
|
@use '../../spacing' as *;
|
|
15
16
|
@use '../../theme' as *;
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
/// @group slider
|
|
29
30
|
@mixin slider {
|
|
30
31
|
.#{$prefix}--slider-container {
|
|
32
|
+
position: relative;
|
|
31
33
|
display: flex;
|
|
32
34
|
align-items: center;
|
|
33
35
|
user-select: none;
|
|
@@ -126,7 +128,6 @@
|
|
|
126
128
|
width: rem(64px);
|
|
127
129
|
height: rem(40px);
|
|
128
130
|
-moz-appearance: textfield;
|
|
129
|
-
text-align: center;
|
|
130
131
|
|
|
131
132
|
&::-webkit-outer-spin-button,
|
|
132
133
|
&::-webkit-inner-spin-button {
|
|
@@ -138,14 +139,46 @@
|
|
|
138
139
|
display: none;
|
|
139
140
|
}
|
|
140
141
|
|
|
141
|
-
.#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid {
|
|
142
|
-
padding-right: 1rem;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
142
|
.#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
|
|
146
143
|
background-color: $interactive;
|
|
147
144
|
}
|
|
148
145
|
|
|
146
|
+
// Invalid & warn state
|
|
147
|
+
.#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid,
|
|
148
|
+
.#{$prefix}--slider-text-input--warn {
|
|
149
|
+
width: 6rem;
|
|
150
|
+
padding-right: $spacing-09;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.#{$prefix}--slider__invalid-icon {
|
|
154
|
+
position: absolute;
|
|
155
|
+
// top/transform used to center invalid icon in IE11
|
|
156
|
+
top: 50%;
|
|
157
|
+
right: $spacing-05;
|
|
158
|
+
fill: $support-error;
|
|
159
|
+
transform: translateY(-50%);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.#{$prefix}--slider__validation-msg.#{$prefix}--form-requirement {
|
|
163
|
+
display: block;
|
|
164
|
+
overflow: visible;
|
|
165
|
+
max-height: 100%;
|
|
166
|
+
margin-top: 0;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.#{$prefix}--slider__validation-msg--invalid {
|
|
170
|
+
color: $text-error;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.#{$prefix}--slider__invalid-icon.#{$prefix}--slider__invalid-icon--warning {
|
|
174
|
+
fill: $support-warning;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.#{$prefix}--slider__invalid-icon--warning path:first-of-type {
|
|
178
|
+
fill: $black-100;
|
|
179
|
+
opacity: 1;
|
|
180
|
+
}
|
|
181
|
+
|
|
149
182
|
// Disabled state
|
|
150
183
|
.#{$prefix}--label--disabled
|
|
151
184
|
~ .#{$prefix}--slider-container
|
|
@@ -186,11 +186,15 @@
|
|
|
186
186
|
white-space: nowrap;
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
+
.#{$prefix}--structured-list-input + .#{$prefix}--structured-list-td {
|
|
190
|
+
text-align: right;
|
|
191
|
+
}
|
|
192
|
+
|
|
189
193
|
.#{$prefix}--structured-list-svg {
|
|
190
194
|
display: inline-block;
|
|
191
195
|
fill: transparent;
|
|
192
196
|
transition: all motion.$duration-fast-02 motion.motion(standard, productive);
|
|
193
|
-
vertical-align:
|
|
197
|
+
vertical-align: top;
|
|
194
198
|
}
|
|
195
199
|
|
|
196
200
|
.#{$prefix}--structured-list-input:checked
|