Merge pull request #2844 from uswds/dw-consolidate-mixins

Move public mixins into mixins folder

src/stylesheets/components/_checklist.scss

@@ -1,28 +1,3 @@
-// Mixins here becuase they may be abstracted in the future
-
-@mixin add-checkbox-placeholder {
-  $placeholder-width: units(3);
-  $placeholder-margin: units(0.5);
-
-  text-indent: ($placeholder-width + $placeholder-margin) * -1;
-
-  &::before {
-    content: ' ';
-    display: inline-block;
-    height: units(1.5);
-    margin-right: $placeholder-margin;
-    width: $placeholder-width;
-  }
-}
-
-@mixin add-green-check {
-  &::before {
-    @include add-background-svg('correct9');
-    background-position: 100%;
-    background-size: 100%;
-  }
-}
-
 .usa-checklist {
   @include add-list-reset;
   @include border-box-sizing;
@@ -39,6 +14,6 @@
   &.is-checked,
   // Deprecate usa-checklist-checked once the js is updated
   &.usa-checklist-checked {
-    @include add-green-check;
+    @include add-success-mark;
   }
 }

src/stylesheets/components/_media-block.scss

@@ -1,8 +1,3 @@
-@mixin media-block-img($margin-right: units(1)) {
-  float: left;
-  margin-right: $margin-right;
-}
-
 .usa-media_block-img {
   @include media-block-img;
 }

src/stylesheets/components/_search.scss

@@ -1,3 +1,4 @@
+// TODO: abstract and integrate
 @mixin search-icon {
   @include add-background-svg('search');
   background-position: center center;

src/stylesheets/core/mixins/_add-checkbox-placeholder.scss

@@ -0,0 +1,14 @@
+@mixin add-checkbox-placeholder {
+  $placeholder-width: units(3);
+  $placeholder-margin: units(0.5);
+
+  text-indent: ($placeholder-width + $placeholder-margin) * -1;
+
+  &::before {
+    content: ' ';
+    display: inline-block;
+    height: units(1.5);
+    margin-right: $placeholder-margin;
+    width: $placeholder-width;
+  }
+}

src/stylesheets/core/mixins/_add-success-mark.scss

@@ -0,0 +1,7 @@
+@mixin add-success-mark {
+  &::before {
+    @include add-background-svg('correct9');
+    background-position: 100%;
+    background-size: 100%;
+  }
+}

src/stylesheets/core/mixins/_all.scss

@@ -52,19 +52,29 @@
 // general mixins
 @import 'add-bar';
 @import 'add-background-svg';
+@import 'add-checkbox-placeholder';
+@import 'add-success-mark';
 @import 'add-kerning';
 @import 'add-knockout-font-smoothing';
 @import 'add-list-reset';
 @import 'add-responsive-site-margins';
 @import 'at-media';
+@import 'button-disabled';
 @import 'button-unstyled';
 @import 'clearfix';
+@import 'embed-container';
+@import 'external-link';
 @import 'focus';
 @import 'font-face';
 @import 'icon';
 @import 'layout-grid';
+@import 'media-block-img';
+@import 'media-link';
 @import 'nav-list';
 @import 'screen-reader';
 @import 'typography';
 @import 'unstyled-list';
+@import 'usa-list-styles';
+@import 'usa-table-styles';
+@import 'usa-typography';
 @import 'utility-builder';

src/stylesheets/core/mixins/_button-disabled.scss

@@ -0,0 +1,17 @@
+@mixin button-disabled {
+  @include add-knockout-font-smoothing;
+  background-color: color('disabled');
+  color: color('white');
+  pointer-events: none;
+
+  &:hover,
+  &.usa-button-hover,
+  &:active,
+  &.usa-button-active,
+  &:focus,
+  &.usa-focus {
+    background-color: color('disabled');
+    border: 0;
+    box-shadow: none;
+  }
+}

src/stylesheets/core/mixins/_embed-container.scss

@@ -0,0 +1,3 @@
+@mixin embed-container ($height, $width) {
+  padding-bottom: percentage($height/$width);
+}

src/stylesheets/core/mixins/_external-link.scss

@@ -0,0 +1,17 @@
+@mixin external-link($external-link, $external-link-hover) {
+  &::after {
+    background: url('#{$theme-image-path}/#{$external-link}.png') no-repeat 0 0;
+    background: url('#{$theme-image-path}/#{$external-link}.svg') no-repeat 0 0;
+    background-size: 100%;
+    content: '';
+    display: inline-block;
+    height: 0.65em;
+    margin-bottom: -1px;
+    margin-left: units(0.5);
+    width: 0.65em;
+  }
+
+  &:hover::after {
+    @include add-background-svg('#{$external-link-hover}');
+  }
+}

src/stylesheets/core/mixins/_media-block-img.scss

@@ -0,0 +1,4 @@
+@mixin media-block-img($margin-right: units(1)) {
+  float: left;
+  margin-right: $margin-right;
+}

src/stylesheets/core/mixins/_media-link.scss

@@ -0,0 +1,5 @@
+// TODO: Add documentation instructions for using this class on image links
+@mixin media-link {
+  display: inline-block;
+  line-height: 0;
+}

src/stylesheets/core/mixins/_usa-list-styles.scss

@@ -0,0 +1,10 @@
+@mixin usa-list-styles {
+  ul,
+  ol {
+    @extend %usa-list;
+  }
+
+  li {
+    @extend %usa-list-item;
+  }
+}

src/stylesheets/core/mixins/_usa-table-styles.scss

@@ -0,0 +1,5 @@
+@mixin usa-table-styles {
+  table {
+    @extend %usa-table;
+  }
+}

src/stylesheets/core/mixins/_usa-typography.scss

@@ -0,0 +1,58 @@
+@mixin usa-typography-base-styles {
+  p {
+    @include typeset-p;
+  }
+
+  a {
+    @include typeset-link;
+  }
+}
+
+@mixin usa-headings-styles {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @extend %usa-heading;
+  }
+
+  h1 {
+    @include h1;
+  }
+
+  h2 {
+    @include h2;
+  }
+
+  h3 {
+    @include h3;
+  }
+
+  h4 {
+    @include h4;
+  }
+
+  h5 {
+    @include h5;
+  }
+
+  h6 {
+    @include h6;
+  }
+}
+
+// Basic typography styles (paragraph text and links)
+@mixin theme-global-styles-basic {
+  @if $theme-global-styles-basic == true {
+    @include usa-typography-base-styles;
+  }
+}
+
+@mixin usa-content-styles {
+  @include usa-typography-base-styles;
+  @include usa-headings-styles;
+  @include usa-list-styles;
+  @include usa-table-styles;
+}

