@carbon/styles 1.56.0 → 1.57.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 +34 -41
- package/css/styles.min.css +1 -1
- package/package.json +10 -10
- package/scss/components/dialog/_dialog.scss +155 -0
- package/scss/components/dialog/_index.scss +11 -0
- package/scss/components/modal/_modal.scss +1 -1
- package/scss/components/multiselect/_multiselect.scss +7 -1
- package/scss/components/pagination/_pagination.scss +5 -0
- package/scss/components/slider/_slider.scss +5 -2
- package/scss/components/structured-list/_structured-list.scss +7 -0
- package/telemetry.yml +3 -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.57.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -40,15 +40,15 @@
|
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@carbon/colors": "^11.
|
|
44
|
-
"@carbon/feature-flags": "^0.
|
|
45
|
-
"@carbon/grid": "^11.
|
|
46
|
-
"@carbon/layout": "^11.
|
|
47
|
-
"@carbon/motion": "^11.
|
|
48
|
-
"@carbon/themes": "^11.
|
|
49
|
-
"@carbon/type": "^11.
|
|
43
|
+
"@carbon/colors": "^11.22.0",
|
|
44
|
+
"@carbon/feature-flags": "^0.20.0",
|
|
45
|
+
"@carbon/grid": "^11.23.0",
|
|
46
|
+
"@carbon/layout": "^11.22.0",
|
|
47
|
+
"@carbon/motion": "^11.18.0",
|
|
48
|
+
"@carbon/themes": "^11.35.0",
|
|
49
|
+
"@carbon/type": "^11.27.0",
|
|
50
50
|
"@ibm/plex": "6.0.0-next.6",
|
|
51
|
-
"@ibm/telemetry-js": "^1.
|
|
51
|
+
"@ibm/telemetry-js": "^1.5.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@carbon/test-utils": "^10.30.0",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"scss/**/*.css",
|
|
69
69
|
"css/**/*.css"
|
|
70
70
|
],
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "e4922a44b2110b9dcb71da21ff6c0c9bb95610e0"
|
|
72
72
|
}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2014, 2024
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use 'sass:list';
|
|
9
|
+
@use '../button';
|
|
10
|
+
@use '../../config' as *;
|
|
11
|
+
@use '../../breakpoint' as *;
|
|
12
|
+
@use '../../motion' as *;
|
|
13
|
+
@use '../../spacing' as *;
|
|
14
|
+
@use '../../theme' as *;
|
|
15
|
+
@use '../../type' as *;
|
|
16
|
+
@use '../../utilities/ai-gradient' as *;
|
|
17
|
+
@use '../../utilities/convert';
|
|
18
|
+
@use '../../utilities/component-reset';
|
|
19
|
+
@use '../../utilities/focus-outline' as *;
|
|
20
|
+
@use '../../utilities/high-contrast-mode' as *;
|
|
21
|
+
@use '../../utilities/z-index' as *;
|
|
22
|
+
|
|
23
|
+
/// Dialog styles
|
|
24
|
+
/// @access public
|
|
25
|
+
/// @group dialog
|
|
26
|
+
@mixin dialog {
|
|
27
|
+
.#{$prefix}--dialog {
|
|
28
|
+
/* size */
|
|
29
|
+
padding: 0;
|
|
30
|
+
border: 1px solid $border-subtle-01;
|
|
31
|
+
background-color: $layer;
|
|
32
|
+
color: $text-primary;
|
|
33
|
+
inline-size: 48rem;
|
|
34
|
+
max-block-size: 50%;
|
|
35
|
+
max-inline-size: 100%;
|
|
36
|
+
opacity: 0;
|
|
37
|
+
transform: translateY(calc(-1 * #{$spacing-06}));
|
|
38
|
+
|
|
39
|
+
/** opening and closing is used in as allow-discrete is not currently supported wide enough
|
|
40
|
+
* https://caniuse.com/mdn-css_properties_display_is_transitionable
|
|
41
|
+
*/
|
|
42
|
+
transition: opacity $duration-moderate-02 motion(exit, expressive),
|
|
43
|
+
transform $duration-moderate-02 motion(exit, expressive),
|
|
44
|
+
overlay $duration-moderate-02 motion(exit, expressive) allow-discrete,
|
|
45
|
+
display $duration-moderate-02 motion(exit, expressive) allow-discrete;
|
|
46
|
+
|
|
47
|
+
@media (prefers-reduced-motion) {
|
|
48
|
+
transition: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@include breakpoint(md) {
|
|
52
|
+
max-inline-size: 84%;
|
|
53
|
+
}
|
|
54
|
+
@include breakpoint(lg) {
|
|
55
|
+
max-inline-size: 72%;
|
|
56
|
+
}
|
|
57
|
+
@include breakpoint(xlg) {
|
|
58
|
+
max-inline-size: 64%;
|
|
59
|
+
}
|
|
60
|
+
@include breakpoint(xlg) {
|
|
61
|
+
max-inline-size: 60%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&[open] {
|
|
65
|
+
opacity: 1;
|
|
66
|
+
transform: translateY(0);
|
|
67
|
+
|
|
68
|
+
transition: opacity $duration-moderate-02 motion(entrance, expressive),
|
|
69
|
+
transform $duration-moderate-02 motion(entrance, expressive),
|
|
70
|
+
overlay $duration-moderate-02 motion(entrance, expressive)
|
|
71
|
+
allow-discrete,
|
|
72
|
+
display $duration-moderate-02 motion(entrance, expressive)
|
|
73
|
+
allow-discrete;
|
|
74
|
+
|
|
75
|
+
@media (prefers-reduced-motion) {
|
|
76
|
+
transition: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/** starting style also not supported widely
|
|
81
|
+
* https://caniuse.com/mdn-css_at-rules_starting-style
|
|
82
|
+
*/
|
|
83
|
+
/* Before-open state */
|
|
84
|
+
/* Needs to be after the previous dialog[open] rule to take effect,
|
|
85
|
+
as the specificity is the same */
|
|
86
|
+
/* stylelint-disable-next-line scss/at-rule-no-unknown */
|
|
87
|
+
@starting-style {
|
|
88
|
+
&[open] {
|
|
89
|
+
opacity: 0;
|
|
90
|
+
transform: translateY(calc(-1 * #{$spacing-06}));
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.#{$prefix}--dialog__header {
|
|
96
|
+
position: relative;
|
|
97
|
+
overflow: visible;
|
|
98
|
+
inline-size: 100%;
|
|
99
|
+
min-block-size: $spacing-09;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.#{$prefix}--dialog__content {
|
|
103
|
+
padding: $spacing-05;
|
|
104
|
+
block-size: 100%;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.#{$prefix}--dialog--modal {
|
|
108
|
+
border: 1px solid transparent;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Transition the :backdrop when the dialog modal is promoted to the top layer */
|
|
112
|
+
.#{$prefix}--dialog::backdrop {
|
|
113
|
+
background-color: $overlay;
|
|
114
|
+
opacity: 0;
|
|
115
|
+
/* opening and closing is used in as allow-discrete is not currently supported wide enough
|
|
116
|
+
* https://caniuse.com/mdn-css_properties_display_is_transitionable
|
|
117
|
+
*/
|
|
118
|
+
transition: background-color $duration-moderate-02
|
|
119
|
+
motion(entrance, expressive),
|
|
120
|
+
opacity $duration-moderate-02 motion(entrance, expressive);
|
|
121
|
+
|
|
122
|
+
@media (prefers-reduced-motion) {
|
|
123
|
+
transition: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.#{$prefix}--dialog[open]::backdrop {
|
|
128
|
+
opacity: 1;
|
|
129
|
+
|
|
130
|
+
transition: background-color $duration-moderate-02 motion(exit, expressive),
|
|
131
|
+
opacity $duration-moderate-02 motion(exit, expressive);
|
|
132
|
+
|
|
133
|
+
@media (prefers-reduced-motion) {
|
|
134
|
+
transition: none;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/** starting style also not supported widely
|
|
139
|
+
* https://caniuse.com/mdn-css_at-rules_starting-style
|
|
140
|
+
*/
|
|
141
|
+
/* This starting-style rule cannot be nested inside the above selector
|
|
142
|
+
because the nesting selector cannot represent pseudo-elements. */
|
|
143
|
+
/* stylelint-disable-next-line scss/at-rule-no-unknown */
|
|
144
|
+
@starting-style {
|
|
145
|
+
.#{$prefix}--dialog[open]::backdrop {
|
|
146
|
+
opacity: 0;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.#{$prefix}--dialog__header-controls {
|
|
151
|
+
position: absolute;
|
|
152
|
+
inset-block-start: 0;
|
|
153
|
+
inset-inline-end: 0;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
@@ -89,7 +89,13 @@
|
|
|
89
89
|
|
|
90
90
|
.#{$prefix}--multi-select--filterable--input-focused,
|
|
91
91
|
.#{$prefix}--multi-select
|
|
92
|
-
.#{$prefix}--list-box__field--wrapper--input-focused
|
|
92
|
+
.#{$prefix}--list-box__field--wrapper--input-focused:has(
|
|
93
|
+
button[aria-expanded='false']
|
|
94
|
+
),
|
|
95
|
+
.#{$prefix}--multi-select.#{$prefix}--multi-select--selected
|
|
96
|
+
.#{$prefix}--list-box__field--wrapper--input-focused:has(
|
|
97
|
+
button[aria-expanded='true']
|
|
98
|
+
) {
|
|
93
99
|
@include focus-outline('outline');
|
|
94
100
|
}
|
|
95
101
|
|
|
@@ -174,6 +174,11 @@
|
|
|
174
174
|
margin-inline-start: 1rem;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
+
.#{$prefix}--pagination__right
|
|
178
|
+
.#{$prefix}--pagination__text.#{$prefix}--pagination__page-text.#{$prefix}--pagination__unknown-pages-text {
|
|
179
|
+
margin-inline-end: $spacing-05;
|
|
180
|
+
}
|
|
181
|
+
|
|
177
182
|
.#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
|
|
178
183
|
margin: 0;
|
|
179
184
|
}
|
|
@@ -121,7 +121,6 @@
|
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
> .#{$prefix}--popover > .#{$prefix}--popover-caret {
|
|
124
|
-
inset-inline-end: 0;
|
|
125
124
|
inset-inline-start: revert;
|
|
126
125
|
transform: translate(
|
|
127
126
|
50%,
|
|
@@ -159,7 +158,6 @@
|
|
|
159
158
|
}
|
|
160
159
|
|
|
161
160
|
> .#{$prefix}--popover > .#{$prefix}--popover-caret {
|
|
162
|
-
inset-inline-start: 0;
|
|
163
161
|
transform: translate(
|
|
164
162
|
-50%,
|
|
165
163
|
calc(-1 * custom-property.get-var('popover-offset', 0rem))
|
|
@@ -477,6 +475,11 @@
|
|
|
477
475
|
}
|
|
478
476
|
}
|
|
479
477
|
|
|
478
|
+
// With hidden input
|
|
479
|
+
.#{$prefix}--popover-container.#{$prefix}--slider__thumb-wrapper {
|
|
480
|
+
position: absolute;
|
|
481
|
+
}
|
|
482
|
+
|
|
480
483
|
// Windows HCM fix
|
|
481
484
|
/* stylelint-disable */
|
|
482
485
|
.#{$prefix}--slider__thumb {
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
@use '../../motion';
|
|
13
13
|
@use '../../theme' as *;
|
|
14
14
|
@use '../../type' as *;
|
|
15
|
+
@use '../../spacing' as *;
|
|
15
16
|
@use '../../utilities/focus-outline' as *;
|
|
16
17
|
@use '../../utilities/skeleton' as *;
|
|
17
18
|
@use '../../utilities/high-contrast-mode' as *;
|
|
@@ -186,6 +187,7 @@
|
|
|
186
187
|
|
|
187
188
|
.#{$prefix}--structured-list-svg {
|
|
188
189
|
display: inline-block;
|
|
190
|
+
margin-block-start: $spacing-01;
|
|
189
191
|
transition: all motion.$duration-fast-02 motion.motion(standard, productive);
|
|
190
192
|
vertical-align: top;
|
|
191
193
|
}
|
|
@@ -261,4 +263,9 @@
|
|
|
261
263
|
.#{$prefix}--structured-list-svg {
|
|
262
264
|
@include high-contrast-mode('icon-fill');
|
|
263
265
|
}
|
|
266
|
+
|
|
267
|
+
.#{$prefix}--structured-list__icon {
|
|
268
|
+
margin-block-start: $spacing-01;
|
|
269
|
+
vertical-align: top;
|
|
270
|
+
}
|
|
264
271
|
}
|