google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixing up ripple CSS classes across the board.

master
Sérgio Gomes 2014-12-11 16:34:23 +00:00
parent 0f3756620e
commit c45379418b
17 changed files with 69 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/styleguide/button/_button.scss
View File

@ -130,7 +130,7 @@ $button-icon-focus-color: $button-focus-color;
background-color: $button-active-color-alt; background-color: $button-active-color-alt;
} }
& .Ripple { & .wsk-ripple {
background: $button-ripple-color-alt; background: $button-ripple-color-alt;
} }
} }
@ -195,7 +195,7 @@ $button-icon-focus-color: $button-focus-color;
background-color: $button-fab-active-color-alt; background-color: $button-fab-active-color-alt;
} }
& .Ripple { & .wsk-ripple {
background: $button-ripple-color-alt; background: $button-ripple-color-alt;
} }
} }
@ -240,7 +240,7 @@ $button-icon-focus-color: $button-focus-color;
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
.wsk-button[disabled] & .Ripple { .wsk-button[disabled] & .wsk-ripple {
background-color: transparent; background-color: transparent;
} }
} }

4
app/styleguide/button/button.js
View File

@ -10,11 +10,11 @@ window.addEventListener('load', function() {
for (var i = 0; i < buttonElements.length; i++) { for (var i = 0; i < buttonElements.length; i++) {
var buttonElement = buttonElements[i]; var buttonElement = buttonElements[i];
var blurHandler = blurHandlerGenerator(buttonElement); var blurHandler = blurHandlerGenerator(buttonElement);
if (buttonElement.classList.contains('RippleEffect')) { if (buttonElement.classList.contains('wsk-js-ripple-effect')) {
var rippleContainer = document.createElement('span'); var rippleContainer = document.createElement('span');
rippleContainer.classList.add('wsk-button__ripple-container'); rippleContainer.classList.add('wsk-button__ripple-container');
var ripple = document.createElement('span'); var ripple = document.createElement('span');
ripple.classList.add('Ripple'); ripple.classList.add('wsk-ripple');
rippleContainer.appendChild(ripple); rippleContainer.appendChild(ripple);
ripple.addEventListener('mouseup', blurHandler); ripple.addEventListener('mouseup', blurHandler);
buttonElement.appendChild(rippleContainer); buttonElement.appendChild(rippleContainer);

24
app/styleguide/button/demo.html
View File

@ -22,10 +22,10 @@
<h2>With Ripples</h2> <h2>With Ripples</h2>
<div class="button-block">Flat: <button class="wsk-button wsk-js-button RippleEffect">Flat</button></div> <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect">Flat</button></div>
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised RippleEffect">Raised</button></div> <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect">Raised</button></div>
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect">♥</button></div> <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect">♥</button></div>
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon RippleEffect">♥</button></div> <div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect">♥</button></div>
<h2>.wsk-button--colored</h2> <h2>.wsk-button--colored</h2>
@ -35,20 +35,20 @@
<h2>With Ripples</h2> <h2>With Ripples</h2>
<div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-button--colored RippleEffect">Flat</button></div> <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-button--colored wsk-js-ripple-effect">Flat</button></div>
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored RippleEffect">Raised</button></div> <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored wsk-js-ripple-effect">Raised</button></div>
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored RippleEffect">♥</button></div> <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect">♥</button></div>
<h2>.wsk-button--mini-fab</h2> <h2>.wsk-button--mini-fab</h2>
<div class="button-block"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab RippleEffect">♥</button></div> <div class="button-block"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect">♥</button></div>
<h2>Disabled</h2> <h2>Disabled</h2>
<div class="button-block">Flat: <button class="wsk-button wsk-js-button RippleEffect" disabled>Flat</button></div> <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect" disabled>Flat</button></div>
<div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised RippleEffect" disabled>Raised</button></div> <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect" disabled>Raised</button></div>
<div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect" disabled>♥</button></div> <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect" disabled>♥</button></div>
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon RippleEffect" disabled>♥</button></div> <div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect" disabled>♥</button></div>
</div> </div>
<!-- build:js(app/styleguide/button/) ../../scripts/main.min.js --> <!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
<script src="button.js"></script> <script src="button.js"></script>

2
app/styleguide/checkbox/_checkbox.scss
View File

@ -58,7 +58,7 @@ $checkboxColor: nth($primaryPalette, 6);
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
} }
.Checkbox-rippleContainer .Ripple { .Checkbox-rippleContainer .wsk-ripple {
background: $checkboxColor; background: $checkboxColor;
} }

10
app/styleguide/checkbox/checkbox.js
View File

@ -14,14 +14,14 @@ function Checkbox(l) {
var fakeCheckbox = document.createElement('span'); var fakeCheckbox = document.createElement('span');
fakeCheckbox.classList.add('Checkbox'); fakeCheckbox.classList.add('Checkbox');
fakeCheckbox.tabIndex = 0; fakeCheckbox.tabIndex = 0;
if (checkboxElement.classList.contains('RippleEffect')) { if (checkboxElement.classList.contains('wsk-js-ripple-effect')) {
checkboxElement.classList.add('RippleEffect--recentering'); checkboxElement.classList.add('wsk-ripple--recentering');
var rippleContainer = document.createElement('span'); var rippleContainer = document.createElement('span');
rippleContainer.classList.add('Checkbox-rippleContainer'); rippleContainer.classList.add('Checkbox-rippleContainer');
rippleContainer.classList.add('RippleEffect'); rippleContainer.classList.add('wsk-js-ripple-effect');
rippleContainer.classList.add('RippleEffect--recentering'); rippleContainer.classList.add('wsk-ripple--recentering');
var ripple = document.createElement('span'); var ripple = document.createElement('span');
ripple.classList.add('Ripple'); ripple.classList.add('wsk-ripple');
rippleContainer.appendChild(ripple); rippleContainer.appendChild(ripple);
labelElement.insertBefore(rippleContainer, labelElement.insertBefore(rippleContainer,

8
app/styleguide/checkbox/demo.html
View File

@ -15,16 +15,16 @@
<div class="preview-block"> <div class="preview-block">
<input type="checkbox" id="checkbox-1" class="Checkbox RippleEffect" /> <input type="checkbox" id="checkbox-1" class="Checkbox wsk-js-ripple-effect" />
<label class="Checkbox-label" for="checkbox-1">Check me out</label> <label class="Checkbox-label" for="checkbox-1">Check me out</label>
<input type="checkbox" id="checkbox-2" class="Checkbox RippleEffect" /> <input type="checkbox" id="checkbox-2" class="Checkbox wsk-js-ripple-effect" />
<label class="Checkbox-label" for="checkbox-2">I'm just a Material girl in a Material world</label> <label class="Checkbox-label" for="checkbox-2">I'm just a Material girl in a Material world</label>
<input type="checkbox" id="checkbox-3" class="Checkbox RippleEffect" /> <input type="checkbox" id="checkbox-3" class="Checkbox wsk-js-ripple-effect" />
<label class="Checkbox-label" for="checkbox-3">But I work in all browsers</label> <label class="Checkbox-label" for="checkbox-3">But I work in all browsers</label>
<input type="checkbox" id="checkbox-4" class="Checkbox RippleEffect" /> <input type="checkbox" id="checkbox-4" class="Checkbox wsk-js-ripple-effect" />
<label class="Checkbox-label" for="checkbox-4">Try using checkboxes</label> <label class="Checkbox-label" for="checkbox-4">Try using checkboxes</label>
</div> </div>

8
app/styleguide/dropdown-menu/demo.html
View File

@ -17,10 +17,10 @@
<div class="preview-block"> <div class="preview-block">
<ul class="DropdownMenu"> <ul class="DropdownMenu">
<button class="PaperItem RippleEffect">5.0 Lollipop</button> <button class="PaperItem wsk-js-ripple-effect">5.0 Lollipop</button>
<button class="PaperItem RippleEffect">4.4 KitKat</button> <button class="PaperItem wsk-js-ripple-effect">4.4 KitKat</button>
<button disabled class="PaperItem RippleEffect">4.3 Jelly Bean</button> <button disabled class="PaperItem wsk-js-ripple-effect">4.3 Jelly Bean</button>
<button class="PaperItem RippleEffect">Android History</button> <button class="PaperItem wsk-js-ripple-effect">Android History</button>
</ul> </ul>
</div> </div>

10
app/styleguide/item/demo.html
View File

@ -16,14 +16,14 @@
<div class="preview-block"> <div class="preview-block">
<button class="PaperItem RippleEffect">Australia</button> <button class="PaperItem wsk-js-ripple-effect">Australia</button>
<button class="PaperItem RippleEffect">Canada</button> <button class="PaperItem wsk-js-ripple-effect">Canada</button>
<button disabled class="PaperItem RippleEffect">United States of America</button> <button disabled class="PaperItem wsk-js-ripple-effect">United States of America</button>
<button class="PaperItem RippleEffect">United Kingdom</button> <button class="PaperItem wsk-js-ripple-effect">United Kingdom</button>
<br /> <br />
<a href="#" class="PaperItem RippleEffect">Web Starter Kit</a> <a href="#" class="PaperItem wsk-js-ripple-effect">Web Starter Kit</a>
</div> </div>

4
app/styleguide/item/item.js
View File

@ -2,12 +2,12 @@
window.addEventListener('load', function() { window.addEventListener('load', function() {
var itemElementsWithRipples = var itemElementsWithRipples =
document.querySelectorAll('.PaperItem.RippleEffect'); document.querySelectorAll('.PaperItem.wsk-js-ripple-effect');
for (var i = 0; i < itemElementsWithRipples.length; i++) { for (var i = 0; i < itemElementsWithRipples.length; i++) {
var rippleContainer = document.createElement('span'); var rippleContainer = document.createElement('span');
rippleContainer.classList.add('PaperItem-rippleContainer'); rippleContainer.classList.add('PaperItem-rippleContainer');
var ripple = document.createElement('span'); var ripple = document.createElement('span');
ripple.classList.add('Ripple'); ripple.classList.add('wsk-ripple');
rippleContainer.appendChild(ripple); rippleContainer.appendChild(ripple);
itemElementsWithRipples[i].appendChild(rippleContainer); itemElementsWithRipples[i].appendChild(rippleContainer);
} }

2
app/styleguide/radio/_radio.scss
View File

@ -87,7 +87,7 @@ $radio-ripple-size: 42px;
overflow: hidden; overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
& .Ripple { & .wsk-ripple {
background: $radio-color; background: $radio-color;
} }
} }

6
app/styleguide/radio/demo.html
View File

@ -17,17 +17,17 @@
<section class="preview-block"> <section class="preview-block">
<label class="wsk-radio-button__label"> <label class="wsk-radio-button__label">
<input type="radio" class="wsk-radio-button RippleEffect" name="wifi[]" value="1" checked /> <input type="radio" class="wsk-radio-button wsk-js-ripple-effect" name="wifi[]" value="1" checked />
Always Always
</label> </label>
<label class="wsk-radio-button__label"> <label class="wsk-radio-button__label">
<input type="radio" class="wsk-radio-button RippleEffect" name="wifi[]" value="2" /> <input type="radio" class="wsk-radio-button wsk-js-ripple-effect" name="wifi[]" value="2" />
Only when plugged in Only when plugged in
</label> </label>
<label class="wsk-radio-button__label"> <label class="wsk-radio-button__label">
<input type="radio" class="wsk-radio-button RippleEffect" name="wifi[]" value="3" /> <input type="radio" class="wsk-radio-button wsk-js-ripple-effect" name="wifi[]" value="3" />
Never Never
</label> </label>
</section> </section>

10
app/styleguide/radio/radio.js
View File

@ -10,15 +10,15 @@ function RadioButton(btnElement, labelElement) {
labelElement.insertBefore(outerCircle, btnElement); labelElement.insertBefore(outerCircle, btnElement);
labelElement.appendChild(innerCircle); labelElement.appendChild(innerCircle);
if (btnElement.classList.contains('RippleEffect')) { if (btnElement.classList.contains('wsk-js-ripple-effect')) {
btnElement.classList.add('RippleEffect--recentering'); btnElement.classList.add('wsk-ripple--recentering');
var rippleContainer = document.createElement('span'); var rippleContainer = document.createElement('span');
rippleContainer.classList.add('wsk-radio-button__ripple-container'); rippleContainer.classList.add('wsk-radio-button__ripple-container');
rippleContainer.classList.add('RippleEffect'); rippleContainer.classList.add('wsk-js-ripple-effect');
rippleContainer.classList.add('RippleEffect--recentering'); rippleContainer.classList.add('wsk-ripple--recentering');
var ripple = document.createElement('span'); var ripple = document.createElement('span');
ripple.classList.add('Ripple'); ripple.classList.add('wsk-ripple');
rippleContainer.appendChild(ripple); rippleContainer.appendChild(ripple);
labelElement.appendChild(rippleContainer); labelElement.appendChild(rippleContainer);

11
app/styleguide/ripple/_ripple.scss
View File

@ -1,10 +1,9 @@
@import "../palette/palette"; @import "../palette/palette";
@import "../animation/animation"; @import "../animation/animation";
// Ripple Color
$ripple-bg-color: nth($paletteGrey, 10); $ripple-bg-color: nth($paletteGrey, 10);
.Ripple { .wsk-ripple {
background : $ripple-bg-color; background : $ripple-bg-color;
border-radius : 50%; border-radius : 50%;
height : 50px; height : 50px;
@ -15,12 +14,12 @@ $ripple-bg-color: nth($paletteGrey, 10);
top : 0; top : 0;
transform : translate(-50%, -50%); transform : translate(-50%, -50%);
width : 50px; width : 50px;
overflow: hidden; overflow : hidden;
}
.Ripple.is-animating { &.is-animating {
transition : transform 0.6s $animation-curve-linear-out-slow-in, transition: transform 0.6s $animation-curve-linear-out-slow-in,
width 0.6s $animation-curve-linear-out-slow-in, width 0.6s $animation-curve-linear-out-slow-in,
height 0.6s $animation-curve-linear-out-slow-in, height 0.6s $animation-curve-linear-out-slow-in,
opacity 0.6s $animation-curve-linear-out-slow-in; opacity 0.6s $animation-curve-linear-out-slow-in;
}
} }

6
app/styleguide/ripple/ripple.js
View File

@ -2,7 +2,7 @@
function RippleOwner(el, recentering) { function RippleOwner(el, recentering) {
var parentElement = el; var parentElement = el;
var rippleElement = parentElement.querySelector('.Ripple'); var rippleElement = parentElement.querySelector('.wsk-ripple');
var frameCount = 0; var frameCount = 0;
var rippleSize; var rippleSize;
var x; var x;
@ -118,11 +118,11 @@ RippleOwner.prototype.downHandler = function(evt) {
}; };
window.addEventListener('load', function() { window.addEventListener('load', function() {
var rippleElements = document.querySelectorAll('.RippleEffect'); var rippleElements = document.querySelectorAll('.wsk-js-ripple-effect');
for (var i = 0; i < rippleElements.length; i++) { for (var i = 0; i < rippleElements.length; i++) {
var rippleElement = rippleElements[i]; var rippleElement = rippleElements[i];
var recentering = var recentering =
rippleElement.classList.contains('RippleEffect--recentering'); rippleElement.classList.contains('wsk-ripple--recentering');
new RippleOwner(rippleElement, recentering); new RippleOwner(rippleElement, recentering);
} }
}); });

2
app/styleguide/textfield/_textfield.scss
View File

@ -210,7 +210,7 @@ $input-text-expandable-search-icon-highlight-color: $input-text-highlight-color;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black); -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
} }
.wsk-textfield-expandable-icon__ripple__container .Ripple { .wsk-textfield-expandable-icon__ripple__container .wsk-ripple {
background: $input-text-expandable-search-icon-highlight-color; background: $input-text-expandable-search-icon-highlight-color;
} }

2
app/styleguide/textfield/demo.html
View File

@ -34,7 +34,7 @@
<div class="wsk-input"> <div class="wsk-input">
<input class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" name="sample" /> <input class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" name="sample" />
<label for="sample">Text Input</label> <label class="wsk-label" for="sample">Text Input</label>
</div> </div>
<div class="wsk-input"> <div class="wsk-input">

8
app/styleguide/textfield/textfield.js
View File

@ -44,12 +44,12 @@ function ExpandableIcon(iconElement) {
var container = document.createElement('span'); var container = document.createElement('span');
iconElement.appendChild(container); iconElement.appendChild(container);
container.classList.add('input__expandable__icon__ripple__container'); container.classList.add('wsk-textfield-expandable-icon__ripple__container');
container.classList.add('RippleEffect'); container.classList.add('wsk-js-ripple-effect');
container.classList.add('RippleEffect--recentering'); container.classList.add('wsk-ripple--recentering');
var ripple = document.createElement('span'); var ripple = document.createElement('span');
ripple.classList.add('Ripple'); ripple.classList.add('wsk-ripple');
container.appendChild(ripple); container.appendChild(ripple);
} }