81 lines
2.0 KiB
SCSS
81 lines
2.0 KiB
SCSS
|
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
|
||
|
|
|
||
|
|
@mixin rainbow {
|
||
|
|
@include break(xs) { --am-bp: 'xs'; background-color: rgba(yellow, .1); }
|
||
|
|
@include break(sm) { --am-bp: 'sm'; background-color: rgba(green, .1); }
|
||
|
|
@include break(md) { --am-bp: 'md'; background-color: rgba(blue, .1); }
|
||
|
|
@include break(lg) { --am-bp: 'lg'; background-color: rgba(indigo, .1); }
|
||
|
|
@include break(xl) { --am-bp: 'xl'; background-color: rgba(violet, .1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@mixin break($bps, $points: $grid-breakpoints) {
|
||
|
|
|
||
|
|
@each $bp in $bps {
|
||
|
|
|
||
|
|
$min: 0;
|
||
|
|
$max: 0;
|
||
|
|
|
||
|
|
@if str-length($bp) == 2 {
|
||
|
|
|
||
|
|
// only a single break point was received
|
||
|
|
$min: map-get($points, $bp);
|
||
|
|
@if $bp == "xl" {
|
||
|
|
// just in case the single breakpoint is extra large,
|
||
|
|
// we have an extra large to end of 10million-1.
|
||
|
|
$max: 9999999px;
|
||
|
|
} @else {
|
||
|
|
$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
|
||
|
|
}
|
||
|
|
|
||
|
|
} @else {
|
||
|
|
|
||
|
|
|
||
|
|
@if str-slice($bp, 0, 1) == "-" {
|
||
|
|
// no lower breakpoint was received
|
||
|
|
$min: null;
|
||
|
|
$max: map-get($points, str-slice($bp, 2, 3));
|
||
|
|
|
||
|
|
} @else {
|
||
|
|
|
||
|
|
$min: map-get($points, unquote(str-slice($bp, 0, 2)));
|
||
|
|
|
||
|
|
|
||
|
|
@if str-length($bp) == 3 {
|
||
|
|
// no upper break point was received
|
||
|
|
$max: null;
|
||
|
|
} @else {
|
||
|
|
$max: map-get($points, str-slice($bp, 4, 5));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $min != null and $max != null {
|
||
|
|
// Makes the @content apply between the min and max breakpoints
|
||
|
|
@media (min-width: $min) and (max-width: $max) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $min == null {
|
||
|
|
// Makes the @content apply to the given breakpoint and narrower.
|
||
|
|
@media (max-width: $max) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else if $max == null {
|
||
|
|
// Makes the @content apply to the given breakpoint and wider.
|
||
|
|
@media (min-width: $min) {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
} @else {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin cf {
|
||
|
|
&::after {
|
||
|
|
clear: both;
|
||
|
|
content: " ";
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|