UI fixes to match specs61145-fix-button-dimensions

Add drop shadow to buttons on hover
Add inset shadow on active
Fix chevron hover color

3 files changed, 9 insertions, 17 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 16dde7d80aa..e0b6da31261 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -51,7 +51,7 @@
 
   &:not(:disabled):not(.disabled) {
     &:hover {
-      box-shadow: inset 0 0 0 1px $hover-border;
+      box-shadow: inset 0 0 0 1px $hover-border, 0 2px 2px 0 $gl-btn-hover-shadow-light;
     }
 
     &:focus {
@@ -83,14 +83,14 @@
   }
 }
 
-@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
+@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color, $hover-shadow-color: $gl-btn-hover-shadow-dark) {
   background-color: $light;
   border-color: $border-light;
   color: $color;
 
   &:not(:disabled):not(.disabled) {
     &:hover {
-      box-shadow: inset 0 0 0 1px $border-normal;
+      box-shadow: inset 0 0 0 1px $border-normal, 0 2px 2px 0 $hover-shadow-color;
     }
 
     &:focus {
@@ -104,10 +104,9 @@
       color: $color;
     }
 
-    :active,
-    .active {
-      box-shadow: inset 0 0 0 1px $border-dark, inset 0 2px 4px 0 rgba($black, 0.2);
-
+    &:active,
+    &.active {
+      box-shadow: inset 0 2px 4px 0 $gl-btn-hover-shadow-dark;
       background-color: $dark;
       border-color: $border-dark;
       color: $color;
@@ -132,7 +131,7 @@
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $gray-400, $gray-200, $gray-400, $gl-gray-200, $gray-500, $gl-text-color);
+  @include btn-color($white-light, $gray-400, $gray-200, $gray-400, $gl-gray-200, $gray-500, $gl-text-color, $gl-btn-hover-shadow-light);
 }
 
 @mixin btn-with-margin {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 23f2c707a35..05afcecca05 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -8,12 +8,6 @@
   }
 }
 
-@mixin chevron-active {
-  .fa-chevron-down {
-    color: $gray-darkest;
-  }
-}
-
 @mixin set-visible {
   transform: translateY(0);
   display: block;
@@ -49,7 +43,6 @@
 
   .dropdown-toggle,
   .dropdown-menu-toggle {
-    @include chevron-active;
     border-color: $gray-darkest;
   }
 
@@ -111,12 +104,10 @@
   }
 
   &:hover {
-    @include chevron-active;
     border-color: $gray-darkest;
   }
 
   &:focus:active {
-    @include chevron-active;
     border-color: $dropdown-toggle-active-border-color;
     outline: 0;
   }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a71532cab3d..047a9799c3f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -405,6 +405,8 @@ $tanuki-yellow: #fca326;
  */
 $green-500-focus: rgba($green-500, 0.4);
 $gl-btn-active-background: rgba(0, 0, 0, 0.16);
+$gl-btn-hover-shadow-dark: rgba($black, 0.2);
+$gl-btn-hover-shadow-light: rgba($black, 0.1);
 $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
 
 /*