diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 5bfd2b2094..5b650eeb7d 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2995,7 +2995,6 @@ declare global { } namespace JSXElements { export interface IonTabButtonAttributes extends HTMLAttributes { - mode?: 'ios' | 'md'; selected?: boolean; tab?: HTMLIonTabElement; } diff --git a/packages/core/src/components/app/app.ios.scss b/packages/core/src/components/app/app.ios.scss index ddbd1448b2..2b42948180 100644 --- a/packages/core/src/components/app/app.ios.scss +++ b/packages/core/src/components/app/app.ios.scss @@ -6,7 +6,10 @@ .app-ios { - @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabs-ios-tab-height); + @include footer-safe-area( + $toolbar-ios-height, + $toolbar-ios-padding, + $tabbar-ios-height); font-family: $font-family-ios-base; font-size: $font-size-ios-base; diff --git a/packages/core/src/components/app/app.md.scss b/packages/core/src/components/app/app.md.scss index e5dafa3252..81edf15d8d 100644 --- a/packages/core/src/components/app/app.md.scss +++ b/packages/core/src/components/app/app.md.scss @@ -6,7 +6,10 @@ .app-md { - @include footer-safe-area($toolbar-md-height, $toolbar-md-padding, $tabs-md-tab-height); + @include footer-safe-area( + $toolbar-md-height, + $toolbar-md-padding, + $tabbar-md-height); font-family: $font-family-md-base; font-size: $font-size-md-base; diff --git a/packages/core/src/components/tab-button/readme.md b/packages/core/src/components/tab-button/readme.md index 41fcbbfe94..c08d26d953 100644 --- a/packages/core/src/components/tab-button/readme.md +++ b/packages/core/src/components/tab-button/readme.md @@ -7,15 +7,6 @@ ## Properties -#### mode - - - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. -For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - - #### selected boolean @@ -28,15 +19,6 @@ boolean ## Attributes -#### mode - - - -The mode determines which platform styles to use. -Possible values are: `"ios"` or `"md"`. -For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - - #### selected boolean diff --git a/packages/core/src/components/tab-button/tab-button.ios.scss b/packages/core/src/components/tab-button/tab-button.ios.scss new file mode 100644 index 0000000000..8aa396e4c4 --- /dev/null +++ b/packages/core/src/components/tab-button/tab-button.ios.scss @@ -0,0 +1,68 @@ +@import "./tab-button"; +@import "./tab-button.ios.vars"; + +.tab-button-ios { + @include padding($tab-button-ios-padding-top, $tab-button-ios-padding-end, $tab-button-ios-padding-bottom, $tab-button-ios-padding-start); + + max-width: $tab-button-ios-max-width; + min-height: 100%; + + font-size: $tab-button-ios-font-size; + color: $tab-button-ios-text-color; + + fill: $tab-button-ios-icon-color; +} + +.enable-hover .tab-button-ios:hover, +.tab-button-ios.tab-selected { + color: $tab-button-ios-text-color-active; + + fill: $tab-button-ios-icon-color-active; +} + +.tab-button-ios .tab-button-text { + @include margin(0, null, 1px, null); + + min-height: $tab-button-ios-font-size + 1; +} + +.tab-button-ios.has-title-only .tab-button-text { + font-size: $tab-button-ios-font-size + 2; +} + +.tab-button-ios .tab-button-icon { + @include margin(4px, null, 1px, null); + + min-width: $tab-button-ios-icon-size + 5; + height: $tab-button-ios-icon-size; + + font-size: $tab-button-ios-icon-size; +} + +.tabbar-ios .tab-button-icon::before { + vertical-align: top; +} + +.layout-icon-end .tab-button-ios .tab-button-text, +.layout-icon-start .tab-button-ios .tab-button-text, +.layout-icon-hide .tab-button-ios .tab-button-text, +.tab-button-ios.has-title-only .tab-button-text { + @include margin(2px, 0); + + font-size: 14px; + line-height: 1.1; +} + +.layout-icon-end .tab-button-ios ion-icon, +.layout-icon-start .tab-button-ios ion-icon { + @include margin(2px, null, 1px, null); + + min-width: 24px; + height: 26px; + + font-size: 24px; +} + +.layout-title-hide .tab-button-ios ion-icon { + @include margin(0); +} diff --git a/packages/core/src/components/tab-button/tab-button.ios.vars.scss b/packages/core/src/components/tab-button/tab-button.ios.vars.scss new file mode 100644 index 0000000000..c0c12f44a3 --- /dev/null +++ b/packages/core/src/components/tab-button/tab-button.ios.vars.scss @@ -0,0 +1,37 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Tabs +// -------------------------------------------------- + +/// @prop - Padding top on the tab button +$tab-button-ios-padding-top: 0 !default; + +/// @prop - Padding end on the tab button +$tab-button-ios-padding-end: 2px !default; + +/// @prop - Padding bottom on the tab button +$tab-button-ios-padding-bottom: $tab-button-ios-padding-top !default; + +/// @prop - Padding start on the tab button +$tab-button-ios-padding-start: $tab-button-ios-padding-end !default; + +/// @prop - Max width of the tab button +$tab-button-ios-max-width: 240px !default; + +/// @prop - Text color of the inactive tab button +$tab-button-ios-text-color: $tabbar-ios-text-color !default; + +/// @prop - Text color of the active tab button +$tab-button-ios-text-color-active: $tabbar-ios-text-color-active !default; + +/// @prop - Icon color of the inactive tab button +$tab-button-ios-icon-color: $tabbar-ios-text-color !default; + +/// @prop - Icon color of the active tab button +$tab-button-ios-icon-color-active: $tabbar-ios-text-color-active !default; + +/// @prop - Font size of the tab button text +$tab-button-ios-font-size: 10px !default; + +/// @prop - Size of the tab button icon +$tab-button-ios-icon-size: 30px !default; diff --git a/packages/core/src/components/tab-button/tab-button.md.scss b/packages/core/src/components/tab-button/tab-button.md.scss new file mode 100644 index 0000000000..540ba8d4ab --- /dev/null +++ b/packages/core/src/components/tab-button/tab-button.md.scss @@ -0,0 +1,125 @@ +@import "./tab-button"; +@import "./tab-button.md.vars"; + +// Material Design Tab Button +// -------------------------------------------------- + +.tab-button-md { + @include padding( + $tab-button-md-padding-top, + $tab-button-md-padding-end, + $tab-button-md-padding-bottom, + $tab-button-md-padding-start); + + display: flex; + + max-width: 168px; + height: 100%; + + font-weight: $tab-button-md-font-weight; + color: $tab-button-md-text-color; + + fill: $tab-button-md-icon-color; +} + +.scrollable .tab-button-md { + overflow: hidden; + + flex: 1 0 auto; +} + +.tab-button-md.tab-selected { + color: $tab-button-md-text-color-active; + + fill: $tab-button-md-icon-color-active; +} + +// Material Design Tab Button Text +// -------------------------------------------------- + +.placement-top .tab-button-md.tab-selected .tab-button-icon, +.placement-top .tab-button-md.tab-selected .tab-button-text { + transform: inherit; +} + +.tab-button-md .tab-button-text { + @include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start); + + @include transform-origin(center, bottom); + + font-size: $tab-button-md-font-size; + + text-transform: $tab-button-md-text-capitalization; + transition: $tab-button-md-text-transition; +} + +.tab-button-md.tab-selected .tab-button-text { + transform: $tab-button-md-text-transform-active; + transition: $tab-button-md-text-transition; +} + +.layout-icon-top .tab-button-md .has-icon .tab-button-text { + @include margin(null, null, -2px, null); +} + +.layout-icon-bottom .tab-button-md .tab-button-text { + @include transform-origin(center, top); + + @include margin(-2px, null, null, null); +} + +// Material Design Tab Button Icon +// -------------------------------------------------- + +.tab-button-md .tab-button-icon { + @include transform-origin(center, center); + + width: $tab-button-md-icon-size; + height: $tab-button-md-icon-size; + + font-size: $tab-button-md-icon-size; + + transition: $tab-button-md-icon-transition; +} + +// Tab layout: icon-top, icon-only, title-only +.tab-button-md.tab-selected .tab-button-icon { + @include transform(translate3d( + $tab-button-md-icon-transform-x-active, + $tab-button-md-icon-transform-y-active, + $tab-button-md-icon-transform-z-active)); +} + +// Tab layout: icon-end +.layout-icon-end .tab-button-md.tab-selected .tab-button-icon { + @include transform(translate3d( + $tab-button-md-icon-right-transform-x-active, + $tab-button-md-icon-right-transform-y-active, + $tab-button-md-icon-right-transform-z-active)); +} + +// Tab layout: icon-bottom +.layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon { + @include transform(translate3d( + $tab-button-md-icon-bottom-transform-x-active, + $tab-button-md-icon-bottom-transform-y-active, + $tab-button-md-icon-bottom-transform-z-active)); +} + +// Tab layout: icon-start +.layout-icon-start .tab-button-md.tab-selected .tab-button-icon { + @include transform(translate3d( + $tab-button-md-icon-left-transform-x-active, + $tab-button-md-icon-left-transform-y-active, + $tab-button-md-icon-left-transform-z-active)); +} + +// Material Design Tab with Icon or Title only +// -------------------------------------------------- + +.layout-icon-hide .tab-button-md, +.layout-title-hide .tab-button-md, +.tab-button-md.icon-only, +.tab-button-md.has-title-only { + justify-content: center; +} diff --git a/packages/core/src/components/tab-button/tab-button.md.vars.scss b/packages/core/src/components/tab-button/tab-button.md.vars.scss new file mode 100644 index 0000000000..4e8e2cfd6b --- /dev/null +++ b/packages/core/src/components/tab-button/tab-button.md.vars.scss @@ -0,0 +1,103 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Tabs +// -------------------------------------------------- + +/// @prop - Padding top on the tab button +$tab-button-md-padding-top: 8px !default; + +/// @prop - Padding end on the tab button +$tab-button-md-padding-end: 12px !default; + +/// @prop - Padding bottom on the tab button +$tab-button-md-padding-bottom: 10px !default; + +/// @prop - Padding start on the tab button +$tab-button-md-padding-start: 12px, !default; + +/// @prop - Font size of the inactive tab button text +$tab-button-md-font-size: 12px !default; + +/// @prop - Font weight of the tab button text +$tab-button-md-font-weight: normal !default; + +/// @prop - Text color of the inactive tab button +$tab-button-md-text-color: $tabbar-md-text-color !default; + +/// @prop - Text color of the active tab button +$tab-button-md-text-color-active: $tabbar-md-text-color-active !default; + +/// @prop - Icon color of the inactive tab button +$tab-button-md-icon-color: $tabbar-md-text-color !default; + +/// @prop - Icon color of the active tab button +$tab-button-md-icon-color-active: $tabbar-md-text-color-active !default; + +/// @prop - Font size of the active tab button text +$tab-button-md-font-size-active: 14px !default; + +/// @prop - Margin top on the tab button text +$tab-button-md-text-margin-top: 0 !default; + +/// @prop - Margin end on the tab button text +$tab-button-md-text-margin-end: $tab-button-md-text-margin-top !default; + +/// @prop - Margin bottom on the tab button text +$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default; + +/// @prop - Margin start on the tab button text +$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default; + +/// @prop - Capitalization of the tab button text +$tab-button-md-text-capitalization: none !default; + +/// @prop - Transform for the active tab button text +$tab-button-md-text-transform-active: scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default; + +/// @prop - Text transition for the tab button text +$tab-button-md-text-transition: transform .3s ease-in-out !default; + +/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only +$tab-button-md-icon-transform-x-active: 0 !default; + +/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only +$tab-button-md-icon-transform-y-active: -2px !default; + +/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only +$tab-button-md-icon-transform-z-active: 0 !default; + +/// @prop - Transform x for the active tab button icon when the layout is icon-right +$tab-button-md-icon-right-transform-x-active: 2px !default; + +/// @prop - Transform y for the active tab button icon when the layout is icon-right +$tab-button-md-icon-right-transform-y-active: 0 !default; + +/// @prop - Transform z for the active tab button icon when the layout is icon-right +$tab-button-md-icon-right-transform-z-active: 0 !default; + +/// @prop - Transform x for the active tab button icon when the layout is icon-bottom +$tab-button-md-icon-bottom-transform-x-active: 0 !default; + +/// @prop - Transform y for the active tab button icon when the layout is icon-bottom +$tab-button-md-icon-bottom-transform-y-active: 2px !default; + +/// @prop - Transform z for the active tab button icon when the layout is icon-bottom +$tab-button-md-icon-bottom-transform-z-active: 0 !default; + +/// @prop - Transform x for the active tab button icon when the layout is icon-left +$tab-button-md-icon-left-transform-x-active: -2px !default; + +/// @prop - Transform y for the active tab button icon when the layout is icon-left +$tab-button-md-icon-left-transform-y-active: 0 !default; + +/// @prop - Transform z for the active tab button icon when the layout is icon-left +$tab-button-md-icon-left-transform-z-active: 0 !default; + +/// @prop - Text transition for the tab button icon +$tab-button-md-icon-transition: transform .3s ease-in-out !default; + +/// @prop - Size of the tab button icon +$tab-button-md-icon-size: 24px !default; + +/// @prop - Opacity of the inactive tab button +$tab-button-md-opacity: .7 !default; diff --git a/packages/core/src/components/tab-button/tab-button.scss b/packages/core/src/components/tab-button/tab-button.scss new file mode 100644 index 0000000000..eccec5cab0 --- /dev/null +++ b/packages/core/src/components/tab-button/tab-button.scss @@ -0,0 +1,113 @@ +@import "../../themes/ionic.globals"; + +ion-tab-button { + @include margin(0); + @include text-align(center); + @include border-radius(0); + + box-sizing: border-box; + + position: relative; + z-index: 0; + display: flex; + overflow: hidden; + + flex: 1; + flex-direction: column; + align-items: center; + justify-content: space-between; + + border: 0; + + text-decoration: none; + background: none; + cursor: pointer; + + user-select: none; +} + + +.tab-disabled { + pointer-events: none; +} + +.tab-disabled > * { + opacity: .4; +} + +.tab-button-text, +.tab-button-icon { + display: none; + overflow: hidden; + + align-self: center; + + min-width: 26px; + max-width: 100%; + + text-overflow: ellipsis; + white-space: nowrap; +} + +.has-icon .tab-button-icon, +.has-title .tab-button-text { + display: block; +} + +.has-title-only .tab-button-text { + white-space: normal; +} + +// Tab Badges +// -------------------------------------------------- + +.layout-icon-start .tab-button { + flex-direction: row; +} + +.layout-icon-end .tab-button { + flex-direction: row-reverse; +} + +.layout-icon-bottom .tab-button { + flex-direction: column-reverse; +} + +.layout-icon-start .tab-button, +.layout-icon-end .tab-button, +.layout-icon-hide .tab-button, +.layout-title-hide .tab-button { + justify-content: center; +} + +.tab-hidden, +.layout-icon-hide .tab-button-icon, +.layout-title-hide .tab-button-text { + display: none; +} + +// Tab Badges +// -------------------------------------------------- + +.tab-badge { + @include position(6%, 4%, null, null); // 4% fallback + @include position(null, calc(50% - 50px), null, null); + @include padding(1px, 6px); + + position: absolute; + + height: auto; + + font-size: 12px; + line-height: 16px; +} + +.has-icon .tab-badge { + @include position(null, calc(50% - 30px), null, null); +} + +.layout-icon-bottom .tab-badge, +.layout-icon-start .tab-badge, +.layout-icon-end .tab-badge { + @include position(null, calc(50% - 50px), null, null); +} diff --git a/packages/core/src/components/tab-button/tab-button.tsx b/packages/core/src/components/tab-button/tab-button.tsx index 4f01efda05..50a79e639d 100644 --- a/packages/core/src/components/tab-button/tab-button.tsx +++ b/packages/core/src/components/tab-button/tab-button.tsx @@ -2,18 +2,17 @@ import {Component, Element, Event, EventEmitter, Listen, Prop} from '@stencil/co @Component({ - tag: 'ion-tab-button' + tag: 'ion-tab-button', + styleUrls: { + ios: 'tab-button.ios.scss', + md: 'tab-button.md.scss' + } }) export class TabButton { @Element() el: HTMLElement; - /** - * The mode determines which platform styles to use. - * Possible values are: `"ios"` or `"md"`. - * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). - */ - @Prop() mode: 'ios' | 'md'; + mode: string; @Prop() selected = false; @Prop() tab: HTMLIonTabElement; @@ -62,26 +61,17 @@ export class TabButton { } render() { - const items = []; const tab = this.tab; - - if (tab.icon) { - items.push(); - } - if (tab.title) { - items.push({tab.title}); - } - if (tab.badge) { - items.push({tab.badge}); - } - if (this.mode === 'md') { - items.push(); - } - return items; + return [ + tab.icon && , + tab.title && {tab.title}, + tab.badge && {tab.badge}, + this.mode === 'md' && + ]; } } -export interface TabButtonEvent extends CustomEvent { +export interface TabButtonEvent extends CustomEvent { detail: TabButtonEventDetail; } diff --git a/packages/core/src/components/tab-highlight/readme.md b/packages/core/src/components/tab-highlight/readme.md new file mode 100644 index 0000000000..b2f8a6c52e --- /dev/null +++ b/packages/core/src/components/tab-highlight/readme.md @@ -0,0 +1,25 @@ +# ion-tab-highlight + + + + + + +## Properties + +#### selectedTab + + + + +## Attributes + +#### selected-tab + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/tabbar/tabbar.ios.scss b/packages/core/src/components/tabbar/tabbar.ios.scss index 434f05fe00..ceb8c1b644 100644 --- a/packages/core/src/components/tabbar/tabbar.ios.scss +++ b/packages/core/src/components/tabbar/tabbar.ios.scss @@ -7,9 +7,9 @@ .tabbar-ios { justify-content: center; - height: $tabs-ios-tab-height; + height: $tabbar-ios-height; - border-top: $tabs-ios-border; + border-top: $tabbar-ios-border; background-color: $tabbar-ios-background-color; contain: strict; @@ -17,90 +17,13 @@ .tabbar-ios.placement-top { border-top: 0; - border-bottom: $tabs-ios-border; + border-bottom: $tabbar-ios-border; } .tabbar-ios .tabbar-highlight { background: $tabbar-ios-text-color-active; } -.tabbar-ios > ion-tab-button { - @include padding($tabs-ios-tab-padding-top, $tabs-ios-tab-padding-end, $tabs-ios-tab-padding-bottom, $tabs-ios-tab-padding-start); - - max-width: $tabs-ios-tab-max-width; - min-height: 100%; - - font-size: $tabs-ios-tab-font-size; - color: $tabs-ios-tab-text-color; - - fill: $tabs-ios-tab-icon-color; -} - -.enable-hover .tabbar-ios ion-tab-button:hover, -.tabbar-ios .tab-selected { - color: $tabs-ios-tab-text-color-active; - - fill: $tabs-ios-tab-icon-color-active; -} - -.tabbar-ios .tab-button-text { - @include margin(0, null, 1px, null); - - min-height: $tabs-ios-tab-font-size + 1; -} - -.tabbar-ios .has-title-only .tab-button-text { - font-size: $tabs-ios-tab-font-size + 2; -} - -.tabbar-ios .tab-button-icon { - @include margin(4px, null, 1px, null); - - min-width: $tabs-ios-tab-icon-size + 5; - height: $tabs-ios-tab-icon-size; - - font-size: $tabs-ios-tab-icon-size; -} - -.tabbar-ios .tab-button-icon::before { - vertical-align: top; -} - -.tabbar-ios.layout-icon-end .tab-button-text, -.tabbar-ios.layout-icon-start .tab-button-text, -.tabbar-ios.layout-icon-hide .tab-button-text, -.tabbar-ios .has-title-only .tab-button-text { - - @include margin(2px, 0); - - font-size: 14px; - line-height: 1.1; -} - -.tabbar-ios.layout-icon-end ion-icon, -.tabbar-ios.layout-icon-start ion-icon { - @include margin(2px, null, 1px, null); - - min-width: 24px; - height: 26px; - - font-size: 24px; -} - -.tabbar-ios.layout-title-hide ion-icon { - @include margin(0); -} - -// .tabs-ios[tabsLayout=icon-hide] ion-tab-button, -// .tabs-ios ion-tab-button.has-title-only { -// min-height: $tabs-ios-tab-min-height - 8; -// } - -// .tabs-ios[tabsLayout=title-hide] ion-tab-button, -// .tabs-ios ion-tab-button.icon-only { -// min-height: $tabs-ios-tab-min-height - 8; -// } - // iOS Translucent Tabbar // -------------------------------------------------- @@ -131,11 +54,12 @@ fill: $color-contrast; } - .tabbar-ios-#{$color-name} ion-tab-button { + .tabbar-ios-#{$color-name} .tab-button { color: $color-contrast; } - .tabbar-ios-#{$color-name} ion-tab-button:hover:not(.disable-hover), .tabbar-ios-#{$color-name} .tab-selected { + .tabbar-ios-#{$color-name} .tab-button:hover:not(.disable-hover), + .tabbar-ios-#{$color-name} .tab-selected { font-weight: bold; color: $color-contrast; diff --git a/packages/core/src/components/tabbar/tabbar.ios.vars.scss b/packages/core/src/components/tabbar/tabbar.ios.vars.scss index 58266a240b..c4d441705d 100644 --- a/packages/core/src/components/tabbar/tabbar.ios.vars.scss +++ b/packages/core/src/components/tabbar/tabbar.ios.vars.scss @@ -3,44 +3,11 @@ // iOS Tabs // -------------------------------------------------- +/// @prop - Height of the tabbar +$tabbar-ios-height: 50px !default; + /// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) -$tabs-ios-border: $hairlines-width solid $tabbar-ios-border-color !default; - -/// @prop - Padding top on the tab button -$tabs-ios-tab-padding-top: 0 !default; - -/// @prop - Padding end on the tab button -$tabs-ios-tab-padding-end: 2px !default; - -/// @prop - Padding bottom on the tab button -$tabs-ios-tab-padding-bottom: $tabs-ios-tab-padding-top !default; - -/// @prop - Padding start on the tab button -$tabs-ios-tab-padding-start: $tabs-ios-tab-padding-end !default; - -/// @prop - Max width of the tab button -$tabs-ios-tab-max-width: 240px !default; - -/// @prop - Minimum height of the tab button -$tabs-ios-tab-height: 50px !default; - -/// @prop - Text color of the inactive tab button -$tabs-ios-tab-text-color: $tabbar-ios-text-color !default; - -/// @prop - Text color of the active tab button -$tabs-ios-tab-text-color-active: $tabbar-ios-text-color-active !default; - -/// @prop - Icon color of the inactive tab button -$tabs-ios-tab-icon-color: $tabbar-ios-text-color !default; - -/// @prop - Icon color of the active tab button -$tabs-ios-tab-icon-color-active: $tabbar-ios-text-color-active !default; - -/// @prop - Font size of the tab button text -$tabs-ios-tab-font-size: 10px !default; - -/// @prop - Size of the tab button icon -$tabs-ios-tab-icon-size: 30px !default; +$tabbar-ios-border: $hairlines-width solid $tabbar-ios-border-color !default; /// @prop - Filter of the translucent tabbar -$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default; +$tabbar-ios-translucent-filter: saturate(210%) blur(20px) !default; diff --git a/packages/core/src/components/tabbar/tabbar.md.scss b/packages/core/src/components/tabbar/tabbar.md.scss index 1be738bd16..00f6901cfa 100644 --- a/packages/core/src/components/tabbar/tabbar.md.scss +++ b/packages/core/src/components/tabbar/tabbar.md.scss @@ -2,9 +2,9 @@ @import "./tabbar.md.vars"; .tabbar-md { - height: $tabs-md-tab-height; + height: $tabbar-md-height; - border-top: 1px solid $tabbar-md-border-color; + border-top: $tabbar-md-border; background: $tabbar-md-background-color; contain: strict; @@ -14,125 +14,12 @@ background: $tabbar-md-text-color-active; } -// Material Design Tab Button -// -------------------------------------------------- - -.tabbar-md ion-tab-button { - @include padding($tabs-md-tab-padding-top, $tabs-md-tab-padding-end, $tabs-md-tab-padding-bottom, $tabs-md-tab-padding-start); - - // min-height: $tabs-md-tab-min-height; - display: flex; - - max-width: 168px; - // min-width: 80px; - // Maximum: 168dp - // Minimum: 96dp - // max-width: 96px; - // min-width: 56px; - height: 100%; - - font-weight: $tabs-md-tab-font-weight; - color: $tabs-md-tab-text-color; - - fill: $tabs-md-tab-icon-color; -} - .tabbar-md.scrollable ion-scroll { @include margin(0, 8px); max-width: 650px; } -.tabbar-md.scrollable ion-tab-button { - overflow: hidden; - - flex: 1 0 auto; -} - -.tabbar-md .tab-selected { - color: $tabs-md-tab-text-color-active; - - fill: $tabs-md-tab-icon-color-active; -} - -// Material Design Tab Button Text -// -------------------------------------------------- - -.tabbar-md.placement-top .tab-selected .tab-button-icon, -.tabbar-md.placement-top .tab-selected .tab-button-text { - transform: inherit; -} - -.tabbar-md .tab-button-text { - @include margin($tabs-md-tab-text-margin-top, $tabs-md-tab-text-margin-end, $tabs-md-tab-text-margin-bottom, $tabs-md-tab-text-margin-start); - - @include transform-origin(center, bottom); - - font-size: $tabs-md-tab-font-size; - - text-transform: $tabs-md-tab-text-capitalization; - transition: $tabs-md-tab-text-transition; -} - -.tabbar-md .tab-selected .tab-button-text { - transform: $tabs-md-tab-text-transform-active; - transition: $tabs-md-tab-text-transition; -} - -.tabbar-md.layout-icon-top .has-icon .tab-button-text { - @include margin(null, null, -2px, null); -} - -.tabbar-md.layout-icon-bottom .tab-button-text { - @include transform-origin(center, top); - - @include margin(-2px, null, null, null); -} - -// Material Design Tab Button Icon -// -------------------------------------------------- - -.tabbar-md .tab-button-icon { - @include transform-origin(center, center); - - width: $tabs-md-tab-icon-size; - height: $tabs-md-tab-icon-size; - - font-size: $tabs-md-tab-icon-size; - - transition: $tabs-md-tab-icon-transition; -} - -// Tab layout: icon-top, icon-only, title-only -.tabbar-md .tab-selected .tab-button-icon { - @include transform(translate3d($tabs-md-tab-icon-transform-x-active, $tabs-md-tab-icon-transform-y-active, $tabs-md-tab-icon-transform-z-active)); -} - -// Tab layout: icon-end -.tabbar-md.layout-icon-end .tab-selected .tab-button-icon { - @include transform(translate3d($tabs-md-tab-icon-right-transform-x-active, $tabs-md-tab-icon-right-transform-y-active, $tabs-md-tab-icon-right-transform-z-active)); -} - -// Tab layout: icon-bottom -.tabbar-md.layout-icon-bottom .tab-selected .tab-button-icon { - @include transform(translate3d($tabs-md-tab-icon-bottom-transform-x-active, $tabs-md-tab-icon-bottom-transform-y-active, $tabs-md-tab-icon-bottom-transform-z-active)); -} - -// Tab layout: icon-start -.tabbar-md.layout-icon-start .tab-selected .tab-button-icon { - @include transform(translate3d($tabs-md-tab-icon-left-transform-x-active, $tabs-md-tab-icon-left-transform-y-active, $tabs-md-tab-icon-left-transform-z-active)); -} - -// Material Design Tab with Icon or Title only -// -------------------------------------------------- - -.tabbar-md.layout-icon-hide ion-tab-button, -.tabbar-md.layout-title-hide ion-tab-button, -.tabbar-md ion-tab-button.icon-only, -.tabbar-md ion-tab-button.has-title-only { - justify-content: center; -} - // Material Design Tabs Color Mixin // -------------------------------------------------- @@ -147,8 +34,8 @@ fill: $color-contrast; } - .enable-hover .tabbar-md-#{$color-name} ion-tab-button:hover, - .tabbar-md-#{$color-name} ion-tab-button.tab-selected { + .enable-hover .tabbar-md-#{$color-name} .tab-button:hover, + .tabbar-md-#{$color-name} .tab-button.tab-selected { color: $color-contrast; fill: $color-contrast; diff --git a/packages/core/src/components/tabbar/tabbar.md.vars.scss b/packages/core/src/components/tabbar/tabbar.md.vars.scss index 58e1d2a566..a4aad29697 100644 --- a/packages/core/src/components/tabbar/tabbar.md.vars.scss +++ b/packages/core/src/components/tabbar/tabbar.md.vars.scss @@ -3,104 +3,8 @@ // Material Design Tabs // -------------------------------------------------- -/// @prop - Padding top on the tab button -$tabs-md-tab-padding-top: 8px !default; +/// @prop - Minimum height of the tabbar +$tabbar-md-height: 56px !default; -/// @prop - Padding end on the tab button -$tabs-md-tab-padding-end: 12px !default; - -/// @prop - Padding bottom on the tab button -$tabs-md-tab-padding-bottom: 10px !default; - -/// @prop - Padding start on the tab button -$tabs-md-tab-padding-start: 12px, !default; - -/// @prop - Minimum height of the tab button -$tabs-md-tab-height: 56px !default; - -/// @prop - Font size of the inactive tab button text -$tabs-md-tab-font-size: 12px !default; - -/// @prop - Font weight of the tab button text -$tabs-md-tab-font-weight: normal !default; - -/// @prop - Text color of the inactive tab button -$tabs-md-tab-text-color: $tabbar-md-text-color !default; - -/// @prop - Text color of the active tab button -$tabs-md-tab-text-color-active: $tabbar-md-text-color-active !default; - -/// @prop - Icon color of the inactive tab button -$tabs-md-tab-icon-color: $tabbar-md-text-color !default; - -/// @prop - Icon color of the active tab button -$tabs-md-tab-icon-color-active: $tabbar-md-text-color-active !default; - -/// @prop - Font size of the active tab button text -$tabs-md-tab-font-size-active: 14px !default; - -/// @prop - Margin top on the tab button text -$tabs-md-tab-text-margin-top: 0 !default; - -/// @prop - Margin end on the tab button text -$tabs-md-tab-text-margin-end: $tabs-md-tab-text-margin-top !default; - -/// @prop - Margin bottom on the tab button text -$tabs-md-tab-text-margin-bottom: $tabs-md-tab-text-margin-top !default; - -/// @prop - Margin start on the tab button text -$tabs-md-tab-text-margin-start: $tabs-md-tab-text-margin-end !default; - -/// @prop - Capitalization of the tab button text -$tabs-md-tab-text-capitalization: none !default; - -/// @prop - Transform for the active tab button text -$tabs-md-tab-text-transform-active: scale3d($tabs-md-tab-font-size-active / $tabs-md-tab-font-size, $tabs-md-tab-font-size-active / $tabs-md-tab-font-size, 1) !default; - -/// @prop - Text transition for the tab button text -$tabs-md-tab-text-transition: transform .3s ease-in-out !default; - -/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or title-only -$tabs-md-tab-icon-transform-x-active: 0 !default; - -/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or title-only -$tabs-md-tab-icon-transform-y-active: -2px !default; - -/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or title-only -$tabs-md-tab-icon-transform-z-active: 0 !default; - -/// @prop - Transform x for the active tab button icon when the layout is icon-right -$tabs-md-tab-icon-right-transform-x-active: 2px !default; - -/// @prop - Transform y for the active tab button icon when the layout is icon-right -$tabs-md-tab-icon-right-transform-y-active: 0 !default; - -/// @prop - Transform z for the active tab button icon when the layout is icon-right -$tabs-md-tab-icon-right-transform-z-active: 0 !default; - -/// @prop - Transform x for the active tab button icon when the layout is icon-bottom -$tabs-md-tab-icon-bottom-transform-x-active: 0 !default; - -/// @prop - Transform y for the active tab button icon when the layout is icon-bottom -$tabs-md-tab-icon-bottom-transform-y-active: 2px !default; - -/// @prop - Transform z for the active tab button icon when the layout is icon-bottom -$tabs-md-tab-icon-bottom-transform-z-active: 0 !default; - -/// @prop - Transform x for the active tab button icon when the layout is icon-left -$tabs-md-tab-icon-left-transform-x-active: -2px !default; - -/// @prop - Transform y for the active tab button icon when the layout is icon-left -$tabs-md-tab-icon-left-transform-y-active: 0 !default; - -/// @prop - Transform z for the active tab button icon when the layout is icon-left -$tabs-md-tab-icon-left-transform-z-active: 0 !default; - -/// @prop - Text transition for the tab button icon -$tabs-md-tab-icon-transition: transform .3s ease-in-out !default; - -/// @prop - Size of the tab button icon -$tabs-md-tab-icon-size: 24px !default; - -/// @prop - Opacity of the inactive tab button -$tabs-md-tab-opacity: .7 !default; +/// @prop - Border on the tabbar +$tabbar-md-border: 1px solid $tabbar-md-border-color !default; diff --git a/packages/core/src/components/tabbar/tabbar.scss b/packages/core/src/components/tabbar/tabbar.scss index 3f5c99e60f..ecd473e6a8 100644 --- a/packages/core/src/components/tabbar/tabbar.scss +++ b/packages/core/src/components/tabbar/tabbar.scss @@ -22,113 +22,6 @@ ion-tabbar.placement-top { order: -1; } -ion-tab-button { - @include margin(0); - @include text-align(center); - @include border-radius(0); - - box-sizing: border-box; - - position: relative; - z-index: 0; - display: flex; - overflow: hidden; - - flex: 1; - flex-direction: column; - align-items: center; - justify-content: space-between; - - border: 0; - - text-decoration: none; - background: none; - cursor: pointer; - - user-select: none; -} - -.tab-disabled { - pointer-events: none; -} - -.tab-disabled > * { - opacity: .4; -} - -.tab-button-text, -.tab-button-icon { - display: none; - overflow: hidden; - - align-self: center; - - min-width: 26px; - max-width: 100%; - - text-overflow: ellipsis; - white-space: nowrap; -} - -.has-icon .tab-button-icon, -.has-title .tab-button-text { - display: block; -} - -.has-title-only .tab-button-text { - white-space: normal; -} - -.layout-icon-start ion-tab-button { - flex-direction: row; -} - -.layout-icon-end ion-tab-button { - flex-direction: row-reverse; -} - -.layout-icon-bottom ion-tab-button { - flex-direction: column-reverse; -} - -.layout-icon-start ion-tab-button, -.layout-icon-end ion-tab-button, -.layout-icon-hide ion-tab-button, -.layout-title-hide ion-tab-button { - justify-content: center; -} - -.tab-hidden, -.layout-icon-hide .tab-button-icon, -.layout-title-hide .tab-button-text { - display: none; -} - -// Tab Badges -// -------------------------------------------------- - -.tab-badge { - @include position(6%, 4%, null, null); // 4% fallback - @include position(null, calc(50% - 50px), null, null); - @include padding(1px, 6px); - - position: absolute; - - height: auto; - - font-size: 12px; - line-height: 16px; -} - -.has-icon .tab-badge { - @include position(null, calc(50% - 30px), null, null); -} - -.layout-icon-bottom .tab-badge, -.layout-icon-start .tab-badge, -.layout-icon-end .tab-badge { - @include position(null, calc(50% - 50px), null, null); -} // Tab Highlight // -------------------------------------------------- @@ -167,17 +60,19 @@ ion-tab-button { // Overflow Scrolling // -------------------------------------------------- -ion-tabbar.scrollable ion-scroll { - overflow: hidden; -} +ion-tabbar.scrollable { + ion-scroll { + overflow: hidden; + } -ion-tabbar.scrollable .scroll-inner { - position: relative; - display: flex; + .scroll-inner { + position: relative; + display: flex; - flex-direction: row; -} + flex-direction: row; + } -ion-tabbar.scrollable ion-button.inactive { - visibility: hidden; + ion-button.inactive { + visibility: hidden; + } } diff --git a/packages/core/src/components/tabbar/tabbar.tsx b/packages/core/src/components/tabbar/tabbar.tsx index d38c6022e0..ddacaf14f9 100644 --- a/packages/core/src/components/tabbar/tabbar.tsx +++ b/packages/core/src/components/tabbar/tabbar.tsx @@ -73,8 +73,8 @@ export class Tabbar { let next: {tab: HTMLIonTabButtonElement, amount: number}; tabs.forEach((tab: HTMLIonTabButtonElement) => { - const left: number = tab.offsetLeft, - right: number = left + tab.offsetWidth; + const left = tab.offsetLeft; + const right = left + tab.offsetWidth; if (left < scrollLeft) { previous = {tab, amount: left}; @@ -171,7 +171,8 @@ export class Tabbar { render() { const selectedTab = this.selectedTab; const ionTabbarHighlight = this.highlight ?
as HTMLElement : null; - const tabButtons = this.tabs.map(tab => ); + const buttonClasses = createThemedClasses(this.mode, this.color, 'tab-button'); + const tabButtons = this.tabs.map(tab => ); if (this.scrollable) { return [