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

@@ -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>

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);
+}

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) {

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;
+  }
+}