From 11a574ce9e63da1d8a98a8f6d95c4249052ea058 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 29 Dec 2014 13:58:21 -0800
Subject: [PATCH] Overhaul responsive visibility classes
Thanks to @glebm for help refactoring this to use the breakpoint mixins.
---
scss/_utilities-responsive.scss | 105 ++++----------------------------
1 file changed, 13 insertions(+), 92 deletions(-)
diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss
index a25ec018eb..837cda7b9a 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.
--
GitLab