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

Fab icons use the palette colors now

Browse Source
This commit is contained in:
Matt Gaunt 2014-09-05 12:01:22 +01:00
parent 8e03b11763
commit be6f9676d7
3 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,6 @@ $disabled-btn-text-color: nth($disabledPalette, 5);
color : $colored-btn-text-color; color : $colored-btn-text-color;
} }
.ripple { .ripple {
-webkit-transform: translate(-50%, -50%);
background : $ripple-bg-color; background : $ripple-bg-color;
border-radius : 50%; border-radius : 50%;
height : 50px; height : 50px;
@ -48,9 +47,9 @@ $disabled-btn-text-color: nth($disabledPalette, 5);
top : 0; top : 0;
transform : translate(-50%, -50%); transform : translate(-50%, -50%);
width : 50px; width : 50px;
overflow: hidden;
} }
.ripple.animate { .ripple.animate {
-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.6s cubic-bezier(0.0, 0.0, 0.2, 1);
transition : transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.6s cubic-bezier(0.0, 0.0, 0.2, 1); transition : transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.6s cubic-bezier(0.0, 0.0, 0.2, 1);
} }
.paper-button.colored.ripple { .paper-button.colored.ripple {

13
app/styleguide/fab/_fab.scss
View File

@ -1,13 +1,16 @@
@import "../palette/palette";
$fabBackgroundColor: #ff4081; $fabBackgroundColor: nth($accentPalette, 12);
$fabHoverBackgroundColor: nth($accentPalette, 14);
$fabIconColor: black;
$fabColoredIconColor: white;
$fabWidth: 56px; $fabWidth: 56px;
$fabHeight: 56px; $fabHeight: 56px;
$fabFontSize: 24px; $fabFontSize: 24px;
.paper-fab { .paper-fab {
border : none;
border-radius : 50%; border-radius : 50%;
color : black; color : $fabIconColor;
font-size : $fabFontSize; font-size : $fabFontSize;
height : $fabHeight; height : $fabHeight;
margin : auto; margin : auto;
@ -19,11 +22,11 @@ $fabFontSize: 24px;
.paper-fab.colored { .paper-fab.colored {
background-color: $fabBackgroundColor; background-color: $fabBackgroundColor;
color: white; color: $fabColoredIconColor;
} }
.paper-fab.colored:hover { .paper-fab.colored:hover {
background-color: purple; background-color: $fabHoverBackgroundColor !important;
} }
.paper-fab.small { .paper-fab.small {

1
app/styleguide/palette/_palette.scss
View File

@ -67,5 +67,6 @@ $paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
/* ========== Used Palettes ========== */ /* ========== Used Palettes ========== */
$primaryPalette: $paletteBlue; $primaryPalette: $paletteBlue;
$accentPalette: $palettePink;
$secondaryPalette: $paletteGrey; $secondaryPalette: $paletteGrey;
$disabledPalette: $paletteGrey; $disabledPalette: $paletteGrey;