From 545db2e4c496c9ed6ce5e86a82e87334bcf0b9ba Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 9 Oct 2018 15:32:37 -0500 Subject: [PATCH] fix(tabbar): css variables assigned to the host --- core/src/components/menu/readme.md | 12 ++++--- .../src/components/tabbar/tab-button.ios.scss | 2 -- core/src/components/tabbar/tab-button.md.scss | 6 +--- core/src/components/tabbar/tab-button.scss | 12 +++---- core/src/components/tabbar/tabbar.ios.scss | 14 ++++---- core/src/components/tabbar/tabbar.md.scss | 11 ++++--- core/src/components/tabbar/tabbar.scss | 12 +++---- core/src/components/tabs/readme.md | 16 +++------- .../components/tabs/test/colors/index.html | 32 ++++++++++++++----- .../tabs/test/placements/index.html | 4 ++- .../tabs/test/translucent/index.html | 4 ++- 11 files changed, 70 insertions(+), 55 deletions(-) diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md index 1f3a882a39..043e57c280 100644 --- a/core/src/components/menu/readme.md +++ b/core/src/components/menu/readme.md @@ -26,11 +26,13 @@ These can be controlled from the templates, or programmatically using the MenuCo ## Events -| Event | Description | -| --------------- | --------------------------------------- | -| `ionClose` | Emitted when the menu is closed. | -| `ionMenuChange` | Emitted when the menu state is changed. | -| `ionOpen` | Emitted when the menu is open. | +| Event | Description | +| --------------- | -------------------------------------------- | +| `ionDidClose` | Emitted when the menu is closed. | +| `ionDidOpen` | Emitted when the menu is open. | +| `ionMenuChange` | Emitted when the menu state is changed. | +| `ionWillClose` | Emitted when the menu is about to be closed. | +| `ionWillOpen` | Emitted when the menu is about to be opened. | ## Methods diff --git a/core/src/components/tabbar/tab-button.ios.scss b/core/src/components/tabbar/tab-button.ios.scss index 5e3d298e76..f4e44e7ba2 100644 --- a/core/src/components/tabbar/tab-button.ios.scss +++ b/core/src/components/tabbar/tab-button.ios.scss @@ -4,8 +4,6 @@ .tab-btn { @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; - - font-size: $tab-button-ios-font-size; } .tab-btn-text { diff --git a/core/src/components/tabbar/tab-button.md.scss b/core/src/components/tabbar/tab-button.md.scss index 77f9c9dacb..35f5432ae3 100644 --- a/core/src/components/tabbar/tab-button.md.scss +++ b/core/src/components/tabbar/tab-button.md.scss @@ -8,8 +8,6 @@ @include padding($tab-button-md-padding-top, $tab-button-md-padding-end, $tab-button-md-padding-bottom, $tab-button-md-padding-start); max-width: 168px; - - font-weight: $tab-button-md-font-weight; } // Material Design Tab Button Text @@ -23,13 +21,11 @@ transition: $tab-button-md-text-transition; - font-size: $tab-button-md-font-size; - text-transform: $tab-button-md-text-capitalization; } .tab-btn-selected .tab-btn-text { - --label-transform: #{$tab-button-md-text-transform-active}; + transform: #{$tab-button-md-text-transform-active}; transition: $tab-button-md-text-transition; } diff --git a/core/src/components/tabbar/tab-button.scss b/core/src/components/tabbar/tab-button.scss index 8feeecdfd4..e4ba2e317a 100644 --- a/core/src/components/tabbar/tab-button.scss +++ b/core/src/components/tabbar/tab-button.scss @@ -10,9 +10,9 @@ position: relative; flex: 1; - flex-direction: var(--flex-direction, column); + flex-direction: column; align-items: center; - justify-content: var(--justify-content, flex-start); + justify-content: flex-start; width: 100%; height: 100%; @@ -98,7 +98,7 @@ .tab-btn-has-icon-only, .tab-btn-has-label-only { - --justify-content: center; + justify-content: center; } @@ -107,7 +107,7 @@ .tab-btn-badge { @include position(6%, 4%, null, null); // 4% fallback - @include position(null, var(--badge-end, calc(50% - 30px)), null, null); + @include position(null, calc(50% - 30px), null, null); @include padding(1px, 6px); box-sizing: border-box; @@ -122,11 +122,11 @@ } .tab-btn-has-label-only .tab-btn-badge { - --badge-end: #{calc(50% - 50px)}; + @include position-horizontal(null, #{calc(50% - 50px)}); } .tab-btn-has-icon-only .tab-btn-badge { - --badge-end: #{calc(50% - 30px)}; + @include position-horizontal(null, #{calc(50% - 30px)}); } .tab-btn-selected .tab-btn-icon { diff --git a/core/src/components/tabbar/tabbar.ios.scss b/core/src/components/tabbar/tabbar.ios.scss index 6186a50151..43437189fc 100644 --- a/core/src/components/tabbar/tabbar.ios.scss +++ b/core/src/components/tabbar/tabbar.ios.scss @@ -19,6 +19,8 @@ border-top: $tabbar-ios-border; + font-size: $tab-button-ios-font-size; + contain: strict; } @@ -39,17 +41,17 @@ // iOS Tabbar Layout // -------------------------------------------------- -:host(.layout-icon-end) .tab-btn, -:host(.layout-icon-start) .tab-btn, -:host(.layout-icon-hide) .tab-btn { +:host(.layout-icon-end), +:host(.layout-icon-start), +:host(.layout-icon-hide) { --label-margin-top: 2px; --label-margin-bottom: 2px; --label-font-size: 14px; --label-line-height: 1.1; } -:host(.layout-icon-end) .tab-btn, -:host(.layout-icon-start) .tab-btn { +:host(.layout-icon-end), +:host(.layout-icon-start) { --icon-margin-top: 2px; --icon-margin-bottom: 1px; --icon-min-width: 24px; @@ -57,6 +59,6 @@ --icon-font-size: 24px; } -:host(.layout-label-hide) .tab-btn { +:host(.layout-label-hide) { --icon-margin: 0; } \ No newline at end of file diff --git a/core/src/components/tabbar/tabbar.md.scss b/core/src/components/tabbar/tabbar.md.scss index fb0ae2d604..b077807d9c 100644 --- a/core/src/components/tabbar/tabbar.md.scss +++ b/core/src/components/tabbar/tabbar.md.scss @@ -14,26 +14,29 @@ border-top: $tabbar-md-border; + font-size: $tab-button-md-font-size; + font-weight: $tab-button-md-font-weight; + contain: strict; } // Material Design Tabbar Layout // -------------------------------------------------- -:host(.layout-icon-top) .tab-btn { +:host(.layout-icon-top) { --label-margin-bottom: -2px; } -:host(.layout-icon-end) .tab-btn { +:host(.layout-icon-end) { --icon-transform-selected: #{$tab-button-md-icon-right-transform-active}; } -:host(.layout-icon-bottom) .tab-btn { +:host(.layout-icon-bottom) { --label-margin-top: -2px; --label-transform: transform-origin(center, top); --icon-transform-selected: #{$tab-button-md-icon-bottom-transform-active}; } -:host(.layout-icon-start) .tab-btn { +:host(.layout-icon-start) { --icon-transform-selected: #{$tab-button-md-icon-left-transform-active}; } diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss index ae6277f708..596636de85 100644 --- a/core/src/components/tabbar/tabbar.scss +++ b/core/src/components/tabbar/tabbar.scss @@ -81,29 +81,29 @@ // -------------------------------------------------- :host(.layout-icon-start) .tab-btn { - --flex-direction: row; + flex-direction: row; } :host(.layout-icon-end) .tab-btn { - --flex-direction: row-reverse; + flex-direction: row-reverse; } :host(.layout-icon-bottom) .tab-btn { - --flex-direction: column-reverse; + flex-direction: column-reverse; } :host(.layout-icon-start) .tab-btn, :host(.layout-icon-end) .tab-btn, :host(.layout-icon-hide) .tab-btn, :host(.layout-label-hide) .tab-btn { - --justify-content: center; + justify-content: center; } -:host(.layout-icon-hide) .tab-btn { +:host(.layout-icon-hide) { --icon-display: none; } -:host(.layout-label-hide) .tab-btn { +:host(.layout-label-hide) { --label-display: none; } diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md index dfa21b1cb8..c11af4eb34 100644 --- a/core/src/components/tabs/readme.md +++ b/core/src/components/tabs/readme.md @@ -9,17 +9,11 @@ The component is a container of individual [Tab](../Tab/) components. ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `name` | `name` | A unique name for the tabs. | `string` | -| `tabbarHidden` | `tabbar-hidden` | If true, the tabbar will be hidden. Defaults to `false`. | `boolean` | -| `tabbarHighlight` | `tabbar-highlight` | If true, show the tab highlight bar under the selected tab. | `boolean` | -| `tabbarLayout` | `tabbar-layout` | Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`. | `TabbarLayout` | -| `tabbarPlacement` | `tabbar-placement` | Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. | `TabbarPlacement` | -| `translucent` | `translucent` | If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. | `boolean` | -| `useRouter` | `use-router` | If true, the tabs will use the router and `selectedTab` will not do anything. | `boolean` | +| Property | Attribute | Description | Type | +| -------------- | --------------- | ----------------------------------------------------------------------------- | --------- | +| `name` | `name` | A unique name for the tabs. | `string` | +| `tabbarHidden` | `tabbar-hidden` | If true, the tabbar will be hidden. Defaults to `false`. | `boolean` | +| `useRouter` | `use-router` | If true, the tabs will use the router and `selectedTab` will not do anything. | `boolean` | ## Events diff --git a/core/src/components/tabs/test/colors/index.html b/core/src/components/tabs/test/colors/index.html index 49be064d98..5f0c57f252 100644 --- a/core/src/components/tabs/test/colors/index.html +++ b/core/src/components/tabs/test/colors/index.html @@ -22,66 +22,82 @@ - + + - + + + - + + + - + + + - + + + - + + + - + + + - + + + + diff --git a/core/src/components/tabs/test/placements/index.html b/core/src/components/tabs/test/placements/index.html index 15c24d911b..9978b70a91 100644 --- a/core/src/components/tabs/test/placements/index.html +++ b/core/src/components/tabs/test/placements/index.html @@ -13,7 +13,7 @@ - + @@ -54,6 +54,8 @@ + + diff --git a/core/src/components/tabs/test/translucent/index.html b/core/src/components/tabs/test/translucent/index.html index c27c8029cc..b5087e11d8 100644 --- a/core/src/components/tabs/test/translucent/index.html +++ b/core/src/components/tabs/test/translucent/index.html @@ -16,7 +16,7 @@ - + @@ -38,6 +38,8 @@ + +