Base Breakpoints Partial

_base_breakpoints.sass

// Editable Breakpoints

$phone-p: 320px
$phone-l: 480px
$tab-p: 444px
$tab-l: 769px
$desk: 960px

$desk-s: 1024px
$desk-m: 1200px
$desk-l: 1420px

$little-web-limit: 800px
$max-limit: 1200px
$min-limit: 769px

$localSuite_max-limit: 1065px

//============================================================
// ON/ OFF SWITCHES FOR RESPONSIVENESS #RWD #OVERRIDE
// See also the overrides in :
// reboot/sass/reboot_styles.sass
// radix/sass/panels/panels_variables/_panels_global.sass

$big-web-min: 980px

/////////////////////////////////////////////////
// No Query Fallbacks  https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks

$breakpoint-no-query-fallbacks: true

$smartphone-portrait: $phone-p
$smartphone-landscape: $phone-l
$tablet-portrait: $tab-p, 'no-query' '.lt-ie9'
$tablet-landscape: $tab-l, 'no-query' '.lt-ie9'

$tablet-orient-l: (min-height $tab-l) (orientation landscape)

//$tablet-landscape-ie: $tab-l, 'no-query' '.lt-ie9'
$desktop: $desk, 'no-query' '.lt-ie9'

$desktop-small: $desk-s, 'no-query' '.lt-ie9'
$desktop-medium: $desk-m, 'no-query' '.lt-ie9'
$desktop-large: $desk-l, 'no-query' '.lt-ie9'

// @mixin main-980 is in:
// radix/sass/panels/_panels_grid_big_web.sass

$breakpoint-hi-res: min-resolution 1.5dppx


////////////////////////////////////////////////

// BIG WEB
// 960 limit is set on all little web queries
// so they do not interfere with big web
$big-web: min-width $desk
$big-web-large: min-width $max-limit
$big-web-2x: (min-width $desk) ($breakpoint-hi-res)

// LITTLE WEB
// 960 limit is set on all little web queries
// so they do not interfere with big web
// These queries assume a mobile-first approach

$little-web: max-width $little-web-limit
$smartphone-portrait-little: $phone-p $little-web-limit
$smartphone-landscape-little: $phone-l $little-web-limit
$tablet-portrait-little: $tab-p $little-web-limit
$tablet-landscape-little: $tab-l $little-web-limit

// Max-width queries, only use when necessary: 
$smartphone-portrait-max: max-width $phone-p
$smartphone-landscape-max: max-width $phone-l
$tablet-portrait-max: max-width $tab-p
$tablet-landscape-max: max-width $tab-l
$desktop-max: max-width $desk

////////////////////////////////////////////////
//      __________ 
//     / ____/ __ \
//    / __/ / / / /
//   / /___/ /_/ / 
//  /_____/\___\_\ 
// Element Queries
// http://snugug.com/musings/element-queries


// *** See how to use the Element Query mixins! ***
// ***   http://sassmeister.com/gist/8446194    ***

// for when the data-eq is on the same container
@mixin eq($state)
  &[data-eq-state="#{$state}"]
    @content

// for when the data-eq is on a nested container
@mixin eq-container($state)
  [data-eq-state="#{$state}"]
    @content

// for when the data-eq is on a parent container
@mixin eq-parent($state)
  [data-eq-state="#{$state}"] &
    @content

//data-eq-pts reference
//pane: 1
//pane-xs: 230
//pane-sm: 300
//pane-md: 465
//pane-lg: 630px
//pane-xl: 795


// Mixins for the panel pane element queries
@mixin pane-eq-xs-up
  &[data-eq-state="pane-xs"],
  &[data-eq-state="pane-sm"],
  &[data-eq-state="pane-md"],
  &[data-eq-state="pane-lg"],
  &[data-eq-state="pane-xl"]
    @content
@mixin pane-eq-sm-up
  &[data-eq-state="pane-sm"],
  &[data-eq-state="pane-md"],
  &[data-eq-state="pane-lg"],
  &[data-eq-state="pane-xl"]
    @content
@mixin pane-eq-md-up
  &[data-eq-state="pane-md"],
  &[data-eq-state="pane-lg"],
  &[data-eq-state="pane-xl"]
    @content
@mixin pane-eq-lg-up
  &[data-eq-state="pane-lg"],
  &[data-eq-state="pane-xl"]
    @content
@mixin pane-eq-xl-up
  &[data-eq-state="pane-xl"]
    @content
  .lt-ie9 
    @content

@mixin pane-eq-xs-down
  &[data-eq-state="pane"],
  &[data-eq-state="pane-xs"]
    @content
@mixin pane-eq-sm-down
  &[data-eq-state="pane"],
  &[data-eq-state="pane-xs"],
  &[data-eq-state="pane-sm"]
    @content
@mixin pane-eq-md-down
  &[data-eq-state="pane"],
  &[data-eq-state="pane-xs"],
  &[data-eq-state="pane-sm"],
  &[data-eq-state="pane-md"]
    @content
