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