carbon-addons-iot-react 2.148.0-next.2 → 2.148.0-next.3

package/lib/css/carbon-addons-iot-react.css

@@ -29551,7 +29551,7 @@ html[dir=rtl] .bx--list-box__label .iot--icon-dropdown__item {
   left: 1rem;
   right: initial;
 }
-[dir=rtl] .iot--btn.bx--btn--ghost:not(.bx--btn--sm.bx--btn--icon-only) {
+[dir=rtl] .iot--btn.bx--btn--ghost:not(.bx--btn--sm.bx--btn--icon-only):not(.iot--menu-button__trigger) {
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -33618,29 +33618,183 @@ html[dir=rtl] .iot--hierarchy-list-bulk-header--title {
   height: 3rem;
 }
 
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker {
+  position: absolute;
+  display: block;
+  height: calc(0.5rem - 0.0625rem);
+  top: calc((-0.5rem) + 0.0625rem);
+  left: 0;
+  width: 2rem;
+  background-color: #ffffff;
+  border-bottom: 0.0625rem solid #ffffff;
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--flip-y {
+  left: unset;
+  right: 0;
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--flip-x {
+  left: unset;
+  top: var(--menu-height);
+}
+html[dir=rtl] .iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker:not(.iot--menu__shadow-blocker--opens-horizontally) {
+  left: 0;
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--md {
+  width: 2.5rem;
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--lg {
+  width: 3rem;
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--opens-horizontally {
+  top: 0;
+  height: 2rem;
+  width: calc(0.5rem - 0.0625rem);
+  left: calc((calc(0.5rem - 0.0625rem)) * -1);
+  border-bottom: none;
+  border-right: 0.0625rem solid #ffffff;
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--opens-horizontally.iot--menu__shadow-blocker--flip-y {
+  right: calc((calc(0.5rem - 0.0625rem)) * -1);
+  left: unset;
+  border-right: none;
+  border-left: 0.0625rem solid #ffffff;
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--opens-horizontally.iot--menu__shadow-blocker--md {
+  height: 2.5rem;
+  width: calc(0.5rem - 0.0625rem);
+}
+.iot--menu-button--icon-only.bx--menu--open .iot--menu__shadow-blocker--opens-horizontally.iot--menu__shadow-blocker--lg {
+  height: 3rem;
+  width: calc(0.5rem - 0.0625rem);
+}
+.iot--menu-button--icon-only.bx--menu--open:focus .iot--menu__shadow-blocker {
+  border-bottom: 0.0625rem solid #0f62fe;
+}
+.iot--menu-button--icon-only.bx--menu--open:focus .iot--menu__shadow-blocker--flip-x {
+  border-bottom-color: #ffffff;
+  border-top: 0.0625rem solid #0f62fe;
+}
+.iot--menu-button--icon-only.bx--menu--open:focus .iot--menu__shadow-blocker--opens-horizontally {
+  border-bottom: none;
+  border-right: 0.0625rem solid #0f62fe;
+}
+.iot--menu-button--icon-only.bx--menu--open:focus .iot--menu__shadow-blocker--opens-horizontally.iot--menu__shadow-blocker--flip-y {
+  border-right: none;
+  border-left: 0.0625rem solid #0f62fe;
+}
+
+.iot--menu-button--open .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active)::after {
+  position: absolute;
+  display: block;
+  height: calc(0.5rem - 0.0625rem);
+  width: calc(3rem - (2 * 0.0625rem));
+  top: calc(3rem - 0.5rem - 0.0625rem);
+  content: "";
+  left: calc(0.0625rem * (-1));
+  background-color: transparent;
+  z-index: 9001;
+  border: none;
+  border-bottom: 0.0625rem solid #0f62fe;
+  border-left: 0.0625rem solid #0f62fe;
+  border-right: 0.0625rem solid #0f62fe;
+  border-radius: 0;
+  -webkit-transform: none;
+          transform: none;
+  box-shadow: none;
+  padding: 0;
+}
+.iot--menu-button--open .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active).bx--btn--md::after {
+  width: calc(2.5rem - (2 * 0.0625rem));
+  top: calc(2.5rem - 0.5rem - 0.0625rem);
+}
+.iot--menu-button--open .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active).bx--btn--sm::after {
+  width: calc(2rem - (2 * 0.0625rem));
+  top: calc(2rem - 0.5rem - 0.0625rem);
+}
+.iot--menu-button--open.iot--menu-button--flip-x .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active)::after {
+  top: -0.0625rem;
+  border-top: 0.0625rem solid #0f62fe;
+  border-bottom: 0;
+}
+.iot--menu-button--open.iot--menu-button--opens-horizontally .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active)::after {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  top: calc(
+          ((3rem - 0.5rem) / 2) - 0.0625rem
+        );
+  left: calc(
+          ((3rem - 0.5rem) / 2) - 0.0625rem
+        );
+}
+.iot--menu-button--open.iot--menu-button--opens-horizontally .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active).bx--btn--md::after {
+  top: calc(
+          ((2.5rem - 0.5rem) / 2) - 0.0625rem
+        );
+  left: calc(
+          ((2.5rem - 0.5rem) / 2) - 0.0625rem
+        );
+}
+.iot--menu-button--open.iot--menu-button--opens-horizontally .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active).bx--btn--sm::after {
+  top: calc(
+          ((2rem - 0.5rem) / 2) - 0.0625rem
+        );
+  left: calc(
+          ((2rem - 0.5rem) / 2) - 0.0625rem
+        );
+}
+.iot--menu-button--open.iot--menu-button--opens-horizontally.iot--menu-button--flip-y .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active)::after {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
+  left: calc((((3rem - 0.5rem) / 2) + 0.0625rem) * -1);
+}
+.iot--menu-button--open.iot--menu-button--opens-horizontally.iot--menu-button--flip-y .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active).bx--btn--md::after {
+  left: calc((((2.5rem - 0.5rem) / 2) + 0.0625rem) * -1);
+}
+.iot--menu-button--open.iot--menu-button--opens-horizontally.iot--menu-button--flip-y .bx--btn.bx--btn--icon-only.bx--btn--ghost:focus:not(:active).bx--btn--sm::after {
+  left: calc((((2rem - 0.5rem) / 2) + 0.0625rem) * -1);
+}
+
 .iot--menu-button .iot--menu-button__primary + .iot--menu-button__secondary {
   border-left: 1px solid #ffffff;
 }
 .iot--menu-button .bx--btn--ghost.bx--btn--icon-only {
   color: #161616;
 }
