_bounce-vertical()
Bounce vertical
scss
//
// @param length $px bounce size
// @param second|milisecond $delay: 0 animate time
//
.c-foo {
@include _hover() {
@include _bounce-vertical(4px, .5s);
}
}
Bounce vertical
//
// @param length $px bounce size
// @param second|milisecond $delay: 0 animate time
//
.c-foo {
@include _hover() {
@include _bounce-vertical(4px, .5s);
}
}
Shake vertical
.c-foo {
@include _hover() {
@include _shake-vertical();
}
}
Vibrate vertical
.c-foo {
@include _hover() {
@include _vibrate-vertical();
}
}
Bounce horizontal
//
// @param length $px bounce size
// @param second|milisecond $delay: 0 animate time
//
.c-foo {
@include _hover() {
@include _bounce-horizontal(4px, .5s);
}
}
Shake horizontal
.c-foo {
@include _hover() {
@include _shake-horizontal();
}
}
Vibrate horizontal
.c-foo {
@include _hover() {
@include _vibrate-horizontal();
}
}
Bounce scale
//
// @param float $px bounce size
// @param second|milisecond $delay: 0 animate time
//
.c-foo {
@include _hover() {
@include _bounce-scale(1.2, .5s);
}
}
Shake scale
.c-foo {
@include _hover() {
@include _shake-scale();
}
}
Vibrate scale
.c-foo {
@include _hover() {
@include _vibrate-scale();
}
}
Extend the underline from the center.
.c-foo a {
@include _hover() {
&::after {
@include _extend-underline();
}
}
}
Background image cover + centering
.c-foo {
@include _background-image-cover();
background-image: url(...);
}
Background image fixed
.c-foo {
@include _background-image-fixed();
background-image: url(...);
}
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, #fff, 1px, #ccc);
position: relative;
background-color: #fff;
border: 1px solid #ccc;
}
Generate balloon
//
// @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 helper
.clerfix {
@include _clearfix();
}
<div class="clearfix">
<img style="float: right">
....
</div>
Sets Child elements margin
//
// @param int $coefficient
//
.u-content {
@include _content(1);
}
<div class="u-content">
...
</div>
Hover event helper
//
// @param size|length $size
//
img {
@include _hover() {
opacity: .8;
}
}
img {
@include _hover(md) {
opacity: .8;
}
}
Sets padding for form controls
input[type="text"],
select {
@include _form-control-base-padding();
}
Form Control border color
$_form-control-border-color: _light($_color-gray);
Form Control border color when hover
$_form-control-border-color-hover: $_color-gray;
Form Control border color when focus
$_form-control-border-color-focus: #85B7D9;
Sets border for form controls
input[type="text"],
select {
@include _form-control-base-border();
}
//
// @param hash $params
// border-size length
// color hex
//
.c-ghost-btn {
@include _btn();
@include _ghost((
border-size: 1px,
color: #fff,
));
@include _padding(1, 2);
}
<a class="c-ghost-btn" role="button">btn</a>
Unstyled list
ul.u-unstyled-list {
@include _list-unstyled();
}
Inline list
ul.u-inline-list {
@include _list-inline();
}
Sets margin
//
// @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);
Sets margin-top
//
// @param int $coefficient
//
@include _margin-top(1);
@include _margin-top(10px);
Sets margin-right
//
// @param int $coefficient
//
@include _margin-right(1);
@include _margin-right(10px);
Sets margin-bottom
//
// @param int $coefficient
//
@include _margin-bottom(1);
@include _margin-bottom(10px);
Sets margin-left
//
// @param int $coefficient
//
@include _margin-left(1);
@include _margin-left(10px);
min-width media query
//
// @param size|length $size width
//
.c-foo {
@include _media-min(md) {
...
}
}
max-width media query
//
// @param size|length $size width
//
.c-foo {
@include _media-max(md) {
...
}
}
Specific size only media query
//
// @param size|length $size width
//
.c-foo {
@include _media-only(md) {
...
}
}
Overlay helper
//
// @param hex $hex
// @param int $opacity
//
.c-foo {
@include _overlay(#fff, .5);
}
Sets padding
//
// @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);
Sets padding-top
//
// @param int $coefficient
//
@include _padding-top(1);
@include _padding-top(10px);
Sets padding-right
//
// @param int $coefficient
//
@include _padding-right(1);
@include _padding-right(10px);
Sets padding-bottom
//
// @param int $coefficient
//
@include _padding-bottom(1);
@include _padding-bottom(10px);
Sets padding-left
//
// @param int $coefficient
//
@include _padding-left(1);
@include _padding-left(10px);
The position shorthand
//
// @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);
Create circle object
//
// @param length $size
//
.c-foo {
@include _circle(30px);
}
Creating square
//
// @param length $size
// @param length $border-radius
//
.c-foo {
@include _square(30px);
}
Generate top triangle style
//
// @param length $width
// @param length $height
// @param hex $color
//
.c-triangle-top {
@include _triangle-top(10px, 10px, #000);
}
//
// Generate right triangle style
//
// @param length $width
// @param length $height
// @param hex $color
//
.c-triangle-right {
_triangle-right(10px, 10px, #000);
}
//
// Generate bottom triangle style
//
// @param length $width
// @param length $height
// @param hex $color
//
.c-triangle-bottom {
@include _triangle-bottom(10px, 10px, #000);
}
//
// Generate left triangle style
//
// @param length $width
// @param length $height
// @param hex $color
//
.c-triangle-left {
@include _triangle-left(10px, 10px, #000);
}
Transition helper
//
// @param string $property
//
a {
@include _transition(all);
color: #f00;
@include _hover() {
color: #f9c;
}
}
Sets px and rem font-sizes
//
// @param rem|px $font-size
//
.c-foo {
@include _font-size(12px);
}
Sets line-height for vertical rhythum
//
// @param rem|px $font-size font size
//
.c-foo {
@include _line-height(12px);
}
Sets px and rem font-sizes and line-height for vertical rhythum
//
// @param rem|px $font-size
//
.c-foo {
@include _font-size-line-height(24px);
}
Hidden helper
.c-foo {
@include _hidden();
@include _media-min(md) {
@include _visible();
}
}
Visible helper
.c-foo {
@include _hidden();
@include _media-min(md) {
@include _visible();
}
}