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

core/.stylelintrc.yml

@@ -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

core/src/css/display.scss

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

core/src/css/utils.bundle.scss

@@ -3,3 +3,4 @@
 @import "./text-alignment";
 @import "./text-transformation";
 @import "./flex-utils";
+@import "./display";