1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | md-input-container {
|
---|
8 | display: inline-block;
|
---|
9 | position: relative;
|
---|
10 | padding: 2px;
|
---|
11 | margin: 18px 0px;
|
---|
12 | vertical-align: middle;
|
---|
13 | /*
|
---|
14 | * The .md-input class is added to the input/textarea
|
---|
15 | */ }
|
---|
16 | md-input-container:after {
|
---|
17 | content: '';
|
---|
18 | display: table;
|
---|
19 | clear: both; }
|
---|
20 | md-input-container.md-block {
|
---|
21 | display: block; }
|
---|
22 | md-input-container .md-errors-spacer {
|
---|
23 | float: right;
|
---|
24 | min-height: 24px;
|
---|
25 | min-width: 1px; }
|
---|
26 | [dir=rtl] md-input-container .md-errors-spacer {
|
---|
27 | float: left; }
|
---|
28 | md-input-container > md-icon {
|
---|
29 | position: absolute;
|
---|
30 | top: 8px;
|
---|
31 | left: 2px;
|
---|
32 | right: auto; }
|
---|
33 | [dir=rtl] md-input-container > md-icon {
|
---|
34 | left: auto; }
|
---|
35 | [dir=rtl] md-input-container > md-icon {
|
---|
36 | right: 2px; }
|
---|
37 | md-input-container textarea,
|
---|
38 | md-input-container input[type="text"],
|
---|
39 | md-input-container input[type="password"],
|
---|
40 | md-input-container input[type="datetime"],
|
---|
41 | md-input-container input[type="datetime-local"],
|
---|
42 | md-input-container input[type="date"],
|
---|
43 | md-input-container input[type="month"],
|
---|
44 | md-input-container input[type="time"],
|
---|
45 | md-input-container input[type="week"],
|
---|
46 | md-input-container input[type="number"],
|
---|
47 | md-input-container input[type="email"],
|
---|
48 | md-input-container input[type="url"],
|
---|
49 | md-input-container input[type="search"],
|
---|
50 | md-input-container input[type="tel"],
|
---|
51 | md-input-container input[type="color"] {
|
---|
52 | /* remove default appearance from all input/textarea */
|
---|
53 | -moz-appearance: none;
|
---|
54 | -webkit-appearance: none; }
|
---|
55 | md-input-container input[type="date"],
|
---|
56 | md-input-container input[type="datetime-local"],
|
---|
57 | md-input-container input[type="month"],
|
---|
58 | md-input-container input[type="time"],
|
---|
59 | md-input-container input[type="week"] {
|
---|
60 | min-height: 30px; }
|
---|
61 | md-input-container textarea {
|
---|
62 | resize: none;
|
---|
63 | overflow: hidden; }
|
---|
64 | md-input-container textarea.md-input {
|
---|
65 | min-height: 30px;
|
---|
66 | -ms-flex-preferred-size: auto; }
|
---|
67 | md-input-container textarea[md-no-autogrow] {
|
---|
68 | height: auto;
|
---|
69 | overflow: auto; }
|
---|
70 | md-input-container label:not(.md-container-ignore) {
|
---|
71 | position: absolute;
|
---|
72 | bottom: 100%;
|
---|
73 | left: 0;
|
---|
74 | right: auto; }
|
---|
75 | [dir=rtl] md-input-container label:not(.md-container-ignore) {
|
---|
76 | left: auto; }
|
---|
77 | [dir=rtl] md-input-container label:not(.md-container-ignore) {
|
---|
78 | right: 0; }
|
---|
79 | md-input-container label:not(.md-container-ignore).md-required:after {
|
---|
80 | content: ' *';
|
---|
81 | font-size: 13px;
|
---|
82 | vertical-align: top; }
|
---|
83 | md-input-container label:not(.md-no-float):not(.md-container-ignore),
|
---|
84 | md-input-container .md-placeholder {
|
---|
85 | overflow: hidden;
|
---|
86 | text-overflow: ellipsis;
|
---|
87 | white-space: nowrap;
|
---|
88 | width: 100%;
|
---|
89 | order: 1;
|
---|
90 | pointer-events: none;
|
---|
91 | -webkit-font-smoothing: antialiased;
|
---|
92 | padding-left: 2px;
|
---|
93 | padding-right: 0;
|
---|
94 | z-index: 1;
|
---|
95 | transform: translate3d(0, 28px, 0) scale(1);
|
---|
96 | transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
---|
97 | max-width: 100%;
|
---|
98 | transform-origin: left top; }
|
---|
99 | [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
|
---|
100 | md-input-container .md-placeholder {
|
---|
101 | padding-left: 0; }
|
---|
102 | [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
|
---|
103 | md-input-container .md-placeholder {
|
---|
104 | padding-right: 2px; }
|
---|
105 | [dir=rtl] md-input-container label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
|
---|
106 | md-input-container .md-placeholder {
|
---|
107 | transform-origin: right top; }
|
---|
108 | md-input-container.md-input-has-value label:not(.md-no-float):not(.md-container-ignore),
|
---|
109 | md-input-container.md-input-has-value .md-placeholder {
|
---|
110 | padding-left: 3px;
|
---|
111 | padding-right: 0; }
|
---|
112 | [dir=rtl] md-input-container.md-input-has-value label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
|
---|
113 | md-input-container.md-input-has-value .md-placeholder {
|
---|
114 | padding-left: 0; }
|
---|
115 | [dir=rtl] md-input-container.md-input-has-value label:not(.md-no-float):not(.md-container-ignore), [dir=rtl]
|
---|
116 | md-input-container.md-input-has-value .md-placeholder {
|
---|
117 | padding-right: 3px; }
|
---|
118 | md-input-container .md-placeholder {
|
---|
119 | position: absolute;
|
---|
120 | top: 0;
|
---|
121 | opacity: 0;
|
---|
122 | transition-property: opacity, transform;
|
---|
123 | transform: translate3d(0, 30px, 0); }
|
---|
124 | md-input-container.md-input-focused .md-placeholder {
|
---|
125 | opacity: 1;
|
---|
126 | transform: translate3d(0, 24px, 0); }
|
---|
127 | md-input-container.md-input-has-value .md-placeholder {
|
---|
128 | transition: none;
|
---|
129 | opacity: 0; }
|
---|
130 | md-input-container:not(.md-input-has-value):not(.md-input-has-placeholder) input:not(:focus) {
|
---|
131 | color: transparent; }
|
---|
132 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
|
---|
133 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
|
---|
134 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
|
---|
135 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
|
---|
136 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
|
---|
137 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
|
---|
138 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
|
---|
139 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
|
---|
140 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
|
---|
141 | md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
|
---|
142 | color: transparent; }
|
---|
143 | md-input-container .md-input {
|
---|
144 | order: 2;
|
---|
145 | display: block;
|
---|
146 | margin-top: 0;
|
---|
147 | background: none;
|
---|
148 | padding-top: 2px;
|
---|
149 | padding-bottom: 1px;
|
---|
150 | padding-left: 0;
|
---|
151 | padding-right: 2px;
|
---|
152 | border-width: 0 0 1px 0;
|
---|
153 | line-height: 26px;
|
---|
154 | height: 30px;
|
---|
155 | -ms-flex-preferred-size: 26px;
|
---|
156 | border-radius: 0;
|
---|
157 | border-style: solid;
|
---|
158 | transition: border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
---|
159 | width: 100%;
|
---|
160 | box-sizing: border-box;
|
---|
161 | float: left; }
|
---|
162 | [dir=rtl] md-input-container .md-input {
|
---|
163 | padding-left: 2px; }
|
---|
164 | [dir=rtl] md-input-container .md-input {
|
---|
165 | padding-right: 0; }
|
---|
166 | [dir=rtl] md-input-container .md-input {
|
---|
167 | float: right; }
|
---|
168 | md-input-container .md-input:focus {
|
---|
169 | outline: none; }
|
---|
170 | md-input-container .md-input:invalid {
|
---|
171 | outline: none;
|
---|
172 | box-shadow: none; }
|
---|
173 | md-input-container .md-input.md-no-flex {
|
---|
174 | flex: none !important; }
|
---|
175 | md-input-container .md-char-counter {
|
---|
176 | text-align: right;
|
---|
177 | padding-right: 2px;
|
---|
178 | padding-left: 0; }
|
---|
179 | [dir=rtl] md-input-container .md-char-counter {
|
---|
180 | text-align: left; }
|
---|
181 | [dir=rtl] md-input-container .md-char-counter {
|
---|
182 | padding-right: 0; }
|
---|
183 | [dir=rtl] md-input-container .md-char-counter {
|
---|
184 | padding-left: 2px; }
|
---|
185 | md-input-container .md-input-messages-animation {
|
---|
186 | position: relative;
|
---|
187 | order: 4;
|
---|
188 | overflow: hidden;
|
---|
189 | clear: left; }
|
---|
190 | [dir=rtl] md-input-container .md-input-messages-animation {
|
---|
191 | clear: right; }
|
---|
192 | md-input-container .md-input-message-animation, md-input-container .md-char-counter {
|
---|
193 | font-size: 12px;
|
---|
194 | line-height: 14px;
|
---|
195 | overflow: hidden;
|
---|
196 | transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
|
---|
197 | opacity: 1;
|
---|
198 | margin-top: 0;
|
---|
199 | padding-top: 8px; }
|
---|
200 | md-input-container .md-input-message-animation:not(.md-char-counter), md-input-container .md-char-counter:not(.md-char-counter) {
|
---|
201 | padding-right: 5px;
|
---|
202 | padding-left: 0; }
|
---|
203 | [dir=rtl] md-input-container .md-input-message-animation:not(.md-char-counter), [dir=rtl] md-input-container .md-char-counter:not(.md-char-counter) {
|
---|
204 | padding-right: 0; }
|
---|
205 | [dir=rtl] md-input-container .md-input-message-animation:not(.md-char-counter), [dir=rtl] md-input-container .md-char-counter:not(.md-char-counter) {
|
---|
206 | padding-left: 5px; }
|
---|
207 | md-input-container:not(.md-input-invalid) .md-auto-hide .md-input-message-animation {
|
---|
208 | opacity: 0;
|
---|
209 | margin-top: -100px; }
|
---|
210 | md-input-container .md-input-message-animation.ng-enter-prepare {
|
---|
211 | opacity: 0;
|
---|
212 | margin-top: -100px; }
|
---|
213 | md-input-container .md-input-message-animation.ng-enter:not(.ng-enter-active) {
|
---|
214 | opacity: 0;
|
---|
215 | margin-top: -100px; }
|
---|
216 | md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
|
---|
217 | transform: translate3d(0, 6px, 0) scale(0.75);
|
---|
218 | transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s; }
|
---|
219 | md-input-container.md-input-has-value label {
|
---|
220 | transition: none; }
|
---|
221 | md-input-container.md-input-focused .md-input,
|
---|
222 | md-input-container .md-input.ng-invalid.ng-dirty,
|
---|
223 | md-input-container.md-input-resized .md-input {
|
---|
224 | padding-bottom: 0;
|
---|
225 | border-width: 0 0 2px 0; }
|
---|
226 | md-input-container .md-input[disabled],
|
---|
227 | [disabled] md-input-container .md-input {
|
---|
228 | background-position: bottom -1px left 0;
|
---|
229 | background-size: 4px 1px;
|
---|
230 | background-repeat: repeat-x; }
|
---|
231 | md-input-container.md-icon-float {
|
---|
232 | transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
|
---|
233 | md-input-container.md-icon-float > label {
|
---|
234 | pointer-events: none;
|
---|
235 | position: absolute; }
|
---|
236 | md-input-container.md-icon-float > md-icon {
|
---|
237 | top: 8px;
|
---|
238 | left: 2px;
|
---|
239 | right: auto; }
|
---|
240 | [dir=rtl] md-input-container.md-icon-float > md-icon {
|
---|
241 | left: auto; }
|
---|
242 | [dir=rtl] md-input-container.md-icon-float > md-icon {
|
---|
243 | right: 2px; }
|
---|
244 | md-input-container.md-icon-left > label:not(.md-no-float):not(.md-container-ignore),
|
---|
245 | md-input-container.md-icon-left > label .md-placeholder, md-input-container.md-icon-right > label:not(.md-no-float):not(.md-container-ignore),
|
---|
246 | md-input-container.md-icon-right > label .md-placeholder {
|
---|
247 | width: calc(100% - 36px);
|
---|
248 | padding: 0; }
|
---|
249 | md-input-container.md-icon-left {
|
---|
250 | padding-left: 36px;
|
---|
251 | padding-right: 0; }
|
---|
252 | [dir=rtl] md-input-container.md-icon-left {
|
---|
253 | padding-left: 0; }
|
---|
254 | [dir=rtl] md-input-container.md-icon-left {
|
---|
255 | padding-right: 36px; }
|
---|
256 | md-input-container.md-icon-left > label {
|
---|
257 | left: 36px;
|
---|
258 | right: auto; }
|
---|
259 | [dir=rtl] md-input-container.md-icon-left > label {
|
---|
260 | left: auto; }
|
---|
261 | [dir=rtl] md-input-container.md-icon-left > label {
|
---|
262 | right: 36px; }
|
---|
263 | md-input-container.md-icon-right {
|
---|
264 | padding-left: 0;
|
---|
265 | padding-right: 36px; }
|
---|
266 | [dir=rtl] md-input-container.md-icon-right {
|
---|
267 | padding-left: 36px; }
|
---|
268 | [dir=rtl] md-input-container.md-icon-right {
|
---|
269 | padding-right: 0; }
|
---|
270 | md-input-container.md-icon-right > md-icon:last-of-type {
|
---|
271 | margin: 0;
|
---|
272 | right: 2px;
|
---|
273 | left: auto; }
|
---|
274 | [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type {
|
---|
275 | right: auto; }
|
---|
276 | [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type {
|
---|
277 | left: 2px; }
|
---|
278 | md-input-container.md-icon-left.md-icon-right {
|
---|
279 | padding-left: 36px;
|
---|
280 | padding-right: 36px; }
|
---|
281 | md-input-container.md-icon-left.md-icon-right > label:not(.md-no-float):not(.md-container-ignore),
|
---|
282 | md-input-container.md-icon-left.md-icon-right > label .md-placeholder {
|
---|
283 | width: calc(100% - (36px * 2)); }
|
---|
284 |
|
---|
285 | .md-resize-wrapper {
|
---|
286 | position: relative; }
|
---|
287 | .md-resize-wrapper:after {
|
---|
288 | content: '';
|
---|
289 | display: table;
|
---|
290 | clear: both; }
|
---|
291 |
|
---|
292 | .md-resize-handle {
|
---|
293 | position: absolute;
|
---|
294 | bottom: -5px;
|
---|
295 | left: 0;
|
---|
296 | height: 10px;
|
---|
297 | background: transparent;
|
---|
298 | width: 100%;
|
---|
299 | cursor: ns-resize; }
|
---|
300 |
|
---|
301 | @media screen and (-ms-high-contrast: active) {
|
---|
302 | md-input-container.md-default-theme > md-icon {
|
---|
303 | fill: #fff; } }
|
---|