(master): Refactor dropdown

Author: Joe Crick

index.html

@@ -462,20 +462,19 @@ <h3>Toggling Button Label Collapse</h3>
 
                 </div>
 
-                <div class="content dropdown-content">
+                <div class="content drop-down-content">
                     <a name="dropdown"></a>
                     <h2 class="content-subhead">Dropdown</h2>
 
-                    <div tabindex="0" class="dropdown">
-                        <ul class="dropdown-content">
-                            <li>
-                                <button>Edit</button>
-                            </li>
-                            <li>
-                                <button>Delete</button>
-                            </li>
-                        </ul>
-                    </div>
+                    <div tabindex="0" class="pure-button dropdown">Dropdown Button</div>
+                    <ul class="dropdown-content">
+                        <li class="dropdown-menu-item">
+                            <button class="dropdown-action-item">Edit</button>
+                        </li>
+                        <li class="dropdown-menu-item">
+                            <button class="dropdown-action-item">Delete</button>
+                        </li>
+                    </ul>
 
                     <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;margin-top: 50px;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                             style="margin: 0; line-height: 125%">

main.css

@@ -3,61 +3,33 @@
 .dropdown {
   position: relative;
   cursor: pointer;
-
-  &:before {
-    padding: 5px 10px;
-    background-color: @white;
-    border: 1px solid @off-white;
-    border-radius: 5px;
-    content: '...';
-  }
+  display: inline-block;
 
   &:focus {
     pointer-events: none;
     outline: none;
 
-    .dropdown-content {
+    & + .dropdown-content {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
     }
 
   }
+}
 
-  .dropdown-content {
-    position: absolute;
-    z-index: 1;
-    opacity: 0;
-    visibility: hidden;
-    transition: visibility 0.5s;
-    background-color: @white;
-    border: 1px solid @off-white;
-    width: auto;
-    margin-top: 5px;
-    padding: 10px;
-    border-radius: 5px;
-
-    li {
-      list-style-type: none;
-      white-space: nowrap;
-
-      button {
-        background: transparent;
-        border: 0;
-        border-radius: 5px;
-        color: inherit;
-        outline: 0;
-        cursor: pointer;
-        width: 120px;
-        text-align: left;
-
-        &:hover {
-          color: @white;
-          background: @light-blue;
-        }
+.dropdown-content {
+  position: absolute;
+  z-index: 1;
+  visibility: hidden;
+  width: auto;
 
-      }
+  .dropdown-menu-item {
+    list-style-type: none;
+    white-space: nowrap;
 
+    .dropdown-action-item {
+      background: transparent;
     }
 
   }

main.css.map

@@ -35,4 +35,36 @@ body {
 
   }
 
+  .dropdown-content {
+    z-index: 1;
+    transition: visibility 0.5s;
+    background-color: @white;
+    border: 1px solid @off-white;
+    width: auto;
+    margin-top: 5px;
+    padding: 10px;
+    border-radius: 5px;
+
+    .dropdown-menu-item {
+
+      .dropdown-action-item {
+        border: 0;
+        border-radius: 5px;
+        color: inherit;
+        outline: 0;
+        cursor: pointer;
+        width: 120px;
+        text-align: left;
+
+        &:hover {
+          color: @white;
+          background: @light-blue;
+        }
+
+      }
+
+    }
+
+  }
+
 }