From c2a106e19df89281afcf486e89944213ca768cd2 Mon Sep 17 00:00:00 2001 From: Marcelo Eden Date: Fri, 17 Mar 2017 20:28:23 -0700 Subject: [PATCH 1/7] Responsive visibility styles --- .../visibility/flavors/responsive/_index.scss | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/ui/utilities/visibility/flavors/responsive/_index.scss b/ui/utilities/visibility/flavors/responsive/_index.scss index c90cde70b0..25da3a0f09 100644 --- a/ui/utilities/visibility/flavors/responsive/_index.scss +++ b/ui/utilities/visibility/flavors/responsive/_index.scss @@ -13,3 +13,26 @@ @include visibility(small, $mq-small, $mq-medium); @include visibility(medium, $mq-medium, $mq-large); @include visibility(large, $mq-large); + +// Generates responsive visibility tags +@each $key, $value in ( + x-small: $mq-x-small, + small: $mq-small, + medium: $mq-medium, + large: $mq-large, + x-large: $mq-x-large, +) { + @media(min-width: $value) { + // [EXAMPLE] hide--medium: + // HIDES the element when window is BIGGER than medium. + // element will be displayed normaly when window is smaller. + .hide--#{$key} { display: none; } + } + + @media(max-width: $value - 1px) { + // [EXAMPLE] show--medium: + // HIDES the element when window is SMALLER than medium. + // element will be displayed normaly when window is bigger. + .show--#{$key} { display: none; } + } +} From 9cd423706bdc545012f1ffef3f7d41a47786731f Mon Sep 17 00:00:00 2001 From: Marcelo Eden Date: Fri, 17 Mar 2017 20:30:27 -0700 Subject: [PATCH 2/7] add slds prefix --- ui/utilities/visibility/flavors/responsive/_index.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/utilities/visibility/flavors/responsive/_index.scss b/ui/utilities/visibility/flavors/responsive/_index.scss index 25da3a0f09..e21cbff4c0 100644 --- a/ui/utilities/visibility/flavors/responsive/_index.scss +++ b/ui/utilities/visibility/flavors/responsive/_index.scss @@ -23,16 +23,16 @@ x-large: $mq-x-large, ) { @media(min-width: $value) { - // [EXAMPLE] hide--medium: + // [EXAMPLE] slds-hide--medium: // HIDES the element when window is BIGGER than medium. // element will be displayed normaly when window is smaller. - .hide--#{$key} { display: none; } + .slds-hide--#{$key} { display: none; } } @media(max-width: $value - 1px) { - // [EXAMPLE] show--medium: + // [EXAMPLE] slds-show--medium: // HIDES the element when window is SMALLER than medium. // element will be displayed normaly when window is bigger. - .show--#{$key} { display: none; } + .slds-show--#{$key} { display: none; } } } From f44255f75591f15b68f38f20547b218be028ffce Mon Sep 17 00:00:00 2001 From: Marcelo Eden Date: Sat, 18 Mar 2017 00:23:08 -0700 Subject: [PATCH 3/7] line wraps to follow convention --- ui/utilities/visibility/flavors/responsive/_index.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/utilities/visibility/flavors/responsive/_index.scss b/ui/utilities/visibility/flavors/responsive/_index.scss index e21cbff4c0..d0692b30ac 100644 --- a/ui/utilities/visibility/flavors/responsive/_index.scss +++ b/ui/utilities/visibility/flavors/responsive/_index.scss @@ -26,13 +26,17 @@ // [EXAMPLE] slds-hide--medium: // HIDES the element when window is BIGGER than medium. // element will be displayed normaly when window is smaller. - .slds-hide--#{$key} { display: none; } + .slds-hide--#{$key} { + display: none; + } } @media(max-width: $value - 1px) { // [EXAMPLE] slds-show--medium: // HIDES the element when window is SMALLER than medium. // element will be displayed normaly when window is bigger. - .slds-show--#{$key} { display: none; } + .slds-show--#{$key} { + display: none; + } } } From c061edea5ee2795c432d24dff3b49edcda3e9472 Mon Sep 17 00:00:00 2001 From: Marcelo Eden Date: Wed, 22 Mar 2017 15:08:23 -0700 Subject: [PATCH 4/7] minor fixes --- .../visibility/flavors/responsive/_index.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/ui/utilities/visibility/flavors/responsive/_index.scss b/ui/utilities/visibility/flavors/responsive/_index.scss index d0692b30ac..19d44c6534 100644 --- a/ui/utilities/visibility/flavors/responsive/_index.scss +++ b/ui/utilities/visibility/flavors/responsive/_index.scss @@ -16,18 +16,19 @@ // Generates responsive visibility tags @each $key, $value in ( - x-small: $mq-x-small, - small: $mq-small, - medium: $mq-medium, - large: $mq-large, - x-large: $mq-x-large, + 'x-small': $mq-x-small, + 'small': $mq-small, + 'medium': $mq-medium, + 'large': $mq-large, + 'x-large': $mq-x-large, ) { @media(min-width: $value) { // [EXAMPLE] slds-hide--medium: // HIDES the element when window is BIGGER than medium. // element will be displayed normaly when window is smaller. .slds-hide--#{$key} { - display: none; + // !important is required to increase specificity + display: none!important; } } @@ -36,7 +37,8 @@ // HIDES the element when window is SMALLER than medium. // element will be displayed normaly when window is bigger. .slds-show--#{$key} { - display: none; + // !important is required to increase specificity + display: none!important; } } } From 9cf486788391076eea517b33d054179dbbeab20b Mon Sep 17 00:00:00 2001 From: Marcelo Eden Date: Wed, 22 Mar 2017 15:09:51 -0700 Subject: [PATCH 5/7] fix lint --- ui/utilities/visibility/flavors/responsive/_index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/utilities/visibility/flavors/responsive/_index.scss b/ui/utilities/visibility/flavors/responsive/_index.scss index 19d44c6534..60156e636a 100644 --- a/ui/utilities/visibility/flavors/responsive/_index.scss +++ b/ui/utilities/visibility/flavors/responsive/_index.scss @@ -28,7 +28,7 @@ // element will be displayed normaly when window is smaller. .slds-hide--#{$key} { // !important is required to increase specificity - display: none!important; + display: none !important; } } @@ -38,7 +38,7 @@ // element will be displayed normaly when window is bigger. .slds-show--#{$key} { // !important is required to increase specificity - display: none!important; + display: none !important; } } } From 5f205b4ad9378585773c26eec908c5f32292b81d Mon Sep 17 00:00:00 2001 From: Marcelo Eden Date: Wed, 22 Mar 2017 15:45:06 -0700 Subject: [PATCH 6/7] documentation --- .../flavors/responsive/index.markup.md | 94 ++++++++++--------- .../responsive/index.react.example.jsx | 21 +++-- 2 files changed, 60 insertions(+), 55 deletions(-) diff --git a/ui/utilities/visibility/flavors/responsive/index.markup.md b/ui/utilities/visibility/flavors/responsive/index.markup.md index fedd4eeea4..9605cb3b81 100644 --- a/ui/utilities/visibility/flavors/responsive/index.markup.md +++ b/ui/utilities/visibility/flavors/responsive/index.markup.md @@ -6,101 +6,105 @@ Class Name Less than 320px - X-Small (320px) - Small (480px) - Medium (768px) - Large (1024px) - Greater than 1024px + X-Small (>= 320px) + Small (>= 480px) + Medium (>= 768px) + Large (>= 1024px) + X-Large (>= 1280px) - .slds-x-small-show - Hide - Show - Show - Show - Show + .slds-hide--x-small Show + Hide + Hide + Hide + Hide + Hide - .slds-small-show - Hide + .slds-show--x-small Hide Show Show Show Show + Show + - .slds-medium-show + .slds-hide--small + Show + Show + Hide Hide Hide Hide - Show - Show - Show - .slds-large-show - Hide - Hide + .slds-show--small Hide Hide Show Show + Show + Show + - .slds-x-small-show-only - Hide + .slds-hide--medium + Show + Show Show - Hide Hide Hide Hide - .slds-small-show-only + .slds-show--medium Hide Hide - Show Hide + Show + Show + Show + + + + .slds-hide--large + Show + Show + Show + Show Hide Hide - .slds-medium-show-only + .slds-show--large Hide Hide Hide - Show - Hide Hide + Show + Show + - .slds-max-x-small-hide + .slds-hide--x-large + Show + Show + Show + Show + Show Hide - Initial - Initial - Initial - Initial - Initial - .slds-max-small-hide + .slds-show--x-large Hide Hide - Initial - Initial - Initial - Initial - - - .slds-max-medium-hide Hide Hide Hide - Initial - Initial - Initial + Show diff --git a/ui/utilities/visibility/flavors/responsive/index.react.example.jsx b/ui/utilities/visibility/flavors/responsive/index.react.example.jsx index 985d2f6cfa..82961e09d1 100644 --- a/ui/utilities/visibility/flavors/responsive/index.react.example.jsx +++ b/ui/utilities/visibility/flavors/responsive/index.react.example.jsx @@ -15,18 +15,19 @@ import CodeClass from 'app_modules/site/components/code-class'; export default (
-
Show on 320px and up
-
Show only between 320px and 479px
-
Hide on 319px and down
+
Hides on 319px and down
+
Hides on 320px and up
-
Show on 480px and up
-
Show only between 480px and 767px
-
Hide on 479px and down
+
Hides on 479px and down
+
Hides on 480px and up
-
Show on 768px and up
-
Show only between 768px and 1023px
-
Hide on 1023px and down
+
Hides on 767px and down
+
Hides on 768px and up
-
Show on 1024px and up
+
Hides on 1023px and down
+
Hides on 1024px and up
+ +
Hides on 1279px and down
+
Hides on 1280px and up
); From b3095f97a1c256ee19f2deed773b087ca2b599a7 Mon Sep 17 00:00:00 2001 From: Marcelo Eden Date: Tue, 28 Mar 2017 13:04:05 -0700 Subject: [PATCH 7/7] updating docs --- .../visibility/flavors/responsive/index.markup.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/ui/utilities/visibility/flavors/responsive/index.markup.md b/ui/utilities/visibility/flavors/responsive/index.markup.md index 9605cb3b81..29d95a1ecc 100644 --- a/ui/utilities/visibility/flavors/responsive/index.markup.md +++ b/ui/utilities/visibility/flavors/responsive/index.markup.md @@ -1,4 +1,7 @@ -

Responsive visibility classes will show and hide content on specific breakpoints. By default, -show renders as display: block;, but you may pass through a display property of your choice by adding a modifier to the end of the classname. For example, you may need to render an element as display: inline-block at a medium breakpoint, adding --inline-block to the end of .slds-medium-show to produce the class of .slds-medium-show--inline-block will give you that outcome.

+

Responsive visibility classes will HIDE content on specific breakpoints. +slds-show--[breakpoint] renders display: none; when the the view port width is smaller than the breakpoint, and do nothing if it is bigger or equal. +slds-hide--[breakpoint] does the oposite by rendering display: none; when the the view port width is bigger or equal than the breakpoint, and do nothing if it is smaller. +

@@ -30,7 +33,6 @@ Show Show - .slds-hide--small Show @@ -49,7 +51,6 @@ Show Show - .slds-hide--medium Show @@ -68,7 +69,6 @@ Show Show - .slds-hide--large Show @@ -87,7 +87,6 @@ Show Show - .slds-hide--x-large Show