@carbon/styles 1.49.0 → 1.50.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 +47 -3
- package/css/styles.min.css +1 -1
- package/package.json +2 -2
- package/scss/components/combo-button/_combo-button.scss +26 -1
- package/scss/components/data-table/expandable/_data-table-expandable.scss +2 -0
- package/scss/components/file-uploader/_file-uploader.scss +1 -0
- package/scss/components/menu-button/_menu-button.scss +16 -0
- package/scss/components/overflow-menu/_overflow-menu.scss +11 -0
- package/scss/utilities/_box-shadow.scss +4 -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.50.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"scss/**/*.css",
|
|
66
66
|
"css/**/*.css"
|
|
67
67
|
],
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "fbec0e13b29a1c9b19ed22a1ae9b6f87107ba920"
|
|
69
69
|
}
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
@use '../../config' as *;
|
|
11
11
|
@use '../../motion' as *;
|
|
12
12
|
@use '../../utilities/convert';
|
|
13
|
+
@use '../../utilities/custom-property';
|
|
13
14
|
|
|
14
15
|
/// Combo Button styles
|
|
15
16
|
/// @access public
|
|
@@ -29,12 +30,21 @@
|
|
|
29
30
|
@each $size, $trigger in $triggerSizes {
|
|
30
31
|
.#{$prefix}--combo-button__container--#{$size}
|
|
31
32
|
.#{$prefix}--combo-button__primary-action {
|
|
32
|
-
min-inline-size:
|
|
33
|
+
min-inline-size: 10rem - convert.to-rem(1px) - $trigger;
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
.#{$prefix}--combo-button__primary-action .#{$prefix}--btn {
|
|
37
38
|
inline-size: 100%;
|
|
39
|
+
max-inline-size: convert.to-rem(239px);
|
|
40
|
+
min-inline-size: convert.to-rem(111px);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.#{$prefix}--combo-button__primary-action button {
|
|
44
|
+
display: block;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
text-overflow: ellipsis;
|
|
47
|
+
white-space: nowrap;
|
|
38
48
|
}
|
|
39
49
|
|
|
40
50
|
.#{$prefix}--combo-button__trigger svg {
|
|
@@ -46,4 +56,19 @@
|
|
|
46
56
|
svg {
|
|
47
57
|
transform: rotate(180deg);
|
|
48
58
|
}
|
|
59
|
+
|
|
60
|
+
// Menu alignment classes
|
|
61
|
+
$popover-offset: custom-property.get-var('popover-offset', 3rem);
|
|
62
|
+
|
|
63
|
+
.#{$prefix}--combo-button__top {
|
|
64
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.#{$prefix}--combo-button__top-start {
|
|
68
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.#{$prefix}--combo-button__top-end {
|
|
72
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
73
|
+
}
|
|
49
74
|
}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
@use '../menu';
|
|
10
10
|
@use '../../config' as *;
|
|
11
11
|
@use '../../motion' as *;
|
|
12
|
+
@use '../../utilities/custom-property';
|
|
12
13
|
|
|
13
14
|
/// Menu Button styles
|
|
14
15
|
/// @access public
|
|
@@ -29,4 +30,19 @@
|
|
|
29
30
|
.#{$prefix}--menu-button__trigger--open svg {
|
|
30
31
|
transform: rotate(180deg);
|
|
31
32
|
}
|
|
33
|
+
|
|
34
|
+
// Menu alignment classes
|
|
35
|
+
$popover-offset: custom-property.get-var('popover-offset', 3rem);
|
|
36
|
+
|
|
37
|
+
.#{$prefix}--menu-button__top {
|
|
38
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.#{$prefix}--menu-button__top-start {
|
|
42
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.#{$prefix}--menu-button__top-end {
|
|
46
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
47
|
+
}
|
|
32
48
|
}
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
@use '../../utilities/high-contrast-mode' as *;
|
|
21
21
|
@use '../../utilities/convert';
|
|
22
22
|
@use '../../utilities/z-index' as *;
|
|
23
|
+
@use '../../utilities/custom-property';
|
|
23
24
|
|
|
24
25
|
/// Overflow menu styles
|
|
25
26
|
/// @access public
|
|
@@ -364,4 +365,14 @@
|
|
|
364
365
|
@include high-contrast-mode('icon-fill');
|
|
365
366
|
}
|
|
366
367
|
/*stylelint-enable */
|
|
368
|
+
|
|
369
|
+
$popover-offset: custom-property.get-var('popover-offset', 2.5rem);
|
|
370
|
+
|
|
371
|
+
.#{$prefix}--overflow-menu__top-start {
|
|
372
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.#{$prefix}--overflow-menu__top-end {
|
|
376
|
+
transform: translate(0, calc(-100% - $popover-offset));
|
|
377
|
+
}
|
|
367
378
|
}
|