mirror of https://github.com/requarks/wiki
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.1 KiB
150 lines
3.1 KiB
/**
|
|
* 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;
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|