| 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; } }
|
|---|
