@carbon/styles 1.112.0 → 1.113.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 +4714 -3240
- package/css/styles.min.css +1 -1
- package/package.json +10 -10
- package/scss/components/__tests__/button-test.js +1 -0
- package/scss/components/__tests__/pagination-test.js +42 -1
- package/scss/components/__tests__/ui-shell-test.js +58 -1
- package/scss/components/_index.scss +5 -0
- package/scss/components/action-set/_action-set.scss +130 -0
- package/scss/components/action-set/_index.scss +11 -0
- package/scss/components/button/_button.scss +3 -3
- package/scss/components/button/_vars.scss +10 -0
- package/scss/components/card/_card.scss +449 -0
- package/scss/components/card/_index.scss +11 -0
- package/scss/components/date-picker/_date-picker-next.scss +421 -0
- package/scss/components/date-picker/_index.scss +3 -0
- package/scss/components/modal/_modal.scss +2 -18
- package/scss/components/pagination/_pagination.scss +29 -18
- package/scss/components/pagination/_unstable_pagination.scss +20 -13
- package/scss/components/resizer/_index.scss +11 -0
- package/scss/components/resizer/_resizer.scss +60 -0
- package/scss/components/side-panel/_animations.scss +74 -0
- package/scss/components/side-panel/_index.scss +11 -0
- package/scss/components/side-panel/_side-panel-variables.scss +15 -0
- package/scss/components/side-panel/_side-panel.scss +642 -0
- package/scss/components/truncated-text/_index.scss +11 -0
- package/scss/components/truncated-text/_truncated-text.scss +54 -0
- package/scss/components/ui-shell/header/_header.scss +46 -21
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//
|
|
2
|
-
// Copyright IBM Corp. 2016,
|
|
2
|
+
// Copyright IBM Corp. 2016, 2026
|
|
3
3
|
//
|
|
4
4
|
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
// LICENSE file in the root directory of this source tree.
|
|
@@ -73,8 +73,10 @@
|
|
|
73
73
|
display: inline;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
@media (any-hover: hover) {
|
|
77
|
+
.#{$prefix}--header__action:hover {
|
|
78
|
+
background-color: $background-hover;
|
|
79
|
+
}
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
.#{$prefix}--header__action--active {
|
|
@@ -106,8 +108,6 @@
|
|
|
106
108
|
fill: $icon-secondary;
|
|
107
109
|
}
|
|
108
110
|
|
|
109
|
-
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--header__action:hover
|
|
110
|
-
svg,
|
|
111
111
|
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--header__action:active
|
|
112
112
|
svg,
|
|
113
113
|
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--header__action--active
|
|
@@ -115,13 +115,22 @@
|
|
|
115
115
|
fill: $icon-primary;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
@media (any-hover: hover) {
|
|
119
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--header__action:hover
|
|
120
|
+
svg {
|
|
121
|
+
fill: $icon-primary;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
118
125
|
.#{$prefix}--header__menu-trigger > svg {
|
|
119
126
|
fill: $icon-primary;
|
|
120
127
|
}
|
|
121
128
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
129
|
+
@media (any-hover: hover) {
|
|
130
|
+
.#{$prefix}--header__menu-trigger:hover > svg {
|
|
131
|
+
fill: $icon-primary;
|
|
132
|
+
// TODO: ask design if this color changes on hover, missing spec for it
|
|
133
|
+
}
|
|
125
134
|
}
|
|
126
135
|
|
|
127
136
|
.#{$prefix}--header__menu-toggle {
|
|
@@ -168,11 +177,16 @@
|
|
|
168
177
|
font-weight: 400;
|
|
169
178
|
}
|
|
170
179
|
|
|
171
|
-
a.#{$prefix}--header__name
|
|
172
|
-
a.#{$prefix}--header__name:hover {
|
|
180
|
+
a.#{$prefix}--header__name {
|
|
173
181
|
color: $text-primary;
|
|
174
182
|
}
|
|
175
183
|
|
|
184
|
+
@media (any-hover: hover) {
|
|
185
|
+
a.#{$prefix}--header__name:hover {
|
|
186
|
+
color: $text-primary;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
176
190
|
.#{$prefix}--header__menu-toggle:not(.#{$prefix}--header__menu-toggle__hidden)
|
|
177
191
|
~ .#{$prefix}--header__name {
|
|
178
192
|
padding-inline-start: convert.to-rem(8px);
|
|
@@ -240,9 +254,11 @@
|
|
|
240
254
|
user-select: none;
|
|
241
255
|
}
|
|
242
256
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
257
|
+
@media (any-hover: hover) {
|
|
258
|
+
a.#{$prefix}--header__menu-item:hover {
|
|
259
|
+
background-color: $background-hover;
|
|
260
|
+
color: $text-primary;
|
|
261
|
+
}
|
|
246
262
|
}
|
|
247
263
|
|
|
248
264
|
.#{$prefix}--header__action:active,
|
|
@@ -256,11 +272,16 @@
|
|
|
256
272
|
outline: none;
|
|
257
273
|
}
|
|
258
274
|
|
|
259
|
-
a.#{$prefix}--header__menu-item:hover > svg,
|
|
260
275
|
a.#{$prefix}--header__menu-item:active > svg {
|
|
261
276
|
fill: $icon-primary;
|
|
262
277
|
}
|
|
263
278
|
|
|
279
|
+
@media (any-hover: hover) {
|
|
280
|
+
a.#{$prefix}--header__menu-item:hover > svg {
|
|
281
|
+
fill: $icon-primary;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
264
285
|
// Styles for selected state
|
|
265
286
|
|
|
266
287
|
a.#{$prefix}--header__menu-item[aria-current='page'],
|
|
@@ -358,11 +379,13 @@
|
|
|
358
379
|
background-color: $layer;
|
|
359
380
|
}
|
|
360
381
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
382
|
+
@media (any-hover: hover) {
|
|
383
|
+
.#{$prefix}--header__menu-title[aria-expanded='true']
|
|
384
|
+
+ .#{$prefix}--header__menu
|
|
385
|
+
.#{$prefix}--header__menu-item:hover {
|
|
386
|
+
background-color: $layer-hover;
|
|
387
|
+
color: $text-primary;
|
|
388
|
+
}
|
|
366
389
|
}
|
|
367
390
|
|
|
368
391
|
.#{$prefix}--header__menu-title[aria-expanded='true']
|
|
@@ -378,8 +401,10 @@
|
|
|
378
401
|
// used for both desktop and mobile
|
|
379
402
|
background-color: $layer-selected;
|
|
380
403
|
|
|
381
|
-
|
|
382
|
-
|
|
404
|
+
@media (any-hover: hover) {
|
|
405
|
+
&:hover {
|
|
406
|
+
background-color: $layer-selected-hover;
|
|
407
|
+
}
|
|
383
408
|
}
|
|
384
409
|
}
|
|
385
410
|
|