2 * Angular Material Design
3 * https://github.com/angular/material
7 md-input-container.md-THEME_NAME-theme .md-input {
8 color: '{{foreground-1}}';
9 border-color: '{{foreground-4}}'; }
10 md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder {
11 color: '{{foreground-3}}'; }
12 md-input-container.md-THEME_NAME-theme .md-input:-moz-placeholder {
13 color: '{{foreground-3}}'; }
14 md-input-container.md-THEME_NAME-theme .md-input::-moz-placeholder {
15 color: '{{foreground-3}}'; }
16 md-input-container.md-THEME_NAME-theme .md-input:-ms-input-placeholder {
17 color: '{{foreground-3}}'; }
18 md-input-container.md-THEME_NAME-theme .md-input::-webkit-input-placeholder {
19 color: '{{foreground-3}}'; }
21 md-input-container.md-THEME_NAME-theme > md-icon {
22 color: '{{foreground-1}}'; }
24 md-input-container.md-THEME_NAME-theme label,
25 md-input-container.md-THEME_NAME-theme .md-placeholder {
26 color: '{{foreground-3}}'; }
28 md-input-container.md-THEME_NAME-theme label.md-required:after {
29 color: '{{warn-A700}}'; }
31 md-input-container.md-THEME_NAME-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
32 color: '{{foreground-2}}'; }
34 md-input-container.md-THEME_NAME-theme .md-input-messages-animation, md-input-container.md-THEME_NAME-theme .md-input-message-animation {
35 color: '{{warn-A700}}'; }
36 md-input-container.md-THEME_NAME-theme .md-input-messages-animation .md-char-counter, md-input-container.md-THEME_NAME-theme .md-input-message-animation .md-char-counter {
37 color: '{{foreground-1}}'; }
39 md-input-container.md-THEME_NAME-theme.md-input-focused .md-input::-webkit-input-placeholder {
40 color: '{{foreground-2}}'; }
42 md-input-container.md-THEME_NAME-theme.md-input-focused .md-input:-moz-placeholder {
43 color: '{{foreground-2}}'; }
45 md-input-container.md-THEME_NAME-theme.md-input-focused .md-input::-moz-placeholder {
46 color: '{{foreground-2}}'; }
48 md-input-container.md-THEME_NAME-theme.md-input-focused .md-input:-ms-input-placeholder {
49 color: '{{foreground-2}}'; }
51 md-input-container.md-THEME_NAME-theme.md-input-focused .md-input::-webkit-input-placeholder {
52 color: '{{foreground-2}}'; }
54 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-has-value label {
55 color: '{{foreground-2}}'; }
57 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused .md-input, md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-resized .md-input {
58 border-color: '{{primary-color}}'; }
60 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused label,
61 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused md-icon {
62 color: '{{primary-color}}'; }
64 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent .md-input {
65 border-color: '{{accent-color}}'; }
67 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent label,
68 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-accent md-icon {
69 color: '{{accent-color}}'; }
71 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn .md-input {
72 border-color: '{{warn-A700}}'; }
74 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn label,
75 md-input-container.md-THEME_NAME-theme:not(.md-input-invalid).md-input-focused.md-warn md-icon {
76 color: '{{warn-A700}}'; }
78 md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input {
79 border-color: '{{warn-A700}}'; }
81 md-input-container.md-THEME_NAME-theme.md-input-invalid label,
82 md-input-container.md-THEME_NAME-theme.md-input-invalid .md-input-message-animation,
83 md-input-container.md-THEME_NAME-theme.md-input-invalid .md-char-counter {
84 color: '{{warn-A700}}'; }
86 md-input-container.md-THEME_NAME-theme .md-input[disabled],
87 [disabled] md-input-container.md-THEME_NAME-theme .md-input {
88 border-bottom-color: transparent;
89 color: '{{foreground-3}}';
90 background-image: -webkit-linear-gradient(left, "{{foreground-3}}" 0%, "{{foreground-3}}" 33%, transparent 0%);
91 background-image: linear-gradient(to right, "{{foreground-3}}" 0%, "{{foreground-3}}" 33%, transparent 0%);
92 background-image: -ms-linear-gradient(left, transparent 0%, "{{foreground-3}}" 100%); }