diff --git a/src/stylesheets/components/_checklist.scss b/src/stylesheets/components/_checklist.scss index 25498a2e0a..ba40f50f7e 100644 --- a/src/stylesheets/components/_checklist.scss +++ b/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; } } diff --git a/src/stylesheets/components/_media-block.scss b/src/stylesheets/components/_media-block.scss index ad08176909..73be8ed364 100644 --- a/src/stylesheets/components/_media-block.scss +++ b/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; } diff --git a/src/stylesheets/components/_search.scss b/src/stylesheets/components/_search.scss index d45f995d5e..f7357df3b5 100644 --- a/src/stylesheets/components/_search.scss +++ b/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; diff --git a/src/stylesheets/core/mixins/_add-checkbox-placeholder.scss b/src/stylesheets/core/mixins/_add-checkbox-placeholder.scss new file mode 100644 index 0000000000..b82dd4d4fe --- /dev/null +++ b/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; + } +} diff --git a/src/stylesheets/core/mixins/_add-success-mark.scss b/src/stylesheets/core/mixins/_add-success-mark.scss new file mode 100644 index 0000000000..3887bcfe72 --- /dev/null +++ b/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%; + } +} diff --git a/src/stylesheets/core/mixins/_all.scss b/src/stylesheets/core/mixins/_all.scss index 21af7d1c34..9c2a62ac5a 100644 --- a/src/stylesheets/core/mixins/_all.scss +++ b/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'; diff --git a/src/stylesheets/core/mixins/_button-disabled.scss b/src/stylesheets/core/mixins/_button-disabled.scss new file mode 100644 index 0000000000..b383d294ca --- /dev/null +++ b/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; + } +} diff --git a/src/stylesheets/core/mixins/_embed-container.scss b/src/stylesheets/core/mixins/_embed-container.scss new file mode 100644 index 0000000000..7f6134a8d0 --- /dev/null +++ b/src/stylesheets/core/mixins/_embed-container.scss @@ -0,0 +1,3 @@ +@mixin embed-container ($height, $width) { + padding-bottom: percentage($height/$width); +} diff --git a/src/stylesheets/core/mixins/_external-link.scss b/src/stylesheets/core/mixins/_external-link.scss new file mode 100644 index 0000000000..7f4931fa8c --- /dev/null +++ b/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}'); + } +} diff --git a/src/stylesheets/core/mixins/_media-block-img.scss b/src/stylesheets/core/mixins/_media-block-img.scss new file mode 100644 index 0000000000..2fae3eb464 --- /dev/null +++ b/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; +} diff --git a/src/stylesheets/core/mixins/_media-link.scss b/src/stylesheets/core/mixins/_media-link.scss new file mode 100644 index 0000000000..7df8b2e059 --- /dev/null +++ b/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; +} diff --git a/src/stylesheets/core/mixins/_usa-list-styles.scss b/src/stylesheets/core/mixins/_usa-list-styles.scss new file mode 100644 index 0000000000..72a5bea0cf --- /dev/null +++ b/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; + } +} diff --git a/src/stylesheets/core/mixins/_usa-table-styles.scss b/src/stylesheets/core/mixins/_usa-table-styles.scss new file mode 100644 index 0000000000..df54d9547f --- /dev/null +++ b/src/stylesheets/core/mixins/_usa-table-styles.scss @@ -0,0 +1,5 @@ +@mixin usa-table-styles { + table { + @extend %usa-table; + } +} diff --git a/src/stylesheets/core/mixins/_usa-typography.scss b/src/stylesheets/core/mixins/_usa-typography.scss new file mode 100644 index 0000000000..0669995f3b --- /dev/null +++ b/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; +} diff --git a/src/stylesheets/elements/_buttons.scss b/src/stylesheets/elements/_buttons.scss index 20f7d916b0..65d91ee99e 100644 --- a/src/stylesheets/elements/_buttons.scss +++ b/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; diff --git a/src/stylesheets/elements/_embed.scss b/src/stylesheets/elements/_embed.scss index 284678e3d2..1ccc85910e 100644 --- a/src/stylesheets/elements/_embed.scss +++ b/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, diff --git a/src/stylesheets/elements/_figure.scss b/src/stylesheets/elements/_figure.scss index 7af1259124..a08962712c 100644 --- a/src/stylesheets/elements/_figure.scss +++ b/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(); } diff --git a/src/stylesheets/elements/_list.scss b/src/stylesheets/elements/_list.scss index 5afaab28e2..309f2dca70 100644 --- a/src/stylesheets/elements/_list.scss +++ b/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; diff --git a/src/stylesheets/elements/_table.scss b/src/stylesheets/elements/_table.scss index 5e06c69447..475d1a1737 100644 --- a/src/stylesheets/elements/_table.scss +++ b/src/stylesheets/elements/_table.scss @@ -35,12 +35,6 @@ } } -@mixin usa-table-styles { - table { - @extend %usa-table; - } -} - .usa-table { @extend %usa-table; } diff --git a/src/stylesheets/elements/_typography.scss b/src/stylesheets/elements/_typography.scss index 8c635cba55..d030b66691 100644 --- a/src/stylesheets/elements/_typography.scss +++ b/src/stylesheets/elements/_typography.scss @@ -10,65 +10,6 @@ html { } } -@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; -} - .usa-prose { @include typeset($theme-prose-font-family); } @@ -98,24 +39,6 @@ html { @include typeset-link; } -@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}'); - } -} - // External link consider "effortless style approach": // [href^="http:"]:not([href*="my-domain.com"]) // [href^="https:"]:not([href*="my-domain.com"])