mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
5d6e077067
BREAKING CHANGES
The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of that breakpoint (for `.ion-hide-{breakpoint}-down` classes) the maximum of the media query will be the minimum of that breakpoint.
fixes #18600
33 lines
907 B
SCSS
33 lines
907 B
SCSS
@import "../themes/ionic.skip-warns.scss";
|
|
@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 classes
|
|
@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;
|
|
}
|
|
}
|
|
}
|