frontend_v2/src/styles/mixins.scss
/*Mixins for global styles*/
@import './variables.scss';
/*Box Shadow-------*/
@mixin box-shadow($x: 0px, $y: 0px, $blur: 4px, $rad: 0px, $color: $gray-medium) {
box-shadow: $x $y $blur $rad $color;
}
/*Gradient -------*/
@mixin linear-gradient-bg($dir, $from, $to) {
background-image: linear-gradient($dir, $from, $to);
}
/*Screen size mixins*/
@mixin screen-small() {
@media (max-width: $screen-sm) {
@content;
}
}
@mixin screen-small-medium() {
@media screen and (max-width: $screen-sm) {
@content;
}
}
@mixin screen-small-medium() {
@media screen and (max-width: $screen-sm-md) {
@content;
}
}
@mixin screen-medium() {
@media screen and (min-width: $screen-sm-md) and (max-width: $screen-md) {
@content;
}
}
@mixin screen-large() {
@media screen and (min-width: $screen-md) {
@content;
}
}
/*Keyframe for animation -------*/
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}