diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss index cdc18dc1a6..20f70ccd0c 100644 --- a/core/src/components/button/button.md.scss +++ b/core/src/components/button/button.md.scss @@ -15,9 +15,9 @@ --padding-start: #{$button-md-padding-start}; --padding-end: #{$button-md-padding-end}; --height: #{$button-md-height}; - --transition: #{box-shadow $button-md-transition-duration $button-md-transition-timing-function, - background-color $button-md-transition-duration $button-md-transition-timing-function, - color $button-md-transition-duration $button-md-transition-timing-function}; + --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1), + background-color 15ms linear, + color 15ms linear; font-size: #{$button-md-font-size}; font-weight: #{$button-md-font-weight}; @@ -42,7 +42,7 @@ // -------------------------------------------------- :host(.button-outline) { - --border-width: 1px; + --border-width: 2px; --border-style: solid; --box-shadow: none; --background-activated: transparent; @@ -50,6 +50,14 @@ --color-activated: #{ion-color(primary, base)}; } +:host(.button-outline:hover) .button-native { + background: ion-color(primary, base, .04); +} + +:host(.button-outline.ion-color:hover) .button-native { + background: current-color(base, .04); +} + :host(.button-outline.activated.ion-color) .button-native { background: transparent; } @@ -66,6 +74,14 @@ --color-focused: #{ion-color(primary, base)}; } +:host(.button-clear:hover) .button-native { + background: ion-color(primary, base, .04); +} + +:host(.button-clear.ion-color:hover) .button-native { + background: current-color(base, .04); +} + // Material Design Round Button // -------------------------------------------------- diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index 5ec85ef9df..b8ce02f6a5 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/core/src/components/button/button.md.vars.scss @@ -47,12 +47,6 @@ $button-md-letter-spacing: 0.06em; /// @prop - Box shadow of the button $button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; -/// @prop - Duration of the transition of the button -$button-md-transition-duration: 300ms !default; - -/// @prop - Speed curve of the transition of the button -$button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; - /// @prop - Opacity of the activated button $button-md-opacity-activated: 1 !default;