-.iot--menu-button--open .iot--menu-button__trigger {
+.iot--menu-button--open .iot--menu-button__trigger.bx--btn--primary {
+  background-color: #002d9c;
+}
+.iot--menu-button--open .iot--menu-button__trigger.bx--btn--secondary {
+  background-color: #6f6f6f;
+}
+.iot--menu-button--open .iot--menu-button__trigger.bx--btn--tertiary {
   background-color: #002d9c;
+  color: #ffffff;
+}
+.iot--menu-button--open .iot--menu-button__trigger.bx--btn--ghost {
+  background-color: #c6c6c6;
+  color: #0043ce;
 }
 .iot--menu-button--open .bx--btn--ghost.bx--btn--icon-only {
   background-color: #ffffff;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
+.iot--menu-button__menu {
+  padding: 0;
+}
+.iot--menu-button__menu .bx--menu-divider {
+  margin: 0;
+}
+
 .bx--menu.bx--menu--open.bx--menu--root {
   opacity: var(--iot-menu-button-menu-opacity);
 }
 
-html[dir=rtl] .iot--menu-button .bx--context-menu-option__icon {
+html[dir=rtl] .iot--menu-button__menu .bx--menu-option__icon {
   margin-right: 0;
   margin-left: 0.5rem;
 }
-html[dir=rtl] .iot--menu-button .bx--context-menu-option__info {
+html[dir=rtl] .iot--menu-button__menu .bx--menu-option__info {
   margin-left: 0;
   margin-right: 1rem;
   -webkit-transform: rotate(180deg);