scss/web-design-standards/_scss/core/_utilities.scss
// Mobile-first media query helper
@mixin media($bp) {
@media screen and (min-width: #{$bp}) {
@content;
}
}
// Clearfix helper
@mixin clearfix() {
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
// Screen reader only helper
.usa-sr-only {
position: absolute;
left:-999em;
}
@mixin sr-only() {
position: absolute;
left:-999em;
}
// Unstyled list helper
@mixin unstyled-list() {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
li {
display: list-item;
margin: 0;
&:before {
display: none;
}
&:after {
display: none;
}
}
}
// Content size helpers
@mixin allow-layout-classes {
margin-left: auto;
margin-right: 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;
}
}
}