diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss index 38ebc119d5..e7b2905e6e 100644 --- a/ionic/components/button/modes/md.scss +++ b/ionic/components/button/modes/md.scss @@ -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; + } + } + }