Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(tabbar): Translucent tabbar functionality #17376

Merged
merged 10 commits into from
Feb 6, 2019
Merged

fix(tabbar): Translucent tabbar functionality #17376

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1c5b17a
fix(tabbar): update background css to allow for translucent tabbar
liamdebeasi Feb 4, 2019
b2feb7d
fix(tabbar): remove extra backdrop filter
liamdebeasi Feb 4, 2019
8a4e5f5
Merge branch 'master' into fix-translucent-tabbar
liamdebeasi Feb 4, 2019
cecd1af
Merge branch 'master' into fix-translucent-tabbar
liamdebeasi Feb 4, 2019
64dab16
Merge branch 'master' into fix-translucent-tabbar
brandyscarney Feb 5, 2019
d000a6d
clean up imports per comments
liamdebeasi Feb 6, 2019
99cbaf4
revert saturate value
liamdebeasi Feb 6, 2019
b9d9d83
test(tab-bar): add translucent test
brandyscarney Feb 6, 2019
79bf73b
fix translucency issue on md
liamdebeasi Feb 6, 2019
a78c6c3
Merge branch 'master' into fix-translucent-tabbar
brandyscarney Feb 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions core/src/components/tab-bar/tab-bar.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import "./tab-bar";
@import "../../themes/ionic.globals.ios";
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved
@import "../tab-button/tab-button.ios.vars";
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved
@import "./tab-bar.ios.vars";

// iOS Tabs
// --------------------------------------------------
Expand All @@ -20,6 +21,16 @@
// --------------------------------------------------

:host(.tab-bar-translucent) {
background-color: #{current-color(base, .8)};
backdrop-filter: saturate(210%) blur(20px);
--background: #{$tab-bar-ios-translucent-background-color};
backdrop-filter: $tab-bar-ios-translucent-filter;
}

// iOS Translucent Tab bar with Color
:host(.ion-color.tab-bar-translucent) {
background: #{current-color(base, $tab-bar-ios-translucent-background-color-alpha)};
}

// iOS Translucent Tab bar button
:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
background: transparent;
}
13 changes: 13 additions & 0 deletions core/src/components/tab-bar/tab-bar.ios.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@import "../../themes/ionic.globals.md";
liamdebeasi marked this conversation as resolved.
Show resolved Hide resolved

// iOS Tab Bar
// --------------------------------------------------

/// @prop - Alpha of translucent tab bar background color
$tab-bar-ios-translucent-background-color-alpha: .8 !default;

/// @prop - Translucent tab bar background color
$tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha) !default;

/// @prop - Filter of the translucent tab bar background color
$tab-bar-ios-translucent-filter: saturate(180%) blur(20px) !default;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this an intentional change?

saturate(210%) blur(20px);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah -- we're using 180% in other places, so I changed it to be consistent

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think 210% was set by ben, may want to check with him prior to this

38 changes: 38 additions & 0 deletions core/src/components/tab-bar/test/spec/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,44 @@
<ion-icon name="calendar"></ion-icon>
</ion-tab-button>
</ion-tab-bar>

<!-- Translucent -->
<ion-tab-bar translucent>
<ion-tab-button tab="1">
<ion-icon name="heart"></ion-icon>
</ion-tab-button>

<ion-tab-button tab="2">
<ion-icon name="musical-note"></ion-icon>
</ion-tab-button>

<ion-tab-button tab="3">
<ion-icon name="today"></ion-icon>
</ion-tab-button>

<ion-tab-button tab="4">
<ion-icon name="calendar"></ion-icon>
</ion-tab-button>
</ion-tab-bar>

<!-- Translucent / Custom Color -->
<ion-tab-bar translucent color="dark">
<ion-tab-button tab="1">
<ion-icon name="heart"></ion-icon>
</ion-tab-button>

<ion-tab-button tab="2">
<ion-icon name="musical-note"></ion-icon>
</ion-tab-button>

<ion-tab-button tab="3">
<ion-icon name="today"></ion-icon>
</ion-tab-button>

<ion-tab-button tab="4">
<ion-icon name="calendar"></ion-icon>
</ion-tab-button>
</ion-tab-bar>

<style>
body {
Expand Down