_bounce-vertical

//
// Bounce vertical
//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//
.u-bounce-vertical {
  @include _hover() {
    @include _bounce-vertical(4px, .5s);
  }
}

_shake-vertical

//
// Shake vertical
//
.u-shake-vertical {
  @include _hover() {
    @include _shake-vertical();
  }
}

_vibrate-vertical

//
// Vibrate vertical
//
.u-vibrate-vertical {
  @include _hover() {
    @include _vibrate-vertical();
  }
}

_bounce-vertical

//
// Bounce horizontal
//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//
.u-bounce-horizontal {
  @include _hover() {
    @include _bounce-horizontal(4px, .5s);
  }
}

_shake-horizontal

//
// Shake horizontal
//
.u-shake-horizontal {
  @include _hover() {
    @include _shake-horizontal();
  }
}

_vibrate-horizontal

//
// Vibrate horizontal
//
.u-vibrate-horizontal {
  @include _hover() {
    @include _vibrate-horizontal();
  }
}

_bounce-scale

//
// Bounce scale
//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//
.u-bounce-scale {
  @include _hover() {
    @include _bounce-scale(4px, .5s);
  }
}

_shake-scale

//
// Shake scale
//
.u-shake-scale {
  @include _hover() {
    @include _shake-scale();
  }
}

_vibrate-scale

//
// Vibrate scale
//
.u-vibrate-scale {
  @include _hover() {
    @include _vibrate-scale();
  }
}

_extend-underline

//
// Extend the underline from the center.
// This mixin use the pseudo-elements.
//
.u-extend-underline {
  position: relative;

  &::after {
    @include _extend-underline();
  }

  @include _hover() {
    &::after {
      width: 100%;
    }
  }
}

_background-image-cover

//
// Background image cover + centering
//
.c-foo {
  @include background-image-cover();
  background-image: url(...);
}

_background-image-fixed

//
// Background image fixed
//
.c-foo {
  @include background-image-fixed();
  background-image: url(...);
}

_balloon-triangle

