| Current Path : /home/emeraadmin/public_html/src/scss/ |
| Current File : /home/emeraadmin/public_html/src/scss/_mixins.scss |
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
@mixin input-placeholder {
&.placeholder {
@content;
}
&:-moz-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
&::-webkit-input-placeholder {
@content;
}
}
@mixin transition($transition...) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-property($property...) {
-moz-transition-property: $property;
-o-transition-property: $property;
-webkit-transition-property: $property;
transition-property: $property;
}
@mixin transition-duration($duration...) {
-moz-transition-property: $duration;
-o-transition-property: $duration;
-webkit-transition-property: $duration;
transition-property: $duration;
}
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin rotate ($deg) {
@include transform(rotate(#{$deg}deg));
}
@mixin scale($scale) {
@include transform(scale($scale));
}
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
@mixin translate3d ($x, $y, $z) {
@include transform(translate3d($x, $y, $z));
}
@mixin skew ($x, $y) {
@include transform(skew(#{$x}deg, #{$y}deg));
}
@mixin transform-origin ($origin) {
moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin flex-direction($direction) {
-webkit-flex-direction: $direction;
-moz-flex-direction: $direction;
-ms-flex-direction: $direction;
flex-direction: $direction;
}
@mixin flex-wrap($wrap) {
-webkit-flex-wrap: $wrap;
-moz-flex-wrap: $wrap;
-ms-flex-wrap: $wrap;
flex-wrap: $wrap;
}
@mixin flex-flow($flow) {
-webkit-flex-flow: $flow;
-moz-flex-flow: $flow;
-ms-flex-flow: $flow;
flex-flow: $flow;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin flex-grow($grow) {
-webkit-flex-grow: $grow;
-moz-flex-grow: $grow;
-ms-flex-grow: $grow;
flex-grow: $grow;
}
@mixin flex-shrink($shrink) {
-webkit-flex-shrink: $shrink;
-moz-flex-shrink: $shrink;
-ms-flex-shrink: $shrink;
flex-shrink: $shrink;
}
@mixin flex-basis($width) {
-webkit-flex-basis: $width;
-moz-flex-basis: $width;
-ms-flex-basis: $width;
flex-basis: $width;
}
@mixin justify-content($justify) {
-webkit-justify-content: $justify;
-moz-justify-content: $justify;
-ms-justify-content: $justify;
justify-content: $justify;
-ms-flex-pack: $justify;
}
@mixin align-content($align) {
-webkit-align-content: $align;
-moz-align-content: $align;
-ms-align-content: $align;
align-content: $align;
}
@mixin align-items($align) {
-webkit-align-items: $align;
-moz-align-items: $align;
-ms-align-items: $align;
align-items: $align;
}
@mixin align-self($align) {
-webkit-align-self: $align;
-moz-align-self: $align;
-ms-align-self: $align;
align-self: $align;
}
@mixin pseudo-element($element) {
&:#{$element}, &::#{$element} {
@content;
}
}
$breakpoints: ( "phone" : 400px, "phone-wide" : 480px, "phablet" : 560px, "tablet-small": 640px, "tablet" : 768px, "tablet-wide" : 1024px, "desktop" : 1248px, "desktop-wide": 1440px);
@mixin mq($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type==max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}
@mixin theme-keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}