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

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-focused-opacity: 1;
--background-hover-opacity: 1; --background-hover-opacity: 1;
--color: #{$fab-ios-text-color}; --color: #{$fab-ios-text-color};
--color-activated: #{$fab-ios-text-color};
--color-focused: var(--color-activated);
--box-shadow: #{$fab-ios-box-shadow}; --box-shadow: #{$fab-ios-box-shadow};
--transition: #{$fab-ios-transition}; --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-focused-opacity: .24;
--background-hover-opacity: .08; --background-hover-opacity: .08;
--color: #{$fab-md-text-color}; --color: #{$fab-md-text-color};
--color-activated: #{$fab-md-text-color};
--color-focused: var(--color-activated);
--box-shadow: #{$fab-md-box-shadow}; --box-shadow: #{$fab-md-box-shadow};
--transition: #{ --transition: #{
box-shadow 280ms cubic-bezier(.4, 0, .2, 1), 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-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 * @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: #{ion-color(primary, contrast)};
--background-hover-opacity: .08; --background-hover-opacity: .08;
--transition: background-color, opacity 100ms linear; --transition: background-color, opacity 100ms linear;
@ -221,6 +223,8 @@
transition-property: transform, opacity; transition-property: transform, opacity;
opacity: 0; opacity: 0;
z-index: 1;
} }
// FAB Animation // FAB Animation

38
core/src/components/fab/test/states/index.html
View File

@ -16,6 +16,26 @@
<body> <body>
<ion-app> <ion-app>
<ion-content> <ion-content>
<ion-fab slot="fixed" horizontal="end">
<ion-fab-button>
<ion-icon name="share-social"></ion-icon>
</ion-fab-button>
<ion-fab-list side="bottom">
<ion-fab-button>
<ion-icon name="logo-vimeo"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-instagram"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-twitter"></ion-icon>
</ion-fab-button>
<ion-fab-button>
<ion-icon name="logo-facebook"></ion-icon>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<h3>Default</h3> <h3>Default</h3>
<p> <p>
<ion-fab-button> <ion-fab-button>
@ -132,12 +152,18 @@
<ion-fab-button color="secondary" class="custom"> <ion-fab-button color="secondary" class="custom">
<ion-icon name="add"></ion-icon> <ion-icon name="add"></ion-icon>
</ion-fab-button> </ion-fab-button>
<ion-fab-button class="custom-white">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
<ion-fab-button class="custom ion-focused"> <ion-fab-button class="custom ion-focused">
<ion-icon name="add"></ion-icon> <ion-icon name="add"></ion-icon>
</ion-fab-button> </ion-fab-button>
<ion-fab-button color="secondary" class="custom ion-focused"> <ion-fab-button color="secondary" class="custom ion-focused">
<ion-icon name="add"></ion-icon> <ion-icon name="add"></ion-icon>
</ion-fab-button> </ion-fab-button>
<ion-fab-button class="custom-white ion-focused">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</p> </p>
</ion-content> </ion-content>
</ion-app> </ion-app>
@ -195,6 +221,18 @@
--ion-toolbar-background: #222; --ion-toolbar-background: #222;
--ion-toolbar-color: #ddd; --ion-toolbar-color: #ddd;
} }
.custom-white {
--background: white;
--background-hover: #888;
--background-focused: #444;
--color: #3880ff;
}
.ios .custom-white {
--background-activated: #ddd;
}
</style> </style>
</body> </body>

20
core/src/components/tabs/test/basic/index.html
View File

@ -32,6 +32,12 @@
<h1>Tab One</h1> <h1>Tab One</h1>
<ion-button expand="block" onclick="updateBadgeCount()">Update Badge Count</ion-button> <ion-button expand="block" onclick="updateBadgeCount()">Update Badge Count</ion-button>
<ion-button color="secondary" expand="block" onclick="updateBadgeColor()">Update Badge Color</ion-button> <ion-button color="secondary" expand="block" onclick="updateBadgeColor()">Update Badge Color</ion-button>
<ion-fab slot="fixed" horizontal="end" vertical="bottom">
<ion-fab-button class="custom-white">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content> </ion-content>
</ion-tab> </ion-tab>
@ -121,6 +127,20 @@
customElements.define('page-one', PageOne); customElements.define('page-one', PageOne);
</script> </script>
<style>
.custom-white {
--background: white;
--background-hover: #888;
--background-focused: #444;
--color: #3880ff;
}
.ios .custom-white {
--background-activated: #ddd;
}
</style>
</body> </body>
</html> </html>