javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(fab): show close icon on hover, focused, activated (#20497)

Browse Source 
also fixes the fab so users don't have to set color for each state
This commit is contained in:
Brandy Carney
2020-02-18 13:55:31 -05:00
committed by GitHub
parent 45d03baf98
commit e42c85d641
5 changed files with 63 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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),

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

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