Permalink
Fetching contributors…
Cannot retrieve contributors at this time
111 lines (91 sloc) 2.04 KB
// @page Pattern Library/Utilities
// @name General
//
// @description
// These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.
//
// @state .us-clearfix - Clear floats.
// @state .us-float--left - Float element to the left.
// @state .us-float--right - Float element to the right.
// @state .us-align--left - Align content of the element to the left.
// @state .us-align--center - Align content of the element to the center.
// @state .us-align--right - Align content of the element to the right.
// @state .us-block - Display element as a block.
// @state .us-color--cyan - Change content color to blue, navy, typecyan, cyan, red, green.
// @state .us-list--reset - Reset list style.
//
// @markup
// <div class='{$modifiers}'>
// <p>content</p>
// </div>
// Clear floats
.us-clearfix {
@extend %clearfix;
}
// Reset list styling
.us-list--reset {
@extend %reset-box-model;
list-style: none;
}
// Blocked element
.us-blocked {
display: block;
}
// Margins
.us-trailered {
margin-bottom: 1em;
}
.us-trailered--large {
margin-bottom: 1.5em;
}
.us-trailered--small {
margin-bottom: .5em;
}
// Floats
.us-float--left {
@extend %float-left;
}
.us-float--right {
@extend %float-right;
}
.us-align--left {
text-align: left;
}
.us-align--right {
text-align: right;
}
.us-align--center {
text-align: center;
}
// Colors
$colors: (
"blue" $c-blue,
"navy" $c-navy,
"typecyan" $c-typecyan,
"cyan" $c-cyan,
"red" $c-red,
"green" $c-green,
"typegrey" $c-typegrey,
"typegrey-2" $c-typegrey-2,
"inputgrey" $c-inputgrey,
"bordergrey" $c-bordergrey,
"keylinegrey" $c-keylinegrey
);
@each $color in $colors {
.us-color--#{nth($color, 1)} {
color: nth($color, 2);
}
.us-background-color--#{nth($color, 1)} {
background: nth($color, 2);
}
}
// Fonts
.us-font--normal {
@include normal-font;
}
.us-font--heading-p {
@include heading-font;
}
.us-font--heading-s {
@include heading-font;
}