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
151
152
153
154
155
156
157
158
159
160
161
162
|
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.9.8
*/
/* mixin definition ; sets LTR and RTL within the same style call */
md-input-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 2px;
padding-bottom: 26px;
/*
* The .md-input class is added to the input/textarea
*/ }
md-input-container > md-icon {
position: absolute;
top: 5px;
left: 2px; }
md-input-container > md-icon + input {
margin-left: 36px; }
md-input-container textarea, md-input-container input[type="text"], md-input-container input[type="password"], md-input-container input[type="datetime"], md-input-container input[type="datetime-local"], md-input-container input[type="date"], md-input-container input[type="month"], md-input-container input[type="time"], md-input-container input[type="week"], md-input-container input[type="number"], md-input-container input[type="email"], md-input-container input[type="url"], md-input-container input[type="search"], md-input-container input[type="tel"], md-input-container input[type="color"] {
/* remove default appearance from all input/textarea */
-moz-appearance: none;
-webkit-appearance: none; }
md-input-container input[type="date"], md-input-container input[type="datetime-local"], md-input-container input[type="month"], md-input-container input[type="time"], md-input-container input[type="week"] {
min-height: 26px; }
md-input-container textarea {
resize: none;
overflow: hidden; }
md-input-container textarea.md-input {
min-height: 56px;
-ms-flex-preferred-size: auto; }
md-input-container label {
position: relative;
top: -2px; }
md-input-container label:not(.md-no-float), md-input-container .md-placeholder:not(.md-select-label) {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
pointer-events: none;
-webkit-font-smoothing: antialiased;
padding-left: 2px;
z-index: 1;
-webkit-transform: translate3d(0, 28px, 0) scale(1);
transform: translate3d(0, 28px, 0) scale(1);
transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
-webkit-transform-origin: left top;
transform-origin: left top; }
html[dir=rtl] md-input-container label:not(.md-no-float), html[dir=rtl] md-input-container .md-placeholder:not(.md-select-label) {
-webkit-transform-origin: right top;
transform-origin: right top; }
md-input-container .md-placeholder:not(.md-select-label) {
position: absolute;
top: 0;
opacity: 0;
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0); }
md-input-container.md-input-focused .md-placeholder {
opacity: 1;
-webkit-transform: translate3d(0, 24px, 0);
transform: translate3d(0, 24px, 0); }
md-input-container.md-input-has-value .md-placeholder {
transition: none;
opacity: 0; }
md-input-container:not(.md-input-has-value) input:not(:focus) {
color: transparent; }
md-input-container .md-input {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
display: block;
background: none;
padding-top: 2px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
border-width: 0 0 1px 0;
line-height: 26px;
-ms-flex-preferred-size: 26px;
border-radius: 0; }
md-input-container .md-input:focus {
outline: none; }
md-input-container .md-input:invalid {
outline: none;
box-shadow: none; }
md-input-container ng-messages, md-input-container data-ng-messages, md-input-container x-ng-messages, md-input-container [ng-messages], md-input-container [data-ng-messages], md-input-container [x-ng-messages] {
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
position: relative; }
md-input-container ng-message, md-input-container data-ng-message, md-input-container x-ng-message, md-input-container [ng-message], md-input-container [data-ng-message], md-input-container [x-ng-message], md-input-container .md-char-counter {
-webkit-font-smoothing: antialiased;
position: absolute;
font-size: 12px;
line-height: 24px; }
md-input-container ng-message:not(.md-char-counter), md-input-container data-ng-message:not(.md-char-counter), md-input-container x-ng-message:not(.md-char-counter), md-input-container [ng-message]:not(.md-char-counter), md-input-container [data-ng-message]:not(.md-char-counter), md-input-container [x-ng-message]:not(.md-char-counter), md-input-container .md-char-counter:not(.md-char-counter) {
padding-right: 30px; }
md-input-container ng-message.ng-enter, md-input-container data-ng-message.ng-enter, md-input-container x-ng-message.ng-enter, md-input-container [ng-message].ng-enter, md-input-container [data-ng-message].ng-enter, md-input-container [x-ng-message].ng-enter, md-input-container .md-char-counter.ng-enter {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition-delay: 0.2s; }
md-input-container ng-message.ng-leave, md-input-container data-ng-message.ng-leave, md-input-container x-ng-message.ng-leave, md-input-container [ng-message].ng-leave, md-input-container [data-ng-message].ng-leave, md-input-container [x-ng-message].ng-leave, md-input-container .md-char-counter.ng-leave {
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-input-container ng-message.ng-enter, md-input-container ng-message.ng-leave.ng-leave-active, md-input-container data-ng-message.ng-enter, md-input-container data-ng-message.ng-leave.ng-leave-active, md-input-container x-ng-message.ng-enter, md-input-container x-ng-message.ng-leave.ng-leave-active, md-input-container [ng-message].ng-enter, md-input-container [ng-message].ng-leave.ng-leave-active, md-input-container [data-ng-message].ng-enter, md-input-container [data-ng-message].ng-leave.ng-leave-active, md-input-container [x-ng-message].ng-enter, md-input-container [x-ng-message].ng-leave.ng-leave-active, md-input-container .md-char-counter.ng-enter, md-input-container .md-char-counter.ng-leave.ng-leave-active {
opacity: 0;
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0); }
md-input-container ng-message.ng-leave, md-input-container ng-message.ng-enter.ng-enter-active, md-input-container data-ng-message.ng-leave, md-input-container data-ng-message.ng-enter.ng-enter-active, md-input-container x-ng-message.ng-leave, md-input-container x-ng-message.ng-enter.ng-enter-active, md-input-container [ng-message].ng-leave, md-input-container [ng-message].ng-enter.ng-enter-active, md-input-container [data-ng-message].ng-leave, md-input-container [data-ng-message].ng-enter.ng-enter-active, md-input-container [x-ng-message].ng-leave, md-input-container [x-ng-message].ng-enter.ng-enter-active, md-input-container .md-char-counter.ng-leave, md-input-container .md-char-counter.ng-enter.ng-enter-active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
md-input-container .md-char-counter {
bottom: 2px;
right: 2px; }
md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
-webkit-transform: translate3d(0, 6px, 0) scale(0.75);
transform: translate3d(0, 6px, 0) scale(0.75); }
md-input-container.md-input-focused .md-input, md-input-container .md-input.ng-invalid.ng-dirty {
padding-bottom: 0;
border-width: 0 0 2px 0; }
md-input-container .md-input[disabled], [disabled] md-input-container .md-input {
background-position: 0 bottom;
background-size: 4px 1px;
background-repeat: repeat-x;
margin-bottom: -1px; }
md-input-container.md-icon-float {
margin-top: -16px;
transition: margin-top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
md-input-container.md-icon-float > label {
pointer-events: none;
position: absolute;
margin-left: 36px; }
md-input-container.md-icon-float > md-icon {
top: 26px;
left: 2px; }
md-input-container.md-icon-float > md-icon + input {
margin-left: 36px; }
md-input-container.md-icon-float > input {
padding-top: 24px; }
md-input-container.md-icon-float.md-input-focused, md-input-container.md-icon-float.md-input-has-value {
margin-top: -8px; }
md-input-container.md-icon-float.md-input-focused label, md-input-container.md-icon-float.md-input-has-value label {
-webkit-transform: translate3d(0, 6px, 0) scale(0.75);
transform: translate3d(0, 6px, 0) scale(0.75);
transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s;
transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s; }
@media screen and (-ms-high-contrast: active) {
md-input-container.md-default-theme > md-icon {
fill: #fff; } }
|
