// Breakpoint Debugger // ——————- // if `$show-query` variable is set to `true` in `_vars.scss`, then // a small notifier tag will show at the bottom left screen // stating what breakpoint you are currently viewing in @if $show-query == true {
body:after { font-size: .75rem !important; text-transform: uppercase !important; letter-spacing: .08em !important; padding: .5em 1em !important; color: $white !important; background-color: rgba($black, .7) !important; position: fixed !important; left: 0 !important; bottom: 0 !important; z-index: 9999 !important; content: 'small screen'; //@include breakpoint($medium) { content: 'medium screen'; } //@include breakpoint($large) { content: 'large screen'; } //@include breakpoint($xlarge) { content: 'xlarge screen'; } //@include breakpoint($xxlarge) { content: 'xxlarge screen'; } @media (min-width: 640px) { content: 'medium screen'; } @media (min-width: 1024px) { content: 'large screen'; } @media (min-width: 1200px) { content: 'xlarge screen'; } @media (min-width: 1440px) { content: 'xxlarge screen'; } }
}