Merge pull request #905 from Automattic/fix/issue-859

Friendly Business: Fix button hover color issue

friendly-business/sass/variables-site/_colors.scss

@@ -5,7 +5,7 @@ $color__background-input: #fff;
 $color__background-screen: #fdf9ec;
 $color__background-hr: #ccc;
 $color__background-button: #20603c;
-$color__background-button-hover: #111;
+$color__background-button-hover: darken( $color__background-button, 10%);
 $color__background-pre: #eee;
 $color__background-ins: #fff9c0;
 $color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% );

friendly-business/style-rtl.css

@@ -883,7 +883,7 @@ button:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
@@ -901,7 +901,7 @@ button:focus,
 input[type="button"]:focus,
 input[type="reset"]:focus,
 input[type="submit"]:focus {
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }
@@ -2512,7 +2512,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content a.button:hover {
-  background: #111;
+  background: #133a24;
   color: #fffdf6;
   cursor: pointer;
 }
@@ -3485,13 +3485,13 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-button .wp-block-button__link:hover {
   color: white;
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
 .entry .entry-content .wp-block-button .wp-block-button__link:focus {
   color: white;
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }
@@ -3523,11 +3523,11 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
   color: white;
-  border-color: #111;
+  border-color: #133a24;
 }
 
 .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover:not(.has-background) {
-  color: #111;
+  color: #133a24;
 }
 
 .entry .entry-content .wp-block-archives,
@@ -4041,12 +4041,12 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-file .wp-block-file__button:hover {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
 .entry .entry-content .wp-block-file .wp-block-file__button:focus {
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }
@@ -4168,7 +4168,7 @@ body.page .main-navigation {
   padding-left: 1rem;
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 782px) {
   .entry .entry-content .wp-block-columns .wp-block-column {
     margin-right: 0.5rem;
     margin-left: 0.5rem;
@@ -4427,7 +4427,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .a8c-posts-list-item__edit-link:hover, .entry .entry-content .a8c-posts-list-item__edit-link:focus {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
@@ -4471,7 +4471,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .a8c-posts-list__view-all:hover {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
@@ -4481,7 +4481,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .a8c-posts-list__view-all:focus {
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }

friendly-business/style.css

@@ -883,7 +883,7 @@ button:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
 input[type="submit"]:hover {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
@@ -901,7 +901,7 @@ button:focus,
 input[type="button"]:focus,
 input[type="reset"]:focus,
 input[type="submit"]:focus {
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }
@@ -2518,7 +2518,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content a.button:hover {
-  background: #111;
+  background: #133a24;
   color: #fffdf6;
   cursor: pointer;
 }
@@ -3497,13 +3497,13 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-button .wp-block-button__link:hover {
   color: white;
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
 .entry .entry-content .wp-block-button .wp-block-button__link:focus {
   color: white;
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }
@@ -3535,11 +3535,11 @@ body.page .main-navigation {
 
 .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
   color: white;
-  border-color: #111;
+  border-color: #133a24;
 }
 
 .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover:not(.has-background) {
-  color: #111;
+  color: #133a24;
 }
 
 .entry .entry-content .wp-block-archives,
@@ -4053,12 +4053,12 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .wp-block-file .wp-block-file__button:hover {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
 .entry .entry-content .wp-block-file .wp-block-file__button:focus {
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }
@@ -4439,7 +4439,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .a8c-posts-list-item__edit-link:hover, .entry .entry-content .a8c-posts-list-item__edit-link:focus {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
@@ -4483,7 +4483,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .a8c-posts-list__view-all:hover {
-  background: #111;
+  background: #133a24;
   cursor: pointer;
 }
 
@@ -4493,7 +4493,7 @@ body.page .main-navigation {
 }
 
 .entry .entry-content .a8c-posts-list__view-all:focus {
-  background: #111;
+  background: #133a24;
   outline: thin dotted;
   outline-offset: -4px;
 }