@carbon/styles 1.77.1 → 1.78.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 +37 -15
- package/css/styles.min.css +1 -1
- package/package.json +7 -7
- package/scss/components/breadcrumb/_breadcrumb.scss +50 -18
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.78.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -41,12 +41,12 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@carbon/colors": "^11.30.0",
|
|
44
|
-
"@carbon/feature-flags": "^0.
|
|
45
|
-
"@carbon/grid": "^11.
|
|
46
|
-
"@carbon/layout": "^11.
|
|
44
|
+
"@carbon/feature-flags": "^0.25.0-rc.0",
|
|
45
|
+
"@carbon/grid": "^11.33.0-rc.0",
|
|
46
|
+
"@carbon/layout": "^11.31.0-rc.0",
|
|
47
47
|
"@carbon/motion": "^11.25.0",
|
|
48
|
-
"@carbon/themes": "^11.
|
|
49
|
-
"@carbon/type": "^11.
|
|
48
|
+
"@carbon/themes": "^11.49.0-rc.0",
|
|
49
|
+
"@carbon/type": "^11.37.0-rc.0",
|
|
50
50
|
"@ibm/plex": "6.0.0-next.6",
|
|
51
51
|
"@ibm/plex-mono": "0.0.3-alpha.0",
|
|
52
52
|
"@ibm/plex-sans": "0.0.3-alpha.0",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"scss/**/*.css",
|
|
76
76
|
"css/**/*.css"
|
|
77
77
|
],
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "0c142888f7e3aefd5a5b5b0b2c34c2552894bb56"
|
|
79
79
|
}
|
|
@@ -57,6 +57,11 @@
|
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
+
.#{$prefix}--breadcrumb-item .#{$prefix}--link:active,
|
|
61
|
+
.#{$prefix}--breadcrumb-item .#{$prefix}--link:visited:active:hover {
|
|
62
|
+
color: $text-primary;
|
|
63
|
+
}
|
|
64
|
+
|
|
60
65
|
.#{$prefix}--breadcrumb-item::after {
|
|
61
66
|
color: $text-primary;
|
|
62
67
|
content: '/';
|
|
@@ -96,20 +101,40 @@
|
|
|
96
101
|
.#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
|
|
97
102
|
position: relative;
|
|
98
103
|
block-size: convert.to-rem(18px);
|
|
99
|
-
inline-size:
|
|
104
|
+
inline-size: $spacing-05;
|
|
100
105
|
|
|
101
106
|
&:focus {
|
|
107
|
+
border: none;
|
|
108
|
+
box-shadow: none;
|
|
102
109
|
outline: 1px solid $focus;
|
|
110
|
+
outline-offset: 0;
|
|
103
111
|
}
|
|
104
112
|
|
|
105
113
|
&:hover {
|
|
106
114
|
background: transparent;
|
|
115
|
+
|
|
116
|
+
&::after {
|
|
117
|
+
background: $link-primary-hover;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&:active {
|
|
122
|
+
&::after {
|
|
123
|
+
background: $text-primary;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&:focus,
|
|
128
|
+
&:hover {
|
|
129
|
+
&::after {
|
|
130
|
+
opacity: 1;
|
|
131
|
+
}
|
|
107
132
|
}
|
|
108
133
|
|
|
109
134
|
// Used to mimic link underline
|
|
110
135
|
&::after {
|
|
111
136
|
position: absolute;
|
|
112
|
-
background: $
|
|
137
|
+
background: $focus;
|
|
113
138
|
block-size: 1px;
|
|
114
139
|
content: '';
|
|
115
140
|
inline-size: convert.to-rem(12px);
|
|
@@ -123,16 +148,6 @@
|
|
|
123
148
|
}
|
|
124
149
|
}
|
|
125
150
|
|
|
126
|
-
.#{$prefix}--breadcrumb--sm
|
|
127
|
-
.#{$prefix}--breadcrumb-item
|
|
128
|
-
.#{$prefix}--overflow-menu {
|
|
129
|
-
inline-size: $spacing-05;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after {
|
|
133
|
-
opacity: 1;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
151
|
.#{$prefix}--breadcrumb-item
|
|
137
152
|
.#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
|
|
138
153
|
background: transparent;
|
|
@@ -153,6 +168,12 @@
|
|
|
153
168
|
fill: $link-primary-hover;
|
|
154
169
|
}
|
|
155
170
|
|
|
171
|
+
.#{$prefix}--breadcrumb-item
|
|
172
|
+
.#{$prefix}--overflow-menu:active
|
|
173
|
+
.#{$prefix}--overflow-menu__icon {
|
|
174
|
+
fill: $text-primary;
|
|
175
|
+
}
|
|
176
|
+
|
|
156
177
|
.#{$prefix}--breadcrumb-menu-options:focus {
|
|
157
178
|
outline: none;
|
|
158
179
|
}
|
|
@@ -176,6 +197,23 @@
|
|
|
176
197
|
inset-inline-start: initial;
|
|
177
198
|
}
|
|
178
199
|
|
|
200
|
+
.#{$prefix}--breadcrumb
|
|
201
|
+
.#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
|
|
202
|
+
min-block-size: 1.125rem;
|
|
203
|
+
padding-inline: 0;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.#{$prefix}--breadcrumb--sm
|
|
207
|
+
.#{$prefix}--breadcrumb-item
|
|
208
|
+
.#{$prefix}--overflow-menu {
|
|
209
|
+
block-size: $spacing-05;
|
|
210
|
+
inline-size: $spacing-05;
|
|
211
|
+
min-block-size: $spacing-05;
|
|
212
|
+
.#{$prefix}--overflow-menu__icon {
|
|
213
|
+
transform: translateY(3px);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
179
217
|
// Skeleton State
|
|
180
218
|
.#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
|
|
181
219
|
@include skeleton;
|
|
@@ -183,10 +221,4 @@
|
|
|
183
221
|
block-size: 1rem;
|
|
184
222
|
inline-size: convert.to-rem(100px);
|
|
185
223
|
}
|
|
186
|
-
|
|
187
|
-
.#{$prefix}--breadcrumb
|
|
188
|
-
.#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
|
|
189
|
-
min-block-size: 1.125rem;
|
|
190
|
-
padding-inline: 0;
|
|
191
|
-
}
|
|
192
224
|
}
|