Import old dropdowns temporarily

core/client/assets/sass/patterns/_shame.scss

@@ -188,4 +188,153 @@ main {
         }
     } // .floatingheader
 
-} // .scrolling
+} // .scrolling
+
+//
+// Old Dropdowns
+// --------------------------------------------------
+
+.dropdown {
+    @include icon-after($i-chevron-down, 8px) {
+        padding-left: 6px;
+        vertical-align: 0;
+    };
+
+    &.active {
+        color: $darkgrey;
+        @include icon-after($i-chevron-down, 8px);
+    }
+
+} // .dropdown
+
+
+ /* ==========================================================================
+   Dropdown Show & Hide
+   ---
+   Sadly !important is needed, to counteract the stringer selectors applying
+   a display property.
+   ========================================================================== */
+
+.ghost-popover {
+    display: none !important;
+}
+
+.ghost-popover.open {
+    display: block !important;
+}
+
+
+ /* ==========================================================================
+   Menu
+   ---
+   This is the base menu extend used for styles on interaction menus
+   Default: Pop menu, chiclet bottom center.
+   ========================================================================== */
+
+.menu {
+    display: inline-block;
+    position: absolute;
+    z-index: 960;
+    padding:6px 0;
+    border: none;
+    list-style: none;
+    color: $lightgrey;
+    background: $darkgrey;
+    border-radius: 3px;
+    box-shadow: rgba(0,0,0,0.5) 0 1px 15px;
+
+    // The triangle chiclet that points to where the menu came from
+    // By default, this is bottom center.
+    &:before {
+        content: "";
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        margin-left: -10px;
+        border-width: 10px 10px 0 10px;
+        border-style: solid;
+        border-color: $darkgrey transparent;
+        display: block;
+        width: 0;
+    } // &:before
+
+    // Stop :hover shadow from overflowing
+    li {
+        overflow: hidden;
+    }
+
+    a, p {
+        display: block;
+        position: relative;
+        padding: 10px 25px 10px 35px;
+        border: none;
+        color: $lightgrey !important; // It's dirty, but it's needed.
+        text-transform: none;
+        text-decoration: none;
+
+        &:hover {
+            background: $blue;
+            box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset;
+        }
+    } // a, p
+
+    // Add a check mark to the currently active menu item
+    .active a {
+        @include icon($i-check) {
+            position: absolute;
+            top: 14px;
+            left: 11px;
+        }
+    }
+
+} // .menu
+
+
+/* ==========================================================================
+   Menu Positioning Options
+   ---
+   Combine above classes into one usable class
+   ========================================================================== */
+
+// This extend moves the chiclet to the top, for menus which drop down.
+.menu-drop {
+    @extend .menu;
+    &:before {
+        top: -10px;
+        bottom: auto;
+        border-width:0 10px 10px 10px;
+    }
+}
+
+// Chiclet to the left, for menus appearing close to left edge of the screen.
+.menu-left {
+    @extend .menu;
+    &:before {
+        left:10px;
+        margin-left:0;
+    }
+}
+
+// Chiclet to the right, for menus appearing close to right edge of the screen.
+.menu-right {
+    @extend .menu;
+    &:before {
+        left: auto;
+        right:10px;
+        margin-left:0;
+    }
+}
+
+// Drop left, chiclet top left.
+.menu-drop-left {
+    @extend .menu;
+    @extend .menu-drop;
+    @extend .menu-left;
+}
+
+// Drop right, chiclet top right.
+.menu-drop-right {
+    @extend .menu;
+    @extend .menu-drop;
+    @extend .menu-right;
+}