Merge branch 'staging' into topbar-styling

styles/atat.scss

@@ -39,6 +39,7 @@
 @import "components/sticky_cta.scss";
 @import "components/error_page.scss";
 @import "components/member_form.scss";
+@import "components/toggle_menu.scss";
 
 @import "sections/login";
 @import "sections/home";

styles/components/_portfolio_layout.scss

@@ -130,10 +130,6 @@
       &--th {
         width: 50%;
       }
-
-      &--td {
-        position: relative;
-      }
     }
 
     .row {
@@ -154,55 +150,6 @@
         margin-right: $gap * 6;
       }
     }
-
-    .app-member-menu {
-      position: absolute;
-      top: $gap;
-      right: $gap * 2;
-
-      .accordion-table__item__toggler {
-        padding: $gap / 3;
-        border: 1px solid $color-gray-lighter;
-        border-radius: 3px;
-        cursor: pointer;
-
-        &:hover,
-        &--active {
-          background-color: $color-aqua-lightest;
-        }
-
-        .icon {
-          margin: $gap / 2;
-        }
-      }
-
-      &__toggle {
-        position: absolute;
-        right: 0;
-        top: 30px;
-        background-color: $color-white;
-        border: 1px solid $color-gray-light;
-        z-index: 1;
-        margin-top: 0;
-
-        a {
-          display: block;
-          padding: $gap;
-          border-bottom: 1px solid $color-gray-lighter;
-          text-decoration: none;
-          color: $color-black;
-          cursor: pointer;
-
-          &:last-child {
-            border-bottom: 0;
-          }
-
-          &:hover {
-            background-color: $color-aqua-lightest;
-          }
-        }
-      }
-    }
   }
 
   #add-new-env {

styles/components/_toggle_menu.scss

@@ -0,0 +1,58 @@
+.toggle-menu {
+  position: absolute;
+  top: $gap;
+  right: $gap * 2;
+
+  &__container {
+    position: relative;
+  }
+
+  .accordion-table__item__toggler {
+    padding: $gap / 3;
+    border: 1px solid $color-gray-lighter;
+    border-radius: 3px;
+    cursor: pointer;
+
+    &:hover,
+    &--active {
+      background-color: $color-aqua-lightest;
+    }
+
+    .icon {
+      margin: $gap / 2;
+    }
+  }
+
+  &__toggle {
+    position: absolute;
+    right: 0;
+    top: 30px;
+    background-color: $color-white;
+    border: 1px solid $color-gray-light;
+    z-index: 1;
+    margin-top: 0;
+
+    a {
+      display: block;
+      padding: $gap;
+      border-bottom: 1px solid $color-gray-lighter;
+      text-decoration: none;
+      color: $color-black;
+      cursor: pointer;
+      white-space: nowrap;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      &:hover {
+        background-color: $color-aqua-lightest;
+      }
+
+      &.disabled {
+        color: $color-gray;
+        pointer-events: none;
+      }
+    }
+  }
+}