Fix button styling in typey-chroma-kss fork.

4 files changed, 97 insertions, 90 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;
diff --git a/test/fixtures/fork-versions/typey-chroma-kss/output.css b/test/fixtures/fork-versions/typey-chroma-kss/output.css
index 1e6fa2e..7393b4a 100644
--- a/test/fixtures/fork-versions/typey-chroma-kss/output.css
+++ b/test/fixtures/fork-versions/typey-chroma-kss/output.css
@@ -48,9 +48,8 @@ template,
 [hidden] {
   display: none; }
 
-:link {
+a {
   color: #0072b9;
-  background-color: transparent;
   -webkit-text-decoration-skip: objects; }
 
 :visited {
@@ -58,6 +57,8 @@ template,
 
 a:active {
   color: #c00; }
+  a:active:not(.button) {
+    background-color: transparent; }
 
 a:active,
 a:hover {
@@ -213,6 +214,52 @@ svg {
 svg:not(:root) {
   overflow: hidden; }
 
+button,
+input,
+optgroup,
+select,
+textarea {
+  box-sizing: border-box;
+  max-width: 100%;
+  font: inherit;
+  margin: 0; }
+
+button {
+  overflow: visible; }
+
+button,
+select {
+  text-transform: none; }
+
+input {
+  overflow: visible; }
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto; }
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px; }
+  [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration {
+    -webkit-appearance: none; }
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: .54; }
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit; }
+
+.button,
+button,
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+  -moz-appearance: button;
+  -webkit-appearance: button; }
+
 .button,
 button,
 [type='button'],
@@ -239,85 +286,41 @@ button,
     outline: 1px dotted ButtonText; }
   .button:hover, .button:focus, .button:active,
   button:hover,
-  [type='button']:hover,
-  [type='reset']:hover,
-  [type='submit']:hover,
   button:focus,
-  [type='button']:focus,
-  [type='reset']:focus,
-  [type='submit']:focus,
   button:active,
+  [type='button']:hover,
+  [type='button']:focus,
   [type='button']:active,
+  [type='reset']:hover,
+  [type='reset']:focus,
   [type='reset']:active,
+  [type='submit']:hover,
+  [type='submit']:focus,
   [type='submit']:active {
     text-decoration: none;
     color: #000; }
   .button[disabled],
   button[disabled],
-  [disabled][type='button'],
-  [disabled][type='reset'],
-  [disabled][type='submit'] {
+  [type='button'][disabled],
+  [type='reset'][disabled],
+  [type='submit'][disabled] {
     cursor: default;
     color: #999999; }
     .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active,
     button[disabled]:hover,
-    [disabled][type='button']:hover,
-    [disabled][type='reset']:hover,
-    [disabled][type='submit']:hover,
     button[disabled]:focus,
-    [disabled][type='button']:focus,
-    [disabled][type='reset']:focus,
-    [disabled][type='submit']:focus,
     button[disabled]:active,
-    [disabled][type='button']:active,
-    [disabled][type='reset']:active,
-    [disabled][type='submit']:active {
+    [type='button'][disabled]:hover,
+    [type='button'][disabled]:focus,
+    [type='button'][disabled]:active,
+    [type='reset'][disabled]:hover,
+    [type='reset'][disabled]:focus,
+    [type='reset'][disabled]:active,
+    [type='submit'][disabled]:hover,
+    [type='submit'][disabled]:focus,
+    [type='submit'][disabled]:active {
       color: #999999; }
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  box-sizing: border-box;
-  max-width: 100%;
-  font: inherit;
-  margin: 0; }
-
-button {
-  overflow: visible; }
-
-button,
-select {
-  text-transform: none; }
-
-button,
-html [type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button; }
-
-input {
-  overflow: visible; }
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto; }
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px; }
-  [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration {
-    -webkit-appearance: none; }
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: .54; }
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit; }
-
 [type='checkbox'],
 [type='radio'] {
   box-sizing: border-box;