fix(dropdowns): Changes style of dropdowns.

[Finishes #100255616] Signed-off-by: Kenny Wang <kwang@pivotal.io>
pivotal-cf · Aug 10, 2015 · 70fece4 · 70fece4
1 parent 8b86a1f
commit 70fece4
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss
@@ -110,6 +110,15 @@ Button                                                             | Disabled
   @include button-shadow;
 }
 
+.btn-link {
+  .open & {
+    &.dropdown-toggle {
+      color: darken($link-color, 6%);
+      box-shadow: none;
+    }
+  }
+}
+
 /*doc
 ---
 title: Sizes

diff --git a/src/pivotal-ui/components/dropdowns/dropdowns.scss b/src/pivotal-ui/components/dropdowns/dropdowns.scss
@@ -22,8 +22,8 @@ Dropdowns are menus that can be triggered by buttons.
 This is the basic bootstrap dropdown.
 
 ```html_example
-<div class="dropdown btn-group">
-  <button id="dropdown-button-1" class="dropdown-toggle btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<div class="dropdown">
+  <button id="dropdown-button-1" class="dropdown-toggle btn btn-default-alt" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Button Dropdown
     <span class="caret"></span>
   </button>
@@ -52,7 +52,7 @@ This is the basic bootstrap dropdown.
 </div>
 
 ```html_example
-<div class="dropdown btn-group">
+<div class="dropdown">
   <button id="drop3" data-toggle="dropdown" class="dropdown-toggle btn btn-link" type="button">
     <span>Link Dropdown</span>
     <span class="caret"></span>
@@ -86,7 +86,7 @@ Here's a crazy-complex dropdown. Not for the faint of heart.
 
 ```html_example
 <div class="dropdown btn-group">
-  <button id="dropdown-button-2" class="dropdown-toggle btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button id="dropdown-button-2" class="dropdown-toggle btn btn-default-alt" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     dropdown trigger
     <span class="caret"></span>
   </button>
@@ -214,10 +214,23 @@ using the `buttonClassName` property. `id` and `style` will also be applied to t
 */
 
 .dropdown-menu {
-  @include box-shadow(0 2px 2px rgba(0,0,0,.15));
+  @include box-shadow(0 2px 0 rgba(211,217,217,0.50));
+  background-color: white;
+  border: 1px solid $neutral-7;
+  padding: 0 0;
+
+  > li {
+    > a {
+      color: $dark-5;
+      font-weight: 600;
+      &:hover {
+        color: $dark-5;
+        background-color: darken($neutral-11, 6%);
+      }
+    }
+  }
 }
 
-
 /*doc
 ---
 title: Notifications

diff --git a/src/pivotal-ui/components/mixins.scss b/src/pivotal-ui/components/mixins.scss
@@ -39,8 +39,9 @@
   }
   .open & {
     &.dropdown-toggle {
-    color: $color;
-    background-color: lighten($background, 6%);
+      color: darken($color, 6%);
+      background-color: darken($background, 6%);
+      box-shadow: none;
     }
   }
   &.disabled,
@@ -150,4 +151,4 @@
       margin-bottom: $whitespace-screen-sm-l;
     }
   }
-}
+}
diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -444,7 +444,6 @@ $btn-default-alt-border:         $neutral-7;
 
 $btn-primary-color:              $accent-3;
 $btn-primary-bg:                 $neutral-11;
-$btn-primary-bg-hover:           $neutral-11;
 $btn-primary-border:             #49A8D5 !default;
 
 $btn-lowlight-color:             $dark-5;