Skip to content
Permalink
Browse files

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

fixes #16450
  • Loading branch information...
brandyscarney committed Dec 14, 2018
1 parent 33e0ae4 commit c2ada8445c995287cb3054435f8ed4daff55f459
@@ -48,20 +48,23 @@
// Translucent FAB buttons
// --------------------------------------------------

:host(.fab-translucent) {
:host(.fab-button-translucent) {
--background: #{$fab-ios-translucent-background-color};
--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};
}

// .fab-translucent-ios-#{$color-name} {
// background-color: ion-color($color-name, base, $fab-ios-translucent-background-color-alpha);
// opacity: .8;
// }
// Translucent FAB buttons with color
// --------------------------------------------------

:host(.ion-color.fab-button-translucent) .button-native {
background: #{current-color(base, $fab-ios-translucent-background-color-alpha)};
}

// .fab-translucent-ios-#{$color-name}.activated {
// opacity: 1;
// }
:host(.ion-color.focused.fab-button-translucent) .button-native,
:host(.ion-color.activated.fab-button-translucent) .button-native {
background: #{current-color(base)};
}
@@ -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();
});
@@ -36,9 +36,6 @@ $toolbar-ios-button-strong-font-weight: 600 !default;
/// @prop - Fill color of the toolbar button icon
$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
// --------------------------------------------------

0 comments on commit c2ada84

Please sign in to comment.
You can’t perform that action at this time.