_split-querries.scss

// Split bootstrap media queries by stylesheet
// @link https://alistapart.com/article/mobile-first-css-is-it-time-for-a-rethink/

// Sample usage:
// <link href="/css/default.min.css" rel="stylesheet" />
// <link href="/css/mobile.min.css" media="screen and (max-width: 767.98px)" rel="stylesheet" />
// <link href="/css/tablet.min.css" media="screen and (min-width: 768px) and (max-width: 991.98px)" rel="stylesheet" />
// <link href="/css/desktop.min.css" media="screen and (min-width: 992px)" rel="stylesheet" />
// <link href="/css/print.min.css" media="print" rel="stylesheet" />

// @include media-breakpoint-only(xs) => mobile.scss
// @include media-breakpoint-only(sm) => mobile.scss
// @include media-breakpoint-only(md) => mobile.scss
// @include media-breakpoint-down(md) => mobile.scss (no need for media query wrapper)
// @include media-breakpoint-down(sm) => mobile.scss

// @include media-breakpoint-only(md) => tablet.scss
// @include media-breakpoint-between(md, lg) => tablet.scss

// @include media-breakpoint-up(lg) => desktop.scss (no need for media query wrapper)
// @include media-breakpoint-up(xl) => desktop.scss
// @include media-breakpoint-up(xxl) => desktop.scss
// @include media-breakpoint-only(xl) => desktop.scss
// @include media-breakpoint-only(xxl) => desktop.scss

$css-sheet: null !default;
$css-sheet-only: (
  xs: "mobile",
  sm: "mobile",
  md: "tablet",
  lg: "desktop",
  xl: "desktop",
  xxl: "desktop",
) !default;

@mixin media-default() {
  @if ($css-sheet and $css-sheet != "default") {
    // Skip
  } @else {
    @content;
  }
}

// This tweaked version has special support for mobile stylesheets
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $include: true;
  $max: breakpoint-max($name, $breakpoints);

  @if ($css-sheet) {
    // Don't include mobile specific breakpoints except in mobile sheet
    @if ($name == "sm" or $name == "md" or $name == "xs") {
      $include: false;
    }

    @if ($css-sheet == "mobile") {
      // Include mobile specific breakpoints
      @if ($name == "sm" or $name == "md" or $name == "xs") {
        $include: true;
        // On md, it's already the max on mobile
        @if $name == "md" {
          $max: false;
        }
      } @else {
        // Skip other breakpoints (lg, xl, xxl)
      }
    }
  }

  @if $include {
    @if $max {
      @media (max-width: $max) {
        @content;
      }
    } @else {
      @content;
    }
  }
}

// This tweaked version has special support for desktop stylesheets
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $include: true;
  $min: breakpoint-min($name, $breakpoints);

  @if ($css-sheet) {
    // Don't include desktop specific breakpoints except on desktop sheet
    @if ($name == "lg" or $name == "xl" or $name == "xxl") {
      $include: false;
    }

    @if ($css-sheet == "desktop") {
      // include desktop specific breakpoint
      @if ($name == "lg" or $name == "xl" or $name == "xxl") {
        $include: true;

        // It's already the lowest of desktop
        @if $name == "lg" {
          $min: false;
        }
      } @else {
        // Skip other breakpoints (xs, sm, md) on desktop
        $include: false;
      }
    }
  }

  @if $include {
    @if $min {
      @media (min-width: $min) {
        @content;
      }
    } @else {
      @content;
    }
  }
}

// Support break point only through $css-sheet-only mapping
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  $next: breakpoint-next($name, $breakpoints);
  $max: breakpoint-max($next, $breakpoints);
  $include: true;

  // Check if we are using the right css sheet
  @if ($css-sheet and $css-sheet != "default") {
    $only-sheet: map-get($css-sheet-only, $name);
    @if ($only-sheet and $only-sheet != $css-sheet) {
      // Ignore if not on the right sheet
      $include: false;
    }
  }

  @if $include {
    @if $min != null and $max != null {
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    } @else if $max == null {
      @include media-breakpoint-up($name, $breakpoints) {
        @content;
      }
    } @else if $min == null {
      @include media-breakpoint-down($next, $breakpoints) {
        @content;
      }
    }
  }
}

// Limited support for tablet styles
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  @if ($css-sheet and $css-sheet != "tablet" and ($lower == "md" and $upper == "lg")) {
    // Ignore md => lg, it should only be included in tablet.css
  } @else {
    $min: breakpoint-min($lower, $breakpoints);
    $max: breakpoint-max($upper, $breakpoints);

    @if $min != null and $max != null {
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    } @else if $max == null {
      @include media-breakpoint-up($lower, $breakpoints) {
        @content;
      }
    } @else if $min == null {
      @include media-breakpoint-down($upper, $breakpoints) {
        @content;
      }
    }
  }
}