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 @@
Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: md-hide-medium
+
+ md-hide-{type}-and-up
+ Boolean
+ Hide a layout container/child on screen sizes greater than or equal to given breakpoint. Example: md-hide-medium-and-up
+
+
md-flex
Boolean|Number
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;
+ }
+}