//////////////////////////////////////////////// // __ // / __/ __ \ // / __/ / / / / // / /_/ /_/ / // /__/_\ // Element Queries // snugug.com/musings/element-queries

// *** See how to use the Element Query mixins! *** // *** 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 //pane: 1 //pane-xs: 320 $phone-p: 319px //pane-sm: 440 $phone-l: 479px //pane-md: 600 $tab-p: 639px //pane-lg: 720 $tab-l: 769px //pane-xl: 840 //pane-xxl: 960 $desk: 960

// 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-xs"]
  @content

@mixin pane-eq-sm-down

&[data-eq-state="pane-xs"],
&[data-eq-state="pane-sm"]
  @content

@mixin pane-eq-md-down

&[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-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-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"],
[data-eq-state="pane-xxl"]
  @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"],
[data-eq-state="pane-xxl"]
  @content

@mixin pane-container-eq-md-up

[data-eq-state="pane-md"],
[data-eq-state="pane-lg"],
[data-eq-state="pane-xl"],
[data-eq-state="pane-xxl"]
  @content

@mixin pane-container-eq-lg-up

[data-eq-state="pane-lg"],
[data-eq-state="pane-xl"],
[data-eq-state="pane-xxl"]
  @content

@mixin pane-container-eq-xl-up

[data-eq-state="pane-xl"],
[data-eq-state="pane-xxl"]
  @content
.lt-ie9 
  @content

@mixin pane-container-eq-xxl-up

[data-eq-state="pane-xxl"]
  @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"] &,
[data-eq-state="pane-xxl"] &
  @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"] &,
[data-eq-state="pane-xxl"] &
  @content

@mixin pane-parent-eq-md-up

[data-eq-state="pane-md"] &,
[data-eq-state="pane-lg"] &,
[data-eq-state="pane-xl"] &,
[data-eq-state="pane-xxl"] &
  @content

@mixin pane-parent-eq-lg-up

[data-eq-state="pane-lg"] &,
[data-eq-state="pane-xl"] &,
[data-eq-state="pane-xxl"] &
  @content

@mixin pane-parent-eq-xl-up

[data-eq-state="pane-xl"] &,
[data-eq-state="pane-xxl"] &
  @content

@mixin pane-parent-eq-xxl-up

[data-eq-state="pane-xxl"] &
  @content
.lt-ie9 
  @content

@mixin pane-parent-eq-xs-down

[data-eq-state="pane-xs"] &
  @content

@mixin pane-parent-eq-sm-down

[data-eq-state="pane-xs"] &,
[data-eq-state="pane-sm"] &
  @content

@mixin pane-parent-eq-md-down

[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-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-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-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"] &,
[data-eq-state="pane-xxl"] &
  @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