85 lines
1.9 KiB
SCSS
85 lines
1.9 KiB
SCSS
|
/**
|
||
|
|
* Clearfix
|
||
|
|
*
|
||
|
|
* @return {string} Clearfix attribute
|
||
|
|
*/
|
||
|
|
@mixin clearfix {
|
||
|
|
&:after {
|
||
|
|
content: "";
|
||
|
|
display: table;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Placeholder attribute for inputs
|
||
|
|
*
|
||
|
|
* @return {string} Placeholder attributes
|
||
|
|
*/
|
||
|
|
@mixin placeholder {
|
||
|
|
&::-webkit-input-placeholder {@content};
|
||
|
|
&::-moz-placeholder {@content}
|
||
|
|
&:-ms-input-placeholder {@content}
|
||
|
|
&:placeholder-shown {@content};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Spinner element
|
||
|
|
*
|
||
|
|
* @param {string} $color - Color
|
||
|
|
* @param {string} $dur - Animation Duration
|
||
|
|
* @param {int} $width - Width
|
||
|
|
* @param {int} $height [$width] - height
|
||
|
|
*
|
||
|
|
* @return {string} Spinner element
|
||
|
|
*/
|
||
|
|
@mixin spinner($color,$dur,$width,$height:$width) {
|
||
|
|
width: $width;
|
||
|
|
height: $height;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow:0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
|
||
|
|
@include prefix(animation, spin $dur linear infinite);
|
||
|
|
@include keyframes(spin) {
|
||
|
|
100%{
|
||
|
|
@include prefix(transform, rotate(360deg));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Prefixes for keyframes
|
||
|
|
*
|
||
|
|
* @param {string} $animation-name - The animation name
|
||
|
|
*
|
||
|
|
* @return {string} Prefixed keyframes attributes
|
||
|
|
*/
|
||
|
|
@mixin keyframes($animation-name) {
|
||
|
|
@-webkit-keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
@-moz-keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
@-o-keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
@keyframes #{$animation-name} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Prefix function for browser compatibility
|
||
|
|
*
|
||
|
|
* @param {string} $property - Property name
|
||
|
|
* @param {any} $value - Property value
|
||
|
|
*
|
||
|
|
* @return {string} Prefixed attributes
|
||
|
|
*/
|
||
|
|
@mixin prefix($property, $value) {
|
||
|
|
-webkit-#{$property}: #{$value};
|
||
|
|
-moz-#{$property}: #{$value};
|
||
|
|
-ms-#{$property}: #{$value};
|
||
|
|
-o-#{$property}: #{$value};
|
||
|
|
#{$property}: #{$value};
|
||
|
|
}
|