dash-website/_sass/_mediaqueries.scss

/**
 * Inspired from https://github.com/guardian/sass-mq.git
 */

/**
 * // To enable support for browsers that do not support @media queries,
 * (IE <= 8, Firefox <= 3, Opera <= 9) set $mqResponsive to false
 * Create a separate stylesheet served exclusively to these browsers,
 * meaning @media queries will be rasterized, relying on the cascade itself
 */
$mqResponsive: true;

/**
 * Name your breakpoints in a way that creates a ubiquitous language
 * across team members. It will improve communication between
 * stakeholders, designers, developers, and testers.
 */
$mqBreakpoints: (
    extrasmall: 480px,
    small: 768px,
    medium: 992px,
    large: 1200px
);

/**
 * Define the breakpoint from the $mqBreakpoints list that should
 * be used as the target width when outputting a static stylesheet
 * (i.e. when $mqResponsive is set to 'false').
 */
$mqStaticBreakpoint: small;

/**
 * If you want to display the currently active breakpoint in the top
 * right corner of your site during development, add the breakpoints
 * to this list, ordered by width, e.g. (mobile, tablet, desktop).
 */
$mqShowBreakpoints: (small, medium, large);


@function mqGetBreakpointWidth($name) {
    @if(map-has-key($mqBreakpoints, $name)) {
        @return map-get($mqBreakpoints, $name);
    } @else {
        @warn "Breakpoint #{$name} does not exist";
    }
}

/**
 * Media Query mixin
 * Usage:
 * .element {
 *     @include mq($from: mobile) {
 *         color: red;
 *     }
 *     @include mq($to: tablet) {
 *         color: blue;
 *     }
 *     @include mq(mobile, tablet) {
 *         color: green;
 *     }
 *     @include mq($from: tablet, $and: '(orientation: landscape)') {
 *         color: teal;
 *     }
 *     @include mq(950px) {
 *         color: hotpink;
 *     }
 * }
 */

@mixin mq($from: false, $to: false, $and: false, $height: false) {

    // Initialize variables
    $minSize: 0;
    $maxSize: 0;
    $mediaQuery: '';
    $axis: if($height, 'height', 'width');

    // From: this breakpoint (inclusive)
    @if $from {
        @if type-of($from) == number {
            $minSize: $from;
        } @else {
            $minSize: mqGetBreakpointWidth($from);
        }
    }

    // To: that breakpoint (exclusive)
    @if $to {
        @if type-of($to) == number {
            $maxSize: $to - 1px;
        } @else {
            $maxSize: mqGetBreakpointWidth($to) - 1px;
        }
    }

    // Responsive support is disabled, rasterize the output outside @media blocks
    // The browser will rely on the cascade itself.
    @if ($mqResponsive == false) {
        $staticBreakpointWidth: mqGetBreakpointWidth($mqStaticBreakpoint);
        @if type-of($staticBreakpointWidth) == number {
            $targetWidth: $staticBreakpointWidth;
            // Output only rules that start at or span our target width
            @if ($and == false and ($minSize <= $targetWidth) and (($to == false) or ($maxSize >= $targetWidth))) {
                @content;
            }
        } @else {
            // Throw a warning if $mqStaticBreakpoint is not in the $mqBreakpoints list
            @warn "No static styles will be output: #{$staticBreakpointWidth}";
        }
    }

        // Responsive support is enabled, output rules inside @media queries
    @else {
        @if $minSize != 0 { $mediaQuery: '#{$mediaQuery} and (min-#{$axis}: #{$minSize})'; }
        @if $maxSize != 0 { $mediaQuery: '#{$mediaQuery} and (max-#{$axis}: #{$maxSize})'; }
        @if $and { $mediaQuery: '#{$mediaQuery} and #{$and}'; }

        $mediaQuery: unquote(#{$mediaQuery});

        @media #{all + $mediaQuery} {
            @content;
        }
    }
}

/**
 * Add a breakpoint
 * Usage: $mqBreakpoints: mqAddBreakpoint(tvscreen, 1920px);
 */
@function mqAddBreakpoint($name, $breakpoint) {
    $newBreakpoint: ($name: $breakpoint);
    @return map-merge($mqBreakpoints, $newBreakpoint);
}

/**
 * Create JSON string of map of breakpoints
 */
@function mqGetBreakpointsJSON($breakpoints: $mqBreakpoints) {
    $JSON: '{';

    @each $name in map-keys($breakpoints) {
        $value: map-get($breakpoints, $name);

        $JSON: $JSON + '"#{$name}":"#{$value}",';
    }

    // Remove last ","
    $JSON: str-slice($JSON, 1, str-length($JSON) - 1);

    // Close JSON string
    $JSON: $JSON + '}';

    @return $JSON;
}


/**
 * Create JSON string of single breakpoint
 */
@function mqGetBreakpointJSON($name, $value) {
    @return "{\"name\":\"#{$name}\",\"value\":\"#{$value}\"}";
}