Better dropdowns styles and docs

core/client/assets/sass/modules/dropdowns.scss

@@ -8,16 +8,18 @@
 
 // List
 .dropdown-menu {
-    background: #fff;
+
-    box-shadow: rgba(0,0,0,0.5) 0 1px 15px;
     display: inline-block;
-    border-radius: 2px;
+    min-width: 160px;
     padding: 0.5rem 0;
     margin: 0;
     position: relative;
-    font-size: 1.4rem;
+    background: #fff;
+    border: 1px solid rgba(0,0,0,0.15);
+    box-shadow: 0 1px 12px rgba(0,0,0,0.175);
+    border-radius: 2px;
 
-    // Dropdown Resets - This means we can use any element
+    // Item Resets - This means we can use any element
     li {
         list-style: none;
     }
@@ -41,7 +43,7 @@
         height: 20px;
         background: #fff;
         transform: rotate(45deg);
-        box-shadow: rgba(0,0,0,0.1) 0 0 5px 5px;
+        box-shadow: 0 0 5px 1px rgba(0,0,0,0.175);
         z-index: -1;
     } // :after
 } // %triangle
@@ -133,46 +135,49 @@
             right: 2rem;
         }
     } // &.triangle-bottom-right
-
 } // .dropdown-menu
 
 // List Item
 .dropdown-item {
-    color: #000;
     display: block;
     width: 100%;
-    padding: 0.7rem 3.5rem;
+    padding: 0.6rem 2rem;
+    font-size: 1.4rem;
+    line-height: 1;
+    color: #000;
 
     &:not(.divider):hover,
     &:not(.divider):focus {
         background: #f6f6f6;
     }
-
-    &[class*='icon-'] {
-        position: relative;
-        &:before {
-            position: absolute;
-            top: 50%;
-            left: 1.5rem;
-            font-size: 1.2rem;
-            line-height: 1;
-            margin-top: -0.6rem;
-        }
-    } // &[class*='icon-']
-
-    &.divider {
-        position: relative;
-        height: 1.5rem;
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0.7rem;
-            left: 0;
-            width: 100%;
-            height: 1px;
-            background: #eee;
-        } // :before
-
-    } // .divider
-
 } // .dropdown-item
+
+// Divider
+.dropdown-menu .divider {
+    display: block;
+    padding: 0;
+    margin: 0.9rem 0;
+    height: 1px;
+    width: 100%;
+    position: relative;
+    background: #eee;
+    overflow: hidden;
+} // .dropdown-menu .divider
+
+// Icons
+.dropdown-with-icons {
+    .dropdown-item:not(.divider) {
+        padding: 0.6rem 3rem;
+        &[class*='icon-'] {
+            position: relative;
+            &:before {
+                position: absolute;
+                top: 50%;
+                left: 1rem;
+                font-size: 1.2rem;
+                line-height: 1;
+                margin-top: -0.6rem;
+            }
+        } // &[class*='icon-']
+    } // .dropdown-item
+} // .dropdown-with-icons

core/client/docs/dropdown.html

@@ -8,15 +8,34 @@ title: Dropdowns - Ghost UI
     This is used to show, hide and position the dropdown
 -->
 
-<h1>Default Dropdown</h1>
+<h1>Dropdowns</h1>
+
+<p>Basic usage notes</p>
+
+<ul>
+    <li>The styles should be markup-independent, so you can use divs, lists, and so on.</li>
+    <li>Add the class <code>.dropdown-with-icons</code> to <code>.dropdown-menu</code> is you will be using icons in the dropdown items.</li>
+    <li>Triangles are optional class on the <code>.dropdown-menu</code> element, and have 6 positions:
+        <ul>
+            <li><code>.triangle-bottom</code></li>
+            <li><code>.triangle-bottom-left</code></li>
+            <li><code>.triangle-bottom-right</code></li>
+            <li><code>.triangle-top</code></li>
+            <li><code>.triangle-top-left</code></li>
+            <li><code>.triangle-top-right</code></li>
+        </ul>
+    </li>
+</ul>
+
+<h2>Default Dropdown</h2>
 
 <div class="dropdown">
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+  <ul class="dropdown-menu dropdown-with-icons" role="menu" aria-labelledby="dropdownMenu1">
     <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
     <li role="presentation"><a class="dropdown-item icon-trash" role="menuitem" tabindex="-1" href="#">Another action</a></li>
     <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Something else here</a></li>
     <li role="presentation">
-        <span class="dropdown-item divider"></span>
+        <span class="divider"></span>
     </li>
     <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Separated link</a></li>
   </ul>
@@ -24,7 +43,7 @@ title: Dropdowns - Ghost UI
 
 <hr>
 
-<h1>Bottom Triangle</h1>
+<h2>Bottom Triangle</h2>
 
 <div class="dropdown">
   <ul class="dropdown-menu triangle-bottom" role="menu" aria-labelledby="dropdownMenu1">
@@ -33,7 +52,7 @@ title: Dropdowns - Ghost UI
   </ul>
 </div>
 
-<h2>Bottom Left Triangle</h2>
+<h3>Bottom Left Triangle</h3>
 
 <div class="dropdown">
   <ul class="dropdown-menu triangle-bottom-left" role="menu" aria-labelledby="dropdownMenu1">
@@ -42,7 +61,7 @@ title: Dropdowns - Ghost UI
   </ul>
 </div>
 
-<h2>Bottom Right Triangle</h2>
+<h3>Bottom Right Triangle</h3>
 
 <div class="dropdown">
   <ul class="dropdown-menu triangle-bottom-right" role="menu" aria-labelledby="dropdownMenu1">
@@ -53,7 +72,7 @@ title: Dropdowns - Ghost UI
 
 <hr>
 
-<h1>Top Triangle</h1>
+<h2>Top Triangle</h2>
 
 <div class="dropdown">
   <ul class="dropdown-menu triangle-top" role="menu" aria-labelledby="dropdownMenu1">
@@ -62,7 +81,7 @@ title: Dropdowns - Ghost UI
   </ul>
 </div>
 
-<h2>Top Left Triangle</h2>
+<h3>Top Left Triangle</h3>
 
 <div class="dropdown">
   <ul class="dropdown-menu triangle-top-left" role="menu" aria-labelledby="dropdownMenu1">
@@ -71,7 +90,7 @@ title: Dropdowns - Ghost UI
   </ul>
 </div>
 
-<h2>Top Right Triangle</h2>
+<h3>Top Right Triangle</h3>
 
 <div class="dropdown">
   <ul class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
@@ -80,8 +99,8 @@ title: Dropdowns - Ghost UI
   </ul>
 </div>
 
-<h2>Div &amp; Button Markup</h2>
+<h3>Div &amp; Button Markup</h3>
-
+<!-- TODO: When button styles are in, check these look correct -->
 <div class="dropdown">
   <div class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
     <span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Action</button></span>