38 lines
1.1 KiB
SCSS
38 lines
1.1 KiB
SCSS
|
$breakpoint-m: 768px !default;
|
||
|
|
$breakpoint-l: 980px !default;
|
||
|
|
$breakpoint-xl: 1200px !default;
|
||
|
|
|
||
|
|
$grid-gutter: 16px !default;
|
||
|
|
|
||
|
|
// Mixins
|
||
|
|
|
||
|
|
// Breakpoints
|
||
|
|
// Example: .component { @include breakpoint(m) { background: red; } };
|
||
|
|
// Output: .component { @media only screen and (min-width: 720px) { background: red; } }
|
||
|
|
@mixin breakpoint($bp) {
|
||
|
|
@if $bp == xl {
|
||
|
|
@media only screen and (min-width: $breakpoint-xl) { @content ; }
|
||
|
|
}
|
||
|
|
@else if $bp == l {
|
||
|
|
@media only screen and (min-width: $breakpoint-l) { @content ; }
|
||
|
|
}
|
||
|
|
@else if $bp == m {
|
||
|
|
@media only screen and (min-width: $breakpoint-m) { @content ; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Background Color with Opacity
|
||
|
|
// Example: .element { @include background-rgba(#000000, .5); }}
|
||
|
|
// Output: .element { background: rgba(0, 0, 0, .5); }
|
||
|
|
@mixin background-rgba($color, $alpha) {
|
||
|
|
background-color: $color;
|
||
|
|
background-color: rgba($color, $alpha);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Animations
|
||
|
|
// Example: .fade { @mixin animate(1s); }
|
||
|
|
// Output: .fade { animation-duration: 1s; animation-fill-mode: both; }
|
||
|
|
@mixin animate($duration: 1s) {
|
||
|
|
animation-duration: $duration;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
}
|