@mixin pane-eq-lg-down
  &[data-eq-state="pane"],
  &[data-eq-state="pane-xs"],
  &[data-eq-state="pane-sm"],
  &[data-eq-state="pane-md"],
  &[data-eq-state="pane-lg"]
    @content
@mixin pane-eq-xl-down
  &[data-eq-state="pane"],
  &[data-eq-state="pane-xs"],
  &[data-eq-state="pane-sm"],
  &[data-eq-state="pane-md"],
  &[data-eq-state="pane-lg"],
  &[data-eq-state="pane-xl"]
    @content
  .lt-ie9 
    @content


// Mixins for the panel pane element queries
@mixin pane-container-eq-xs-up
  [data-eq-state="pane-xs"],
  [data-eq-state="pane-sm"],
  [data-eq-state="pane-md"],
  [data-eq-state="pane-lg"],
  [data-eq-state="pane-xl"]
    @content
@mixin pane-container-eq-sm-up
  [data-eq-state="pane-sm"],
  [data-eq-state="pane-md"],
  [data-eq-state="pane-lg"],
  [data-eq-state="pane-xl"]
    @content
@mixin pane-container-eq-md-up
  [data-eq-state="pane-md"],
  [data-eq-state="pane-lg"],
  [data-eq-state="pane-xl"]
    @content
@mixin pane-container-eq-lg-up
  [data-eq-state="pane-lg"],
  [data-eq-state="pane-xl"]
    @content
@mixin pane-container-eq-xl-up
  [data-eq-state="pane-xl"]
    @content
  .lt-ie9 
    @content

@mixin pane-container-eq-xs-down
  [data-eq-state="pane-xs"]
    @content
@mixin pane-container-eq-sm-down
  [data-eq-state="pane-xs"],
  [data-eq-state="pane-sm"]
    @content
@mixin pane-container-eq-md-down
  [data-eq-state="pane-xs"],
  [data-eq-state="pane-sm"],
  [data-eq-state="pane-md"]
    @content
@mixin pane-container-eq-lg-down
  [data-eq-state="pane-xs"],
  [data-eq-state="pane-sm"],
  [data-eq-state="pane-md"],
  [data-eq-state="pane-lg"]
    @content
@mixin pane-container-eq-xl-down
  [data-eq-state="pane-xs"],
  [data-eq-state="pane-sm"],
  [data-eq-state="pane-md"],
  [data-eq-state="pane-lg"],
  [data-eq-state="pane-xl"]
    @content
  .lt-ie9 
    @content



// Mixins for the panel pane element queries
@mixin pane-parent-eq-xs-up
  [data-eq-state="pane-xs"] &,
  [data-eq-state="pane-sm"] &,
  [data-eq-state="pane-md"] &,
  [data-eq-state="pane-lg"] &,
  [data-eq-state="pane-xl"] &
    @content
@mixin pane-parent-eq-sm-up
  [data-eq-state="pane-sm"] &,
  [data-eq-state="pane-md"] &,
  [data-eq-state="pane-lg"] &,
  [data-eq-state="pane-xl"] &
    @content
@mixin pane-parent-eq-md-up
  [data-eq-state="pane-md"] &,
  [data-eq-state="pane-lg"] &,
  [data-eq-state="pane-xl"] &
    @content
@mixin pane-parent-eq-lg-up
  [data-eq-state="pane-lg"] &,
  [data-eq-state="pane-xl"] &
    @content
@mixin pane-parent-eq-xl-up
  [data-eq-state="pane-xl"] &
    @content
  .lt-ie9 
    @content

@mixin pane-parent-eq-xs-down
  [data-eq-state="pane"] &,
  [data-eq-state="pane-xs"] &
    @content
@mixin pane-parent-eq-sm-down
  [data-eq-state="pane"] &,
  [data-eq-state="pane-xs"] &,
  [data-eq-state="pane-sm"] &
    @content
@mixin pane-parent-eq-md-down
  [data-eq-state="pane"] &,
  [data-eq-state="pane-xs"] &,
  [data-eq-state="pane-sm"] &,
  [data-eq-state="pane-md"] &
    @content
@mixin pane-parent-eq-lg-down
  [data-eq-state="pane"] &,
  [data-eq-state="pane-xs"] &,
  [data-eq-state="pane-sm"] &,
  [data-eq-state="pane-md"] &,
  [data-eq-state="pane-lg"] &
    @content
@mixin pane-parent-eq-xl-down
  [data-eq-state="pane"] &,
  [data-eq-state="pane-xs"] &,
  [data-eq-state="pane-sm"] &,
  [data-eq-state="pane-md"] &,
  [data-eq-state="pane-lg"] &,
  [data-eq-state="pane-xl"] &
    @content
  .lt-ie9 
    @content





@mixin eq-debug
  +eq("xxs") 
    border: solid 1px purple
  +eq("xs") 
    border: solid 1px green
  +eq("sm")
    border: solid 1px orange
  +eq("md")
    border: solid 1px red
  +eq("lg")
    border: solid 1px blue
  +eq("xl")
    border: solid 1px pink