Collapse media query mixins.

src/styles/components/_audiovideo.scss

@@ -40,13 +40,13 @@
       display: none;
     }
   }
-  @include breakpt-only-screen($breakpoint-video-small) {
+  @include breakpt($breakpoint-video-small, max-width, only screen) {
     right: 0;
   }
 }
 
 .mainScreenshare #audiovideo { 
-  @include breakpt-only-screen($breakpoint-video-medium) {
+  @include breakpt($breakpoint-video-medium, max-width, only screen) {
     display: none;
   }
 }

src/styles/components/_chat.scss

@@ -160,7 +160,7 @@
   position: absolute;
   right: 0;
   top: 36px;
-  @include breakpt-height($breakpoint-chat-small) {
+  @include breakpt($breakpoint-chat-small, max-height) {
     border-top: 1px solid $bordercolor;
     top: 0px;
   }
@@ -212,7 +212,7 @@
     vertical-align: middle;
     white-space: nowrap;
   }
-  @include breakpt-height($breakpoint-chat-small) {
+  @include breakpt($breakpoint-chat-small, max-height) {
     display: none;
   }
 }
@@ -223,7 +223,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  @include breakpt-height($breakpoint-chat-small) {
+  @include breakpt($breakpoint-chat-small, max-height) {
     bottom: 45px;
   }
 }
@@ -429,7 +429,7 @@
     margin: 0 auto;
     position: absolute;
     right: 0;
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       height: auto;
     }
   }
@@ -440,7 +440,7 @@
     font-size:.8em;
     color: $chat-typing;
     height: 14px;
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       display: none;
     }
   }
@@ -456,7 +456,7 @@
     > div {
       border-top: 1px solid $bordercolor;
     }
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       height: auto;
     }
   }
@@ -474,7 +474,7 @@
     &:focus {
       border-color: $chat-input-border-color;
     }
-    @include breakpt-height($breakpoint-chat-small) {
+    @include breakpt($breakpoint-chat-small, max-height) {
       max-height: 2.5em;
     }
   }

src/styles/components/_settings.scss

@@ -33,13 +33,13 @@
 
 #settings.show {
   right: 0;
-  @include breakpt-only-screen($breakpoint-settings-medium) {
+  @include breakpt($breakpoint-settings-medium, max-width, only screen) {
     background: white;
     left: 0;
     width: auto;
   }
   .form-actions{
-    @include breakpt-only-screen($breakpoint-settings-medium) {
+    @include breakpt($breakpoint-settings-medium, max-width, only screen) {
       bottom: 0;
       height: 60px;
       left: 0;
@@ -73,18 +73,18 @@
   }
   .form-horizontal {
     .controls {
-      @include breakpt-only-screen($breakpoint-settings-medium) {
+      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
         margin-left: 110px;
       }
     }
     .control-label {
-      @include breakpt-only-screen($breakpoint-settings-medium) {
+      @include breakpt($breakpoint-settings-medium, max-width, only screen) {
         width: 100px;
         word-wrap: break-word;
       }
     }
   }
-  @include breakpt-only-screen($breakpoint-settings-medium) {
+  @include breakpt($breakpoint-settings-medium, max-width, only screen) {
     padding-bottom: 10px;
   }
 }

src/styles/components/_usability.scss

@@ -52,10 +52,10 @@
     color: #888;
     padding: 20px 0;
   }
-  @include breakpt-only-screen($breakpoint-useability-small){
+  @include breakpt($breakpoint-useability-small, max-width, only screen){
     display: none;
   }
-  @include breakpt-only-screen-with-min($breakpoint-useability-small, $breakpoint-useability-large){
+  @include breakpt($breakpoint-useability-small, min-width, only screen, $breakpoint-useability-large){
     font-size: 1em;
     width: 250px;
   }

src/styles/global/_mixins.scss

@@ -1,29 +1,44 @@
 
-@mixin breakpt($pt) {
+// not handled by autoprefixer
-  @media (max-width: $pt) {
+@mixin tap-highlight-color($color) {
-    @content;
+  -webkit-tap-highlight-color: $color;
+}
+
+/*  Supports media type and up to two expressions 
+    
+    ex output:
+    @media only screen and (min-width: 700px) and (max-width: 1280px) {
+      .bar .middle img {
+        display: none; 
       }
     }
 
-@mixin breakpt-height($pt) {
+    @param $media-value1:   required - number/units
-  @media (max-height: $pt) {
+    @param $media-feature1: optional - width,height,ect...
+    @param $media-type:     optional - screen,print,ect...
+    @param $media-value2:   optional - number/units
+    @param $media-feature2: optional - width,height,ect...
+*/
+@mixin breakpt($media-value1, $media-feature1: max-width, $media-type: null,
+               $media-value2: null, $media-feature2: max-width) {
+  @if($media-type and $media-value2) {
+    @media #{$media-type} and ($media-feature1: $media-value1) and ($media-feature2: $media-value2) {
       @content;
     }
   }
-
+  @if(not $media-type and $media-value2) {
-@mixin breakpt-only-screen($pt) {
+    @media ($media-feature1: $media-value1) and ($media-feature2: $media-value2) {
-  @media only screen and (max-width: $pt) {
       @content;
     }
   }
-
+  @if($media-type and not $media-value2) {
-@mixin breakpt-only-screen-with-min($pt1, $pt2) {
+    @media #{$media-type} and ($media-feature1: $media-value1) {
-  @media only screen and (min-width: $pt1) and (max-width: $pt2) {
+      @content;
+    }
+  }
+  @if(not $media-type and not $media-value2) {
+    @media ($media-feature1: $media-value1) {
       @content;
     }
   }
-
-// not handled by autoprefixer
-@mixin tap-highlight-color($color) {
-  -webkit-tap-highlight-color: $color;
 }