diff --git a/core/api.txt b/core/api.txt index 9d4ad6a236..bfe6d19b2f 100644 --- a/core/api.txt +++ b/core/api.txt @@ -382,6 +382,7 @@ ion-fab-button,css-prop,--border-radius ion-fab-button,css-prop,--border-style ion-fab-button,css-prop,--border-width ion-fab-button,css-prop,--box-shadow +ion-fab-button,css-prop,--close-icon-font-size ion-fab-button,css-prop,--color ion-fab-button,css-prop,--color-activated ion-fab-button,css-prop,--color-focused diff --git a/core/src/components/fab-button/fab-button.ios.scss b/core/src/components/fab-button/fab-button.ios.scss index a1d8e03453..2147acf63d 100755 --- a/core/src/components/fab-button/fab-button.ios.scss +++ b/core/src/components/fab-button/fab-button.ios.scss @@ -15,6 +15,7 @@ --color: #{$fab-ios-text-color}; --box-shadow: #{$fab-ios-box-shadow}; --transition: #{$fab-ios-transition}; + --close-icon-font-size: #{$fab-ios-icon-font-size}; } :host(.ion-activated) { @@ -23,11 +24,11 @@ --transition: #{$fab-ios-transition-activated}; } -::slotted(ion-icon), -.close-icon { +::slotted(ion-icon) { font-size: $fab-ios-icon-font-size; } + // FAB buttons in a list // -------------------------------------------------- @@ -112,4 +113,4 @@ :host(.ion-color.ion-activated.fab-button-translucent) .button-native { background: #{current-color(base)}; } -} \ No newline at end of file +} diff --git a/core/src/components/fab-button/fab-button.md.scss b/core/src/components/fab-button/fab-button.md.scss index 701aa83786..a459b52e9c 100755 --- a/core/src/components/fab-button/fab-button.md.scss +++ b/core/src/components/fab-button/fab-button.md.scss @@ -21,14 +21,14 @@ opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, .2, 1) 0ms }; + --close-icon-font-size: #{$fab-md-icon-font-size}; } :host(.ion-activated) { --box-shadow: #{$fab-md-box-shadow-activated}; } -::slotted(ion-icon), -.close-icon { +::slotted(ion-icon) { font-size: $fab-md-icon-font-size; } diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss index 981c6978ed..afc63da75e 100755 --- a/core/src/components/fab-button/fab-button.scss +++ b/core/src/components/fab-button/fab-button.scss @@ -20,6 +20,8 @@ * * @prop --transition: Transition of the button * + * @prop --close-icon-font-size: Font size of the close icon + * * @prop --border-radius: Border radius of the button * @prop --border-width: Border width of the button * @prop --border-style: Border style of the button @@ -222,11 +224,14 @@ transition: all ease-in-out 300ms; transition-property: transform, opacity; + font-size: var(--close-icon-font-size); + opacity: 0; z-index: 1; } + // FAB Animation // -------------------------------------------------- diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md index e0d8232f9b..3c395ca851 100644 --- a/core/src/components/fab-button/readme.md +++ b/core/src/components/fab-button/readme.md @@ -180,6 +180,7 @@ export class FabButtonExample { | `--border-style` | Border style of the button | | `--border-width` | Border width of the button | | `--box-shadow` | Box shadow of the button | +| `--close-icon-font-size` | Font size of the close icon | | `--color` | Text color of the button | | `--color-activated` | Text color of the button when pressed | | `--color-focused` | Text color of the button when focused with the tab key |