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-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: 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,
[button] { [button] {
@ -39,35 +39,10 @@ button,
background-color: $button-md-clear-hover-background-color; background-color: $button-md-clear-hover-background-color;
} }
&.activated {
box-shadow: $button-md-box-shadow-active;
}
&[full] { &[full] {
border-radius: 0; 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] { &[round] {
border-radius: $button-round-border-radius; border-radius: $button-round-border-radius;
padding: $button-round-padding; padding: $button-round-padding;
@ -85,15 +60,44 @@ button,
font-size: $button-small-font-size; font-size: $button-small-font-size;
} }
&.activated {
box-shadow: $button-md-box-shadow-active;
}
&[fab] { &[fab] {
border-radius: 50%; 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 { &.icon-only {
padding: 0; 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;
}
}
} }