Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

fix(button): Update colors to match guidance #2598

Merged
merged 5 commits into from
Apr 19, 2018
Merged

fix(button): Update colors to match guidance #2598

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f216ff
fix(button): Update colors to match guidance
williamernest Apr 19, 2018
507e464
fix(button): Remove mixin
williamernest Apr 19, 2018
f35d58c
fix(button): Revert changes to border-radius and stroke width
williamernest Apr 19, 2018
7523450
fix(button): Revert adding disabled buttons to demo page
williamernest Apr 19, 2018
b7acaac
Merge branch 'master' into fix/button/update-colors
williamernest Apr 19, 2018
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
25 changes: 24 additions & 1 deletion demos/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
<a href="javascript:void(0)" class="mdc-button">
Link
</a>
<button class="mdc-button" disabled>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we already have a checkbox at the top of this demo page to disable all of the buttons?

Disabled
</button>
</div>
</fieldset>

Expand Down Expand Up @@ -161,6 +164,9 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised">
Link
</a>
<button class="mdc-button mdc-button--raised" disabled>
Disabled
</button>
</div>
</fieldset>

Expand Down Expand Up @@ -190,6 +196,9 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
<a href="javascript:void(0)" class="mdc-button mdc-button--unelevated">
Link
</a>
<button class="mdc-button mdc-button--unelevated" disabled>
Disabled
</button>
</div>
</fieldset>

Expand Down Expand Up @@ -219,6 +228,9 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
<a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
Link
</a>
<button class="mdc-button mdc-button--stroked" disabled>
Disabled
</button>
</div>
</fieldset>

Expand Down Expand Up @@ -275,6 +287,9 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
<a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
Link
</a>
<button class="mdc-button" disabled data-demo-no-js>
Disabled
</button>
</div>
</fieldset>

Expand Down Expand Up @@ -304,6 +319,9 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
Link
</a>
<button class="mdc-button mdc-button--raised" disabled data-demo-no-js>
Disabled
</button>
</div>
</fieldset>

Expand Down Expand Up @@ -333,7 +351,9 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
<a href="javascript:void(0)" class="mdc-button mdc-button--unelevated" data-demo-no-js>
Link
</a>
</a>
<button class="mdc-button mdc-button--unelevated" disabled data-demo-no-js>
Disabled
</button>
</div>
</fieldset>

Expand Down Expand Up @@ -363,6 +383,9 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
<a href="javascript:void(0)" class="mdc-button mdc-button--stroked" data-demo-no-js>
Link
</a>
<button class="mdc-button mdc-button--stroked" disabled data-demo-no-js>
Disabled
</button>
</div>
</fieldset>

Expand Down
8 changes: 4 additions & 4 deletions packages/mdc-button/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,8 @@

&:disabled {
@include mdc-theme-prop(background-color, transparent);
@include mdc-theme-prop(color, text-disabled-on-light);

color: $mdc-button-disabled-ink-color;
cursor: default;
pointer-events: none;
}
Expand Down Expand Up @@ -157,16 +157,16 @@
border-style: solid;

&:disabled {
@include mdc-theme-prop(border-color, text-disabled-on-light);
border-color: $mdc-button-disabled-ink-color;
}
}

@mixin mdc-button--filled_() {
@include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding);

&:disabled {
@include mdc-theme-prop(background-color, rgba(black, .12));
@include mdc-theme-prop(color, text-disabled-on-light);
background-color: rgba(mdc-theme-prop-value(on-surface), .12);
color: $mdc-button-disabled-ink-color;
}
}

Expand Down
2 changes: 2 additions & 0 deletions packages/mdc-button/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,5 @@ $mdc-button-height: 36px;
$mdc-button-horizontal-padding: 8px;
$mdc-button-contained-horizontal-padding: 16px;
$mdc-dense-button-height: 32px;

$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);