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

fix(button): Restore order of disabled styles #1176

Merged
merged 1 commit into from
Aug 23, 2017
Merged

fix(button): Restore order of disabled styles #1176

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
58 changes: 32 additions & 26 deletions demos/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,42 +95,52 @@
<section class="demo-wrapper">
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-dark" aria-labelledby="toggle-dark-label" />
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-dark" aria-labelledby="toggle-dark-label">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="toggle-dark" id="toggle-dark-label">Dark Theme</label>
</div>

<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" class="mdc-checkbox__native-control" id="toggle-disabled" aria-labelledby="toggle-disabled-label">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="toggle-disabled" id="toggle-disabled-label">Disable buttons (excluding links)</label>
</div>

<h1 class="mdc-typography--display2">Ripple Enabled</h1>
<fieldset>
<legend class="mdc-typography--title">Text Button</legend>
<div>
<button class="mdc-button">
Baseline
</button>
<a href="javascript:void(0)" class="mdc-button">
Link
</a>
<button class="mdc-button mdc-button--compact">
Compact
</button>
<button class="mdc-button mdc-button--dense">
Dense
</button>
<button disabled class="mdc-button">
Disabled
</button>
<button class="mdc-button mdc-button--primary">
Primary
</button>
<button class="mdc-button mdc-button--accent">
Accent
</button>
<a href="javascript:void(0)" class="mdc-button">
Link
</a>
</div>
</fieldset>

Expand All @@ -140,24 +150,21 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
<button class="mdc-button mdc-button--raised">
Baseline
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised">
Link
</a>
<button class="mdc-button mdc-button--raised mdc-button--compact">
Compact
</button>
<button class="mdc-button mdc-button--raised mdc-button--dense">
Dense
</button>
<button disabled class="mdc-button mdc-button--raised">
Disabled
</button>
<button class="mdc-button mdc-button--raised mdc-button--primary">
Primary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent">
Accent
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised">
Link
</a>
</div>
</fieldset>

Expand All @@ -168,24 +175,21 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
<button class="mdc-button" data-demo-no-js>
Baseline
</button>
<a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
Link
</a>
<button class="mdc-button mdc-button--compact" data-demo-no-js>
Compact
</button>
<button class="mdc-button mdc-button--dense" data-demo-no-js>
Dense
</button>
<button disabled class="mdc-button" data-demo-no-js>
Disabled
</button>
<button class="mdc-button mdc-button--primary" data-demo-no-js>
Primary
</button>
<button class="mdc-button mdc-button--accent" data-demo-no-js>
Accent
</button>
<a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
Link
</a>
</div>
</fieldset>

Expand All @@ -195,24 +199,21 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
<button class="mdc-button mdc-button--raised" data-demo-no-js>
Baseline
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
Link
</a>
<button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
Compact
</button>
<button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
Dense
</button>
<button disabled class="mdc-button mdc-button--raised" data-demo-no-js>
Disabled
</button>
<button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
Primary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
Accent
</button>
<a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
Link
</a>
</div>
</fieldset>
</section>
Expand Down Expand Up @@ -247,6 +248,11 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
demoWrapper.classList.remove('mdc-theme--dark');
}
});

document.getElementById('toggle-disabled').addEventListener('change', function () {
var isDisabled = this.checked;
[].slice.call(document.querySelectorAll('button')).forEach(button => button.disabled = isDisabled);
});
})();
</script>
</body>
Expand Down
56 changes: 31 additions & 25 deletions packages/mdc-button/mdc-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,17 +62,6 @@
-webkit-tap-highlight-color: rgba(black, .3);
}

fieldset:disabled &,
&:disabled {
color: rgba(black, .38);
cursor: default;
pointer-events: none;

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(color, text-disabled-on-dark);
}
}

@include mdc-theme-dark(".mdc-button") {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
Expand Down Expand Up @@ -104,20 +93,6 @@
@include mdc-elevation(8);
}

fieldset:disabled &,
&:disabled {
@include mdc-elevation(0);
@include mdc-theme-prop(color, text-primary-on-dark);

background-color: rgba(black, .15);

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(color, text-disabled-on-dark);

background-color: rgba(255, 255, 255, .15);
}
}

@include mdc-theme-dark(".mdc-button") {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before", base-color: black, opacity: .32));
Expand Down Expand Up @@ -174,4 +149,35 @@
}
}
}

// Disabled button styles need to be last to ensure they override other primary/accent/dark styles

.mdc-button {
fieldset:disabled &,
&:disabled {
color: rgba(black, .38);
cursor: default;
pointer-events: none;

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(color, text-disabled-on-dark);
}
}
}

.mdc-button--raised {
fieldset:disabled &,
&:disabled {
@include mdc-elevation(0);
@include mdc-theme-prop(color, text-primary-on-dark);

background-color: rgba(black, .15);

@include mdc-theme-dark(".mdc-button") {
@include mdc-theme-prop(color, text-disabled-on-dark);

background-color: rgba(255, 255, 255, .15);
}
}
}
// postcss-bem-linter: end