@carbon/styles 1.73.0 → 1.74.0-rc.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 +42 -20
- package/css/styles.min.css +1 -1
- package/package.json +2 -2
- package/scss/components/combo-box/_combo-box.scss +15 -0
- package/scss/components/dropdown/_dropdown.scss +4 -0
- package/scss/components/fluid-combo-box/_fluid-combo-box.scss +0 -9
- package/scss/components/fluid-list-box/_fluid-list-box.scss +3 -13
- package/scss/components/fluid-multiselect/_fluid-multiselect.scss +0 -6
- package/scss/components/multiselect/_multiselect.scss +19 -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.74.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"scss/**/*.css",
|
|
76
76
|
"css/**/*.css"
|
|
77
77
|
],
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "9ec628547954e438748a23862612f20418e07373"
|
|
79
79
|
}
|
|
@@ -19,6 +19,21 @@
|
|
|
19
19
|
background-color: $field;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
.#{$prefix}--combo-box
|
|
23
|
+
.#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before {
|
|
24
|
+
position: absolute;
|
|
25
|
+
border: 2px solid $focus;
|
|
26
|
+
block-size: 100%;
|
|
27
|
+
border-block-start: 1px solid $focus;
|
|
28
|
+
content: '';
|
|
29
|
+
inline-size: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.#{$prefix}--combo-box
|
|
33
|
+
.#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted {
|
|
34
|
+
@include focus-outline('reset');
|
|
35
|
+
}
|
|
36
|
+
|
|
22
37
|
// V11: Possibly deprecate
|
|
23
38
|
.#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
|
|
24
39
|
background-color: $field-02;
|
|
@@ -37,15 +37,6 @@
|
|
|
37
37
|
white-space: nowrap;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
.#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
|
|
41
|
-
.#{$prefix}--combo-box.#{$prefix}--list-box--expanded:has(
|
|
42
|
-
input[aria-activedescendant]:not([aria-activedescendant=''])
|
|
43
|
-
)
|
|
44
|
-
.#{$prefix}--combo-box--input--focus.#{$prefix}--text-input {
|
|
45
|
-
outline-offset: convert.to-rem(-1px);
|
|
46
|
-
outline-width: convert.to-rem(1px);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
40
|
.#{$prefix}--list-box__wrapper--fluid
|
|
50
41
|
.#{$prefix}--combo-box
|
|
51
42
|
.#{$prefix}--list-box__selection {
|
|
@@ -115,27 +115,17 @@
|
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus:has(
|
|
118
|
-
.#{$prefix}--
|
|
119
|
-
) {
|
|
120
|
-
outline: none;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus:has(
|
|
124
|
-
.#{$prefix}--list-box--expanded
|
|
118
|
+
.#{$prefix}--list-box--expanded.#{$prefix}--multi-select--selected
|
|
125
119
|
) {
|
|
126
120
|
outline-width: convert.to-rem(1px);
|
|
127
121
|
}
|
|
128
122
|
|
|
129
|
-
.#{$prefix}--list-box__wrapper--fluid
|
|
123
|
+
.#{$prefix}--list-box__wrapper--fluid--focus
|
|
124
|
+
.#{$prefix}--list-box__field:focus {
|
|
130
125
|
outline: none;
|
|
131
126
|
outline-offset: 0;
|
|
132
127
|
}
|
|
133
128
|
|
|
134
|
-
.#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box--up)
|
|
135
|
-
.#{$prefix}--list-box__menu {
|
|
136
|
-
inset-block-start: calc(100%);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
129
|
// Invalid / Warning styles
|
|
140
130
|
.#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(
|
|
141
131
|
.#{$prefix}--list-box__wrapper--fluid--focus
|
|
@@ -32,12 +32,6 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
// Filterable
|
|
35
|
-
.#{$prefix}--list-box__wrapper--fluid
|
|
36
|
-
.#{$prefix}--multi-select--filterable--input-focused {
|
|
37
|
-
outline: none;
|
|
38
|
-
outline-offset: 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
35
|
.#{$prefix}--list-box__wrapper--fluid
|
|
42
36
|
.#{$prefix}--multi-select--filterable
|
|
43
37
|
.#{$prefix}--list-box__field
|
|
@@ -147,6 +147,25 @@
|
|
|
147
147
|
outline-width: convert.to-rem(1px);
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
.#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
|
|
151
|
+
.#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before,
|
|
152
|
+
.#{$prefix}--multi-select.#{$prefix}--multi-select--selected
|
|
153
|
+
.#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before {
|
|
154
|
+
position: absolute;
|
|
155
|
+
border: 2px solid $focus;
|
|
156
|
+
block-size: 100%;
|
|
157
|
+
border-block-start: 1px solid $focus;
|
|
158
|
+
content: '';
|
|
159
|
+
inline-size: 100%;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
|
|
163
|
+
.#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted,
|
|
164
|
+
.#{$prefix}--multi-select.#{$prefix}--multi-select--selected
|
|
165
|
+
.#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted {
|
|
166
|
+
@include focus-outline('reset');
|
|
167
|
+
}
|
|
168
|
+
|
|
150
169
|
.#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
|
|
151
170
|
.#{$prefix}--text-input,
|
|
152
171
|
.#{$prefix}--multi-select.#{$prefix}--multi-select--selected
|