Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(button): removed dark theme from buttons #2038

Merged
merged 9 commits into from
Jan 23, 2018
Merged

feat(button): removed dark theme from buttons #2038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1cc26cc
chore(button): removed dark theme from buttons
Jan 23, 2018
ec06bd0
Merge branch 'master' into chore/button/remove-dark-theme
Jan 23, 2018
5ce8bc7
Merge branch 'master' into chore/button/remove-dark-theme
Jan 23, 2018
c9a316e
chore(package): removed todo, added todo with dark theme removal
Jan 23, 2018
35add18
Merge branch 'master' into chore/button/remove-dark-theme
Jan 23, 2018
dbac1e4
Docs/list/new readme (#2033)
Jan 23, 2018
7935f74
Merge branch 'master' into chore/button/remove-dark-theme
Jan 23, 2018
47ca596
Merge branch 'master' into chore/button/remove-dark-theme
Jan 23, 2018
9590392
Merge branch 'master' into chore/button/remove-dark-theme
Jan 23, 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
30 changes: 0 additions & 30 deletions demos/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,6 @@
padding-bottom: 100px;
}

.demo-wrapper.mdc-theme--dark{
background-color: #333;
}

.demo-wrapper.mdc-theme--dark fieldset legend, .demo-wrapper.mdc-theme--dark h1 {
color: #f0f0f0;
}

fieldset {
padding: 24px;
padding-top: 0;
Expand Down Expand Up @@ -102,19 +94,6 @@
</section>

<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">
<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-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">
Expand Down Expand Up @@ -364,15 +343,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
mdc.ripple.MDCRipple.attachTo(btn);
}

var demoWrapper = document.querySelector('.demo-wrapper');
document.getElementById('toggle-dark').addEventListener('change', function() {
if (this.checked) {
demoWrapper.classList.add('mdc-theme--dark');
} else {
demoWrapper.classList.remove('mdc-theme--dark');
}
});

document.getElementById('toggle-disabled').addEventListener('change', function() {
var isDisabled = this.checked;
[].forEach.call(document.querySelectorAll('button'), function(button) {
Expand Down
15 changes: 0 additions & 15 deletions demos/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,16 @@
.mdc-button.secondary-text-button {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-states(secondary);

@include mdc-theme-dark(".mdc-button") {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-states(secondary);
}
}

.mdc-button.secondary-filled-button {
@include mdc-button-filled-accessible($mdc-theme-secondary);

@include mdc-theme-dark(".mdc-button") {
@include mdc-button-filled-accessible($mdc-theme-secondary);
}
}

.mdc-button.secondary-stroked-button {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-button-stroke-color($mdc-theme-secondary);
@include mdc-states(secondary);

@include mdc-theme-dark(".mdc-button") {
@include mdc-button-ink-color($mdc-theme-secondary);
@include mdc-button-stroke-color($mdc-theme-secondary);
@include mdc-states(secondary);
}
}

.mdc-button.big-round-corner-button {
Expand Down
1 change: 1 addition & 0 deletions demos/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ fieldset {
border: 0;
}

// TODO mgoo: remove these dark theme when complete with removing other components
.mdc-button {
@include mdc-theme-dark {
@include mdc-button-ink-color($dark-button-color);
Expand Down
13 changes: 0 additions & 13 deletions packages/mdc-button/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,6 @@

cursor: default;
pointer-events: none;

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

Expand All @@ -145,22 +141,13 @@

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

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

@mixin mdc-button--filled_() {
&:disabled {
@include mdc-theme-prop(background-color, rgba(black, .12));
@include mdc-theme-prop(color, text-disabled-on-light);

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

Expand Down
2 changes: 2 additions & 0 deletions packages/mdc-theme/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@
// }
// }
// ```

// TODO: matt goo - remove this once all dark theme is removed
@mixin mdc-theme-dark($root-selector: null, $compound: false) {
@if ($root-selector) {
@at-root {
Expand Down