Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit a82fc93

Browse files
SplaktarSplaktar
committedJul 1, 2020
fix(toolbar): input placeholders and ink need more contrast
Fixes #7987. Relates to #11376.
1 parent 01917b3 commit a82fc93

File tree

5 files changed

+215
-12
lines changed

5 files changed

+215
-12
lines changed
 

‎src/components/input/input-theme.scss

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
11
md-input-container.md-THEME_NAME-theme {
22
.md-input {
3-
@include input-placeholder-color('\'{{foreground-2}}\'');
4-
color: '{{foreground-1}}';
5-
border-color: '{{foreground-4}}';
3+
@include input-placeholder-color('\'{{background-default-contrast-hint}}\'');
4+
color: '{{background-default-contrast}}';
5+
border-color: '{{background-default-contrast-divider}}';
66
}
77

88
> md-icon {
9-
color: '{{foreground-1}}';
9+
color: '{{background-default-contrast}}';
1010
}
1111

1212
label,
1313
.md-placeholder {
14-
color: '{{foreground-2}}';
14+
color: '{{background-default-contrast-hint}}';
1515
}
1616

1717
label.md-required:after {
1818
color: '{{warn-A700}}'
1919
}
2020

2121
&:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
22-
color: '{{foreground-2}}';
22+
color: '{{background-default-contrast-secondary}}';
2323
}
2424

2525
.md-input-messages-animation, .md-input-message-animation {
2626
color: '{{warn-A700}}';
2727
.md-char-counter {
28-
color: '{{foreground-1}}';
28+
color: '{{background-default-contrast}}';
2929
}
3030
}
3131

3232
&.md-input-focused {
3333
.md-input {
34-
@include input-placeholder-color('\'{{foreground-2}}\'');
34+
@include input-placeholder-color('\'{{background-default-contrast-secondary}}\'');
3535
}
3636
}
3737

3838
&:not(.md-input-invalid) {
3939
&.md-input-has-value {
4040
label {
41-
color: '{{foreground-2}}';
41+
color: '{{background-default-contrast-secondary}}';
4242
}
4343
}
4444
&.md-input-focused,
@@ -87,9 +87,9 @@ md-input-container.md-THEME_NAME-theme {
8787
&[disabled],
8888
[disabled] & {
8989
border-bottom-color: transparent;
90-
color: '{{foreground-3}}';
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%);
90+
color: '{{background-default-contrast-disabled}}';
91+
background-image: linear-gradient(to right, '{{background-default-contrast-disabled}}' 0%, '{{background-default-contrast-disabled}}' 33%, transparent 0%);
92+
background-image: -ms-linear-gradient(left, transparent 0%, '{{background-default-contrast-disabled}}' 100%);
9393
}
9494
}
9595
}

‎src/components/toolbar/demoInputsInToolbar/index.html

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<div ng-controller="DemoCtrl" ng-cloak>
2+
<md-toolbar class="md-accent">
3+
<header layout="row" layout-align="start center">
4+
<span>
5+
<md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
6+
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
7+
</md-button>
8+
<label style="vertical-align: middle; margin-right: 24px;">ACME</label>
9+
</span>
10+
<md-input-container md-no-float>
11+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
12+
<input placeholder="primary" />
13+
</md-input-container>
14+
<md-input-container class="md-accent" md-no-float>
15+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
16+
<input placeholder="accent" />
17+
</md-input-container>
18+
<md-input-container class="md-warn" md-no-float>
19+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
20+
<input placeholder="warn" />
21+
</md-input-container>
22+
</header>
23+
</md-toolbar>
24+
<md-toolbar class="md-primary">
25+
<header layout="row" layout-align="start center">
26+
<span>
27+
<md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
28+
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
29+
</md-button>
30+
<label style="vertical-align: middle; margin-right: 24px;">ACME</label>
31+
</span>
32+
<md-input-container md-no-float>
33+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
34+
<input placeholder="primary" />
35+
</md-input-container>
36+
<md-input-container class="md-accent" md-no-float>
37+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
38+
<input placeholder="accent" />
39+
</md-input-container>
40+
<md-input-container class="md-warn" md-no-float>
41+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
42+
<input placeholder="warn" />
43+
</md-input-container>
44+
</header>
45+
</md-toolbar>
46+
<md-toolbar class="md-warn">
47+
<header layout="row" layout-align="start center">
48+
<span>
49+
<md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
50+
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
51+
</md-button>
52+
<label style="vertical-align: middle; margin-right: 24px;">ACME</label>
53+
</span>
54+
<md-input-container md-no-float>
55+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
56+
<input placeholder="primary" />
57+
</md-input-container>
58+
<md-input-container class="md-accent" md-no-float>
59+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
60+
<input placeholder="accent" />
61+
</md-input-container>
62+
<md-input-container class="md-warn" md-no-float>
63+
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
64+
<input placeholder="warn" />
65+
</md-input-container>
66+
</header>
67+
</md-toolbar>
68+
<md-content class="md-margin">
69+
<md-input-container md-no-float>
70+
<input placeholder="primary no float" />
71+
</md-input-container>
72+
<md-input-container>
73+
<input placeholder="primary" />
74+
</md-input-container>
75+
<md-input-container class="md-accent">
76+
<input placeholder="accent" />
77+
</md-input-container>
78+
</md-content>
79+
</div>

