Added hover colors on default button

rbouma · Oct 2, 2018 · 95c3d01 · 95c3d01
1 parent 5bcd1ae
commit 95c3d01
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/scss/boilerplate/_buttons.scss b/src/scss/boilerplate/_buttons.scss
@@ -18,16 +18,24 @@ button {
   padding: $button-default-padding;
   text-transform: $button-default-text-transform;
 
+  &:hover {
+    color: $button-default-hover-color;
+    border: $button-default-hover-border;
+    background-color: $button-default-hover-background-color;
+  }
+
   &.action {
     &:hover {
       background: $button-default-hover-background-color;
       border: $button-default-hover-border;
+      color: $button-default-hover-color;
     }
     &.primary {
       background: $button-primary-background-color;
       border: $button-primary-border;
       color: $button-primary-color;
       padding: $button-primary-padding;
+      font-family: $button-primary-font-family;
       font-size: $button-primary-font-size;
       text-transform: $button-primary-text-transform;
       font-weight: $button-primary-font-weight;
@@ -70,6 +78,7 @@ button {
     background: $button-primary-background-color;
     border: $button-primary-border;
     color: $button-primary-color;
+    font-family: $button-primary-font-family;
     padding: $button-primary-padding;
     font-size: $button-primary-font-size;
     text-transform: $button-primary-text-transform;
@@ -94,6 +103,7 @@ button {
     background: $button-secondary-background-color;
     border: $button-secondary-border;
     color: $button-secondary-color;
+    font-family: $button-secondary-font-family;
     font-size: $button-secondary-font-size;
 
     &:hover {

diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss
@@ -157,13 +157,14 @@ $button-default-text-transform: none !default;
 /* Button default states */
 $button-default-hover-background-color: $color-boilerplate-orange !default;
 $button-default-hover-border: 1px solid $color-boilerplate-blue !default;
-$button-default-hover-color: white !default;
+$button-default-hover-color: $color-boilerplate-gray !default;
 
 /* Button primary */
 $button-primary-background-color: $button-default-background-color !default;
 $button-primary-border: $button-default-border !default;
 $button-primary-border-radius: $button-default-border-radius;
 $button-primary-color: $button-default-color !default;
+$button-primary-font-family: $button-default-font-family !default;
 $button-primary-font-weight: 600 !default;
 $button-primary-font-size: $button-default-font-size !default;
 $button-primary-transition: $button-default-transition !default;
@@ -178,6 +179,7 @@ $button-primary-hover-color: $button-default-hover-color !default;
 /* Button secondary */
 $button-secondary-background-color: white !default;
 $button-secondary-border: 1px solid blue !default;
+$button-secondary-font-family: $button-default-font-family !default;
 $button-secondary-font-size: $button-default-font-size !default;
 $button-secondary-padding: 20px !default;
 $button-secondary-transition: $button-default-transition !default;