javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +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

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

@ -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)};
}
}
}

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

@ -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;
}

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

@ -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
// --------------------------------------------------

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-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 |