123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
- $n: index($breakpoint-names, $name);
- @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
- }
- @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
- $min: map-get($breakpoints, $name);
- @return if($min != 0, $min, null);
- }
- @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
- $next: breakpoint-next($name, $breakpoints);
- @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
- }
- @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
- $min: breakpoint-min($name, $breakpoints);
- @if $min {
- @media (min-width: $min) {
- @content;
- }
- } @else {
- @content;
- }
- }
- @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
- $max: breakpoint-max($name, $breakpoints);
- @if $max {
- @media (max-width: $max) {
- @content;
- }
- } @else {
- @content;
- }
- }
- @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
- @include media-breakpoint-up($name, $breakpoints) {
- @include media-breakpoint-down($name, $breakpoints) {
- @content;
- }
- }
- }
- @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
- @include media-breakpoint-up($lower, $breakpoints) {
- @include media-breakpoint-down($upper, $breakpoints) {
- @content;
- }
- }
- }
|