@function beyond-font-path($path) {
@if $beyond-use-helper { @return font-path($path); } @return $path
}
@function beyond-image-path($path) {
@if $beyond-use-helper { @return image-path($path); } @return $path
}
@mixin size($size) {
width: $size; height: $size;
}
@mixin y-scroll {
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@mixin focus-outline {
outline: 0; box-shadow: 0 0 0 1px rgba(60, 66, 87, .16), 0 1px 1px 0 rgba(0, 0, 0, .12), 0 0 0 4px rgba(58, 151, 212, .28);
}
@mixin ripple($size, $left, $top) {
&.ripple:before { top: $top; left: $left; overflow: visible; transition: .3s all; position: absolute; content: ''; border-radius: 100%; display: block; z-index: -1; @include size($size); background-color: #e6e9ea; opacity: 0; transform: scale(.6); } &.ripple:hover { &:before { opacity: .5; transform: scale(1); } }
}
@mixin absolute-center {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
}
@mixin flex-center {
display: flex; justify-content: space-between; align-items: center;
}
@function space-classname($type, $side, $i, $size: '') {
@if $size == '' { @return #{$type}#{$side}-#{$i}; } @return #{$type}#{$side}-#{$size}-#{$i};
}
@mixin space-props($type, $side, $i, $size: '') {
$spacer: 1rem; $space: $spacer * $i * .25; $prop: 'margin'; @if $space == 0rem { $space: 0; } @if $type == 'p' { $prop: 'padding'; } $classname: space-classname($type, $side, $i, $size); .#{$classname} { @if $side == '' { #{$prop}: $space !important; } @else if $side == 't' { #{$prop}-top: $space !important; } @else if $side == 'b' { #{$prop}-bottom: $space !important; } @else if $side == 'l' { #{$prop}-left: $space !important; } @else if $side == 'r' { #{$prop}-right: $space !important; } @else if $side == 'x' { #{$prop}-left: $space !important; #{$prop}-right: $space !important; } @else if $side == 'y' { #{$prop}-top: $space !important; #{$prop}-bottom: $space !important; } @else { @error "Unknown side #{$side}."; } }
}
@mixin each-space-props($size: '') {
@each $type in $space-types { @each $side in $sides { @for $i from 0 through $space-size-max { @include space-props($type, $side, $i, $size); } } }
}