wikijs-fork/client/scss/base/mixins.scss

163 lines
3.3 KiB
SCSS
Raw Normal View History

2017-04-02 23:56:47 +00:00
/**
* 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};
}
/**
* Layout Mixins
*/
@mixin from($device) {
@media screen and (min-width: $device) {
@content;
}
}
@mixin until($device) {
@media screen and (max-width: $device - 1px) {
@content;
}
}
@mixin mobile {
@media screen and (max-width: $tablet - 1px) {
@content;
}
}
@mixin tablet {
@media screen and (min-width: $tablet) {
@content;
}
}
@mixin tablet-only {
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
@content;
}
}
@mixin touch {
@media screen and (max-width: $desktop - 1px) {
@content;
}
}
@mixin desktop {
@media screen and (min-width: $desktop) {
@content;
}
}
@mixin desktop-only {
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
@content;
}
}
@mixin widescreen {
@media screen and (min-width: $widescreen) {
@content;
}
}
2017-06-18 22:35:33 +00:00
// Nucleo Icons
@mixin nc-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
@mixin nc-flip($horiz, $vert, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: scale($horiz, $vert);
-moz-transform: scale($horiz, $vert);
-ms-transform: scale($horiz, $vert);
-o-transform: scale($horiz, $vert);
transform: scale($horiz, $vert);
}