‎src/components/toolbar/demoInputsInToolbar/script.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
angular.module('inputsInToolbarDemo', ['ngMaterial'])
2+
.controller('DemoCtrl', function($scope) {});

‎src/components/toolbar/demoInputsInToolbar/style.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
md-toolbar {
2+
header {
3+
margin-top: 16px;
4+
5+
>span {
6+
height: 58px;
7+
margin: 18px 0;
8+
}
9+
10+
md-input-container {
11+
width: 160px;
12+
}
13+
}
14+
}

‎src/components/toolbar/toolbar-theme.scss

+108
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,42 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
1212
fill: '{{primary-contrast-0.26}}';
1313
}
1414

15+
md-input-container[md-no-float] {
16+
.md-input {
17+
@include input-placeholder-color('\'{{primary-default-contrast-hint}}\'');
18+
color: '{{primary-default-contrast}}';
19+
border-color: '{{primary-default-contrast-divider}}';
20+
}
21+
22+
&.md-input-focused {
23+
.md-input {
24+
@include input-placeholder-color('\'{{primary-default-contrast-secondary}}\'');
25+
}
26+
}
27+
28+
&:not(.md-input-invalid) {
29+
&.md-input-focused,
30+
&.md-input-resized {
31+
.md-input {
32+
border-color: '{{primary-contrast}}';
33+
}
34+
}
35+
36+
&.md-input-focused {
37+
&.md-accent {
38+
.md-input {
39+
border-color: '{{accent-color}}';
40+
}
41+
}
42+
&.md-warn {
43+
.md-input {
44+
border-color: '{{warn-A700}}';
45+
}
46+
}
47+
}
48+
}
49+
}
50+
1551
&.md-accent {
1652
background-color: '{{accent-color}}';
1753
color: '{{accent-contrast}}';
@@ -29,10 +65,82 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
2965
color: '{{accent-contrast-0.26}}';
3066
fill: '{{accent-contrast-0.26}}';
3167
}
68+
69+
md-input-container[md-no-float] {
70+
.md-input {
71+
@include input-placeholder-color('\'{{accent-default-contrast-hint}}\'');
72+
color: '{{accent-default-contrast}}';
73+
border-color: '{{accent-default-contrast-divider}}';
74+
}
75+
76+
&.md-input-focused {
77+
.md-input {
78+
@include input-placeholder-color('\'{{accent-default-contrast-secondary}}\'');
79+
}
80+
}
81+
82+
&:not(.md-input-invalid) {
83+
&.md-input-focused,
84+
&.md-input-resized {
85+
.md-input {
86+
border-color: '{{primary-color}}';
87+
}
88+
}
89+
90+
&.md-input-focused {
91+
&.md-accent {
92+
.md-input {
93+
border-color: '{{accent-contrast}}';
94+
}
95+
}
96+
&.md-warn {
97+
.md-input {
98+
border-color: '{{warn-A700}}';
99+
}
100+
}
101+
}
102+
}
103+
}
32104
}
33105

34106
&.md-warn {
35107
background-color: '{{warn-color}}';
36108
color: '{{warn-contrast}}';
109+
110+
md-input-container[md-no-float] {
111+
.md-input {
112+
@include input-placeholder-color('\'{{warn-default-contrast-hint}}\'');
113+
color: '{{warn-default-contrast}}';
114+
border-color: '{{warn-default-contrast-divider}}';
115+
}
116+
117+
&.md-input-focused {
118+
.md-input {
119+
@include input-placeholder-color('\'{{warn-default-contrast-secondary}}\'');
120+
}
121+
}
122+
123+
&:not(.md-input-invalid) {
124+
&.md-input-focused,
125+
&.md-input-resized {
126+
.md-input {
127+
border-color: '{{primary-color}}';
128+
}
129+
}
130+
131+
&.md-input-focused {
132+
&.md-accent {
133+
.md-input {
134+
border-color: '{{accent-color}}';
135+
}
136+
}
137+
&.md-warn {
138+
.md-input {
139+
border-color: '{{warn-contrast}}';
140+
}
141+
}
142+
}
143+
}
144+
}
37145
}
38146
}

0 commit comments

Comments
 (0)
Failed to load comments.