@carbon/styles 1.29.0-rc.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 +35 -5
- package/css/styles.min.css +1 -1
- package/package.json +2 -2
- package/scss/components/slider/_slider.scss +38 -5
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.29.0
|
|
4
|
+
"version": "1.29.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"scss/**/*.css",
|
|
60
60
|
"css/**/*.css"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "044bb55aff8c9cddef1a7e42d2bfeac59a89c546"
|
|
63
63
|
}
|
|
@@ -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
|