//
// Generate balloon triangle
//
// @param  string  $position
// @param  length  $size              triangle size
// @param  hex     $background-color
// @param  length  $border-size
// @param  hex     $border-color
//
.c-foo {
  @include _balloon-triangle(top, 10px, #000, 1px, #f00);
}

_balloon

//
// Generate balloon
//
// @param  string  $angle   position of arrow
// @param  hash    $params  properties for decoration
//
.c-foo {
  @include _balloon(
    top,
    (
      background-color: null,
      border-color: null,
      border-size: null,
      triangle-size: 10px,
    )
  );
}

_circle

//
// Creating circle
//
// @param  length  $size
//
.c-foo {
  @include _circle(10px);
}

_clearfix

//
// Clearfix helper
//
.u-clearfix {
  @include _clearfix();
}

_hover

//
// Hover event helper
//
.c-foo {
  @include _hover() {
    opacity: .8;
  }
}

_form-control-base-padding

//
// Sets padding for form controls
//
.c-foo {
  @include _form-control-base-padding();
}

_form-control-base-border

//
// Form Control border color
// @var  hex
//
$_form-control-border-color: _light($_color-gray) !default;

// Form Control border color when hover
// @var  hex
//
$_form-control-border-color-hover: $_color-gray !default;

// Form Control border color when focus
// @var  hex
//
$_form-control-border-color-focus: #85B7D9 !default;

//
// Sets border for form controls
//
.c-foo {
  @include _form-control-base-border();
}

_ghost

//
// Ghost style
//
// @param  hash  properties for decoration
//
.c-btn-ghost {
  @include _btn();
  @include _ghost((
    border-size: 1px,
    color: #fff,
  ));
}

_list-unstyled

//
// Unstyled list
//
.c-list-unstyled {
  @include _list-unstyled();
}

_list-inline

//
// Inline list
//
.c-list-inline {
  @include _list-inline();
}

_margin

//
// Sets margin
//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
//
.c-foo {
  @include _margin(1, 2, 1, 2);
  // or @include _margin(1, 2);
  // other @include _margin(1);
  // other @include _margin(1, 2, 1);
  // other @include _margin-top(1);
  // other @include _margin-right(1);
  // other @include _margin-bottom(1);
  // other @include _margin-left(1);
}

_overlay

//
// Overlay (This overlay is using ::before element)
//
// @param  hex  $hex
// @param  int  $opacity
//
.c-foo {
  @include _overlay(#000);
}

_padding

//
// Sets padding
//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
//
.c-foo {
  @include _padding(1, 2, 1, 2);
  // or @include _padding(1, 2);
  // other @include _padding(1);
  // other @include _padding(1, 2, 1);
  // other @include _padding-top(1);
  // other @include _padding-right(1);
  // other @include _padding-bottom(1);
  // other @include _padding-left(1);
}

_position

//
// The position shorthand
//
// @param  string  $position
// @param  length  $top
// @param  length  $right
// @param  length  $bottom
// @param  length  $left
// @param  int     $z-index
//
.c-foo {
  @include _position(absolute, 10px, 0, 5%, 0, 1);
  // other @include _position(absolute, 10px, 0, 5%, 0);
  // other @include _position(absolute, null, 10px);
}

_media-min

//
// min-width media query
//
// @param  size|length  $min  width
//
.c-foo {
  @include _media-min(md) {
    // Can be specified sm, md, lg
    // some styles
  }
  @include _media-min(64rem) {
    // some styles
  }
}

_media-max

//
// max-width media query
//
// @param  size|length  $max  width
//
.c-foo {
  @include _media-max(md) {
    // Can be specified sm, md, lg
    // some styles
  }
  @include _media-max(64rem) {
    // some styles
  }
}

_media-sm-only

//
// Media query for smartphone size
//
.c-foo {
  @include _media-sm-only() {
    // some styles
  }
}

_media-md-only

//
// Media query for tablet size
//
.c-foo {
  @include _media-md-only() {
    // some styles
  }
}

_media-lg-only

//
// Media query for pc size
//
.c-foo {
  @include _media-lg-only() {
    // some styles
  }
}

_square

//
// Creating square
//
// @param  length  $size
// @param  length  $border-radius
//
.c-foo {
  @include _square(20px);
  // other @include _square(20px, 4px);
}

_transition

//
// Transition helper
//
// @param  string  $property
//
a {
  @include _transition(all);
  color: #f00;
  &:hover {
    color: #f9c;
  }
}

_transition-all

//
// Transition helper
//
a {
  @include _transition-all();
  color: #f00;
  &:hover {
    color: #f9c;
  }
}

_transition-size

//
// Transition helper
//
.c-progress-bar {
  @include _transition-size();
  @include _size(10px);
  &:hover {
    width: 20px;
  }
}

_transition-opacity

//
// Transition helper
//
img {
  @include _transition-opacity();
  opacity: 1;
  &:hover {
    opacity: .8;
  }
}

_triangle-top

//
// Generate top triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex  $color
//
.c-triangle-top {
  @include _triangle-top(10px, 10px, #000);
}

_triangle-right

//
// Generate right triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex  $color
//
.c-triangle-right {
  @include _triangle-right(10px, 10px, #000);
}

_triangle-bottom

//
// Generate bottom triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex  $color
//
.c-triangle-bottom {
  @include _triangle-bottom(10px, 10px, #000);
}

_triangle-left

//
// Generate left triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex  $color
//
.c-triangle-left {
  @include _triangle-left(10px, 10px, #000);
}

_font-size

//
// Sets px and rem font-sizes
//
// @param  rem|px  $font-size
//
.c-foo {
  @include _font-size(16px);
}

_line-height

//
// Sets line-height for vertical rhythum
//
// @param  rem|px  $font-size  font size
//
.c-foo {
  @include _line-height(16px);
}

_font-size-line-height

//
// Sets px and rem font-sizes and line-height for vertical rhythum
//
// @param  rem|px  $font-size
//
.c-foo {
  @include _font-size-line-height(16px);
}