Fix button styling in typey-chroma-kss fork.

3 files changed, 30 insertions, 26 deletions

diff --git a/fork-versions/typey-chroma-kss/base/forms/_forms.scss b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
index 0ad6ec0..bcd505f 100644
--- a/fork-versions/typey-chroma-kss/base/forms/_forms.scss
+++ b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
@@ -1,8 +1,5 @@
 // sass-lint:disable no-vendor-prefixes, no-css-comments
 
-// Dependencies.
-@import 'components/button/button';
-
 // Form defaults
 //
 // These are the default base styles applied to HTML form elements.
@@ -17,7 +14,7 @@
 //
 // The following rules are from normalize.css and help to fix inconsistencies
 // across various browsers. You should probably leave these rules as is and jump
-// to the "Buttons" rule on line 105 before you start editing this file.
+// to the "Buttons" rule on line 92 before you start editing this file.
 //
 
 button,
@@ -51,16 +48,6 @@ select {
   text-transform: none;
 }
 
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-//    controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-button,
-html [type='button'], // 1
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button; // 2
-}
-
 // Show the overflow in Edge.
 input {
   overflow: visible;
@@ -118,12 +105,7 @@ input {
 //
 // Style guide: forms.base.button
 
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  @extend %button;
-}
+@import 'components/button/button';
 
 // The %text-form-element can be used to style `<input>` text types and
 // `<textarea>` elements at the same time.
diff --git a/fork-versions/typey-chroma-kss/base/links/_links.scss b/fork-versions/typey-chroma-kss/base/links/_links.scss
index b5215b7..fa48697 100644
--- a/fork-versions/typey-chroma-kss/base/links/_links.scss
+++ b/fork-versions/typey-chroma-kss/base/links/_links.scss
@@ -15,15 +15,16 @@
 //
 // Style guide: base.link
 
-:link,
+a,
 %link {
   color: color(link);
-  // Remove the gray background on active links in IE 10.
-  background-color: transparent;
   // Remove gaps in links underline in iOS 8+ and Safari 8+.
   -webkit-text-decoration-skip: objects;
 }
 
+// Any element can receive focus, but only links can be visited, so we can
+// safely lower this selector's specificity. This also ensures visited links
+// with additional styles won't have their styles overridden.
 :visited {
   color: color(link-visited);
 }
@@ -35,6 +36,11 @@ a:focus {
 
 a:active {
   color: color(link-active);
+
+  &:not(.button) {
+    // Remove the gray background on active links in IE 10.
+    background-color: transparent;
+  }
 }
 
 // Remove the outline on focused links when they are also active or hovered
diff --git a/fork-versions/typey-chroma-kss/components/button/_button.scss b/fork-versions/typey-chroma-kss/components/button/_button.scss
index eb8004e..93a0732 100644
--- a/fork-versions/typey-chroma-kss/components/button/_button.scss
+++ b/fork-versions/typey-chroma-kss/components/button/_button.scss
@@ -12,10 +12,26 @@
 //
 // Style guide: forms.button
 
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
 .button,
-%button {
-  // Note that buttons also receive this property: -webkit-appearance: button
-  // @see base/forms/_form.scss
+%button,
+button,
+// 1
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+  -moz-appearance: button;
+  -webkit-appearance: button; // 2
+}
+
+.button,
+%button,
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
   padding: 2px 6px;