@carbon/styles 1.92.0 → 1.93.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 +307 -31
- package/css/styles.min.css +1 -1
- package/package.json +3 -3
- package/scss/_feature-flags.scss +1 -0
- package/scss/components/modal/_modal.scss +5 -0
- package/scss/components/pagination/_pagination.scss +15 -4
- package/scss/components/pagination/_unstable_pagination.scss +6 -2
- package/scss/components/popover/_popover.scss +501 -35
- package/scss/components/tabs/_tabs.scss +0 -6
- package/scss/components/tile/_tile.scss +22 -7
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.93.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@carbon/colors": "^11.42.0",
|
|
44
|
-
"@carbon/feature-flags": "^0.
|
|
44
|
+
"@carbon/feature-flags": "^0.32.0",
|
|
45
45
|
"@carbon/grid": "^11.45.0",
|
|
46
46
|
"@carbon/layout": "^11.43.0",
|
|
47
47
|
"@carbon/motion": "^11.37.0",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"scss/**/*.css",
|
|
76
76
|
"css/**/*.css"
|
|
77
77
|
],
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "44f7fd230585f66d32c839d1c11d2992d5929294"
|
|
79
79
|
}
|
package/scss/_feature-flags.scss
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
'enable-css-grid': true,
|
|
12
12
|
'enable-v11-release': true,
|
|
13
13
|
'enable-experimental-tile-contrast': false,
|
|
14
|
+
'enable-tile-contrast': false,
|
|
14
15
|
'enable-v12-tile-radio-icons': false,
|
|
15
16
|
'enable-v12-structured-list-visible-icons': false,
|
|
16
17
|
'enable-dialog-element': false,
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
/// @group modal
|
|
27
27
|
@mixin modal(
|
|
28
28
|
$enable-experimental-focus-wrap-without-sentinels: false,
|
|
29
|
+
$enable-focus-wrap-without-sentinels: false,
|
|
29
30
|
$enable-dialog-element: false,
|
|
30
31
|
$enable-presence: false
|
|
31
32
|
) {
|
|
@@ -35,6 +36,8 @@
|
|
|
35
36
|
@if not(
|
|
36
37
|
enabled('enable-experimental-focus-wrap-without-sentinels') or
|
|
37
38
|
$enable-experimental-focus-wrap-without-sentinels or
|
|
39
|
+
enabled('enable-focus-wrap-without-sentinels') or
|
|
40
|
+
$enable-focus-wrap-without-sentinels or
|
|
38
41
|
enabled('enable-dialog-element') or
|
|
39
42
|
$enable-dialog-element
|
|
40
43
|
)
|
|
@@ -70,6 +73,8 @@
|
|
|
70
73
|
@if not(
|
|
71
74
|
enabled('enable-experimental-focus-wrap-without-sentinels') or
|
|
72
75
|
$enable-experimental-focus-wrap-without-sentinels or
|
|
76
|
+
enabled('enable-focus-wrap-without-sentinels') or
|
|
77
|
+
$enable-focus-wrap-without-sentinels or
|
|
73
78
|
enabled('enable-dialog-element') or
|
|
74
79
|
$enable-dialog-element
|
|
75
80
|
)
|
|
@@ -36,11 +36,14 @@
|
|
|
36
36
|
justify-content: space-between;
|
|
37
37
|
background-color: $layer;
|
|
38
38
|
border-block-start: 1px solid $border-subtle;
|
|
39
|
+
container-name: pagination;
|
|
40
|
+
container-type: inline-size;
|
|
39
41
|
inline-size: calc(100% - 1px);
|
|
40
42
|
min-block-size: convert.to-rem(40px);
|
|
41
43
|
overflow-x: auto;
|
|
42
44
|
|
|
43
|
-
|
|
45
|
+
// 42rem = 'md' breakpoint
|
|
46
|
+
@container pagination (min-width: 42rem) {
|
|
44
47
|
overflow: initial;
|
|
45
48
|
|
|
46
49
|
.#{$prefix}--pagination__control-buttons {
|
|
@@ -49,7 +52,7 @@
|
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
// mobile friendly pagination
|
|
52
|
-
@
|
|
55
|
+
@container pagination (max-width: 42rem) {
|
|
53
56
|
.#{$prefix}--pagination__left > *,
|
|
54
57
|
.#{$prefix}--pagination__right > * {
|
|
55
58
|
display: none;
|
|
@@ -92,6 +95,13 @@
|
|
|
92
95
|
line-height: convert.to-rem(40px);
|
|
93
96
|
|
|
94
97
|
min-inline-size: auto;
|
|
98
|
+
|
|
99
|
+
// Firefox-specific fix for three-digit numbers
|
|
100
|
+
// stylelint-disable-next-line at-rule-no-vendor-prefix
|
|
101
|
+
@-moz-document url-prefix() {
|
|
102
|
+
padding-inline-end: $spacing-05;
|
|
103
|
+
text-overflow: clip;
|
|
104
|
+
}
|
|
95
105
|
}
|
|
96
106
|
|
|
97
107
|
// Extra specificity is needed to preserve padding
|
|
@@ -184,13 +194,14 @@
|
|
|
184
194
|
.#{$prefix}--pagination__left {
|
|
185
195
|
padding: 0 $spacing-05 0 0;
|
|
186
196
|
|
|
187
|
-
|
|
197
|
+
// 42rem = 'md' breakpoint width
|
|
198
|
+
@container pagination (min-width: 42rem) {
|
|
188
199
|
padding: 0 $spacing-05;
|
|
189
200
|
}
|
|
190
201
|
}
|
|
191
202
|
|
|
192
203
|
.#{$prefix}--pagination__text {
|
|
193
|
-
@
|
|
204
|
+
@container pagination (min-width: 42rem) {
|
|
194
205
|
display: inline-block;
|
|
195
206
|
}
|
|
196
207
|
}
|
|
@@ -30,12 +30,15 @@
|
|
|
30
30
|
background-color: $layer;
|
|
31
31
|
border-block-end: 1px solid transparent;
|
|
32
32
|
border-block-start: 1px solid $border-subtle;
|
|
33
|
+
container-name: pagination;
|
|
34
|
+
container-type: inline-size;
|
|
33
35
|
inline-size: 100%;
|
|
34
36
|
min-block-size: convert.to-rem(40px);
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.#{$prefix}--unstable-pagination__text {
|
|
38
|
-
|
|
40
|
+
// 42rem = 'md' breakpoint width
|
|
41
|
+
@container pagination (min-width: 42rem) {
|
|
39
42
|
display: inline-block;
|
|
40
43
|
}
|
|
41
44
|
|
|
@@ -160,7 +163,8 @@
|
|
|
160
163
|
inset-block-start: 50%;
|
|
161
164
|
transform: translateY(-50%);
|
|
162
165
|
|
|
163
|
-
|
|
166
|
+
// 42rem = 'md' breakpoint width
|
|
167
|
+
@container pagination (min-width: 42rem) {
|
|
164
168
|
inset-inline-end: $spacing-05;
|
|
165
169
|
}
|
|
166
170
|
}
|