Permalink
Fetching contributors…
Cannot retrieve contributors at this time
116 lines (94 sloc) 2.96 KB
// ----------------------------------------------------------------------------
//
// Utility Classes
//
// ----------------------------------------------------------------------------
// [doc] Clear floats. [/doc]
.clearfix
@extend %clearfix
// [doc] Hide using display: none. [/doc]
.is-hidden
display: none !important
// [doc] Hide using clip and make the element visible to Screen Readers. [/doc]
.accessibility
@extend %visually-hide
// [doc] Hide using opacity (modern browsers only). [/doc]
.is-faded-out
opacity: 0
// [doc] Split long words over multiple lines. Useful for hyperlinks. [/doc]
.break-text
@extend %prevent-text-breakouts
// [doc] Position an element left - eg. the primary nav. [/doc]
.split--left
float: left
// [doc] Position an element right
//
// Requires a .split--right__inner class on any children.
//
// This technique is used on the primary nav for the user features and search.
// [/doc]
.split--right
float: right
text-align: right
.split--right__inner
text-align: left
// [doc] Create an inline nav - eg. the primary nav. [/doc]
.nav--inline, .wv--nav--inline
> .nav__item, > noscript > .nav__item
vertical-align: top
@extend %inline-block
// [doc] Create a stacked nav - eg. the footer nav. [/doc]
.nav--stacked
> .nav__item
display: block
// [doc] Vertically center content.
//
// Use this class on the container and __inner on the element to be centered.
// [/doc]
.vertically-centered
display: table
width: 100%
.vertically-centered__inner
display: table-cell
vertical-align: middle
// [doc] Replace an input with an image or pseudo element.
//
// This will degrade gracefully for browsers that don't support pseudo elements.
// [/doc]
.hidden-input
@extend %visually-hide
.ie7 &, .no-js &
@extend %visually-show
// [doc] Float an image left. [/doc]
.img--left
float: left
margin-right: 1em
margin-bottom: 1em
// [doc] Float an image right. [/doc]
.img--right
float: right
margin-bottom: 1em
margin-left: 1em
// [doc] Force an image to fill its container. [/doc]
.img--fill
display: block
min-width: 100%
max-width: 100%
height: auto
// [doc]
// Apply default user avatar style - 50px & round.
//
// [/doc]
.user-avatar
+user-avatar-size(50)
// -----------------------------------------------------------------------------
// color classes
// -----------------------------------------------------------------------------
$colors: "darkgray" $darkgray, "titlegray" $titlegray, "bodygray" $bodygray, "lightgray" $lightgray, "subduedgray" $subduedgray, "darkblue" $darkblue, "navblue" $navblue, "lpblue" $lpblue, "linkblue" $linkblue, "teal" $teal, "green" $green, "yella" $yella, "orange" $orange, "red" $red, "plum" $plum, "mauve" $mauve, "pink" $pink, "darkcyan" $darkcyan, "softgreen" $softgreen, "beige" $beige, "maroon" $maroon, "darkred" $darkred
.color--white
color: #fff
@each $color in $colors
$key: nth($color, 1)
$value: nth($color, 2)
.color--#{$key}
color: #{$value}