_helpers.scss

/*------------------------------------*\
    $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;
}

/**
 * Add/remove margins
 */
.push {
  margin: 0 !important;
}

.push--top {
  margin-top: 0 !important;
}

.push--right {
  margin-right: 0 !important;
}

.push--bottom {
  margin-bottom: 0 !important;
}

.push--left {
  margin-left: 0 !important;
}

.push--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.push--sides {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.push-half {
  margin: 0 !important;
}

.push-half--top {
  margin-top: 0 !important;
}

.push-half--right {
  margin-right: 0 !important;
}

.push-half--bottom {
  margin-bottom: 0 !important;
}

.push-half--left {
  margin-left: 0 !important;
}

.push-half--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.push-half--sides {
  margin-right: 0 !important;
  margin-left: 0 !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: 0 !important;
}

.soft--top {
  padding-top: 0 !important;
}

.soft--right {
  padding-right: 0 !important;
}

.soft--bottom {
  padding-bottom: 0 !important;
}

.soft--left {
  padding-left: 0 !important;
}

.soft--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.soft--sides {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.soft-half {
  padding: 0 !important;
}

.soft-half--top {
  padding-top: 0 !important;
}

.soft-half--right {
  padding-right: 0 !important;
}

.soft-half--bottom {
  padding-bottom: 0 !important;
}

.soft-half--left {
  padding-left: 0 !important;
}

.soft-half--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.soft-half--sides {
  padding-right: 0 !important;
  padding-left: 0 !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;
}

.align--middle {
  vertical-align: middle !important;
}

.align--top {
  vertical-align: top !important;
}

.inline-block {
  display: inline-block !important;
}

.display-block {
  display: block !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;
}

/**
 * Underline text
*/
.underline {
  text-decoration: underline !important;
}

.no--underline {
  text-decoration: none !important;
}

/**
 * Force no wrap on text
 */
.no-wrap {
  white-space: nowrap !important;
}

/**
* Force long character sequences to split over lines, e.g. email addresses
*/
.word-wrap {
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}

/**
 * Hide content off-screen without resorting to `display:none;`, also provide
 * breakpoint specific hidden elements.
 */
@mixin accessibility {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.accessibility,
.visuallyhidden {
  @include accessibility;
}

.hidden,
.no-js .js-visible,
.js .js-hidden {
  display: none !important;
}

// Base-level rules cannot contain the parent-selector-referencing character '&'.
.hidden--mobile {
  @include media(mobile) {
    display: none !important;
  }
}

.hidden--tablet {
  @include media(tablet) {
    display: none !important;
  }
}

%no-bullet {
  list-style: none;
}

.no-bullets {
  @extend %no-bullet;
}

/**
 * Truncate text with an ellipsis
 */
.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
}

/**
 * Table cells need this hack in order
 * for truncation to work normally
 */
.truncate--table-cell {
  max-width: 1px;
}

.truncate--small {
  max-width: 125px;
}