_bounce-vertical()

  • /src/css/core/mixin/_animation.scss

Bounce vertical

scss

//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-vertical(4px, .5s);
  }
}

_shake-vertical()

  • /src/css/core/mixin/_animation.scss

Shake vertical

scss

.c-foo {
  @include _hover() {
    @include _shake-vertical();
  }
}

_vibrate-vertical()

  • /src/css/core/mixin/_animation.scss

Vibrate vertical

scss

.c-foo {
  @include _hover() {
    @include _vibrate-vertical();
  }
}

_bounce-horizontal()

  • /src/css/core/mixin/_animation.scss

Bounce horizontal

scss

//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-horizontal(4px, .5s);
  }
}

_shake-horizontal()

  • /src/css/core/mixin/_animation.scss

Shake horizontal

scss

.c-foo {
  @include _hover() {
    @include _shake-horizontal();
  }
}

_vibrate-horizontal()

  • /src/css/core/mixin/_animation.scss

Vibrate horizontal

scss

.c-foo {
  @include _hover() {
    @include _vibrate-horizontal();
  }
}

_bounce-scale()

  • /src/css/core/mixin/_animation.scss

Bounce scale

scss

//
// @param   float              $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-scale(1.2, .5s);
  }
}

_shake-scale()

  • /src/css/core/mixin/_animation.scss

Shake scale

scss

.c-foo {
  @include _hover() {
    @include _shake-scale();
  }
}

_vibrate-scale()

  • /src/css/core/mixin/_animation.scss

Vibrate scale

scss

.c-foo {
  @include _hover() {
    @include _vibrate-scale();
  }
}

_extend-underline()

  • /src/css/core/mixin/_animation.scss

Extend the underline from the center.

  • This mixin use the pseudo-elements.

scss

.c-foo a {
  @include _hover() {
    &::after {
      @include _extend-underline();
    }
  }
}

_background-image-cover()

  • /src/css/core/mixin/_background-image.scss

Background image cover + centering

scss

.c-foo {
  @include _background-image-cover();
  background-image: url(...);
}

_background-image-fixed()

  • /src/css/core/mixin/_background-image.scss

Background image fixed

scss

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

_balloon-triangle()

  • /src/css/core/mixin/_balloon-triangle.scss

Generate balloon triangle

scss

//
// @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, #fff, 1px, #ccc);
  position: relative;
  background-color: #fff;
  border: 1px solid #ccc;
}

_balloon()

  • /src/css/core/mixin/_balloon.scss

Generate balloon

scss

//
// @param  string  $angle   position of arrow
// @param  hash    $params  properties for decoration
//

.c-foo {
  @include _balloon(top, (
    background-color: #fff,
    border-color: #ccc,
    border-size: 1px,
    triangle-size: 10px,
  ));
}

_clearfix()

  • /src/css/core/mixin/_clearfix.scss

Clearfix helper

scss

.clerfix {
  @include _clearfix();
}

html

<div class="clearfix">
  <img style="float: right">
  ....
</div>

_content()

  • /src/css/core/mixin/_content.scss

Sets Child elements margin

scss

//
// @param  int  $coefficient
//

.u-content {
  @include _content(1);
}

html

<div class="u-content">
  ...
</div>

_hover()

  • /src/css/core/mixin/_event.scss

Hover event helper

scss

//
// @param  size|length  $size
//

img {
  @include _hover() {
    opacity: .8;
  }
}

img {
  @include _hover(md) {
    opacity: .8;
  }
}

_form-control-base-padding()

  • /src/css/core/mixin/_form.scss

Sets padding for form controls

scss

input[type="text"],
select {
  @include _form-control-base-padding();
}

$_form-control-border-color

  • /src/css/core/mixin/_form.scss

Form Control border color

scss

$_form-control-border-color: _light($_color-gray);

$_form-control-border-color-hover

  • /src/css/core/mixin/_form.scss

Form Control border color when hover

scss

$_form-control-border-color-hover: $_color-gray;

$_form-control-border-color-focus

  • /src/css/core/mixin/_form.scss

Form Control border color when focus

scss

$_form-control-border-color-focus: #85B7D9;

_form-control-base-border()

  • /src/css/core/mixin/_form.scss

Sets border for form controls

scss

input[type="text"],
select {
  @include _form-control-base-border();
}

_ghost()

  • /src/css/core/mixin/_ghost.scss

Ghost button helper

scss

//
// @param  hash  $params
//   border-size  length
//   color        hex
//

.c-ghost-btn {
  @include _btn();
  @include _ghost((
    border-size: 1px,
    color: #fff,
  ));
  @include _padding(1, 2);
}

html

<a class="c-ghost-btn" role="button">btn</a>

_list-unstyled()

  • /src/css/core/mixin/_list.scss

Unstyled list

scss

ul.u-unstyled-list {
  @include _list-unstyled();
}

_list-inline()

  • /src/css/core/mixin/_list.scss

Inline list

scss

ul.u-inline-list {
  @include _list-inline();
}

_margin()

  • /src/css/core/mixin/_margin.scss

Sets margin

scss

//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
//

@include _margin(1);
@include _margin(1, 2);
@include _margin(1, 2, .5);
@include _margin(1, 2, .5, 2);
@include _margin(10px);

