javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): md outline buttons

Browse Source 
Outline ripple is now the correct color per button, removed the background color when activated and
increased ripple opacity for outline buttons

closes #5128
This commit is contained in:
Brandy Carney
2016-01-21 16:23:57 -05:00
parent e094d8658a
commit d87b4fbdf7
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ionic/components/button/button.md.scss
View File

@@ -18,6 +18,8 @@ $button-md-transition-duration: 300ms !default;
$button-md-clear-hover-background-color: rgba(158, 158, 158, 0.1) !default;
$button-md-clear-active-background-color: rgba(158, 158, 158, 0.2) !default;
$button-md-outline-ripple-opacity: 0.25 !default;
$button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
@@ -143,13 +145,12 @@ $button-md-small-icon-font-size: 1.4em !default;
&.activated {
opacity: 1;
color: $background-md-color;
background-color: $button-md-color;
box-shadow: none;
background-color: transparent;
}
md-ripple {
background-color: ripple-background-color($button-md-color);
background-color: rgba($button-md-color, $button-md-outline-ripple-opacity);
}
}
@@ -166,8 +167,11 @@ $button-md-small-icon-font-size: 1.4em !default;
color: $fg-color;
&.activated {
color: $background-md-color;
background-color: $fg-color;
background-color: transparent;
}
md-ripple {
background-color: rgba($fg-color, $button-md-outline-ripple-opacity);
}
}