_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(lg) {
    @include _bounce-vertical(4px, .5s);
  }
}

_shake-vertical()

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

Shake vertical

scss

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

_vibrate-vertical()

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

Vibrate vertical

scss

.c-foo {
  @include _hover(lg) {
    @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(lg) {
    @include _bounce-horizontal(4px, .5s);
  }
}

_shake-horizontal()

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

Shake horizontal

scss

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

_vibrate-horizontal()

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

Vibrate horizontal

scss

.c-foo {
  @include _hover(lg) {
    @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(lg) {
    @include _bounce-scale(1.2, .5s);
  }
}

_shake-scale()

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

Shake scale

scss

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

_vibrate-scale()

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

Vibrate scale

scss

.c-foo {
  @include _hover(lg) {
    @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(lg) {
    &::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>

_between-content()

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

Sets Child elements margin

scss

//
// @param  int  $coefficient
//

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

html

<div class="u-between-content">
  ...
</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(lg) {
    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-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-top()

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

Sets margin-top

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_margin-right()

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

Sets margin-right

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_margin-bottom()

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

Sets margin-bottom

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_margin-left()

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

Sets margin-left

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_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
// @param  boolean  $apply-margin-scale
//

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

_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-top()

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

Sets padding-top

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_padding-right()

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

Sets padding-right

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_padding-bottom()

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

Sets padding-bottom

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_padding-left()

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

Sets padding-left

scss

//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

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

_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
// @param  boolean  $apply-margin-scale
//

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

_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);

_top()

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

Sets top

scss

//
// @param  int  $coefficient
//

@include _top(1);
@include _top(10px);

_right()

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

Sets right

scss

//
// @param  int  $coefficient
//

@include _right(1);
@include _right(10px);

_bottom()

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

Sets bottom

scss

//
// @param  int  $coefficient
//

@include _bottom(1);
@include _bottom(10px);

_left()

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

Sets left

scss

//
// @param  int  $coefficient
//

@include _left(1);
@include _left(10px);

_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     $colors
//

.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     $colors
//

.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     $colors
//

.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     $colors
//

.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(color, font-size);
  color: #f00;
  font-size: 12px;

  @include _hover(lg) {
    color: #f9c;
    font-size: 14px;
  }
}

_font-size()

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

Sets px and rem font-sizes

scss

//
// @param  int  $scale-or-font-size  Font size scaling factor.
//

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

_line-height()

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

Sets line-height for vertical rhythum

scss

//
// @param  int  $scale-or-font-size  Font size scaling factor.
//

.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  int  $font-size
//

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

html

English

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill

Japanese

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック

<h3>English</h3>

<p class="font-size-10px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-12px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-14px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-16px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-20px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-24px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-30px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-34px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-38px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-42px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-46px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<p class="font-size-50px">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill
<p>

<h3>Japanese</h3>

<p class="font-size-10px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-12px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-14px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-16px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-20px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-24px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-30px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-34px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-38px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-42px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-46px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

<p class="font-size-50px">
  あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック
<p>

_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();
  }
}

_invisible()

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

Invisible helper

scss

.c-foo {
  @include _invisible();
}

$_form-control-border-color

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

Form Control border color

scss

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

$_form-control-border-color-hover

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

Form Control border color when hover

scss

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

$_form-control-border-color-focus

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

Form Control border color when focus

scss

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