Skip to content
Permalink
Browse files

feat(css): add CSS display utilities (#17359)

Adds classes to set display none on any element.

* add `.ion-hide` selector to hide content
* add `.ion-hide-{breakpoint}-{up|down}]` to selectively hide content

closes #10904
  • Loading branch information...
seiyria authored and brandyscarney committed Feb 22, 2019
1 parent 3b331b5 commit 6bea9d3248e68ec8de0613f14341363e747b5a89
Showing with 34 additions and 1 deletion.
  1. +2 −1 core/.stylelintrc.yml
  2. +31 −0 core/src/css/display.scss
  3. +1 −0 core/src/css/utils.bundle.scss
@@ -7,6 +7,7 @@ ignoreFiles:
- src/css/flex-utils.scss
- src/css/normalize.scss
- src/css/text-alignment.scss
- src/css/display.scss
- src/components/slides/slides-vendor.scss
- src/themes/ionic.mixins.scss
- src/themes/ionic.functions.color.scss
@@ -272,4 +273,4 @@ rules:
- transform-origin

string-quotes:
- double
- double
@@ -0,0 +1,31 @@
@import "../themes/ionic.globals";
@import "../themes/ionic.mixins";

// Display
// --------------------------------------------------
// Modifies display of a particular element based on the given classes

.ion-hide {
display: none !important;
}

// Adds hidden attributes
@each $breakpoint in map-keys($screen-breakpoints) {
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);

@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
// Provide `ion-hide-{bp}-up` classes for hiding the element based
// on the breakpoint
.ion-hide-#{$infix}-up {
display: none !important;
}
}

@include media-breakpoint-down($breakpoint, $screen-breakpoints) {
// Provide `ion-hide-{bp}-down` classes for hiding the element based
// on the breakpoint
.ion-hide-#{$infix}-down {
display: none !important;
}
}
}
@@ -3,3 +3,4 @@
@import "./text-alignment";
@import "./text-transformation";
@import "./flex-utils";
@import "./display";

0 comments on commit 6bea9d3

Please sign in to comment.
You can’t perform that action at this time.