fix action menu for 4.6-5.3

elan-ev · Aug 5, 2023 · 91fbeda · 91fbeda
1 parent 5a47561
commit 91fbeda
Showing 1 changed file with 48 additions and 43 deletions.
diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
@@ -466,6 +466,10 @@ h2.oc--loadingbar, .oc--loadingbar-title {
  }
 }
 
+/* * * * * * * * * * * * * * */
+/* A C T I O N M E N U */
+/* * * * * * * * * * * * * * */
+
 .oc--actions-container {
  min-width: 2em;
  border-left: 1px solid $light-gray-color-40;
@@ -474,66 +478,67 @@ h2.oc--loadingbar, .oc--loadingbar-title {
  display: flex;
  justify-content: center;
  align-items: center;
+}
 
- .action-menu-icon {
-  background: transparent;
-  border: 0;
+.action-menu-icon {
+ background: transparent;
+ border: 0;
 
-  // Create animated icon that changes to close icon on activation/hover
-  span {
-  width: 5px;
-  height: 5px;
-  transform: translate(-2.5px);
-  transition: all .25s ease-in-out;
+ // Create animated icon that changes to close icon on activation/hover
+ span {
+ width: 5px;
+ height: 5px;
+ transform: translate(-2.5px);
+ transition: all .25s ease-in-out;
 
-  display: block;
-  position: absolute;
-  background: $base-color;
-  border-radius: 50%;
-  opacity: 1;
-  left: 50%;
+ display: block;
+ position: absolute;
+ background: $base-color;
+ border-radius: 50%;
+ opacity: 1;
+ left: 50%;
 
-  &:nth-child(1) {
-  top: 0px;
-  }
+ &:nth-child(1) {
+ top: 0px;
+ }
 
-  &:nth-child(2) {
-  top: 10px;
-  transform: translate(-2.5px, -2.5px);
-  }
+ &:nth-child(2) {
+ top: 10px;
+ transform: translate(-2.5px, -2.5px);
+ }
 
- &:nth-child(3) {
- bottom: 0;
- }
+ &:nth-child(3) {
+ bottom: 0;
  }
  }
+}
 
- .is-open {
-  z-index: 3;
-  .action-menu-icon {
-  span {
-  border-radius: 0;
+.action-menu-wrapper.is-open {
+ z-index: 3;
+ .action-menu-icon {
+ span {
+ border-radius: 0;
 
-  &:nth-child(1) {
-  left: 0;
-  transform: rotate(45deg) translate(calc(($action-menu-icon-size / 4) + 0.5px), calc(($action-menu-icon-size / 4) + 0.5px));
-  width: 100%;
-  }
+ &:nth-child(1) {
+ left: 0;
+ transform: rotate(45deg) translate(5.5px, 5.5px);
+ width: 100%;
+ }
 
-  &:nth-child(2) {
-  opacity: 0;
-  }
+ &:nth-child(2) {
+ opacity: 0;
+ }
 
- &:nth-child(3) {
- left: 0;
- transform: rotate(-45deg) translate(calc($action-menu-icon-size / 4), calc(-1 * ($action-menu-icon-size / 4)));
- width: 100%;
- }
+ &:nth-child(3) {
+ left: 0;
+ transform: rotate(-45deg) translate(5px, -5px);;
+ width: 100%;
  }
  }
  }
 }
 
+
 /* * * * * * * * * * * * * * * * * * * * * * * * * * */
 /* M U L T I P U R P O S E S E A R C H B A R */
 /* * * * * * * * * * * * * * * * * * * * * * * * * * */