_u-divider.scss

/* ============================================================================
   @UTILITIES -> DIVIDER
   ========================================================================= */


/**
 * Create a divider between elements.
 *
 * @demo
 * http://codepen.io/team/westfieldlabs/full/xFHfk#divider
 */


/**
 * Settings.
 */

/**
 * Apply at breakpoints.
 */

// Which breakpoints do you want to use?
$u-divider-breakpoints:               $default-breakpoints !default;

// What do you want to apply it too?
$u-divider-breakpoint-toggle-top:     false !default;

$u-divider-breakpoint-toggle-right:   false !default;

$u-divider-breakpoint-toggle-bottom:  false !default;

$u-divider-breakpoint-toggle-left:    false !default;

// Colour
$u-divider-colour:                    $colour-text-base !default;

// Thickness
$u-divider-thickness:                 1 !default;

// Style
$u-divider-style:                     solid !default;


/**
 * Top.
 */

%u-divider-top,
.u-divider-top {
  @include to-rem(border-top, $u-divider-thickness $u-divider-style $u-divider-colour);
}

@if $u-divider-breakpoint-toggle-top {
  @include generate-at-breakpoints('.u-divider-top', $u-divider-breakpoints) {
    @include to-rem(border-top, $u-divider-thickness $u-divider-style $u-divider-colour);
  }
}// end if


/**
 * Right.
 */

%u-divider-right,
.u-divider-right {
  @include to-rem(border-right, $u-divider-thickness $u-divider-style
    $u-divider-colour);
}

@if $u-divider-breakpoint-toggle-right {
  @include generate-at-breakpoints('.u-divider-right', $u-divider-breakpoints) {
    @include to-rem(border-right, $u-divider-thickness $u-divider-style
      $u-divider-colour);}
}// end if


/**
 * Bottom.
 */

%u-divider-bottom,
.u-divider-bottom {
  @include to-rem(border-bottom, $u-divider-thickness $u-divider-style
    $u-divider-colour);
}

@if $u-divider-breakpoint-toggle-bottom {
  @include generate-at-breakpoints('.u-divider-bottom', $u-divider-breakpoints) {
    @include to-rem(border-bottom, $u-divider-thickness $u-divider-style
      $u-divider-colour);}
}// end if


/**
 * Left.
 */

%u-divider-left,
.u-divider-left {
  @include to-rem(border-left, $u-divider-thickness $u-divider-style
    $u-divider-colour);
}

@if $u-divider-breakpoint-toggle-left {
  @include generate-at-breakpoints('.u-divider-left', $u-divider-breakpoints) {
    @include to-rem(border-left, $u-divider-thickness $u-divider-style
      $u-divider-colour);
  }
}// end if