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

feat(fab-button): add close icon font size css variable (#19628)

Browse Source 
Co-authored-by: Brandy Carney <brandy@ionic.io>
This commit is contained in:
Stefanos Anagnostou
2020-06-10 16:34:48 +03:00
committed by GitHub
parent e95b481a53
commit df408f91f1
5 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@ -382,6 +382,7 @@ ion-fab-button,css-prop,--border-radius
ion-fab-button,css-prop,--border-style ion-fab-button,css-prop,--border-style
ion-fab-button,css-prop,--border-width ion-fab-button,css-prop,--border-width
ion-fab-button,css-prop,--box-shadow 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
ion-fab-button,css-prop,--color-activated ion-fab-button,css-prop,--color-activated
ion-fab-button,css-prop,--color-focused ion-fab-button,css-prop,--color-focused

7
core/src/components/fab-button/fab-button.ios.scss
View File

@ -15,6 +15,7 @@
--color: #{$fab-ios-text-color}; --color: #{$fab-ios-text-color};
--box-shadow: #{$fab-ios-box-shadow}; --box-shadow: #{$fab-ios-box-shadow};
--transition: #{$fab-ios-transition}; --transition: #{$fab-ios-transition};
--close-icon-font-size: #{$fab-ios-icon-font-size};
} }
:host(.ion-activated) { :host(.ion-activated) {
@ -23,11 +24,11 @@
--transition: #{$fab-ios-transition-activated}; --transition: #{$fab-ios-transition-activated};
} }
::slotted(ion-icon), ::slotted(ion-icon) {
.close-icon {
font-size: $fab-ios-icon-font-size; font-size: $fab-ios-icon-font-size;
} }
// FAB buttons in a list // FAB buttons in a list
// -------------------------------------------------- // --------------------------------------------------
@ -112,4 +113,4 @@
:host(.ion-color.ion-activated.fab-button-translucent) .button-native { :host(.ion-color.ion-activated.fab-button-translucent) .button-native {
background: #{current-color(base)}; background: #{current-color(base)};
} }
} }

4
core/src/components/fab-button/fab-button.md.scss
View File

@ -21,14 +21,14 @@
opacity 15ms linear 30ms, opacity 15ms linear 30ms,
transform 270ms cubic-bezier(0, 0, .2, 1) 0ms transform 270ms cubic-bezier(0, 0, .2, 1) 0ms
}; };
--close-icon-font-size: #{$fab-md-icon-font-size};
} }
:host(.ion-activated) { :host(.ion-activated) {
--box-shadow: #{$fab-md-box-shadow-activated}; --box-shadow: #{$fab-md-box-shadow-activated};
} }
::slotted(ion-icon), ::slotted(ion-icon) {
.close-icon {
font-size: $fab-md-icon-font-size; font-size: $fab-md-icon-font-size;
} }

5
core/src/components/fab-button/fab-button.scss
View File

@ -20,6 +20,8 @@
* *
* @prop --transition: Transition of the button * @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-radius: Border radius of the button
* @prop --border-width: Border width of the button * @prop --border-width: Border width of the button
* @prop --border-style: Border style of the button * @prop --border-style: Border style of the button
@ -222,11 +224,14 @@
transition: all ease-in-out 300ms; transition: all ease-in-out 300ms;
transition-property: transform, opacity; transition-property: transform, opacity;
font-size: var(--close-icon-font-size);
opacity: 0; opacity: 0;
z-index: 1; z-index: 1;
} }
// FAB Animation // FAB Animation
// -------------------------------------------------- // --------------------------------------------------

1
core/src/components/fab-button/readme.md
View File

@ -180,6 +180,7 @@ export class FabButtonExample {
| `--border-style` | Border style of the button | | `--border-style` | Border style of the button |
| `--border-width` | Border width of the button | | `--border-width` | Border width of the button |
| `--box-shadow` | Box shadow 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` | Text color of the button |
| `--color-activated` | Text color of the button when pressed | | `--color-activated` | Text color of the button when pressed |
| `--color-focused` | Text color of the button when focused with the tab key | | `--color-focused` | Text color of the button when focused with the tab key |