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

Merge pull request #253 from google/colorize-button 

Add colorization classes to button
master
Addy Osmani 2015-04-28 14:14:37 +01:00
parent 20fdf71cac 018d7b7006
commit 31ad6e0f97
2 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/button/_button.scss
View File

@ -252,3 +252,21 @@
background-color: transparent;
}
}
// Colorized buttons
.mdl-button--primary.mdl-button--primary {
background-color: $button-primary-color-alt;
color: $button-secondary-color-alt;
& .mdl-ripple {
background: $button-secondary-color-alt;
}
}
.mdl-button--accent.mdl-button--accent {
background-color: $button-fab-color-alt;
color: $button-fab-text-color-alt;
& .mdl-ripple {
background: $button-fab-text-color-alt;
}
}

14
src/button/demo.html
View File

@ -39,6 +39,20 @@
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>
<h2>.mdl-button--primary</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--primary"><span class="mdl-icon mdl-icon--add"/></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--primary"><span class="mdl-icon mdl-icon--add"/></button></div>
<h2>.mdl-button--accent</h2>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent"><span class="mdl-icon mdl-icon--add"/></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect mdl-button--accent"><span class="mdl-icon mdl-icon--add"/></button></div>
<h2>.mdl-button--mini-fab</h2>
<div class="demo-button"><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--mini-fab mdl-js-ripple-effect"><span class="mdl-icon mdl-icon--add"/></button></div>