Merge branch 'master' into 90-basic-webpack

* master: Use %placeholder and @extend on button mixins to see if it makes code less repetitive (#347) # Conflicts: # core/dist/css/decanter.css - resolved using master's, then rebuilt with webpack
SU-SWS · Mar 20, 2019 · 75610d8 · 75610d8
2 parents 4880f53 + 69d949f
commit 75610d8
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 250 deletions.
diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
@@ -307,6 +307,95 @@ template {
 [hidden] {
   display: none; }
 
+.su-cta .su-cta__button, .su-button,
+.su-button.su-link,
+button,
+[type=button],
+[type=submit],
+[type=reset],
+[type=image], .su-button--big,
+.su-button--big.su-link, .su-button--secondary,
+.su-button--secondary.su-link {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  display: inline-block;
+  border: 0;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1;
+  outline: none;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+  -webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
+  transition: background-color .25s ease-in-out, color .25s ease-in-out; }
+  @media only screen and (min-width: 576px) {
+    .su-cta .su-cta__button, .su-button,
+    .su-button.su-link,
+    button,
+    [type=button],
+    [type=submit],
+    [type=reset],
+    [type=image], .su-button--big,
+    .su-button--big.su-link, .su-button--secondary,
+    .su-button--secondary.su-link {
+      width: auto; } }
+  .su-cta .su-cta__button:hover, .su-button:hover,
+  button:hover,
+  :hover[type=button],
+  :hover[type=submit],
+  :hover[type=reset],
+  :hover[type=image], .su-button--big:hover, .su-button--secondary:hover {
+    border-bottom: 0;
+    text-decoration: none; }
+
+.su-cta {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  overflow: hidden;
+  line-height: 0; }
+  .su-cta .su-cta__img {
+    width: 100%;
+    min-height: 1px;
+    z-index: 0;
+    -webkit-transition: all .3s ease-out;
+    transition: all .3s ease-out; }
+  .su-cta .su-cta__button {
+    padding: 1.5rem 3rem 1.8rem;
+    font-size: 2.3rem;
+    background-color: #b1040e;
+    color: #ffffff; }
+    .su-cta .su-cta__button:hover {
+      background-color: #2e2d29;
+      color: #ffffff; }
+    .su-cta .su-cta__button:focus {
+      -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53;
+              box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53;
+      background-color: #2e2d29; }
+    @media only screen and (min-width: 0) {
+      .su-cta .su-cta__button {
+        width: 100%;
+        z-index: 100; } }
+  .su-cta .su-cta__icon {
+    display: none; }
+  .su-cta:hover .su-cta__img {
+    -webkit-transform: scale(1.02, 1.02);
+            transform: scale(1.02, 1.02); }
+  .su-cta:hover .su-cta__button {
+    background-color: #2e2d29;
+    text-decoration: none; }
+
 .flex-container {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -6572,38 +6661,9 @@ button,
 [type=submit],
 [type=reset],
 [type=image] {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin-top: 0.5em;
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
   padding: 1rem 2rem 1.15rem;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   background-color: #b1040e;
-  border: 0;
-  color: #ffffff;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 2rem;
-  font-weight: 600;
-  line-height: 1;
-  outline: none;
-  text-align: center;
-  text-decoration: none;
-  width: 100%;
-  -webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-  transition: background-color .25s ease-in-out, color .25s ease-in-out; }
-  @media only screen and (min-width: 576px) {
-    .su-button,
-    .su-button.su-link,
-    button,
-    [type=button],
-    [type=submit],
-    [type=reset],
-    [type=image] {
-      width: auto; } }
+  color: #ffffff; }
   .su-button:hover,
   .su-button.su-link:hover,
   button:hover,
@@ -6612,96 +6672,47 @@ button,
   [type=reset]:hover,
   [type=image]:hover {
     background-color: #2e2d29;
-    border-bottom: 0;
-    color: #ffffff;
-    text-decoration: none; }
+    color: #ffffff; }
   .su-button:focus,
   .su-button.su-link:focus,
   button:focus,
   [type=button]:focus,
   [type=submit]:focus,
   [type=reset]:focus,
   [type=image]:focus {
-    background-color: #2e2d29;
     -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53;
-            box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; }
+            box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53;
+    background-color: #2e2d29; }
 
 .su-button--big,
 .su-button--big.su-link {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin-top: 0.5em;
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
   padding: 1.5rem 3rem 1.8rem;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: #b1040e;
-  border: 0;
-  color: #ffffff;
-  cursor: pointer;
-  display: inline-block;
   font-size: 2.3rem;
-  font-weight: 600;
-  line-height: 1;
-  outline: none;
-  text-align: center;
-  text-decoration: none;
-  width: 100%; }
-  @media only screen and (min-width: 576px) {
-    .su-button--big,
-    .su-button--big.su-link {
-      width: auto; } }
+  background-color: #b1040e;
+  color: #ffffff; }
   .su-button--big:hover,
   .su-button--big.su-link:hover {
     background-color: #2e2d29;
-    border-bottom: 0;
-    color: #ffffff;
-    text-decoration: none; }
+    color: #ffffff; }
   .su-button--big:focus,
   .su-button--big.su-link:focus {
-    background-color: #2e2d29;
     -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53;
-            box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; }
+            box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53;
+    background-color: #2e2d29; }
 
 .su-button--secondary,
 .su-button--secondary.su-link {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  margin-top: 0.5em;
-  margin-right: 0.5em;
-  margin-bottom: 0.5em;
   padding: 1rem 2rem 1.15rem;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   background-color: #ffffff;
-  border: 0;
   -webkit-box-shadow: inset 0 0 0 2px #b1040e;
           box-shadow: inset 0 0 0 2px #b1040e;
-  color: #b1040e;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 2rem;
-  font-weight: 600;
-  line-height: 1;
-  outline: none;
-  text-align: center;
-  text-decoration: none;
-  width: 100%; }
-  @media only screen and (min-width: 576px) {
-    .su-button--secondary,
-    .su-button--secondary.su-link {
-      width: auto; } }
+  color: #b1040e; }
   .su-button--secondary:hover,
   .su-button--secondary.su-link:hover {
     background-color: #ffffff;
-    border-bottom: 0;
     -webkit-box-shadow: inset 0 0 0 2px #2e2d29;
             box-shadow: inset 0 0 0 2px #2e2d29;
-    color: #2e2d29;
-    text-decoration: none; }
+    color: #2e2d29; }
   .su-button--secondary:focus,
   .su-button--secondary.su-link:focus {
     background-color: #ffffff;
@@ -6919,72 +6930,6 @@ button,
       .su-card--horizontal .su-card__contents > h2 {
         margin-top: 0; } }
 
-.su-cta {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  overflow: hidden;
-  line-height: 0; }
-  .su-cta .su-cta__img {
-    width: 100%;
-    min-height: 1px;
-    z-index: 0;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out; }
-  .su-cta .su-cta__button {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    margin-top: 0.5em;
-    margin-right: 0.5em;
-    margin-bottom: 0.5em;
-    padding: 1.5rem 3rem 1.8rem;
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    background-color: #b1040e;
-    border: 0;
-    color: #ffffff;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 2.3rem;
-    font-weight: 600;
-    line-height: 1;
-    outline: none;
-    text-align: center;
-    text-decoration: none;
-    width: 100%;
-    font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-    margin: 0; }
-    @media only screen and (min-width: 576px) {
-      .su-cta .su-cta__button {
-        width: auto; } }
-    .su-cta .su-cta__button:hover {
-      background-color: #2e2d29;
-      border-bottom: 0;
-      color: #ffffff;
-      text-decoration: none; }
-    .su-cta .su-cta__button:focus {
-      background-color: #2e2d29;
-      -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53;
-              box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; }
-    @media only screen and (min-width: 0) {
-      .su-cta .su-cta__button {
-        width: 100%;
-        z-index: 100; } }
-  .su-cta .su-cta__icon {
-    display: none; }
-  .su-cta:hover .su-cta__img {
-    -webkit-transform: scale(1.02, 1.02);
-            transform: scale(1.02, 1.02); }
-  .su-cta:hover .su-cta__button {
-    background-color: #2e2d29;
-    text-decoration: none; }
-
 .su-cta--button-center .su-cta__button {
   position: absolute;
   top: 50%;

diff --git a/core/scss/components/cta/_cta.scss b/core/scss/components/cta/_cta.scss
@@ -14,5 +14,5 @@
 //
 
 .su-cta {
-  @include cta;
+  @extend %cta-base;
 }
diff --git a/core/scss/utilities/index.scss b/core/scss/utilities/index.scss
@@ -19,7 +19,7 @@
 // Functions
 //
 // Programmatic procedure or routine to help making writing code or declaring
-// something easier and more seamlesss.
+// something easier and more seamless.
 //
 // Weight: -40
 //
@@ -37,13 +37,25 @@
 //
 // Style guide: Mixins
 
+//
+// Placeholders
+//
+// Placeholders are reusable blocks of base CSS styles that can be used to reduce repetitiveness
+// by using `@extend %placeholder;`.
+// Placeholder styles do not show up in the compiled CSS file until a selector extends them.
+//
+// Weight: -30
+//
+// Style guide: Placeholders
+
 // Load order convention exception
 //
 // The convention for importing files in index.scss files is to import in
-// alphabetical order. This file intentionally breaks that convetion, as
+// alphabetical order. This file intentionally breaks that convention, as
 // variables need to be imported before functions and mixins.
 
 @import
   'variables/index',
   'functions/index',
-  'mixins/index';
+  'mixins/index',
+  'placeholders/index';