Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(toolbar): input placeholders and ink need more contrast #11378

Merged
merged 1 commit into from
Jul 1, 2020
Merged

fix(toolbar): input placeholders and ink need more contrast #11378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/components/input/input-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
md-input-container.md-THEME_NAME-theme {
.md-input {
@include input-placeholder-color('\'{{foreground-2}}\'');
color: '{{foreground-1}}';
border-color: '{{foreground-4}}';
@include input-placeholder-color('\'{{background-default-contrast-hint}}\'');
color: '{{background-default-contrast}}';
border-color: '{{background-default-contrast-divider}}';
}

> md-icon {
color: '{{foreground-1}}';
color: '{{background-default-contrast}}';
}

label,
.md-placeholder {
color: '{{foreground-2}}';
color: '{{background-default-contrast-hint}}';
}

label.md-required:after {
color: '{{warn-A700}}'
}

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

.md-input-messages-animation, .md-input-message-animation {
color: '{{warn-A700}}';
.md-char-counter {
color: '{{foreground-1}}';
color: '{{background-default-contrast}}';
}
}

&.md-input-focused {
.md-input {
@include input-placeholder-color('\'{{foreground-2}}\'');
@include input-placeholder-color('\'{{background-default-contrast-secondary}}\'');
}
}

&:not(.md-input-invalid) {
&.md-input-has-value {
label {
color: '{{foreground-2}}';
color: '{{background-default-contrast-secondary}}';
}
}
&.md-input-focused,
Expand Down Expand Up @@ -87,9 +87,9 @@ md-input-container.md-THEME_NAME-theme {
&[disabled],
[disabled] & {
border-bottom-color: transparent;
color: '{{foreground-3}}';
background-image: linear-gradient(to right, '{{foreground-3}}' 0%, '{{foreground-3}}' 33%, transparent 0%);
background-image: -ms-linear-gradient(left, transparent 0%, '{{foreground-3}}' 100%);
color: '{{background-default-contrast-disabled}}';
background-image: linear-gradient(to right, '{{background-default-contrast-disabled}}' 0%, '{{background-default-contrast-disabled}}' 33%, transparent 0%);
background-image: -ms-linear-gradient(left, transparent 0%, '{{background-default-contrast-disabled}}' 100%);
}
}
}
79 changes: 79 additions & 0 deletions src/components/toolbar/demoInputsInToolbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<div ng-controller="DemoCtrl" ng-cloak>
<md-toolbar class="md-accent">
<header layout="row" layout-align="start center">
<span>
<md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<label style="vertical-align: middle; margin-right: 24px;">ACME</label>
</span>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="primary" />
</md-input-container>
<md-input-container class="md-accent" md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="accent" />
</md-input-container>
<md-input-container class="md-warn" md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="warn" />
</md-input-container>
</header>
</md-toolbar>
<md-toolbar class="md-primary">
<header layout="row" layout-align="start center">
<span>
<md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<label style="vertical-align: middle; margin-right: 24px;">ACME</label>
</span>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="primary" />
</md-input-container>
<md-input-container class="md-accent" md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="accent" />
</md-input-container>
<md-input-container class="md-warn" md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="warn" />
</md-input-container>
</header>
</md-toolbar>
<md-toolbar class="md-warn">
<header layout="row" layout-align="start center">
<span>
<md-button class="md-icon-button md-primary" aria-label="Settings" disabled>
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
</md-button>
<label style="vertical-align: middle; margin-right: 24px;">ACME</label>
</span>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="primary" />
</md-input-container>
<md-input-container class="md-accent" md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="accent" />
</md-input-container>
<md-input-container class="md-warn" md-no-float>
<md-icon md-svg-src="img/icons/ic_person_24px.svg"></md-icon>
<input placeholder="warn" />
</md-input-container>
</header>
</md-toolbar>
<md-content class="md-margin">
<md-input-container md-no-float>
<input placeholder="primary no float" />
</md-input-container>
<md-input-container>
<input placeholder="primary" />
</md-input-container>
<md-input-container class="md-accent">
<input placeholder="accent" />
</md-input-container>
</md-content>
</div>
2 changes: 2 additions & 0 deletions src/components/toolbar/demoInputsInToolbar/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
angular.module('inputsInToolbarDemo', ['ngMaterial'])
.controller('DemoCtrl', function($scope) {});
14 changes: 14 additions & 0 deletions src/components/toolbar/demoInputsInToolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
md-toolbar {
header {
margin-top: 16px;

>span {
height: 58px;
margin: 18px 0;
}

md-input-container {
width: 160px;
}
}
}
108 changes: 108 additions & 0 deletions src/components/toolbar/toolbar-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,42 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
fill: '{{primary-contrast-0.26}}';
}

md-input-container[md-no-float] {
.md-input {
@include input-placeholder-color('\'{{primary-default-contrast-hint}}\'');
color: '{{primary-default-contrast}}';
border-color: '{{primary-default-contrast-divider}}';
}

&.md-input-focused {
.md-input {
@include input-placeholder-color('\'{{primary-default-contrast-secondary}}\'');
}
}

&:not(.md-input-invalid) {
&.md-input-focused,
&.md-input-resized {
.md-input {
border-color: '{{primary-contrast}}';
}
}

&.md-input-focused {
&.md-accent {
.md-input {
border-color: '{{accent-color}}';
}
}
&.md-warn {
.md-input {
border-color: '{{warn-A700}}';
}
}
}
}
}

&.md-accent {
background-color: '{{accent-color}}';
color: '{{accent-contrast}}';
Expand All @@ -29,10 +65,82 @@ md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) {
color: '{{accent-contrast-0.26}}';
fill: '{{accent-contrast-0.26}}';
}

md-input-container[md-no-float] {
.md-input {
@include input-placeholder-color('\'{{accent-default-contrast-hint}}\'');
color: '{{accent-default-contrast}}';
border-color: '{{accent-default-contrast-divider}}';
}

&.md-input-focused {
.md-input {
@include input-placeholder-color('\'{{accent-default-contrast-secondary}}\'');
}
}

&:not(.md-input-invalid) {
&.md-input-focused,
&.md-input-resized {
.md-input {
border-color: '{{primary-color}}';
}
}

&.md-input-focused {
&.md-accent {
.md-input {
border-color: '{{accent-contrast}}';
}
}
&.md-warn {
.md-input {
border-color: '{{warn-A700}}';
}
}
}
}
}
}

&.md-warn {
background-color: '{{warn-color}}';
color: '{{warn-contrast}}';

md-input-container[md-no-float] {
.md-input {
@include input-placeholder-color('\'{{warn-default-contrast-hint}}\'');
color: '{{warn-default-contrast}}';
border-color: '{{warn-default-contrast-divider}}';
}

&.md-input-focused {
.md-input {
@include input-placeholder-color('\'{{warn-default-contrast-secondary}}\'');
}
}

&:not(.md-input-invalid) {
&.md-input-focused,
&.md-input-resized {
.md-input {
border-color: '{{primary-color}}';
}
}

&.md-input-focused {
&.md-accent {
.md-input {
border-color: '{{accent-color}}';
}
}
&.md-warn {
.md-input {
border-color: '{{warn-contrast}}';
}
}
}
}
}
}
}