hubl/src/styles/abstracts/_mixins.scss

59 lines
1.0 KiB
SCSS
Raw Normal View History

2020-05-11 15:15:59 +00:00
@mixin window-style-modal($background: var(--color-white), $shadow: hsla(212, 7%, 55%, 0.19)) {
2019-05-13 16:50:34 +00:00
box-shadow: 0 0 8px 0 $shadow;
background-color: $background;
2020-01-19 09:48:22 +00:00
}
@mixin breakpoint($min: 0, $max: 0) {
$type: type-of($min);
@if $type==string {
@if $min==xs {
@media (max-width: 576px) {
2020-01-19 09:48:22 +00:00
@content;
}
}
@else if $min==sm {
@media (max-width: 768px) {
2020-01-19 09:48:22 +00:00
@content;
}
}
@else if $min==md {
@media (max-width: 991px) {
2020-01-19 09:48:22 +00:00
@content;
}
}
@else if $min==lg {
@media (min-width: 992px) {
2020-01-19 09:48:22 +00:00
@content;
}
}
@else {
@warn "Beware ! Breakpoints mixin supports xs, sm, md, lg";
}
}
@else if $type==number {
$query: "all" !default;
@if $min !=0 and $max !=0 {
$query: "(min-width: #{$min}) and (max-width: #{$max})";
}
@else if $min !=0 and $max==0 {
$query: "(min-width: #{$min})";
}
@else if $min==0 and $max !=0 {
$query: "(max-width: #{$max});"
}
@media #{$query} {
@content;
}
}
}