Skip to content

Commit

Permalink
fix(button): Restore order of disabled styles (#1176)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kfranqueiro
kfranqueiro committed Aug 23, 2017
1 parent 3a24bca commit 6ffed49
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 51 deletions.
58 changes: 32 additions & 26 deletions demos/button.html
View file
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
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

0 comments on commit 6ffed49

Please sign in to comment.