ionic/src/util/util.scss at feature/material-inputs · CssFormWork/ionic · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@import "../globals.core";

.hide,
[hidden],
template {
  display: none !important;
}

.sticky {
  position: sticky;
  top: 0;
}

// Focus Outline
// --------------------------------------------------

$focus-outline-border-color:   #51a7e8 !default;
$focus-outline-box-shadow:     0 0 8px 0 $focus-outline-border-color !default;


:focus,
:active {
  outline: none;
}

.focus-outline {

  :focus {
    outline: thin dotted;
    outline-offset: -1px;
  }

  button:focus,
  [button]:focus {
    border-color: $focus-outline-border-color;
    outline: thin solid $focus-outline-border-color;
    box-shadow: $focus-outline-box-shadow;
  }

  ion-input :focus {
    outline: none;
  }

}


// Focus Controls
// -------------------------------

focus-ctrl {
  position: fixed;

  input,
  button {
    position: fixed;
    top: 1px;
    left: -9999px;
    z-index: 9999;

    width: 9px;

    pointer-events: none;
  }
}

// Click Block
// --------------------------------------------------
// Fill the screen to block clicks (a better pointer-events: none)
// to avoid full-page reflows and paints which can cause flickers

click-block {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $z-index-click-block;
  display: block;

  opacity: 0;
  transform: translate3d(0, -100%, 0);
  transform: translate3d(0, calc(-100% + 1px), 0);

  // background: red;
  // opacity: .3;
}

.click-block-active {
  transform: translate3d(0, 0, 0);
}