godaddy-wordpress/go

View on GitHub
.dev/assets/shared/css/config/breakpoints.scss

Summary

Maintainability
Test Coverage
$breakpoint_sm: 600px;
$breakpoint_md: 782px;
$breakpoint_lg: 960px;
$breakpoint_xl: 1440px;
$breakpoint_admin-bar: 782px;

// Responsive breakpoints mixin
@mixin media( $res ) {
    @if small-only == $res {
        @media only screen and (max-width: #{$breakpoint_sm - 1}) {
            @content;
        }
    }
    @if small == $res {
        @media only screen and (min-width: #{$breakpoint_sm}) {
            @content;
        }
    }
    @if medium-only == $res {
        @media only screen and (max-width: #{$breakpoint_md - 1}) {
            @content;
        }
    }
    @if medium == $res {
        @media only screen and (min-width: #{$breakpoint_md}) {
            @content;
        }
    }
    @if large-only == $res {
        @media only screen and (max-width: #{$breakpoint_lg - 1}) {
            @content;
        }
    }
    @if large == $res {
        @media only screen and (min-width: #{$breakpoint_lg}) {
            @content;
        }
    }
    @if xlarge-only == $res {
        @media only screen and (max-width: #{$breakpoint_xl - 1}) {
            @content;
        }
    }
    @if xlarge == $res {
        @media only screen and (min-width: #{$breakpoint_xl}) {
            @content;
        }
    }
    @if admin-bar-only == $res {
        @media only screen and (max-width: #{$breakpoint_admin-bar - 1}) {
            @content;
        }
    }
    @if admin-bar == $res {
        @media only screen and (min-width: #{$breakpoint_admin-bar}) {
            @content;
        }
    }
}

@custom-media --small (min-width: 600px);
@custom-media --smallMax (max-width: 599px);
@custom-media --medium (min-width: 782px);
@custom-media --mediumMax (max-width: 781px);
@custom-media --large (min-width: 960px);
@custom-media --largeMax (max-width: 959px);
@custom-media --huge (min-width: 1440px);
@custom-media --hugeMax (min-width: 1439px);
@custom-media --admin-bar-sm (max-width: 600px);
@custom-media --admin-bar-lg (max-width: 782px);