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-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
// --------------------------------------------------
: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
// --------------------------------------------------
// .fab-translucent-ios-#{$color-name}.activated {
// opacity: 1;
// }
:host(.ion-color.fab-button-translucent) .button-native {
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
$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
// --------------------------------------------------