From 9355c2a4a2a24213423c0fb51c32e0e9fe7efe6f Mon Sep 17 00:00:00 2001
From: Pablo Henrique <pablohpsilva@gmail.com>
Date: Tue, 10 Jan 2017 12:12:02 -0200
Subject: [PATCH] add mobile first breakpoints to mdLayout (#305)

* feature added. Added the responsive classes md-hide-{type}-and-up. These classes will do the opposite from md-hide-{type}

* gitignore added to skip dist folder

* gitignore fixed. removed dist folder entry
---
 docs/src/pages/ui-elements/Layout.vue |  6 ++++++
 src/components/mdLayout/mdLayout.scss | 24 +++++++++++++++++++++
 src/components/mdLayout/mdLayout.vue  | 12 ++++++++++-
 src/core/stylesheets/mixins.scss      | 30 +++++++++++++++++++++++++++
 4 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
index 10865ae..2297dc2 100644
--- a/docs/src/pages/ui-elements/Layout.vue
+++ b/docs/src/pages/ui-elements/Layout.vue
@@ -103,6 +103,12 @@
                 <md-table-cell>Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: <code>md-hide-medium</code></md-table-cell>
               </md-table-row>
 
+              <md-table-row>
+                <md-table-cell>md-hide-{type}-and-up</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Hide a layout container/child on screen sizes greater than or equal to given breakpoint. Example: <code>md-hide-medium-and-up</code></md-table-cell>
+              </md-table-row>
+
               <md-table-row>
                 <md-table-cell>md-flex</md-table-cell>
                 <md-table-cell><code>Boolean|Number</code></md-table-cell>
diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss
index 0ac3f36..8e414c4 100644
--- a/src/components/mdLayout/mdLayout.scss
+++ b/src/components/mdLayout/mdLayout.scss
@@ -175,6 +175,10 @@ $sizes: (8, 16, 24, 40);
   .md-hide-#{$size} {
     display: none;
   }
+
+  .md-hide-#{$size}-and-up {
+    display: none;
+  }
 }
 
 @include layout-xlarge {
@@ -196,3 +200,23 @@ $sizes: (8, 16, 24, 40);
 @include layout-xsmall {
   @include breakpoint-layout(xsmall);
 }
+
+@include layout-xlarge-and-up {
+  @include breakpoint-layout(xlarge);
+}
+
+@include layout-large-and-up {
+  @include breakpoint-layout(large);
+}
+
+@include layout-medium-and-up {
+  @include breakpoint-layout(medium);
+}
+
+@include layout-small-and-up {
+  @include breakpoint-layout(small);
+}
+
+@include layout-xsmall-and-up {
+  @include breakpoint-layout(xsmall);
+}
diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue
index cef20ac..66438b1 100644
--- a/src/components/mdLayout/mdLayout.vue
+++ b/src/components/mdLayout/mdLayout.vue
@@ -24,6 +24,11 @@
       mdHideMedium: Boolean,
       mdHideLarge: Boolean,
       mdHideXlarge: Boolean,
+      mdHideXsmallAndUp: Boolean,
+      mdHideSmallAndUp: Boolean,
+      mdHideMediumAndUp: Boolean,
+      mdHideLargeAndUp: Boolean,
+      mdHideXlargeAndUp: Boolean,
       mdGutter: [String, Number, Boolean],
       mdAlign: String,
       mdAlignXsmall: String,
@@ -63,7 +68,12 @@
           'md-hide-small': this.mdHideSmall,
           'md-hide-medium': this.mdHideMedium,
           'md-hide-large': this.mdHideLarge,
-          'md-hide-xlarge': this.mdHideXlarge
+          'md-hide-xlarge': this.mdHideXlarge,
+          'md-hide-xsmall-and-up': this.mdHideXsmallAndUp,
+          'md-hide-small-and-up': this.mdHideSmallAndUp,
+          'md-hide-medium-and-up': this.mdHideMediumAndUp,
+          'md-hide-large-and-up': this.mdHideLargeAndUp,
+          'md-hide-xlarge-and-up': this.mdHideXlargeAndUp
         };
 
         if (this.mdGutter) {
diff --git a/src/core/stylesheets/mixins.scss b/src/core/stylesheets/mixins.scss
index 26698ae..65788f9 100644
--- a/src/core/stylesheets/mixins.scss
+++ b/src/core/stylesheets/mixins.scss
@@ -51,3 +51,33 @@
     @content;
   }
 }
+
+@mixin layout-xsmall-and-up {
+  @media (min-width: #{$breakpoint-xsmall - 300px}) {
+    @content;
+  }
+}
+
+@mixin layout-small-and-up {
+  @media (min-width: #{$breakpoint-small - 300px}) {
+    @content;
+  }
+}
+
+@mixin layout-medium-and-up {
+  @media (min-width: #{$breakpoint-small - 16px}) {
+    @content;
+  }
+}
+
+@mixin layout-large-and-up {
+  @media (min-width: #{$breakpoint-medium - 16px}) {
+    @content;
+  }
+}
+
+@mixin layout-xlarge-and-up {
+  @media (min-width: #{$breakpoint-large - 16px}) {
+    @content;
+  }
+}