javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button-fab): added box-shadow for activated fab buttons

Browse Source 
Removed the use of !important so the activated class would be applied,
added sass variable for it. Closes #392
This commit is contained in:
Brandy Carney
2015-10-30 12:51:47 -04:00
parent 7db5d94e40
commit abaa35f679
1 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
ionic/components/button/modes/md.scss
View File

@ -16,7 +16,7 @@ $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-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;
button,
[button] {
@ -39,35 +39,10 @@ button,
background-color: $button-md-clear-hover-background-color;
}
&.activated {
box-shadow: $button-md-box-shadow-active;
}
&[full] {
border-radius: 0;
}
&[clear] {
opacity: 1;
box-shadow: none;
&.activated {
background-color: $button-md-clear-active-background-color;
}
}
&[outline] {
box-shadow: none;
&.activated {
opacity: 1;
}
md-ripple {
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
}
}
&[round] {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
@ -85,15 +60,44 @@ button,
font-size: $button-small-font-size;
}
&.activated {
box-shadow: $button-md-box-shadow-active;
}
&[fab] {
border-radius: 50%;
box-shadow: $button-md-fab-box-shadow !important;
box-shadow: $button-md-fab-box-shadow;
&.activated {
box-shadow: $button-md-fab-box-shadow-active;
}
}
&.icon-only {
padding: 0;
}
&[outline] {
box-shadow: none;
&.activated {
opacity: 1;
}
md-ripple {
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
}
}
&[clear] {
opacity: 1;
box-shadow: none;
&.activated {
background-color: $button-md-clear-active-background-color;
}
}
}