ionic-framework/core/src/css/display.scss at ff0d215ce4763e52b6054c512e211f0da5710db2 · ionic-team/ionic-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
@import "../themes/ionic.globals";
@import "../themes/ionic.mixins";

// Display
// ------------------------------------------------------------------
// Provides utility classes to control the CSS display property
// of elements. Includes responsive variants for toggling between
// block, inline, flex, grid, and other display values at different
// breakpoints.

// TODO(FW-6697): remove ion-hide-* classes in favor of the new
// ion-display-* 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;
    }
  }
}

$display-values: (
  none,
  inline,
  inline-block,
  block,
  flex,
  inline-flex,
  grid,
  inline-grid,
  table,
  table-cell,
  table-row
);

@each $display in $display-values {
  @each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
      .ion-display#{$infix}-#{$display} {
        display: #{$display} !important;
      }
    }
  }
}