javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(fab-button): get translucent working including with color (#16750)

Browse Source 
fixes #16450
This commit is contained in:
Brandy Carney
2018-12-14 17:01:30 -05:00
committed by GitHub
parent 33e0ae4afa
commit c2ada8445c
3 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,20 +48,23 @@
// Translucent FAB buttons // Translucent FAB buttons
// -------------------------------------------------- // --------------------------------------------------
:host(.fab-translucent) { :host(.fab-button-translucent) {
--background: #{$fab-ios-translucent-background-color}; --background: #{$fab-ios-translucent-background-color};
--backdrop-filter: #{$fab-ios-translucent-filter}; --backdrop-filter: #{$fab-ios-translucent-filter};
} }
:host(.fab-translucent-in-list) { :host(.fab-button-translucent-in-list) {
--background: #{$fab-ios-list-button-translucent-background-color}; --background: #{$fab-ios-list-button-translucent-background-color};
} }
// .fab-translucent-ios-#{$color-name} { // Translucent FAB buttons with color
// background-color: ion-color($color-name, base, $fab-ios-translucent-background-color-alpha); // --------------------------------------------------
// opacity: .8;
// }
// .fab-translucent-ios-#{$color-name}.activated { :host(.ion-color.fab-button-translucent) .button-native {
// opacity: 1; background: #{current-color(base, $fab-ios-translucent-background-color-alpha)};
// } }
:host(.ion-color.focused.fab-button-translucent) .button-native,
:host(.ion-color.activated.fab-button-translucent) .button-native {
background: #{current-color(base)};
}

10
core/src/components/fab/test/translucent/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('fab: translucent', async () => {
const page = await newE2EPage({
url: '/src/components/fab/test/translucent?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

3
core/src/components/toolbar/toolbar.ios.vars.scss
View File

@ -36,9 +36,6 @@ $toolbar-ios-button-strong-font-weight: 600 !default;
/// @prop - Fill color of the toolbar button icon /// @prop - Fill color of the toolbar button icon
$toolbar-ios-button-icon-fill-color: currentColor !default; $toolbar-ios-button-icon-fill-color: currentColor !default;
/// @prop - Filter of the translucent toolbar
$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default;
// iOS Title // iOS Title
// -------------------------------------------------- // --------------------------------------------------