Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
185 lines (155 sloc) 5.887 kb
/*------------------------------------*\
$HELPER
\*------------------------------------*/
/**
* A series of helper classes to use arbitrarily. Only use a helper class if an
* element/component doesn’t already have a class to which you could apply this
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
* that ruleset as opposed to adding the `.float--left` class to the markup.
*
* A lot of these classes carry `!important` as you will always want them to win
* out over other selectors.
*/
/**
* Add/remove floats
*/
.float--right { float:right!important; }
.float--left { float:left !important; }
.float--none { float:none !important; }
/**
* Text alignment
*/
.text--left { text-align:left !important; }
.text--center { text-align:center!important; }
.text--right { text-align:right !important; }
/**
* Font weights
*/
.weight--light { font-weight:300!important; }
.weight--normal { font-weight:400!important; }
.weight--semibold { font-weight:600!important; }
/**
* Add/remove margins
*/
.push { margin: $base-spacing-unit!important; }
.push--top { margin-top: $base-spacing-unit!important; }
.push--right { margin-right: $base-spacing-unit!important; }
.push--bottom { margin-bottom:$base-spacing-unit!important; }
.push--left { margin-left: $base-spacing-unit!important; }
.push--ends { margin-top: $base-spacing-unit!important; margin-bottom:$base-spacing-unit!important; }
.push--sides { margin-right: $base-spacing-unit!important; margin-left: $base-spacing-unit!important; }
.push-half { margin: $half-spacing-unit!important; }
.push-half--top { margin-top: $half-spacing-unit!important; }
.push-half--right { margin-right: $half-spacing-unit!important; }
.push-half--bottom { margin-bottom:$half-spacing-unit!important; }
.push-half--left { margin-left: $half-spacing-unit!important; }
.push-half--ends { margin-top: $half-spacing-unit!important; margin-bottom:$half-spacing-unit!important; }
.push-half--sides { margin-right: $half-spacing-unit!important; margin-left: $half-spacing-unit!important; }
.flush { margin: 0!important; }
.flush--top { margin-top: 0!important; }
.flush--right { margin-right: 0!important; }
.flush--bottom { margin-bottom:0!important; }
.flush--left { margin-left: 0!important; }
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
.flush--sides { margin-right: 0!important; margin-left: 0!important; }
/**
* Add/remove paddings
*/
.soft { padding: $base-spacing-unit!important; }
.soft--top { padding-top: $base-spacing-unit!important; }
.soft--right { padding-right: $base-spacing-unit!important; }
.soft--bottom { padding-bottom:$base-spacing-unit!important; }
.soft--left { padding-left: $base-spacing-unit!important; }
.soft--ends { padding-top: $base-spacing-unit!important; padding-bottom:$base-spacing-unit!important; }
.soft--sides { padding-right: $base-spacing-unit!important; padding-left: $base-spacing-unit!important; }
.soft-half { padding: $half-spacing-unit!important; }
.soft-half--top { padding-top: $half-spacing-unit!important; }
.soft-half--right { padding-right: $half-spacing-unit!important; }
.soft-half--bottom { padding-bottom:$half-spacing-unit!important; }
.soft-half--left { padding-left: $half-spacing-unit!important; }
.soft-half--ends { padding-top: $half-spacing-unit!important; padding-bottom:$half-spacing-unit!important; }
.soft-half--sides { padding-right: $half-spacing-unit!important; padding-left: $half-spacing-unit!important; }
.hard { padding: 0!important; }
.hard--top { padding-top: 0!important; }
.hard--right { padding-right: 0!important; }
.hard--bottom { padding-bottom:0!important; }
.hard--left { padding-left: 0!important; }
.hard--ends { padding-top: 0!important; padding-bottom:0!important; }
.hard--sides { padding-right: 0!important; padding-left: 0!important; }
/**
* Pull items full width of `.island` parents.
*/
.full-bleed{
margin-right:-$base-spacing-unit!important;
margin-left: -$base-spacing-unit!important;
.islet &{
margin-right:-($half-spacing-unit)!important;
margin-left: -($half-spacing-unit)!important;
}
}
/**
* Add a help cursor to any element that gives the user extra information on
* `:hover`.
*/
.informative{
cursor:help!important;
}
/**
* Mute an object by reducing its opacity.
*/
.muted{
opacity:0.5!important;
filter:alpha(opacity = 50)!important;
}
/**
* Align items to the right where they imply progression/movement forward, e.g.:
*
<p class=proceed><a href=#>Read more...</a></p>
*
*/
.proceed{
text-align:right!important;
}
/**
* Add a right-angled quote to links that imply movement, e.g.:
*
<a href=# class=go>Read more</a>
*
*/
.go:after{
content:"\00A0" "\00BB"!important;
}
/**
* Apply capital case to an element (usually a `strong`).
*/
.caps{
text-transform:uppercase!important;
}
/**
* Hide content off-screen without resorting to `display:none;`, also provide
* breakpoint specific hidden elements.
*/
@mixin accessibility{
border:0!important;
clip:rect(0 0 0 0)!important;
height:1px!important;
margin:-1px!important;
overflow:hidden!important;
padding:0!important;
position: absolute!important;
width:1px!important;
}
.accessibility,
.visuallyhidden{
@include accessibility;
}
@if $responsive{
@each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
@include media-query(#{$state}){
.accessibility--#{$state},
.visuallyhidden--#{$state}{
@include accessibility;
}
}
}
}
Jump to Line
Something went wrong with that request. Please try again.