quasar/src/css-components/textfield/textfield.ios.styl at v0.13 · 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
$textfield-border-size        ?= 2px
$textfield-border-style       ?= solid
$textfield-border-color       ?= $form-lighter-color
$textfield-focus-border-color ?= transparent
$textfield-focus-background   ?= $form-lighter-color
$textfield-font-size          ?= .9rem
$label-font-size              ?= $textfield-font-size

$textfield-padding-horizontal ?= .5rem
$textfield-padding-vertical   ?= .5rem

input, textarea, .textfield
  &:not(.no-style)
    background none
    font-size $textfield-font-size
    max-width 100%
    margin-bottom 2px
    padding $textfield-padding-vertical $textfield-padding-horizontal
    outline 0
    transition all .3s
    border $textfield-border-size $textfield-border-style $textfield-border-color
    border-radius $generic-border-radius
    &:focus, &:hover
      background $textfield-focus-background
      border-color $textfield-focus-border-color
    &[disabled], &.disabled
      border-color darken($form-darker-color, 20%)
    &[disabled], &.disabled, &[readonly], &.readonly
      border-style dotted
    &.has-error
      border $textfield-border-size $textfield-border-style $has-error !important

label
  font-size $label-font-size

.stacked-label, .floating-label
  position relative
  display inline-block
  width 100%
  label
    position absolute
    pointer-events none
    top $textfield-padding-vertical
    left $textfield-padding-horizontal
    transform-origin left top
    color rgba(0, 0, 0, .54)

.stacked-label
  label
    display block
    transform scale(.8)
  input
    padding-top 1.4rem
  textarea
    margin-top 1.4rem
  input:focus + label, textarea:focus + label
    color $form-active-color

.floating-label
  label
    transition transform .15s ease-in-out, color .3s
    bottom $textfield-padding-vertical
  input + label, textarea + label
    transform translateY(1.7rem) scale(1)
  input, textarea
    margin-top 1.45rem
  input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~ label
    color $form-active-color
    transform translateY(0) scale(.8)