javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Kyle J. Kemp
2019-02-22 12:39:18 -06:00
committed by Brandy Carney
parent 3b331b5216
commit 6bea9d3248
3 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
core/src/css/display.scss Normal file
View File

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

1
core/src/css/utils.bundle.scss
View File

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