_breakpoints.scss

/* BREAKPOINTS */

/*
--------------------------------------------------------------------------
BOOTSTRAP 4
--------------------------------------------------------------------------
Screens               Viewport Size   Container Width   Class Prefix
--------------------------------------------------------------------------
Extra small screens   < 576px         auto              .col-
Small screens         ≥ 576px         540px             .col-sm-
Medium screens        ≥ 768px         720px             .col-md-
Large screens         ≥ 992px         960px             .col-lg-
Extra Large screens   ≥ 1200px       1140px             .col-xl-
--------------------------------------------------------------------------
*/


/* --- CONFIG --- */

$cut: 0.02px;

$sm-1: 576px;
$md-2: 768px;
$lg-3: 992px;
$xl-4: 1200px;

$_sm-1: $sm-1 - $cut;
$_md-2: $md-2 - $cut;
$_lg-3: $lg-3 - $cut;
$_xl-4: $xl-4 - $cut;


/* --- MIXINS --- */


// Custom

@mixin --wid-max ($max) {
  @media (max-width: $max - $cut) { @content; }
}

@mixin wid-min-- ($min) {
  @media (min-width: $min) { @content; }
}

@mixin -wid- ($min, $max) {
  @media (min-width: $min) and (max-width: $max - $cut) { @content; }
}

@mixin --hei-max ($max) {
  @media (max-height: $max - $cut) { @content; }
}

@mixin hei-min-- ($min) {
  @media (min-height: $min) { @content; }
}


// Mobile or Desktop

@mixin --mobile {
  @media (max-width: $_md-2) { @content; }
}

@mixin -sm-mobile- {
  @media (min-width: $sm-1) and (max-width: $_md-2) { @content; }
}

@mixin -sm-lg- {
  @media (min-width: $sm-1) and (max-width: $_lg-3) { @content; }
}

@mixin desktop-- {
  @media (min-width: $md-2) { @content; }
}


// WIDTH RANGES

// Extra Small

// Small

@mixin --sm {
  @media (max-width: $_sm-1) { @content; }
}

@mixin -sm- {
  @media (min-width: $sm-1) and (max-width: $_md-2) { @content; }
}

@mixin sm-- {
  @media (min-width: $sm-1) { @content; }
}


// Medium

@mixin --md {
  @media (max-width: $_md-2) { @content; }
}

@mixin -md- {
  @media (min-width: $md-2) and (max-width: $_lg-3) { @content; }
}

@mixin md-- {
  @media (min-width: $md-2) { @content; }
}


// Large

@mixin --lg {
  @media (max-width: $_lg-3) { @content; }
}

@mixin -lg- {
  @media (min-width: $lg-3) and (max-width: $_xl-4) { @content; }
}

@mixin lg-- {
  @media (min-width: $lg-3) { @content; }
}


// Extra Large

@mixin --xl {
  @media (max-width: $_xl-4) { @content; }
}

@mixin xl-- {
  @media (min-width: $xl-4) { @content; }
}