1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | @import "../variables";
|
18 | @import "../mixins";
|
19 |
|
20 |
|
21 | .mdl-textfield {
|
22 | position: relative;
|
23 | font-size: $input-text-font-size;
|
24 | display: inline-block;
|
25 | box-sizing: border-box;
|
26 | width: 300px;
|
27 | max-width: 100%;
|
28 | margin: 0;
|
29 | padding: $input-text-vertical-spacing 0;
|
30 |
|
31 |
|
32 | & .mdl-button {
|
33 | position: absolute;
|
34 | bottom: $input-text-vertical-spacing;
|
35 | }
|
36 | }
|
37 |
|
38 |
|
39 | .mdl-textfield--align-right {
|
40 | text-align: right;
|
41 | }
|
42 |
|
43 |
|
44 | .mdl-textfield--full-width {
|
45 | width: 100%;
|
46 | }
|
47 |
|
48 |
|
49 | .mdl-textfield--expandable {
|
50 | min-width: $input-text-button-size;
|
51 | width: auto;
|
52 | min-height: $input-text-button-size;
|
53 | }
|
54 |
|
55 |
|
56 | .mdl-textfield__input {
|
57 | border: none;
|
58 | border-bottom: 1px solid $input-text-bottom-border-color;
|
59 | display: block;
|
60 | font-size: $input-text-font-size;
|
61 | font-family: $performance_font;
|
62 | margin: 0;
|
63 | padding: $input-text-padding 0;
|
64 | width: $input-text-width;
|
65 | background: none;
|
66 | text-align: left;
|
67 | color: inherit;
|
68 |
|
69 | &[type="number"] {
|
70 | -moz-appearance: textfield;
|
71 | }
|
72 |
|
73 | &[type="number"]::-webkit-inner-spin-button,
|
74 | &[type="number"]::-webkit-outer-spin-button {
|
75 | -webkit-appearance: none;
|
76 | margin: 0;
|
77 | }
|
78 |
|
79 | .mdl-textfield.is-focused & {
|
80 | outline: none;
|
81 | }
|
82 |
|
83 | .mdl-textfield.is-invalid & {
|
84 | border-color: $input-text-error-color;
|
85 | box-shadow: none;
|
86 | }
|
87 |
|
88 | fieldset[disabled] .mdl-textfield &,
|
89 | .mdl-textfield.is-disabled & {
|
90 | background-color: transparent;
|
91 | border-bottom: 1px dotted $input-text-disabled-color;
|
92 | color: $input-text-disabled-text-color;
|
93 | }
|
94 | }
|
95 |
|
96 | .mdl-textfield textarea.mdl-textfield__input {
|
97 | display: block;
|
98 | }
|
99 |
|
100 |
|
101 | .mdl-textfield__label {
|
102 | bottom: 0;
|
103 | color: $input-text-label-color;
|
104 | font-size: $input-text-font-size;
|
105 | left: 0;
|
106 | right: 0;
|
107 | pointer-events: none;
|
108 | position: absolute;
|
109 | display: block;
|
110 | top: ($input-text-padding + $input-text-vertical-spacing);
|
111 | width: 100%;
|
112 | overflow: hidden;
|
113 | white-space: nowrap;
|
114 | text-align: left;
|
115 |
|
116 | .mdl-textfield.is-dirty & {
|
117 | visibility: hidden;
|
118 | }
|
119 |
|
120 |
|
121 | .mdl-textfield--floating-label & {
|
122 | @include material-animation-default();
|
123 | }
|
124 |
|
125 | fieldset[disabled] .mdl-textfield &,
|
126 | .mdl-textfield.is-disabled.is-disabled & {
|
127 | color: $input-text-disabled-text-color;
|
128 | }
|
129 |
|
130 | .mdl-textfield--floating-label.is-focused &,
|
131 | .mdl-textfield--floating-label.is-dirty & {
|
132 | color: $input-text-highlight-color;
|
133 | font-size : $input-text-floating-label-fontsize;
|
134 | top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);
|
135 | visibility: visible;
|
136 | }
|
137 |
|
138 | .mdl-textfield--floating-label.is-focused .mdl-textfield__expandable-holder &,
|
139 | .mdl-textfield--floating-label.is-dirty .mdl-textfield__expandable-holder &{
|
140 | top: -($input-text-floating-label-fontsize + $input-text-padding);
|
141 | }
|
142 |
|
143 | .mdl-textfield--floating-label.is-invalid & {
|
144 | color: $input-text-error-color;
|
145 | font-size: $input-text-floating-label-fontsize;
|
146 | }
|
147 |
|
148 |
|
149 | &:after {
|
150 | background-color: $input-text-highlight-color;
|
151 | bottom: $input-text-vertical-spacing;
|
152 | content: '';
|
153 | height: 2px;
|
154 | left: 45%;
|
155 | position: absolute;
|
156 | @include material-animation-default();
|
157 | visibility: hidden;
|
158 | width: 10px;
|
159 | }
|
160 |
|
161 | .mdl-textfield.is-focused &:after {
|
162 | left: 0;
|
163 | visibility: visible;
|
164 | width: 100%;
|
165 | }
|
166 |
|
167 | .mdl-textfield.is-invalid &:after {
|
168 | background-color: $input-text-error-color;
|
169 | }
|
170 | }
|
171 |
|
172 |
|
173 | .mdl-textfield__error {
|
174 | color: $input-text-error-color;
|
175 | position: absolute;
|
176 | font-size: $input-text-floating-label-fontsize;
|
177 | margin-top: 3px;
|
178 | visibility: hidden;
|
179 | display: block;
|
180 |
|
181 | .mdl-textfield.is-invalid & {
|
182 | visibility: visible;
|
183 | }
|
184 | }
|
185 |
|
186 |
|
187 | .mdl-textfield__expandable-holder {
|
188 | display: inline-block;
|
189 | position: relative;
|
190 | margin-left: $input-text-button-size;
|
191 |
|
192 | @include material-animation-default();
|
193 | display: inline-block;
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 | max-width: 0.1px;
|
200 |
|
201 | .mdl-textfield.is-focused &, .mdl-textfield.is-dirty & {
|
202 |
|
203 |
|
204 |
|
205 |
|
206 | max-width: 600px;
|
207 | }
|
208 | .mdl-textfield__label:after {
|
209 | bottom: 0;
|
210 | }
|
211 | }
|