fix(selects): changes select styles

[Finishes #100255918] Signed-off-by: Kenny Wang <[email protected]>
pivotal-cf · Aug 12, 2015 · 192e5af · 192e5af
1 parent 60a74b2
commit 192e5af
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/src/pivotal-ui/components/buttons/buttons.scss b/src/pivotal-ui/components/buttons/buttons.scss
@@ -90,6 +90,9 @@ Button                                                             | Disabled
 .btn-default-alt {
   @include button-skin($btn-default-alt-color, $btn-default-alt-bg, $btn-default-alt-bg-hover, $btn-default-alt-border);
   @include button-shadow;
+  &:hover, &:focus {
+    border-color: $btn-default-border-hover;
+  }
 }
 
 .btn-primary {

diff --git a/src/pivotal-ui/components/forms/forms.scss b/src/pivotal-ui/components/forms/forms.scss
@@ -510,11 +510,6 @@ Add the `readonly` boolean attribute on an input to prevent user input and style
 
 */
 
-.form-control {
-  box-shadow: none; // override bootstrap
-  padding: 8px 14px; // override bootstrap
-}
-
 .form-control[readonly] {
   background-color: $input-bg-disabled; //override bootstrap
 }
@@ -542,6 +537,38 @@ them over a custom dropdown whenever possible.
 ```
 */
 
+.form-control {
+  @include button-shadow;
+  font-weight: $input-font-weight;
+  padding: 8px 14px; // override bootstrap
+  //-webkit-appearance: none;
+  position: relative;
+  z-index: 3;
+  &:hover, &:focus {
+    color: $input-color-hover;
+    border-color: $input-border-color-hover;
+  }
+
+  &.active, &:active {
+    color: $input-color-active;
+    background-color: $input-bg-active;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
+
+  &:after {
+    z-index: 2;
+    content: "\f107";
+    font-family: FontAwesome;
+    position: absolute;
+    right: 10px;
+    top: 4px;
+    font-size: 22px;
+  }
+}
+
 /*doc
 ---
 title: Sizing
@@ -984,10 +1011,6 @@ Inputs, selects, checkboxes, fieldsets, buttons, and other form controls can all
 
 */
 
-.form-control:focus {
-  box-shadow: none; // override bootstrap
-}
-
 /*doc
 ---
 title: Static Controls

diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -499,12 +499,17 @@ $btn-border-radius-small:        $border-radius-small;
 // Forms
 // -------------------------
 
-$input-bg:                       #fff !default;
+$input-bg:                       $neutral-11 !default;
+$input-bg-active:                $neutral-9;
 $input-bg-disabled:              $gray-lighter !default;
 $progress-border-radius:         $border-radius-base !default;
+$input-font-weight:              $font-weight-em-high;
 
-$input-color:                    $gray !default;
-$input-border:                   #ccc !default;
+$input-color:                    $link-color !default;
+$input-color-hover:              $accent-5;
+$input-color-active:             $accent-3;
+$input-border:                   $neutral-7 !default;
+$input-border-color-hover:       $neutral-5 !default;
 $input-border-radius:            $border-radius-small !default;
 $input-border-radius-large:      $border-radius-large !default;
 $input-border-radius-small:      $border-radius-small !default;