diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss index a713815b35..a1d8e03453 100755 --- a/core/src/components/fab-button/fab-button.ios.scss +++ b/core/src/components/fab-button/fab-button.ios.scss @@ -13,8 +13,6 @@ --background-focused-opacity: 1; --background-hover-opacity: 1; --color: #{$fab-ios-text-color}; - --color-activated: #{$fab-ios-text-color}; - --color-focused: var(--color-activated); --box-shadow: #{$fab-ios-box-shadow}; --transition: #{$fab-ios-transition}; } diff --git a/core/src/components/fab-button/fab-button.md.scss b/core/src/components/fab-button/fab-button.md.scss index 6da2493062..701aa83786 100755 --- a/core/src/components/fab-button/fab-button.md.scss +++ b/core/src/components/fab-button/fab-button.md.scss @@ -13,8 +13,6 @@ --background-focused-opacity: .24; --background-hover-opacity: .08; --color: #{$fab-md-text-color}; - --color-activated: #{$fab-md-text-color}; - --color-focused: var(--color-activated); --box-shadow: #{$fab-md-box-shadow}; --transition: #{ box-shadow 280ms cubic-bezier(.4, 0, .2, 1), diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index 6edfa82862..981c6978ed 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -34,7 +34,9 @@ * @prop --padding-bottom: Bottom padding of the button * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button */ - --color-hover: #{var(--color)}; + --color-activated: var(--color); + --color-focused: var(--color); + --color-hover: var(--color); --background-hover: #{ion-color(primary, contrast)}; --background-hover-opacity: .08; --transition: background-color, opacity 100ms linear; @@ -221,6 +223,8 @@ transition-property: transform, opacity; opacity: 0; + + z-index: 1; } // FAB Animation diff --git a/core/src/components/fab/test/states/index.html b/core/src/components/fab/test/states/index.html index ad4397c7e3..375e1b9b1c 100644 --- a/core/src/components/fab/test/states/index.html +++ b/core/src/components/fab/test/states/index.html @@ -16,6 +16,26 @@ + + + + + + + + + + + + + + + + + + + +

Default

@@ -132,12 +152,18 @@ + + + + + +

@@ -195,6 +221,18 @@ --ion-toolbar-background: #222; --ion-toolbar-color: #ddd; } + + .custom-white { + --background: white; + --background-hover: #888; + --background-focused: #444; + + --color: #3880ff; + } + + .ios .custom-white { + --background-activated: #ddd; + } diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html index c3ebde6116..4e984c1591 100644 --- a/core/src/components/tabs/test/basic/index.html +++ b/core/src/components/tabs/test/basic/index.html @@ -32,6 +32,12 @@

Tab One

Update Badge Count Update Badge Color + + + + + + @@ -121,6 +127,20 @@ customElements.define('page-one', PageOne); + +