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

Feat/implement improved graceful degradation ripple #282

Merged
merged 6 commits into from
Feb 22, 2017
Merged

Feat/implement improved graceful degradation ripple #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b2bda13
feat(ripple): Implement improved graceful degradation for ripple
Feb 9, 2017
5017490
feat(ripple): Implement improved graceful degradation for ripple
Feb 9, 2017
c3389fd
feat(ripple): Implement improved graceful degradation for ripple
Feb 9, 2017
128e516
feat(ripple): Implement improved graceful degradation for ripple
Feb 9, 2017
d51022b
feat(ripple): Implement improved graceful degradation for ripple
Feb 9, 2017
bc73a22
feat(ripple): Implement improved graceful degradation for ripple
Feb 9, 2017
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
74 changes: 73 additions & 1 deletion demos/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,42 @@ <h1>MDC WEB BUTTON</h1>
Div
</div>
</fieldset>
<fieldset>
<legend>Buttons - CSS Only</legend>
<button class="mdc-button" data-demo-no-js>
Default
</button>
<button class="mdc-button mdc-button--raised" data-demo-no-js>
Raised
</button>
<button class="mdc-button mdc-button--dense" data-demo-no-js>
Dense Default
</button>
<button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
Dense Raised
</button>
<button class="mdc-button mdc-button--compact" data-demo-no-js>
Compact
</button>
<button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
Compact Raised
</button>
<button class="mdc-button mdc-button--primary" data-demo-no-js>
Default with Primary
</button>
<button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent" data-demo-no-js>
Default with Accent
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
Raised with Accent
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
Div
</div>
</fieldset>
<fieldset>
<legend>Links with Button Style</legend>
<a href="/button.html" class="mdc-button">
Expand Down Expand Up @@ -183,6 +219,42 @@ <h2>Dark theme</h2>
Div
</div>
</fieldset>
<fieldset>
<legend>Buttons - CSS Only</legend>
<button class="mdc-button" data-demo-no-js>
Default
</button>
<button class="mdc-button mdc-button--raised" data-demo-no-js>
Raised
</button>
<button class="mdc-button mdc-button--dense" data-demo-no-js>
Dense Default
</button>
<button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
Dense Raised
</button>
<button class="mdc-button mdc-button--compact" data-demo-no-js>
Compact
</button>
<button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
Compact Raised
</button>
<button class="mdc-button mdc-button--primary" data-demo-no-js>
Default with Primary
</button>
<button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent" data-demo-no-js>
Default with Accent
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
Raised with Accent
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
Div
</div>
</fieldset>
<fieldset disabled>
<legend>Disabled Buttons</legend>
<button class="mdc-button">
Expand Down Expand Up @@ -236,7 +308,7 @@ <h2>Dark theme</h2>
}
}, 250);
function init() {
var btns = document.querySelectorAll('.mdc-button');
var btns = document.querySelectorAll('.mdc-button:not([data-demo-no-js]');
for (var i = 0, btn; btn = btns[i]; i++) {
mdc.ripple.MDCRipple.attachTo(btn);
}
Expand Down
2 changes: 1 addition & 1 deletion demos/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<main>
<h1>MDC Checkbox</h1>
<section>
<h2>Basic Example, no Javascript</h2>
<h2>CSS Only</h2>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
Expand Down
25 changes: 24 additions & 1 deletion demos/fab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,29 @@ <h1>MDC FAB</h1>
</span>
</button>
</fieldset>
<fieldset>
<legend>CSS Only FABs</legend>
<button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
favorite_border
</span>
</button>
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
favorite_border
</span>
</button>
<button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
favorite_border
</span>
</button>
<button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
favorite_border
</span>
</button>
</fieldset>
<fieldset disabled>
<legend>Disabled FABs</legend>
<button class="mdc-fab material-icons" aria-label="Favorite">
Expand Down Expand Up @@ -118,7 +141,7 @@ <h1>MDC FAB</h1>
}
}, 250);
function init() {
var fabs = document.querySelectorAll('.mdc-fab');
var fabs = document.querySelectorAll('.mdc-fab:not([data-demo-no-js])');
for (var i = 0, fab; fab = fabs[i]; i++) {
mdc.ripple.MDCRipple.attachTo(fab);
}
Expand Down
3 changes: 1 addition & 2 deletions demos/radio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,7 @@
<main>
<h1>MDC Radio</h1>
<section>
<h2>Basic Example, No Javascript</h2>

<h2>CSS Only</h2>
<div class="mdc-form-field">
<div class="mdc-radio" data-demo-no-js>
<input class="mdc-radio__native-control" type="radio" id="ex1-radio1" checked name="ex1">
Expand Down
100 changes: 81 additions & 19 deletions demos/ripple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,14 @@
border-radius: 50%;
}

.mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::before,
.mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::after {
height: 100%;
left: 0;
top: 0;
width: 100%;
}

button.demo-surface {
display: inline-block; /* Safari does not center button text otherwise :( */
background: none;
Expand All @@ -57,7 +65,14 @@
}

section {
margin: 48px;
align-items: center;
display: flex;
margin-left: 10px;
}

section > div {
margin: 48px 0;
width: 400px;
Copy link
Contributor

Choose a reason for hiding this comment

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

should we add a media query here that sets it to 100% width if the viewport is smaller than 400px? I'm thinking of how this would appear on v. small screens

Copy link
Contributor Author

Choose a reason for hiding this comment

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

SGTM

Copy link
Contributor

Choose a reason for hiding this comment

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

Or just max-width: 400px; so on small screens it just gets smaller as-needed. But doesn't grow above that.

}

body {
Expand All @@ -82,6 +97,13 @@
user-select: none;
-webkit-user-select: none;
}

@media (max-width: 565px) {
section {
flex-direction: column;
width: 100%;
}
}
</style>
</head>
<body>
Expand All @@ -92,40 +114,80 @@
<main>
<h1>MDC Ripple</h1>
<section>
<h2>Bounded</h2>
<div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
Interact with me!
<div>
<h2>Bounded</h2>
<div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
Interact with me!
</div>
</div>
<div>
<h2>Bounded - CSS Only</h2>
<div class="mdc-ripple-surface demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
Interact with me!
</div>
</div>
</section>
<section>
<h2>Unbounded</h2>
<div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
aria-label="Favorite" tabindex="0">
favorite
<div>
<h2>Unbounded</h2>
<div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
aria-label="Favorite" tabindex="0">
favorite
</div>
</div>
<div>
<h2>Unbounded - CSS Only</h2>
Copy link
Contributor

Choose a reason for hiding this comment

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

The fallback ripple seems larger than the JS-enabled one. Is this intentional?

<div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
aria-label="Favorite" data-demo-no-js tabindex="0">
favorite
</div>
</div>
</section>
<section>
<h2>Theme Styles</h2>
<div
class="mdc-ripple-surface mdc-ripple-surface--primary
mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
Primary
<div>
<h2>Theme Styles</h2>
<div
class="mdc-ripple-surface mdc-ripple-surface--primary
mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
Primary
</div>
<div
class="mdc-ripple-surface mdc-ripple-surface--accent
mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
Accent
</div>
</div>
<div
class="mdc-ripple-surface mdc-ripple-surface--accent
mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
Accent
<div>
<h2>Theme Styles - CSS Only</h2>
<div
class="mdc-ripple-surface mdc-ripple-surface--primary
mdc-theme--primary demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
Primary
</div>
<div
class="mdc-ripple-surface mdc-ripple-surface--accent
mdc-theme--accent demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
Accent
</div>
</div>

</section>
<section>
<h2>Applied to <code>&lt;button&gt; element</h2>
<div>
<h2>Applied to <code>&lt;button&gt; element</h2>
<button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface">button</button>
</div>
<div>
<h2>Applied to <code>&lt;button&gt; element - CSS Only</h2>
<button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface" data-demo-no-js>button</button>
</div>

</section>
</main>
<script src="assets/material-components-web.js" charset="utf-8"></script>
<script>
(function(global) {
[].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) {
[].forEach.call(document.querySelectorAll('.mdc-ripple-surface:not([data-demo-no-js]'), function(surface) {
mdc.ripple.MDCRipple.attachTo(surface);
});
})(this);
Expand Down
Loading