-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add utilities stylesheet and claryifing notes
- Loading branch information
Showing
5 changed files
with
288 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 3 additions & 12 deletions
15
packages/formation/sass/formation-overrides/_variables.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
258 changes: 258 additions & 0 deletions
258
packages/formation/sass/formation-overrides/core/_utilities.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,258 @@ | ||
| // This is a copy of the entire ~uswds/src/stylesheets/core/utilities file | ||
| // so that we can convert the rem values for USWDS v3. | ||
|
|
||
| @import '../../override-function'; | ||
|
|
||
|
|
||
| // Heading mixins | ||
| @mixin title { | ||
| font-size: $title-font-size; | ||
| font-weight: $font-bold; | ||
| } | ||
|
|
||
| @mixin h1 { | ||
| font-size: $h1-font-size; | ||
| font-weight: $font-bold; | ||
| } | ||
|
|
||
| @mixin h2 { | ||
| font-size: $h2-font-size; | ||
| font-weight: $font-bold; | ||
| } | ||
|
|
||
| @mixin h3 { | ||
| font-size: $h3-font-size; | ||
| font-weight: $font-bold; | ||
| } | ||
|
|
||
| @mixin h4 { | ||
| font-size: $h4-font-size; | ||
| font-weight: $font-bold; | ||
| } | ||
|
|
||
| @mixin h5 { | ||
| font-size: $h5-font-size; | ||
| font-weight: $font-bold; | ||
| } | ||
|
|
||
| @mixin h6 { | ||
| font-size: $h6-font-size; | ||
| font-weight: $font-normal; | ||
| line-height: $base-line-height; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| // Focus state mixin | ||
| @mixin focus { | ||
| outline: $focus-outline; | ||
| outline-offset: $focus-spacing; | ||
| } | ||
|
|
||
| // Mobile-first media query helper | ||
| @mixin media($bp) { | ||
| @media screen and (min-width: #{$bp}) { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
| // Screen reader only helper | ||
| @mixin sr-only() { | ||
| position: absolute; | ||
| left: -999em; | ||
| } | ||
|
|
||
| // This "negates" the sr-only() helper; useful if | ||
| // we want the default state of something to be | ||
| // for screen readers only, but we want to force | ||
| // it to show for sighted users under more specific | ||
| // conditions. | ||
| @mixin not-sr-only() { | ||
| position: static; | ||
| } | ||
|
|
||
| .usa-sr-only { | ||
| @include sr-only(); | ||
| } | ||
|
|
||
| // Aria hidden helper | ||
| @mixin accessibly-hidden() { | ||
| &[aria-hidden=true] { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| // Unstyled list helper | ||
| @mixin unstyled-list() { | ||
| @include margin(0 null); | ||
| list-style-type: none; | ||
| padding-left: 0; | ||
|
|
||
| > li { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| // Font smoothing mixin | ||
| // Only use for light text on dark background | ||
| // TODO: Remove after adding PostCSS | ||
| @mixin font-smoothing { | ||
| -moz-osx-font-smoothing: grayscale; | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
|
|
||
| // Content size helpers | ||
| @mixin allow-layout-classes { | ||
| @include margin(null auto); | ||
|
|
||
| &.width-one-half { | ||
| @include media($medium-screen) { | ||
| width: 50%; | ||
| } | ||
| } | ||
|
|
||
| &.width-one-third { | ||
| @include media($medium-screen) { | ||
| width: 33%; | ||
| } | ||
| } | ||
|
|
||
| &.width-two-thirds { | ||
| @include media($medium-screen) { | ||
| width: 67%; | ||
| } | ||
| } | ||
|
|
||
| &.width-one-fourth { | ||
| @include media($medium-screen) { | ||
| width: 25%; | ||
| } | ||
| } | ||
|
|
||
| &.width-three-fourths { | ||
| @include media($medium-screen) { | ||
| width: 75%; | ||
| } | ||
| } | ||
|
|
||
| &.align-left { | ||
| @include media($medium-screen) { | ||
| float: left; | ||
| margin-right: 2em; | ||
| margin-top: 0.5em; | ||
| } | ||
| } | ||
|
|
||
| &.align-right { | ||
| @include media($medium-screen) { | ||
| float: right; | ||
| margin-left: 2em; | ||
| margin-top: 0.5em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin display-icon($icon, $direction, $size, $margin, $hover) { | ||
| &::#{$direction} { | ||
| background-image: url('#{$image-path}/#{$icon}.png'); | ||
| background-image: url('#{$image-path}/#{$icon}.svg'); | ||
| background-size: 100%; | ||
| content: ''; | ||
| display: inline-block; | ||
| height: $size; | ||
| width: $size; | ||
|
|
||
| /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ | ||
| @if $direction == 'after' { | ||
| margin-left: $margin; | ||
| } @else { | ||
| margin-right: $margin; | ||
| } | ||
| /* stylelint-enable */ | ||
| } | ||
|
|
||
| @if $hover == 'hover' { | ||
| &:hover::#{$direction} { | ||
| background-image: url('#{$image-path}/#{$icon}-hover.png'); | ||
| background-image: url('#{$image-path}/#{$icon}-hover.svg'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin usa-sidenav-list { | ||
| @include unstyled-list(); | ||
|
|
||
| > li { | ||
| background-color: transparent; | ||
| border-top: 1px solid $color-gray; | ||
| font-size: $h4-font-size; | ||
|
|
||
| &:first-child { | ||
| border-top: none; | ||
| } | ||
| } | ||
|
|
||
| a { | ||
| border: none; | ||
| color: $color-base; | ||
| display: block; | ||
| font-family: $font-sans; | ||
| line-height: 1.3; | ||
| padding: scale-rule(0.85rem 1rem 0.85rem $site-margins-mobile); | ||
| text-decoration: none; | ||
|
|
||
| &:hover { | ||
| background-color: $color-gray-lightest; | ||
| color: $color-primary; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| &:focus { | ||
| outline-offset: 0; | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */ | ||
| border-left: $sidenav-current-border-width solid $color-primary; | ||
| color: $color-primary; | ||
| font-weight: $font-bold; | ||
| padding-left: $site-margins-mobile - $sidenav-current-border-width; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin usa-sidenav-sublist { | ||
| @include unstyled-list(); | ||
| margin: 0; | ||
| width: 100%; | ||
|
|
||
| li { | ||
| border: none; | ||
| font-size: $h5-font-size; | ||
| } | ||
|
|
||
| a { | ||
| padding-left: scale-rem(2.8rem); | ||
| line-height: $heading-line-height; | ||
|
|
||
| &:hover, | ||
| &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */ | ||
| border: none; | ||
| padding-left: scale-rem(2.8rem); | ||
| } | ||
| } | ||
|
|
||
| .usa-sidenav-sub_list { | ||
| a { | ||
| padding-left: scale-rem(3.8rem); | ||
|
|
||
| &:focus { | ||
| outline-offset: 0; | ||
| } | ||
|
|
||
| &:hover { | ||
| padding-left: scale-rem(3.8rem); | ||
| } | ||
| } | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
packages/formation/sass/formation-overrides/elements/_buttons.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
packages/formation/sass/formation-overrides/elements/_typography.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters