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;
}
& .Ripple {
& .wsk-ripple {
background: $button-ripple-color-alt;
}
}
@ -195,7 +195,7 @@ $button-icon-focus-color: $button-focus-color;
background-color: $button-fab-active-color-alt;
}
& .Ripple {
& .wsk-ripple {
background: $button-ripple-color-alt;
}
}
@ -240,7 +240,7 @@ $button-icon-focus-color: $button-focus-color;
z-index: 0;
overflow: hidden;
.wsk-button[disabled] & .Ripple {
.wsk-button[disabled] & .wsk-ripple {
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++) {
var buttonElement = buttonElements[i];
var blurHandler = blurHandlerGenerator(buttonElement);
if (buttonElement.classList.contains('RippleEffect')) {
if (buttonElement.classList.contains('wsk-js-ripple-effect')) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add('wsk-button__ripple-container');
var ripple = document.createElement('span');
ripple.classList.add('Ripple');
ripple.classList.add('wsk-ripple');
rippleContainer.appendChild(ripple);
ripple.addEventListener('mouseup', blurHandler);
buttonElement.appendChild(rippleContainer);

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

@ -22,10 +22,10 @@
<h2>With Ripples</h2>
<div class="button-block">Flat: <button class="wsk-button wsk-js-button RippleEffect">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">FAB: <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect">♥</button></div>
<div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon RippleEffect">♥</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 wsk-js-ripple-effect">Raised</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 wsk-js-ripple-effect">♥</button></div>
<h2>.wsk-button--colored</h2>
@ -35,20 +35,20 @@
<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">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored RippleEffect">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">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 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 wsk-js-ripple-effect">♥</button></div>
<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>
<div class="button-block">Flat: <button class="wsk-button wsk-js-button RippleEffect" 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">FAB: <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect" 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">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 wsk-js-ripple-effect" disabled>Raised</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 wsk-js-ripple-effect" disabled>♥</button></div>
</div>
<!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
<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);
}
.Checkbox-rippleContainer .Ripple {
.Checkbox-rippleContainer .wsk-ripple {
background: $checkboxColor;
}

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

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

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

@ -15,16 +15,16 @@
<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>
<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>
<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>
<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>
</div>

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

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

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

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

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

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

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

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

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

@ -17,17 +17,17 @@
<section class="preview-block">
<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
</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
</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
</label>
</section>

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

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

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

@ -1,10 +1,9 @@
@import "../palette/palette";
@import "../animation/animation";
// Ripple Color
$ripple-bg-color: nth($paletteGrey, 10);
.Ripple {
.wsk-ripple {
background : $ripple-bg-color;
border-radius : 50%;
height : 50px;
@ -15,12 +14,12 @@ $ripple-bg-color: nth($paletteGrey, 10);
top : 0;
transform : translate(-50%, -50%);
width : 50px;
overflow: hidden;
}
overflow : hidden;
.Ripple.is-animating {
transition : transform 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,
opacity 0.6s $animation-curve-linear-out-slow-in;
&.is-animating {
transition: transform 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,
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) {
var parentElement = el;
var rippleElement = parentElement.querySelector('.Ripple');
var rippleElement = parentElement.querySelector('.wsk-ripple');
var frameCount = 0;
var rippleSize;
var x;
@ -118,11 +118,11 @@ RippleOwner.prototype.downHandler = function(evt) {
};
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++) {
var rippleElement = rippleElements[i];
var recentering =
rippleElement.classList.contains('RippleEffect--recentering');
rippleElement.classList.contains('wsk-ripple--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);
}
.wsk-textfield-expandable-icon__ripple__container .Ripple {
.wsk-textfield-expandable-icon__ripple__container .wsk-ripple {
background: $input-text-expandable-search-icon-highlight-color;
}

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

@ -34,7 +34,7 @@
<div class="wsk-input">
<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 class="wsk-input">

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

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