carbon-addons-iot-react 2.148.0-next.2 → 2.148.0-next.3
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/CHANGELOG.md +16 -0
- package/css/carbon-addons-iot-react.css +158 -4
- package/css/carbon-addons-iot-react.css.map +1 -1
- package/es/components/MenuButton/MenuButton.js +110 -8
- package/es/components/MenuButton/SingleMenuButton.js +54 -4
- package/es/components/MenuButton/SplitMenuButton.js +54 -4
- package/es/components/MenuButton/utils.js +80 -23
- package/lib/components/MenuButton/MenuButton.js +109 -7
- package/lib/components/MenuButton/SingleMenuButton.js +54 -4
- package/lib/components/MenuButton/SplitMenuButton.js +54 -4
- package/lib/components/MenuButton/utils.js +80 -22
- package/lib/css/carbon-addons-iot-react.css +158 -4
- package/lib/css/carbon-addons-iot-react.css.map +1 -1
- package/lib/scss/components/Button/_button.scss +6 -1
- package/lib/scss/components/MenuButton/_menu-button-shadow-blocker.scss +192 -0
- package/lib/scss/components/MenuButton/_menu-button.scss +25 -4
- package/package.json +2 -2
- package/scss/components/Button/_button.scss +6 -1
- package/scss/components/MenuButton/_menu-button-shadow-blocker.scss +192 -0
- package/scss/components/MenuButton/_menu-button.scss +25 -4
- package/umd/carbon-addons-iot-react.js +999 -749
|
@@ -73,8 +73,13 @@
|
|
|
73
73
|
right: initial;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
+
// The padding $spacing-05 was added globally to all ghost button sizes at some point,
|
|
77
|
+
// but it should probably only be applied to the default size so we have added exceptions here
|
|
78
|
+
// once we found they were needed in order not to break any existing functionality.
|
|
79
|
+
// For Carbon v.11 when the button sizes are adjusted we should take the oportunity to
|
|
80
|
+
// see if we can remove this global ghost padding.
|
|
76
81
|
.#{$iot-prefix}--btn.#{$prefix}--btn--ghost {
|
|
77
|
-
&:not(.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only) {
|
|
82
|
+
&:not(.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only):not(.#{$iot-prefix}--menu-button__trigger) {
|
|
78
83
|
padding-left: $spacing-05;
|
|
79
84
|
padding-right: $spacing-05;
|
|
80
85
|
}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
@import '../../globals/vars';
|
|
2
|
+
|
|
3
|
+
$size-sm: rem(32px);
|
|
4
|
+
$size-md: rem(40px);
|
|
5
|
+
$size-lg: rem(48px);
|
|
6
|
+
$shadow-blocker-height: rem(8px);
|
|
7
|
+
$shadow-blocker-border-width: rem(1px);
|
|
8
|
+
|
|
9
|
+
@mixin shadow-blocker-element {
|
|
10
|
+
position: absolute;
|
|
11
|
+
display: block;
|
|
12
|
+
height: calc(#{$shadow-blocker-height} - #{$shadow-blocker-border-width});
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// COVER THE SHADOW WITH A NEW DIV
|
|
16
|
+
// We add a new div on a higher z-index in order to cover the shadow of the menu.
|
|
17
|
+
.#{$iot-prefix}--menu-button--icon-only.#{$prefix}--menu--open {
|
|
18
|
+
.#{$iot-prefix}--menu__shadow-blocker {
|
|
19
|
+
@include shadow-blocker-element;
|
|
20
|
+
top: calc((-#{$shadow-blocker-height}) + #{$shadow-blocker-border-width});
|
|
21
|
+
left: 0;
|
|
22
|
+
width: $size-sm; // small is the default size
|
|
23
|
+
background-color: $ui-01;
|
|
24
|
+
border-bottom: $shadow-blocker-border-width solid $ui-01;
|
|
25
|
+
|
|
26
|
+
&--flip-y {
|
|
27
|
+
left: unset;
|
|
28
|
+
right: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&--flip-x {
|
|
32
|
+
left: unset;
|
|
33
|
+
top: var(--menu-height);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
html[dir='rtl'] & {
|
|
37
|
+
&:not(.#{$iot-prefix}--menu__shadow-blocker--opens-horizontally) {
|
|
38
|
+
left: 0;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--md {
|
|
43
|
+
width: $size-md;
|
|
44
|
+
}
|
|
45
|
+
&--lg {
|
|
46
|
+
width: $size-lg;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// The menu is attached to the side (instead of above or below)
|
|
50
|
+
&--opens-horizontally {
|
|
51
|
+
$width: calc(#{$shadow-blocker-height} - #{$shadow-blocker-border-width});
|
|
52
|
+
|
|
53
|
+
top: 0;
|
|
54
|
+
height: $size-sm; // small is the default size
|
|
55
|
+
width: $width;
|
|
56
|
+
left: calc((#{$width}) * (-1));
|
|
57
|
+
border-bottom: none;
|
|
58
|
+
border-right: $shadow-blocker-border-width solid $ui-01;
|
|
59
|
+
|
|
60
|
+
&.#{$iot-prefix}--menu__shadow-blocker--flip-y {
|
|
61
|
+
right: calc((#{$width}) * (-1));
|
|
62
|
+
left: unset;
|
|
63
|
+
border-right: none;
|
|
64
|
+
border-left: $shadow-blocker-border-width solid $ui-01;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&.#{$iot-prefix}--menu__shadow-blocker--md {
|
|
68
|
+
height: $size-md;
|
|
69
|
+
width: $width;
|
|
70
|
+
}
|
|
71
|
+
&.#{$iot-prefix}--menu__shadow-blocker--lg {
|
|
72
|
+
height: $size-lg;
|
|
73
|
+
width: $width;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// If the menu has focus it has a blue border and that one needs to
|
|
79
|
+
// be restored since it is covered by the shadow-blocker
|
|
80
|
+
&:focus .#{$iot-prefix}--menu__shadow-blocker {
|
|
81
|
+
border-bottom: $shadow-blocker-border-width solid $focus;
|
|
82
|
+
&--flip-x {
|
|
83
|
+
border-bottom-color: $ui-01;
|
|
84
|
+
border-top: $shadow-blocker-border-width solid $focus;
|
|
85
|
+
}
|
|
86
|
+
&--opens-horizontally {
|
|
87
|
+
border-bottom: none;
|
|
88
|
+
border-right: $shadow-blocker-border-width solid $focus;
|
|
89
|
+
&.#{$iot-prefix}--menu__shadow-blocker--flip-y {
|
|
90
|
+
border-right: none;
|
|
91
|
+
border-left: $shadow-blocker-border-width solid $focus;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// RESTORE THE BLUE FOCUS BORDER OF THE BUTTON
|
|
98
|
+
// This needed to make sure the blue focus border of the actual button is not covered by the element
|
|
99
|
+
// introduced to cover the shadow of the menu. This style has to be placed on the button since the menu
|
|
100
|
+
// does not know when the button has focus.
|
|
101
|
+
.#{$iot-prefix}--menu-button--open {
|
|
102
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active) {
|
|
103
|
+
@function calculate-width($size) {
|
|
104
|
+
@return calc(#{$size} - (2 * #{$shadow-blocker-border-width}));
|
|
105
|
+
}
|
|
106
|
+
@function calculate-top($size) {
|
|
107
|
+
@return calc(#{$size} - #{$shadow-blocker-height} - #{$shadow-blocker-border-width});
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&::after {
|
|
111
|
+
@include shadow-blocker-element;
|
|
112
|
+
width: calculate-width($size-lg); // large is the default
|
|
113
|
+
top: calculate-top($size-lg); // large is the default
|
|
114
|
+
content: '';
|
|
115
|
+
left: calc(#{$shadow-blocker-border-width} * (-1));
|
|
116
|
+
background-color: transparent;
|
|
117
|
+
z-index: 9001; // z-index of the menu is 9000
|
|
118
|
+
border: none;
|
|
119
|
+
border-bottom: $shadow-blocker-border-width solid $focus;
|
|
120
|
+
border-left: $shadow-blocker-border-width solid $focus;
|
|
121
|
+
border-right: $shadow-blocker-border-width solid $focus;
|
|
122
|
+
// We need to unset some properties added by other styling also using ::after
|
|
123
|
+
// e.g. the ones from tooltip__trigger
|
|
124
|
+
border-radius: 0;
|
|
125
|
+
transform: none;
|
|
126
|
+
box-shadow: none;
|
|
127
|
+
padding: 0;
|
|
128
|
+
}
|
|
129
|
+
&.#{$prefix}--btn--md::after {
|
|
130
|
+
width: calculate-width($size-md);
|
|
131
|
+
top: calculate-top($size-md);
|
|
132
|
+
}
|
|
133
|
+
&.#{$prefix}--btn--sm::after {
|
|
134
|
+
width: calculate-width($size-sm);
|
|
135
|
+
top: calculate-top($size-sm);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&.#{$iot-prefix}--menu-button--flip-x
|
|
140
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active)::after {
|
|
141
|
+
top: (-$shadow-blocker-border-width);
|
|
142
|
+
border-top: $shadow-blocker-border-width solid $focus;
|
|
143
|
+
border-bottom: 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// The menu is attached to the side (instead of above or below)
|
|
147
|
+
&.#{$iot-prefix}--menu-button--opens-horizontally {
|
|
148
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active) {
|
|
149
|
+
@function calculate-middle($size) {
|
|
150
|
+
@return calc(
|
|
151
|
+
((#{$size} - #{$shadow-blocker-height}) / 2) - #{$shadow-blocker-border-width}
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&::after {
|
|
156
|
+
transform: rotate(-90deg);
|
|
157
|
+
top: calculate-middle($size-lg);
|
|
158
|
+
left: calculate-middle($size-lg);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&.#{$prefix}--btn--md::after {
|
|
162
|
+
top: calculate-middle($size-md);
|
|
163
|
+
left: calculate-middle($size-md);
|
|
164
|
+
}
|
|
165
|
+
&.#{$prefix}--btn--sm::after {
|
|
166
|
+
top: calculate-middle($size-sm);
|
|
167
|
+
left: calculate-middle($size-sm);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&.#{$iot-prefix}--menu-button--flip-y {
|
|
172
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active) {
|
|
173
|
+
@function calculate-negative-middle($size) {
|
|
174
|
+
@return calc(
|
|
175
|
+
(((#{$size} - #{$shadow-blocker-height}) / 2) + #{$shadow-blocker-border-width}) * (-1)
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
&::after {
|
|
180
|
+
transform: rotate(90deg);
|
|
181
|
+
left: calculate-negative-middle($size-lg);
|
|
182
|
+
}
|
|
183
|
+
&.#{$prefix}--btn--md::after {
|
|
184
|
+
left: calculate-negative-middle($size-md);
|
|
185
|
+
}
|
|
186
|
+
&.#{$prefix}--btn--sm::after {
|
|
187
|
+
left: calculate-negative-middle($size-sm);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@import '~carbon-components/scss/components/menu/menu';
|
|
2
2
|
@import '../../globals/vars';
|
|
3
|
+
@import './menu-button-shadow-blocker';
|
|
3
4
|
|
|
4
5
|
.#{$iot-prefix}--menu-button {
|
|
5
6
|
.#{$iot-prefix}--menu-button__primary + .#{$iot-prefix}--menu-button__secondary {
|
|
@@ -12,7 +13,20 @@
|
|
|
12
13
|
|
|
13
14
|
&--open {
|
|
14
15
|
.#{$iot-prefix}--menu-button__trigger {
|
|
15
|
-
|
|
16
|
+
&.#{$prefix}--btn--primary {
|
|
17
|
+
background-color: $active-primary;
|
|
18
|
+
}
|
|
19
|
+
&.#{$prefix}--btn--secondary {
|
|
20
|
+
background-color: $active-secondary;
|
|
21
|
+
}
|
|
22
|
+
&.#{$prefix}--btn--tertiary {
|
|
23
|
+
background-color: $active-tertiary;
|
|
24
|
+
color: $text-04;
|
|
25
|
+
}
|
|
26
|
+
&.#{$prefix}--btn--ghost {
|
|
27
|
+
background-color: $active-ui; // There is no $active-ghost sass variable
|
|
28
|
+
color: $link-02;
|
|
29
|
+
}
|
|
16
30
|
}
|
|
17
31
|
|
|
18
32
|
.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only {
|
|
@@ -22,17 +36,24 @@
|
|
|
22
36
|
}
|
|
23
37
|
}
|
|
24
38
|
|
|
39
|
+
.#{$iot-prefix}--menu-button__menu {
|
|
40
|
+
padding: 0;
|
|
41
|
+
.#{$prefix}--menu-divider {
|
|
42
|
+
margin: 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
25
46
|
.#{$prefix}--menu.#{$prefix}--menu--open.#{$prefix}--menu--root {
|
|
26
47
|
opacity: var(--iot-menu-button-menu-opacity);
|
|
27
48
|
}
|
|
28
49
|
|
|
29
|
-
html[dir='rtl'] .#{$iot-prefix}--menu-
|
|
30
|
-
.#{$prefix}--
|
|
50
|
+
html[dir='rtl'] .#{$iot-prefix}--menu-button__menu {
|
|
51
|
+
.#{$prefix}--menu-option__icon {
|
|
31
52
|
margin-right: 0;
|
|
32
53
|
margin-left: $spacing-03;
|
|
33
54
|
}
|
|
34
55
|
|
|
35
|
-
.#{$prefix}--
|
|
56
|
+
.#{$prefix}--menu-option__info {
|
|
36
57
|
margin-left: 0;
|
|
37
58
|
margin-right: $spacing-05;
|
|
38
59
|
transform: rotate(180deg);
|
package/package.json
CHANGED
|
@@ -340,10 +340,10 @@
|
|
|
340
340
|
"whatwg-fetch": "^3.0.0"
|
|
341
341
|
},
|
|
342
342
|
"sideEffects": false,
|
|
343
|
-
"version": "2.148.0-next.
|
|
343
|
+
"version": "2.148.0-next.3",
|
|
344
344
|
"resolutions": {
|
|
345
345
|
"chokidar": "3.3.1",
|
|
346
346
|
"react-grid-layout": "1.2.2"
|
|
347
347
|
},
|
|
348
|
-
"gitHead": "
|
|
348
|
+
"gitHead": "a826994f381813331add8fe496fae6acd75eac9d"
|
|
349
349
|
}
|
|
@@ -73,8 +73,13 @@
|
|
|
73
73
|
right: initial;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
+
// The padding $spacing-05 was added globally to all ghost button sizes at some point,
|
|
77
|
+
// but it should probably only be applied to the default size so we have added exceptions here
|
|
78
|
+
// once we found they were needed in order not to break any existing functionality.
|
|
79
|
+
// For Carbon v.11 when the button sizes are adjusted we should take the oportunity to
|
|
80
|
+
// see if we can remove this global ghost padding.
|
|
76
81
|
.#{$iot-prefix}--btn.#{$prefix}--btn--ghost {
|
|
77
|
-
&:not(.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only) {
|
|
82
|
+
&:not(.#{$prefix}--btn--sm.#{$prefix}--btn--icon-only):not(.#{$iot-prefix}--menu-button__trigger) {
|
|
78
83
|
padding-left: $spacing-05;
|
|
79
84
|
padding-right: $spacing-05;
|
|
80
85
|
}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
@import '../../globals/vars';
|
|
2
|
+
|
|
3
|
+
$size-sm: rem(32px);
|
|
4
|
+
$size-md: rem(40px);
|
|
5
|
+
$size-lg: rem(48px);
|
|
6
|
+
$shadow-blocker-height: rem(8px);
|
|
7
|
+
$shadow-blocker-border-width: rem(1px);
|
|
8
|
+
|
|
9
|
+
@mixin shadow-blocker-element {
|
|
10
|
+
position: absolute;
|
|
11
|
+
display: block;
|
|
12
|
+
height: calc(#{$shadow-blocker-height} - #{$shadow-blocker-border-width});
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// COVER THE SHADOW WITH A NEW DIV
|
|
16
|
+
// We add a new div on a higher z-index in order to cover the shadow of the menu.
|
|
17
|
+
.#{$iot-prefix}--menu-button--icon-only.#{$prefix}--menu--open {
|
|
18
|
+
.#{$iot-prefix}--menu__shadow-blocker {
|
|
19
|
+
@include shadow-blocker-element;
|
|
20
|
+
top: calc((-#{$shadow-blocker-height}) + #{$shadow-blocker-border-width});
|
|
21
|
+
left: 0;
|
|
22
|
+
width: $size-sm; // small is the default size
|
|
23
|
+
background-color: $ui-01;
|
|
24
|
+
border-bottom: $shadow-blocker-border-width solid $ui-01;
|
|
25
|
+
|
|
26
|
+
&--flip-y {
|
|
27
|
+
left: unset;
|
|
28
|
+
right: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&--flip-x {
|
|
32
|
+
left: unset;
|
|
33
|
+
top: var(--menu-height);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
html[dir='rtl'] & {
|
|
37
|
+
&:not(.#{$iot-prefix}--menu__shadow-blocker--opens-horizontally) {
|
|
38
|
+
left: 0;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--md {
|
|
43
|
+
width: $size-md;
|
|
44
|
+
}
|
|
45
|
+
&--lg {
|
|
46
|
+
width: $size-lg;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// The menu is attached to the side (instead of above or below)
|
|
50
|
+
&--opens-horizontally {
|
|
51
|
+
$width: calc(#{$shadow-blocker-height} - #{$shadow-blocker-border-width});
|
|
52
|
+
|
|
53
|
+
top: 0;
|
|
54
|
+
height: $size-sm; // small is the default size
|
|
55
|
+
width: $width;
|
|
56
|
+
left: calc((#{$width}) * (-1));
|
|
57
|
+
border-bottom: none;
|
|
58
|
+
border-right: $shadow-blocker-border-width solid $ui-01;
|
|
59
|
+
|
|
60
|
+
&.#{$iot-prefix}--menu__shadow-blocker--flip-y {
|
|
61
|
+
right: calc((#{$width}) * (-1));
|
|
62
|
+
left: unset;
|
|
63
|
+
border-right: none;
|
|
64
|
+
border-left: $shadow-blocker-border-width solid $ui-01;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&.#{$iot-prefix}--menu__shadow-blocker--md {
|
|
68
|
+
height: $size-md;
|
|
69
|
+
width: $width;
|
|
70
|
+
}
|
|
71
|
+
&.#{$iot-prefix}--menu__shadow-blocker--lg {
|
|
72
|
+
height: $size-lg;
|
|
73
|
+
width: $width;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// If the menu has focus it has a blue border and that one needs to
|
|
79
|
+
// be restored since it is covered by the shadow-blocker
|
|
80
|
+
&:focus .#{$iot-prefix}--menu__shadow-blocker {
|
|
81
|
+
border-bottom: $shadow-blocker-border-width solid $focus;
|
|
82
|
+
&--flip-x {
|
|
83
|
+
border-bottom-color: $ui-01;
|
|
84
|
+
border-top: $shadow-blocker-border-width solid $focus;
|
|
85
|
+
}
|
|
86
|
+
&--opens-horizontally {
|
|
87
|
+
border-bottom: none;
|
|
88
|
+
border-right: $shadow-blocker-border-width solid $focus;
|
|
89
|
+
&.#{$iot-prefix}--menu__shadow-blocker--flip-y {
|
|
90
|
+
border-right: none;
|
|
91
|
+
border-left: $shadow-blocker-border-width solid $focus;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// RESTORE THE BLUE FOCUS BORDER OF THE BUTTON
|
|
98
|
+
// This needed to make sure the blue focus border of the actual button is not covered by the element
|
|
99
|
+
// introduced to cover the shadow of the menu. This style has to be placed on the button since the menu
|
|
100
|
+
// does not know when the button has focus.
|
|
101
|
+
.#{$iot-prefix}--menu-button--open {
|
|
102
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active) {
|
|
103
|
+
@function calculate-width($size) {
|
|
104
|
+
@return calc(#{$size} - (2 * #{$shadow-blocker-border-width}));
|
|
105
|
+
}
|
|
106
|
+
@function calculate-top($size) {
|
|
107
|
+
@return calc(#{$size} - #{$shadow-blocker-height} - #{$shadow-blocker-border-width});
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&::after {
|
|
111
|
+
@include shadow-blocker-element;
|
|
112
|
+
width: calculate-width($size-lg); // large is the default
|
|
113
|
+
top: calculate-top($size-lg); // large is the default
|
|
114
|
+
content: '';
|
|
115
|
+
left: calc(#{$shadow-blocker-border-width} * (-1));
|
|
116
|
+
background-color: transparent;
|
|
117
|
+
z-index: 9001; // z-index of the menu is 9000
|
|
118
|
+
border: none;
|
|
119
|
+
border-bottom: $shadow-blocker-border-width solid $focus;
|
|
120
|
+
border-left: $shadow-blocker-border-width solid $focus;
|
|
121
|
+
border-right: $shadow-blocker-border-width solid $focus;
|
|
122
|
+
// We need to unset some properties added by other styling also using ::after
|
|
123
|
+
// e.g. the ones from tooltip__trigger
|
|
124
|
+
border-radius: 0;
|
|
125
|
+
transform: none;
|
|
126
|
+
box-shadow: none;
|
|
127
|
+
padding: 0;
|
|
128
|
+
}
|
|
129
|
+
&.#{$prefix}--btn--md::after {
|
|
130
|
+
width: calculate-width($size-md);
|
|
131
|
+
top: calculate-top($size-md);
|
|
132
|
+
}
|
|
133
|
+
&.#{$prefix}--btn--sm::after {
|
|
134
|
+
width: calculate-width($size-sm);
|
|
135
|
+
top: calculate-top($size-sm);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&.#{$iot-prefix}--menu-button--flip-x
|
|
140
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active)::after {
|
|
141
|
+
top: (-$shadow-blocker-border-width);
|
|
142
|
+
border-top: $shadow-blocker-border-width solid $focus;
|
|
143
|
+
border-bottom: 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// The menu is attached to the side (instead of above or below)
|
|
147
|
+
&.#{$iot-prefix}--menu-button--opens-horizontally {
|
|
148
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active) {
|
|
149
|
+
@function calculate-middle($size) {
|
|
150
|
+
@return calc(
|
|
151
|
+
((#{$size} - #{$shadow-blocker-height}) / 2) - #{$shadow-blocker-border-width}
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&::after {
|
|
156
|
+
transform: rotate(-90deg);
|
|
157
|
+
top: calculate-middle($size-lg);
|
|
158
|
+
left: calculate-middle($size-lg);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&.#{$prefix}--btn--md::after {
|
|
162
|
+
top: calculate-middle($size-md);
|
|
163
|
+
left: calculate-middle($size-md);
|
|
164
|
+
}
|
|
165
|
+
&.#{$prefix}--btn--sm::after {
|
|
166
|
+
top: calculate-middle($size-sm);
|
|
167
|
+
left: calculate-middle($size-sm);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&.#{$iot-prefix}--menu-button--flip-y {
|
|
172
|
+
.#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus:not(:active) {
|
|
173
|
+
@function calculate-negative-middle($size) {
|
|
174
|
+
@return calc(
|
|
175
|
+
(((#{$size} - #{$shadow-blocker-height}) / 2) + #{$shadow-blocker-border-width}) * (-1)
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
&::after {
|
|
180
|
+
transform: rotate(90deg);
|
|
181
|
+
left: calculate-negative-middle($size-lg);
|
|
182
|
+
}
|
|
183
|
+
&.#{$prefix}--btn--md::after {
|
|
184
|
+
left: calculate-negative-middle($size-md);
|
|
185
|
+
}
|
|
186
|
+
&.#{$prefix}--btn--sm::after {
|
|
187
|
+
left: calculate-negative-middle($size-sm);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@import '~carbon-components/scss/components/menu/menu';
|
|
2
2
|
@import '../../globals/vars';
|
|
3
|
+
@import './menu-button-shadow-blocker';
|
|
3
4
|
|
|
4
5
|
.#{$iot-prefix}--menu-button {
|
|
5
6
|
.#{$iot-prefix}--menu-button__primary + .#{$iot-prefix}--menu-button__secondary {
|
|
@@ -12,7 +13,20 @@
|
|
|
12
13
|
|
|
13
14
|
&--open {
|
|
14
15
|
.#{$iot-prefix}--menu-button__trigger {
|
|
15
|
-
|
|
16
|
+
&.#{$prefix}--btn--primary {
|
|
17
|
+
background-color: $active-primary;
|
|
18
|
+
}
|
|
19
|
+
&.#{$prefix}--btn--secondary {
|
|
20
|
+
background-color: $active-secondary;
|
|
21
|
+
}
|
|
22
|
+
&.#{$prefix}--btn--tertiary {
|
|
23
|
+
background-color: $active-tertiary;
|
|
24
|
+
color: $text-04;
|
|
25
|
+
}
|
|
26
|
+
&.#{$prefix}--btn--ghost {
|
|
27
|
+
background-color: $active-ui; // There is no $active-ghost sass variable
|
|
28
|
+
color: $link-02;
|
|
29
|
+
}
|
|
16
30
|
}
|
|
17
31
|
|
|
18
32
|
.#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only {
|
|
@@ -22,17 +36,24 @@
|
|
|
22
36
|
}
|
|
23
37
|
}
|
|
24
38
|
|
|
39
|
+
.#{$iot-prefix}--menu-button__menu {
|
|
40
|
+
padding: 0;
|
|
41
|
+
.#{$prefix}--menu-divider {
|
|
42
|
+
margin: 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
25
46
|
.#{$prefix}--menu.#{$prefix}--menu--open.#{$prefix}--menu--root {
|
|
26
47
|
opacity: var(--iot-menu-button-menu-opacity);
|
|
27
48
|
}
|
|
28
49
|
|
|
29
|
-
html[dir='rtl'] .#{$iot-prefix}--menu-
|
|
30
|
-
.#{$prefix}--
|
|
50
|
+
html[dir='rtl'] .#{$iot-prefix}--menu-button__menu {
|
|
51
|
+
.#{$prefix}--menu-option__icon {
|
|
31
52
|
margin-right: 0;
|
|
32
53
|
margin-left: $spacing-03;
|
|
33
54
|
}
|
|
34
55
|
|
|
35
|
-
.#{$prefix}--
|
|
56
|
+
.#{$prefix}--menu-option__info {
|
|
36
57
|
margin-left: 0;
|
|
37
58
|
margin-right: $spacing-05;
|
|
38
59
|
transform: rotate(180deg);
|