/
VInput.sass
132 lines (105 loc) 路 2.67 KB
/
VInput.sass
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
@import './_variables.scss'
/* Theme */
+theme(v-input) using ($material)
color: map-deep-get($material, 'text', 'primary')
input,
textarea
color: map-deep-get($material, 'text', 'primary')
input::placeholder,
textarea::placeholder
color: map-deep-get($material, 'text', 'disabled')
&--is-disabled
color: map-deep-get($material, 'text', 'disabled')
input,
textarea
color: map-deep-get($material, 'text', 'disabled')
.v-input
align-items: flex-start
display: flex
flex: 1 1 auto
font-size: $input-font-size
letter-spacing: $input-letter-spacing
max-width: 100%
text-align: $input-text-align
.v-progress-linear
top: calc(100% - 1px)
left: 0
input
max-height: $input-max-height
input,
textarea
// Remove Firefox red outline
&:invalid
box-shadow: none
&:focus,
&:active
outline: none
.v-label
height: $input-label-height
line-height: $input-label-height
letter-spacing: $input-label-letter-spacing
&__append-outer,
&__prepend-outer
display: inline-flex
margin-bottom: 4px
margin-top: 4px
line-height: 1
.v-icon
user-select: none
&__append-outer
+ltr()
margin-left: $input-prepend-append-outer-margin
+rtl()
margin-right: $input-prepend-append-outer-margin
&__prepend-outer
+ltr()
margin-right: $input-prepend-append-outer-margin
+rtl()
margin-left: $input-prepend-append-outer-margin
&__control
display: flex
flex-direction: column
height: auto
flex-grow: 1
flex-wrap: wrap
min-width: 0
width: 100% // For IE11
&__icon
align-items: center
display: inline-flex
height: $input-icon-height
flex: 1 0 auto
justify-content: center
min-width: $input-icon-min-width
width: $input-icon-width
&--clear
border-radius: 50%
.v-icon--disabled
visibility: hidden
&__slot
align-items: center
color: inherit
display: flex
margin-bottom: $input-slot-margin-bottom
min-height: inherit
position: relative
transition: $primary-transition
width: 100%
&--dense > .v-input__control > .v-input__slot
margin-bottom: $input-dense-slot-margin-bottom
&--is-loading > .v-input__control > .v-input__slot
&:before,
&:after
display: none
&--hide-details > .v-input__control > .v-input__slot
margin-bottom: 0
&--has-state
&.error--text .v-label
animation: v-shake .6s map-get($transition, 'swing')
&--hide-spin-buttons
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
-webkit-appearance: none
margin: 0
input[type=number]
-moz-appearance: textfield