59 lines
1.0 KiB
SCSS
59 lines
1.0 KiB
SCSS
@mixin window-style-modal($background: var(--color-white), $shadow: hsla(212, 7%, 55%, 0.19)) {
|
|
box-shadow: 0 0 8px 0 $shadow;
|
|
background-color: $background;
|
|
}
|
|
|
|
@mixin breakpoint($min: 0, $max: 0) {
|
|
$type: type-of($min);
|
|
|
|
@if $type==string {
|
|
@if $min==xs {
|
|
@media (max-width: 768px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else if $min==sm {
|
|
@media (max-width: 1024px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else if $min==md {
|
|
@media (max-width: 1200px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else if $min==lg {
|
|
@media (min-width: 1201px) {
|
|
@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;
|
|
}
|
|
}
|
|
}
|