_margin-top()

  • /src/css/core/mixin/_margin.scss

Sets margin-top

scss

//
// @param  int  $coefficient
//

@include _margin-top(1);
@include _margin-top(10px);

_margin-right()

  • /src/css/core/mixin/_margin.scss

Sets margin-right

scss

//
// @param  int  $coefficient
//

@include _margin-right(1);
@include _margin-right(10px);

_margin-bottom()

  • /src/css/core/mixin/_margin.scss

Sets margin-bottom

scss

//
// @param  int  $coefficient
//

@include _margin-bottom(1);
@include _margin-bottom(10px);

_margin-left()

  • /src/css/core/mixin/_margin.scss

Sets margin-left

scss

//
// @param  int  $coefficient
//

@include _margin-left(1);
@include _margin-left(10px);

_media-min()

  • /src/css/core/mixin/_media-query.scss

min-width media query

scss

//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-min(md) {
    ...
  }
}

_media-max()

  • /src/css/core/mixin/_media-query.scss

max-width media query

scss

//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-max(md) {
    ...
  }
}

_media-only()

  • /src/css/core/mixin/_media-query.scss

Specific size only media query

scss

//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-only(md) {
    ...
  }
}

_overlay()

  • /src/css/core/mixin/_overlay.scss

Overlay helper

scss

//
// @param  hex  $hex
// @param  int  $opacity
//

.c-foo {
  @include _overlay(#fff, .5);
}

_padding()

  • /src/css/core/mixin/_padding.scss

Sets padding

scss

//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
//

@include _padding(1);
@include _padding(1, 2);
@include _padding(1, 2, .5);
@include _padding(1, 2, .5, 2);
@include _padding(10px);

_padding-top()

  • /src/css/core/mixin/_padding.scss

Sets padding-top

scss

//
// @param  int  $coefficient
//

@include _padding-top(1);
@include _padding-top(10px);

_padding-right()

  • /src/css/core/mixin/_padding.scss

Sets padding-right

scss

//
// @param  int  $coefficient
//

@include _padding-right(1);
@include _padding-right(10px);

_padding-bottom()

  • /src/css/core/mixin/_padding.scss

Sets padding-bottom

scss

//
// @param  int  $coefficient
//

@include _padding-bottom(1);
@include _padding-bottom(10px);

_padding-left()

  • /src/css/core/mixin/_padding.scss

Sets padding-left

scss

//
// @param  int  $coefficient
//

@include _padding-left(1);
@include _padding-left(10px);

_position()

  • /src/css/core/mixin/_position.scss

The position shorthand

scss

//
// @param  string  $position
// @param  length  $top
// @param  length  $right
// @param  length  $bottom
// @param  length  $left
// @param  int     $z-index
//

@include _position(absolute, 10px, null, null, 10px, 1);

_circle()

  • /src/css/core/mixin/_shape.scss

Create circle object

scss

//
// @param  length  $size
//

.c-foo {
  @include _circle(30px);
}

_square()

  • /src/css/core/mixin/_shape.scss

Creating square

scss

//
// @param  length  $size
// @param  length  $border-radius
//

.c-foo {
  @include _square(30px);
}

_triangle-top()

  • /src/css/core/mixin/_shape.scss

Generate top triangle style

scss

//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-top {
  @include _triangle-top(10px, 10px, #000);
}

_triangle-right()

  • /src/css/core/mixin/_shape.scss
//
// Generate right triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-right {
  _triangle-right(10px, 10px, #000);
}

_triangle-bottom()

  • /src/css/core/mixin/_shape.scss
//
// Generate bottom triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-bottom {
  @include _triangle-bottom(10px, 10px, #000);
}

_triangle-left()

  • /src/css/core/mixin/_shape.scss
//
// Generate left triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-left {
  @include _triangle-left(10px, 10px, #000);
}

_transition()

  • /src/css/core/mixin/_transition.scss

Transition helper

scss

//
// @param  string  $property
//

a {
  @include _transition(all);
  color: #f00;

  @include _hover() {
    color: #f9c;
  }
}

_font-size()

  • /src/css/core/mixin/_typography.scss

Sets px and rem font-sizes

scss

//
// @param  rem|px  $font-size
//

.c-foo {
  @include _font-size(12px);
}

_line-height()

  • /src/css/core/mixin/_typography.scss

Sets line-height for vertical rhythum

scss

//
// @param  rem|px  $font-size  font size
//

.c-foo {
  @include _line-height(12px);
}

_font-size-line-height()

  • /src/css/core/mixin/_typography.scss

Sets px and rem font-sizes and line-height for vertical rhythum

scss

//
// @param  rem|px  $font-size
//

.c-foo {
  @include _font-size-line-height(24px);
}

_hidden()

  • /src/css/core/mixin/_visibility.scss

Hidden helper

  • This helper set "position" property.
  • We recomment to use this helper on elements with no position specified.

scss

.c-foo {
  @include _hidden();

  @include _media-min(md) {
      @include _visible();
  }
}

_visible()

  • /src/css/core/mixin/_visibility.scss

Visible helper

  • This helper set "position" property.
  • We recomment to use this helper on elements with no position specified.

scss

.c-foo {
  @include _hidden();

  @include _media-min(md) {
      @include _visible();
  }
}