src/stylesheets/elements/_buttons.scss

@@ -4,24 +4,6 @@ $button-stroke: inset 0 0 0 units(2px);
 
 // Buttons
 
-@mixin button-disabled {
-  @include add-knockout-font-smoothing;
-  background-color: color('disabled');
-  color: color('white');
-  pointer-events: none;
-
-  &:hover,
-  &.usa-button-hover,
-  &:active,
-  &.usa-button-active,
-  &:focus,
-  &.usa-focus {
-    background-color: color('disabled');
-    border: 0;
-    box-shadow: none;
-  }
-}
-
 .usa-button,
 .usa-button:visited {
   @include border-box-sizing;

src/stylesheets/elements/_embed.scss

@@ -1,10 +1,6 @@
 $aspect-height: 9;
 $aspect-width: 16;
 
-@mixin embed-container ($height, $width) {
-  padding-bottom: percentage($height/$width);
-}
-
 .usa-embed-container {
   iframe,
   object,

src/stylesheets/elements/_figure.scss

@@ -2,12 +2,6 @@ img {
   max-width: 100%;
 }
 
-// TODO: Add documentation instructions for using this class on image links
-@mixin media-link {
-  display: inline-block;
-  line-height: 0;
-}
-
 .media_link {
   @include media-link();
 }

src/stylesheets/elements/_list.scss

@@ -12,17 +12,6 @@
   }
 }
 
-@mixin usa-list-styles {
-  ul,
-  ol {
-    @extend %usa-list;
-  }
-
-  li {
-    @extend %usa-list-item;
-  }
-}
-
 .usa-list {
   @extend %usa-list;
 

src/stylesheets/elements/_table.scss

@@ -35,12 +35,6 @@
   }
 }
 
-@mixin usa-table-styles {
-  table {
-    @extend %usa-table;
-  }
-}
-
 .usa-table {
   @extend %usa-table;
 }