diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss index a25ec018ebf4f95c27ae5d4916ac074caf41d43a..837cda7b9a5ea944547de83cedde88ad2aaf598e 100644 --- a/scss/_utilities-responsive.scss +++ b/scss/_utilities-responsive.scss @@ -2,6 +2,19 @@ // Responsive: Utility classes // -------------------------------------------------- +@each $bp in map-keys($grid-breakpoints) { + .hidden-#{$bp}-up { + @include media-breakpoint-up($bp) { + display: none !important; + } + } + .hidden-#{$bp}-down { + @include media-breakpoint-down($bp) { + display: none !important; + } + } +} + // IE10 in Windows (Phone) 8 // @@ -23,98 +36,6 @@ } -.visible-xs-block, -.visible-xs-inline, -.visible-xs-inline-block, -.visible-sm-block, -.visible-sm-inline, -.visible-sm-inline-block, -.visible-md-block, -.visible-md-inline, -.visible-md-inline-block, -.visible-lg-block, -.visible-lg-inline, -.visible-lg-inline-block { - display: none !important; -} - -.visible-xs-block { - @include media-breakpoint-down(xs) { - display: block !important; - } -} -.visible-xs-inline { - @include media-breakpoint-down(xs) { - display: inline !important; - } -} -.visible-xs-inline-block { - @include media-breakpoint-down(xs) { - display: inline-block !important; - } -} - -.visible-sm-block { - @include media-breakpoint-only(sm) { - display: block !important; - } -} -.visible-sm-inline { - @include media-breakpoint-only(sm) { - display: inline !important; - } -} -.visible-sm-inline-block { - @include media-breakpoint-only(sm) { - display: inline-block !important; - } -} - -.visible-md-block { - @include media-breakpoint-only(md) { - display: block !important; - } -} -.visible-md-inline { - @include media-breakpoint-only(md) { - display: inline !important; - } -} -.visible-md-inline-block { - @include media-breakpoint-only(md) { - display: inline-block !important; - } -} - -.visible-lg-block { - @include media-breakpoint-up(lg) { - display: block !important; - } -} -.visible-lg-inline { - @include media-breakpoint-up(lg) { - display: inline !important; - } -} -.visible-lg-inline-block { - @include media-breakpoint-up(lg) { - display: inline-block !important; - } -} - -@include media-breakpoint-only(sm) { - @include responsive-invisibility(".hidden-sm"); -} - -@include media-breakpoint-only(md) { - @include responsive-invisibility(".hidden-md"); -} - -@include media-breakpoint-up(lg) { - @include responsive-invisibility(".hidden-lg"); -} - - // Print utilities // // Media queries are placed on the inside to be mixin-friendly.