bigbluebutton-Github/bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss

// We use these functions to get the ranges for the media queries variables.
@function lower-bound($range) {
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

$xsmall-range: (0em, 25.937em);
/* 0px, 415px */
$small-range: (26em, 40em);
/* 416px, 640px */
$medium-range: (40.063em, 64em);
/* 641px, 1024px */
$large-range: (64.063em, 90em);
/* 1025px, 1440px */
$xlarge-range: (90.063em, 120em);
/* 1441px, 1920px */
$xxlarge-range: (120.063em);
/* 1921px */

$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
$xsmall-only: "#{$screen} and (min-width:#{lower-bound($xsmall-range)}) and (max-width:#{upper-bound($xsmall-range)})";
$small-up: "#{$screen} and (min-width:#{lower-bound($small-range)})";
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

$hasPhoneDimentions: "#{$screen} and (max-height: 479px), #{$screen} and (max-width: 479px)";
$phone-landscape: "#{$screen} and (max-width: 480px) and (orientation: landscape)";

//Breakpoints used for permissions-overlay as relative units are not scalling properly on safari
$safari1280: "#{$screen} and (max-height: 1280px), #{$screen} and (max-width: 800px)";
$safari1440: "#{$screen} and (max-height: 1440px), #{$screen} and (max-width: 900px)";
$safari1680: "#{$screen} and (max-height: 1680px), #{$screen} and (max-width: 1050px)";
$safari1920: "#{$screen} and (max-height: 1920px), #{$screen} and (max-width: 1080px)";

$breakpoints: (
  'screen': $screen,
  'landscape': $landscape,
  'portrait': $portrait,
  'small': $small-only,
  'xsmall': $xsmall-only,
  'medium': $medium-only,
  'large': $large-only,
  'xlarge': $xlarge-only,
  'xxlarge': $xxlarge-only,
  'phoneLandscape': $phone-landscape,
);

@mixin mq($media) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $media) {
    // Prints a media query based on the value
    @media #{map-get($breakpoints, $media)} {
      @content;
    }
  }
  // If the key doesn't exist in the map we create a media with the argument
  @else {
    @media #{$media} {
      @content;
    }
  }
}