46 lines
963 B
SCSS
46 lines
963 B
SCSS
// Box shadow
|
|
@mixin box-shadow($value) {
|
|
-webkit-box-shadow: $value;
|
|
box-shadow: $value;
|
|
}
|
|
|
|
// Property prefix
|
|
@mixin prefix($property, $value, $prefixes: ()) {
|
|
@each $prefix in $prefixes {
|
|
#{'-' + $prefix + '-' + $property}: $value;
|
|
}
|
|
|
|
#{$property}: $value;
|
|
}
|
|
|
|
// Divice breakpoint
|
|
$breakpoints: (
|
|
'desktop': 1600px,
|
|
'mini-desktop': 1399px,
|
|
'laptop': 1199px,
|
|
'tablet': 991px,
|
|
'phone-landscape': 767px,
|
|
'phone-portrait': 575px
|
|
) !default;
|
|
|
|
// Device prefix for responsive
|
|
$prefix: (
|
|
'desktop': 'xxl',
|
|
'mini-desktop': 'xl',
|
|
'laptop': 'lg',
|
|
'tablet': 'md',
|
|
'phone-landscape': 'sm',
|
|
'phone-portrait': 'xs'
|
|
);
|
|
|
|
// Mixin for media query
|
|
@mixin respond-to($breakpoint) {
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
|
@media ($media-max: map-get($breakpoints, $breakpoint)) {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@warn "Sorry unfortunately, no value could be retrieved from `#{$breakpoint}`. ";
|
|
}
|
|
} |