quasar/src/components/input-frame/input-frame.ios.styl at v0.16 · 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
.q-if, .q-if:before, .q-if:after, .q-if-label, .q-if-addon, .q-field-icon, .q-field-label, .q-if-control, .q-field-bottom
  transition $input-frame-transition

.q-if
  min-height 32px
  outline 0
  padding-bottom 8px

  &:not(.q-if-hide-underline):not(.q-if-inverted)
    &:before, &:after
      content ''
  &:before, &:after
    position absolute
    bottom 0
    left 0
    right 0
    background currentColor
  &:before
    height 1px
    color $light
    color var(--q-color-light)
    transform scaleY(1)
  &:after
    width 0
    height 2px
    color currentColor

  &:hover:before
    color black

  .group
    margin -5px
    &:not(:first-child)
      margin-top 0

.q-if-hide-underline:not(.q-if-inverted)
  min-height 24px
  padding-bottom 0

.q-if-focusable
  outline 0
  cursor pointer

.q-if-inner
  min-height 24px !important
  align-items center

.q-if-has-label
  min-height 41px
  .q-if-inner
    min-height 36px !important
    padding-top 12px

.q-if-label
  pointer-events none
  user-select none
  top 15px
  left 0
  right 0
  transform-origin left top 0
  transform scale(1) translate(0, 0)
.q-if-label-above
  transform scale(.75) translate(0, -22px)

.q-if-addon
  pointer-events none
  opacity 0
.q-if-addon-left
  padding-right 1px
.q-if-addon-right
  padding-left 1px
.q-if-addon-visible
  opacity 1

.q-if-control
  cursor pointer
  font-size 24px
  width 24px
  align-self flex-end
  &.q-icon
    cursor pointer
  &:hover
    opacity .7
.q-if-control-before
  margin-left 0
  margin-right 4px

.q-if-label, .q-if-addon, .q-if-control
  color $form-dark

.q-if-inverted
  min-height 38px
  border-radius 2px
  padding 8px
  box-shadow $shadow-1

  .q-input-target
    color inherit
  .q-if-label, .q-if-addon,  .q-if-control
    color #ddd

div.q-input-target
  min-width 35px

.q-if-dark
  &:hover:before
    color white
  &:not(.q-if-inverted-light)
    .q-input-target
      color white

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

.q-if-focused
  &:after
    width 100%
  .q-if-label, .q-if-addon, .q-if-control
    color currentColor !important

.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-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-disabled
  cursor not-allowed !important
  .q-if-label, .q-if-control, .q-input-target, .q-chip
    opacity .6
    cursor not-allowed !important
  &:before
    background-image linear-gradient(90deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .38) 33%, transparent 0)
    background-color transparent
    background-position bottom
    background-size 3px 1px
    background-repeat repeat-x
  &.q-if-dark:before
    background-image linear-gradient(90deg, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, .7) 33%, transparent 0)