quasar/src/components/input-frame/input-frame.ios.styl at v0.17 · hipertracker/quasar · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
.q-if, .q-if:before, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom
  transition $input-frame-transition

$content-none
  content none
$padding-x
  padding-left $input-padding-x
  padding-right $input-padding-x
$margin-y-box
  margin-top $input-box-padding-bottom
  margin-bottom $input-box-padding-bottom
$margin-top-box
  margin-top $input-box-padding-top

.q-if
  &:before, &:after
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    border 1px hidden currentColor
    border-bottom-style solid
    background transparent
    pointer-events none
    content ''
  &:before
    color $light
    color var(--q-color-light)
  &:after
    border-width 2px
    opacity 0
  &:not(.q-if-disabled):not(.q-if-error):not(.q-if-warning):hover:before,
  &.q-if-readonly:not(.q-if-error):not(.q-if-warning):after
    color black
    .q-if-dark&
      color white
  &.q-if-hide-underline, &.q-if-inverted
    &:before, &:after
      @extends $content-none
.q-if-focused:after
  opacity 1
  transition $input-frame-transition-border

.q-if
  outline 0
  align-items center
  font-size $input-font-size
  .q-if-inner
    min-height $input-min-height

.q-if-standard
  padding-top $input-padding-bottom
  padding-bottom $input-padding-bottom
  &.q-if-has-label
    padding-top $input-padding-top
.q-if-hide-underline
  padding-top 0
  padding-bottom 0
  &.q-if-has-label
    padding-top $input-hide-underline-padding-top

.q-if-standard, .q-if-inverted
  .q-if-label
    position absolute
    left 0
    transform-origin top left
    transform $input-label-transform-base
    &.q-if-label-above
      font-size ($input-font-size * $input-label-top-scale)
      transform $input-label-transform
      line-height $input-control-size * $input-label-top-scale

.q-if-inverted
  @extends $padding-x
  .q-if-label
    top 50%
    transform $input-label-box-transform-base
    &.q-if-label-above
      top 4px
      transform $input-label-box-transform
  .q-if-inner
    @extends $margin-y-box
  &.q-if-has-label
    .q-if-inner
      @extends $margin-top-box
  box-shadow $shadow-1
  border-radius $input-inverted-border-radius
  .q-input-target
    color inherit

.q-if-focused:not(.q-if-readonly)
  .q-if-label, .q-if-addon, .q-if-control
    color currentColor

.q-if-warning
  &:before, &:after, &:not(.q-if-inverted) .q-if-label
    color $warning
    color var(--q-color-warning)
  &:hover:before
    color lighten($warning, 46%)
    color var(--q-color-warning-l)

.q-if-error
  &:before, &:after, &:not(.q-if-inverted) .q-if-label
    color $negative
    color var(--q-color-negative)
  &:hover:before
    color lighten($negative, 46%)
    color var(--q-color-negative-l)

.q-if-disabled
  cursor not-allowed
  opacity .6
  .q-if-label, .q-if-control, .q-input-target, .q-chip
    cursor not-allowed

.q-if-dark:not(.q-if-inverted-light)
  .q-input-target:not(.q-input-target-placeholder)
    color white

.q-if-focusable
  outline 0
  cursor pointer

.q-if-label, .q-input-target, .q-input-target-placeholder
  line-height $input-control-size

.q-if-control
  font-size $input-control-size
  width $input-control-size
  height $input-control-size
  cursor pointer
  + .q-if-control, + .q-if-inner, .q-if-inner + &
    margin-left $input-control-margin
  &:hover
    opacity .7

.q-if-baseline
  line-height $input-control-size
  width 0
  color transparent

.q-if-label-inner, .q-if-label-spacer, .q-if-baseline
  pointer-events none
  user-select none
.q-if-label-spacer
  visibility hidden
  height 0 !important
  white-space nowrap
  max-width 100%
.q-if-label
  cursor text
  max-width 100%
  overflow hidden

.q-if-label, .q-if-addon, .q-if-control
  color $form-dark
  line-height $input-control-size

.q-if-inverted
  .q-if-label, .q-if-addon, .q-if-control
    color #ddd

.q-if-inverted-light
  .q-if-label, .q-if-addon, .q-if-control
    color #656565

.q-if-addon
  opacity 0
  cursor inherit
  &:not(.q-if-addon-visible)
    display none
.q-if-addon-left
  padding-right 1px
.q-if-addon-right
  padding-left 1px
.q-if-addon-visible
  opacity 1