diff --git a/demos/component-docs/buttons/components/components.html b/demos/component-docs/buttons/components/components.html index a3b18c2d40..bfd9d6ad00 100644 --- a/demos/component-docs/buttons/components/components.html +++ b/demos/component-docs/buttons/components/components.html @@ -2,16 +2,16 @@ Buttons - + - - + + - + diff --git a/demos/component-docs/menus/basic/menu-events.html b/demos/component-docs/menus/basic/menu-events.html index 3d34a652fb..bbd9b72848 100644 --- a/demos/component-docs/menus/basic/menu-events.html +++ b/demos/component-docs/menus/basic/menu-events.html @@ -1,8 +1,8 @@ - + Events diff --git a/demos/component-docs/menus/basic/menu-friends.html b/demos/component-docs/menus/basic/menu-friends.html index 44857cbb9f..a307b06157 100644 --- a/demos/component-docs/menus/basic/menu-friends.html +++ b/demos/component-docs/menus/basic/menu-friends.html @@ -1,8 +1,8 @@ - + Friends diff --git a/demos/component-docs/menus/basic/menu-home.html b/demos/component-docs/menus/basic/menu-home.html index bd7028ff64..411e497cce 100644 --- a/demos/component-docs/menus/basic/menu-home.html +++ b/demos/component-docs/menus/basic/menu-home.html @@ -1,8 +1,8 @@ - + Menus @@ -13,4 +13,4 @@ - + diff --git a/demos/component-docs/menus/basic/menu-places.html b/demos/component-docs/menus/basic/menu-places.html index 3b8609770b..bbff9b536a 100644 --- a/demos/component-docs/menus/basic/menu-places.html +++ b/demos/component-docs/menus/basic/menu-places.html @@ -1,8 +1,8 @@ - + Places diff --git a/demos/component-docs/modals/basic/modal-content.html b/demos/component-docs/modals/basic/modal-content.html index d6e7fba833..18042836af 100644 --- a/demos/component-docs/modals/basic/modal-content.html +++ b/demos/component-docs/modals/basic/modal-content.html @@ -2,14 +2,14 @@ Description - + - + diff --git a/demos/material/index.ts b/demos/material/index.ts index c52e290243..4d5bd6dcf1 100644 --- a/demos/material/index.ts +++ b/demos/material/index.ts @@ -5,13 +5,13 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic'; @IonicView({ template: '' + 'Heading' + - '' + + '' + + '' + '' + '' + - '' + + '' + '' + '' + ` diff --git a/demos/menu/page1.html b/demos/menu/page1.html index 8ce7edcdb7..87745111f9 100644 --- a/demos/menu/page1.html +++ b/demos/menu/page1.html @@ -1,9 +1,9 @@ - + Menu diff --git a/demos/menu/page2.html b/demos/menu/page2.html index af718dbb18..7bdf1645ee 100644 --- a/demos/menu/page2.html +++ b/demos/menu/page2.html @@ -1,9 +1,9 @@ - + Menu diff --git a/demos/modal/index.ts b/demos/modal/index.ts index 9603703f0e..cf5ab019b2 100644 --- a/demos/modal/index.ts +++ b/demos/modal/index.ts @@ -73,7 +73,7 @@ export class ContactModal { @Page({ template: ` - First Page Header + First Page Header

diff --git a/demos/native/pages/battery.ts b/demos/native/pages/battery.ts index d11047e576..661d946545 100644 --- a/demos/native/pages/battery.ts +++ b/demos/native/pages/battery.ts @@ -4,9 +4,9 @@ import {IonicView, Battery} from 'ionic/ionic'; @IonicView({ template: ` - + Battery diff --git a/demos/native/pages/camera.ts b/demos/native/pages/camera.ts index 1365125cff..63069de8c9 100644 --- a/demos/native/pages/camera.ts +++ b/demos/native/pages/camera.ts @@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic'; @IonicView({ template: ` - + Camera diff --git a/demos/native/pages/contacts.ts b/demos/native/pages/contacts.ts index aac736de0a..0b95be91ca 100644 --- a/demos/native/pages/contacts.ts +++ b/demos/native/pages/contacts.ts @@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic'; @IonicView({ template: ` - + Contacts diff --git a/demos/native/pages/device-motion.ts b/demos/native/pages/device-motion.ts index 92e2824f33..f55052e0fa 100644 --- a/demos/native/pages/device-motion.ts +++ b/demos/native/pages/device-motion.ts @@ -4,9 +4,9 @@ import {IonicView, DeviceMotion} from 'ionic/ionic'; @IonicView({ template: ` - + Device Motion diff --git a/demos/native/pages/device-orientation.ts b/demos/native/pages/device-orientation.ts index 95a4e8a2d4..eec2c3f293 100644 --- a/demos/native/pages/device-orientation.ts +++ b/demos/native/pages/device-orientation.ts @@ -4,9 +4,9 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic'; @IonicView({ template: ` - + Device Orientation diff --git a/demos/native/pages/device.ts b/demos/native/pages/device.ts index fd37281996..f4976ef4c9 100644 --- a/demos/native/pages/device.ts +++ b/demos/native/pages/device.ts @@ -4,9 +4,9 @@ import {IonicView, Device} from 'ionic/ionic'; @IonicView({ template: ` - + Device diff --git a/demos/native/pages/dialogs.ts b/demos/native/pages/dialogs.ts index 12fd20d141..f5c0abb675 100644 --- a/demos/native/pages/dialogs.ts +++ b/demos/native/pages/dialogs.ts @@ -4,9 +4,9 @@ import {IonicView, Dialogs} from 'ionic/ionic'; @IonicView({ template: ` - + Dialogs diff --git a/demos/native/pages/geolocation.ts b/demos/native/pages/geolocation.ts index b4e6af7052..2325076b6e 100644 --- a/demos/native/pages/geolocation.ts +++ b/demos/native/pages/geolocation.ts @@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic'; @IonicView({ template: ` - + Geolocation diff --git a/demos/native/pages/statusbar.ts b/demos/native/pages/statusbar.ts index 50dc6d6864..7595575687 100644 --- a/demos/native/pages/statusbar.ts +++ b/demos/native/pages/statusbar.ts @@ -5,9 +5,9 @@ import {StatusBar} from 'ionic/ionic'; @IonicView({ template: ` - + StatusBar diff --git a/demos/native/pages/vibration.ts b/demos/native/pages/vibration.ts index 92d72d3c6c..f443b917d9 100644 --- a/demos/native/pages/vibration.ts +++ b/demos/native/pages/vibration.ts @@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic'; @IonicView({ template: ` - + Vibration diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html index 90113a9cbe..f32ba3a922 100644 --- a/ionic/components/item/test/groups/session-list.html +++ b/ionic/components/item/test/groups/session-list.html @@ -1,8 +1,8 @@ Item Groups - + - + diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html index f054413350..481cfd48e6 100644 --- a/ionic/components/item/test/sliding/main.html +++ b/ionic/components/item/test/sliding/main.html @@ -1,8 +1,8 @@ Sliding Items - + - + diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html index c00cafabf4..ed3744ca64 100644 --- a/ionic/components/menu/test/basic/page1.html +++ b/ionic/components/menu/test/basic/page1.html @@ -1,29 +1,29 @@ - + Menu - + - + - + - + - + diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html index 098f3e147b..66415e066b 100644 --- a/ionic/components/menu/test/basic/page2.html +++ b/ionic/components/menu/test/basic/page2.html @@ -1,9 +1,9 @@ - + Menu diff --git a/ionic/components/menu/test/basic/page3.html b/ionic/components/menu/test/basic/page3.html index 4b67473c14..cfcda473c2 100644 --- a/ionic/components/menu/test/basic/page3.html +++ b/ionic/components/menu/test/basic/page3.html @@ -5,9 +5,9 @@ Menu - + diff --git a/ionic/components/menu/test/overlay/page1.html b/ionic/components/menu/test/overlay/page1.html index 19b06004ae..99eb7dacf7 100644 --- a/ionic/components/menu/test/overlay/page1.html +++ b/ionic/components/menu/test/overlay/page1.html @@ -1,9 +1,9 @@ - + Overlay Menu diff --git a/ionic/components/menu/test/push/page1.html b/ionic/components/menu/test/push/page1.html index fb8ffbadd8..cbac02c561 100644 --- a/ionic/components/menu/test/push/page1.html +++ b/ionic/components/menu/test/push/page1.html @@ -1,9 +1,9 @@ - + Push Menu diff --git a/ionic/components/menu/test/reveal/page1.html b/ionic/components/menu/test/reveal/page1.html index 6e4f46b80a..fb6bab465a 100644 --- a/ionic/components/menu/test/reveal/page1.html +++ b/ionic/components/menu/test/reveal/page1.html @@ -1,9 +1,9 @@ - + Reveal Menu diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index f5efcbf1f5..820832e1eb 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/ionic/components/modal/test/basic/index.ts @@ -141,9 +141,9 @@ class ContactUs { template: ` First Page Header - + - +

diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts index de9ed10bc1..4352bc6bc0 100644 --- a/ionic/components/nav/test/basic/index.ts +++ b/ionic/components/nav/test/basic/index.ts @@ -16,12 +16,12 @@ class MyCmpTest{} template: ` {{title}} - + - - + + - + diff --git a/ionic/components/nav/test/nested/index.ts b/ionic/components/nav/test/nested/index.ts index 59de5949d7..935897f4b2 100644 --- a/ionic/components/nav/test/nested/index.ts +++ b/ionic/components/nav/test/nested/index.ts @@ -75,9 +75,9 @@ export class Account { @Page({ template: ` - + Account Dashboard @@ -106,9 +106,9 @@ export class Dashboard { @Page({ template: ` - + Account Profile diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html index b48af356a4..39789c8de6 100644 --- a/ionic/components/nav/test/routing/view1.html +++ b/ionic/components/nav/test/routing/view1.html @@ -1,8 +1,8 @@ - + First View diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html index 3cd2b1d7e5..98ae4bf8f5 100644 --- a/ionic/components/nav/test/routing/view2.html +++ b/ionic/components/nav/test/routing/view2.html @@ -1,7 +1,7 @@ Second View - + diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts index 9cabaaee46..7145a01aa0 100644 --- a/ionic/components/navbar/navbar.ts +++ b/ionic/components/navbar/navbar.ts @@ -71,9 +71,9 @@ class ToolbarBackground { '{{bbText}}' + '' + '' + - '' + - '' + - '' + + '' + + '' + + '' + '

' + '' + '
', diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html index aba6b1d080..f923dfeaab 100644 --- a/ionic/components/segment/test/basic/main.html +++ b/ionic/components/segment/test/basic/main.html @@ -10,11 +10,11 @@ - + - + Something diff --git a/ionic/components/slides/test/intro/main.html b/ionic/components/slides/test/intro/main.html index 15b0f2b262..00caad1bb2 100644 --- a/ionic/components/slides/test/intro/main.html +++ b/ionic/components/slides/test/intro/main.html @@ -30,16 +30,16 @@ } - + - - + + - + Grid Icons diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts index c8f261c2d7..5a1209855c 100644 --- a/ionic/components/tabs/test/basic/index.ts +++ b/ionic/components/tabs/test/basic/index.ts @@ -71,9 +71,9 @@ class Tab2 { @Page({ template: ` - + Stopwatch diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts index 86588d5051..23f2882b63 100644 --- a/ionic/components/tabs/test/ghost/index.ts +++ b/ionic/components/tabs/test/ghost/index.ts @@ -46,9 +46,9 @@ class Tab2 { @Page({ template: ` - + Stopwatch @@ -68,9 +68,9 @@ class Tab3 { @Page({ template: ` - + Quesarito diff --git a/ionic/components/text-input/test/input-focus/main.html b/ionic/components/text-input/test/input-focus/main.html index 1c82634a14..6098a24aee 100644 --- a/ionic/components/text-input/test/input-focus/main.html +++ b/ionic/components/text-input/test/input-focus/main.html @@ -1,11 +1,11 @@ Inset Focus - + - + diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index 1d3de7f228..a029076d5d 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/ionic/components/toolbar/modes/ios.scss @@ -6,18 +6,20 @@ // -------------------------------------------------- $toolbar-order-ios: ( - back-button: 10, - menu-toggle-primary: 20, - primary: 30, - secondary: 50, - menu-toggle-secondary: 60, + back-button: 0, + menu-toggle-start: 1, + buttons-left: 2, + buttons-start: 3, + content: 4, + buttons-end: 5, + buttons-right: 6, + menu-toggle-end: 7, ); $toolbar-ios-padding: 4px !default; $toolbar-ios-height: 4.4rem !default; $toolbar-ios-button-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default; - $navbar-ios-height: $toolbar-ios-height !default; @@ -30,9 +32,73 @@ ion-navbar-section { min-height: $navbar-ios-height; } + +// iOS Toolbar Background +// -------------------------------------------------- + +.toolbar-background { + border-bottom-width: 1px; + border-bottom-style: solid; + border-color: $toolbar-ios-border-color; + background-color: $toolbar-ios-background-color; +} + +&.hairlines .toolbar-background { + border-bottom-width: 0.55px; +} + + +// iOS Toolbar Content +// -------------------------------------------------- + +.toolbar-content { + flex: 1; + order: map-get($toolbar-order-ios, content); +} + +.toolbar-title { + font-size: $toolbar-ios-title-font-size; + font-weight: 500; + text-align: center; + pointer-events: auto; + color: $toolbar-ios-text-color; +} + +ion-title { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0px 90px 1px 90px; + pointer-events: none; + transform: translateZ(0px); +} + + // iOS Toolbar Buttons // -------------------------------------------------- +ion-buttons { + flex: 1; + order: map-get($toolbar-order-ios, buttons-start); + transform: translateZ(0px); +} + +ion-buttons[left] { + order: map-get($toolbar-order-ios, buttons-left); +} + +ion-buttons[end] { + text-align: right; + order: map-get($toolbar-order-ios, buttons-end); +} + +ion-buttons[right] { + text-align: right; + order: map-get($toolbar-order-ios, buttons-right); +} + .bar-button { margin-top: 0; margin-bottom: 0; @@ -73,14 +139,14 @@ ion-navbar-section { } -// iOS Back Button +// iOS Toolbar Back Button // -------------------------------------------------- .back-button { margin: 0; min-height: 3.2rem; line-height: 1; - order: map-get($toolbar-order-ios, 'back-button'); + order: map-get($toolbar-order-ios, back-button); overflow: visible; transform: translateZ(0px); } @@ -93,16 +159,17 @@ ion-navbar-section { } -// iOS Menu Toggle +// iOS Toolbar Menu Toggle // -------------------------------------------------- [menu-toggle] { - order: map-get($toolbar-order-ios, menu-toggle-primary); + order: map-get($toolbar-order-ios, menu-toggle-start); cursor: pointer; } -[menu-toggle][secondary] { - order: map-get($toolbar-order-ios, menu-toggle-secondary); +[menu-toggle][end], +[menu-toggle][right] { + order: map-get($toolbar-order-ios, menu-toggle-end); } ion-segment-button[button] { @@ -112,55 +179,6 @@ ion-segment-button[button] { } -// iOS Toolbar Background -// -------------------------------------------------- - -.toolbar-background { - border-bottom-width: 1px; - border-bottom-style: solid; - border-color: $toolbar-ios-border-color; - background-color: $toolbar-ios-background-color; -} - -&.hairlines .toolbar-background { - border-bottom-width: 0.55px; -} - - -// iOS Toolbar Content -// -------------------------------------------------- - -ion-title { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0px 90px 1px 90px; - pointer-events: none; - transform: translateZ(0px); -} - -.toolbar-title { - font-size: $toolbar-ios-title-font-size; - font-weight: 500; - text-align: center; - pointer-events: auto; - color: $toolbar-ios-text-color; -} - -ion-nav-items { - flex: 1; - order: map-get($toolbar-order-ios, primary); - transform: translateZ(0px); -} - -ion-nav-items[secondary] { - text-align: right; - order: map-get($toolbar-order-ios, secondary); -} - - // iOS Toolbar Color Generation // -------------------------------------------------- diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss index 7447936f8b..9c669dd4ed 100644 --- a/ionic/components/toolbar/modes/md.scss +++ b/ionic/components/toolbar/modes/md.scss @@ -5,41 +5,111 @@ // Material Design Toolbar // -------------------------------------------------- -$toolbar-md-padding: 4px !default; -$toolbar-md-height: 5.6rem !default; -$toolbar-md-title-font-size: 2rem !default; -$toolbar-md-button-font-size: 1.4rem !default; +$toolbar-order-md: ( + back-button: 0, + menu-toggle-start: 1, + buttons-left: 2, + content: 3, + buttons-start: 4, + buttons-end: 5, + buttons-right: 6, + menu-toggle-end: 7, +); + +$toolbar-md-padding: 4px !default; +$toolbar-md-height: 5.6rem !default; +$toolbar-md-title-font-size: 2rem !default; +$toolbar-md-button-font-size: 1.4rem !default; +$navbar-md-height: $toolbar-md-height !default; .toolbar { padding: $toolbar-md-padding; min-height: $toolbar-md-height; +} - button, - [button], - button.activated, - [button].activated { - margin-top: 0; - margin-bottom: 0; - padding: 0 5px; - min-height: 32px; - box-shadow: none; - overflow: visible; - color: $toolbar-md-active-color; - } +ion-navbar-section { + min-height: $navbar-md-height; +} - button.icon-only, - [button].icon-only { - padding-right: 0; - padding-left: 0; - } - button icon, - [button] icon { - padding: 0; - min-width: 28px; - } +// Material Design Toolbar Background +// -------------------------------------------------- +.toolbar-background { + border-color: $toolbar-md-border-color; + background-color: $toolbar-md-background-color; +} + + +// Material Design Toolbar Content +// -------------------------------------------------- + +.toolbar-content { + flex: 1; + order: map-get($toolbar-order-md, content); +} + +.toolbar-title { + color: $toolbar-md-text-color; +} + +ion-title { + padding: 0 12px; + font-size: $toolbar-md-title-font-size; + font-weight: 500; +} + + +// Material Design Toolbar Buttons +// -------------------------------------------------- + +ion-buttons { + flex: 1; + order: map-get($toolbar-order-md, buttons-start); + transform: translateZ(0px); +} + +ion-buttons[left] { + order: map-get($toolbar-order-md, buttons-left); +} + +ion-buttons[left] .bar-button:first-child { + margin-left: 0; +} + +ion-buttons[end] { + text-align: right; + order: map-get($toolbar-order-md, buttons-end); +} + +ion-buttons[right] { + text-align: right; + order: map-get($toolbar-order-md, buttons-right); +} + + +// Material Design Toolbar Back Button +// -------------------------------------------------- + +.back-button { + margin: 0 0 0 12px; + box-shadow: none; +} + +.back-button-icon { + margin: 0; + min-width: 44px; + font-size: 2.4rem; + font-weight: normal; + text-align: left; +} + + +// Material Design Toolbar Menu Toggle +// -------------------------------------------------- + +.toolbar { [menu-toggle], [menu-toggle].activated { padding: 0 2px; @@ -55,34 +125,6 @@ $toolbar-md-button-font-size: 1.4rem !default; margin: 0 2px; min-width: 28px; } - -} - -.toolbar button:hover:not(.disable-hover), -.toolbar [button]:hover:not(.disable-hover), -.toolbar button.activated, -.toolbar [button].activated { - color: $toolbar-md-active-color; - background-color: transparent; -} - -.toolbar-background { - border-color: $toolbar-md-border-color; - background-color: $toolbar-md-background-color; -} - -ion-title { - padding: 0 12px; - font-size: $toolbar-md-title-font-size; - font-weight: 500; -} - -.toolbar-title { - color: $toolbar-md-text-color; -} - -ion-nav-items[primary] button:first-child { - margin-left: 0; } @@ -96,20 +138,6 @@ ion-navbar-section { min-height: $navbar-md-height; } -.back-button { - margin: 0 0 0 12px; - box-shadow: none; -} - -.back-button-icon { - margin: 0; - min-width: 44px; - font-size: 2.4rem; - font-weight: normal; - text-align: left; -} - - // Material Design Toolbar Color Generation // -------------------------------------------------- diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html index 2a1a98c698..c93a93d026 100644 --- a/ionic/components/toolbar/test/scenarios/main.html +++ b/ionic/components/toolbar/test/scenarios/main.html @@ -5,43 +5,43 @@ - + - - + + - + Defaults - + - - + + - + Defaults.activated - + @@ -49,19 +49,19 @@ Clear - + Clear - + - + - + @@ -69,19 +69,19 @@ Clear - + Clear - + - + - + @@ -89,18 +89,18 @@ Star - - + + - + Outline - + @@ -108,94 +108,94 @@ Star - - + + - + Outline.activated - + - - + + - + ColorAttr - + - - + + - + ColorAttr.activated - + - - + + - + Icon/Color Attr - + + - + Left side menu toggle - + - + Right side menu toggle - + - + - + Something diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss index 133e55524a..3ba63610c8 100644 --- a/ionic/components/toolbar/toolbar-button.scss +++ b/ionic/components/toolbar/toolbar-button.scss @@ -39,14 +39,9 @@ margin: 0 6px; padding: 0; min-width: 36px; - order: map-get($toolbar-order, menu-toggle-primary); box-shadow: none; } -.toolbar [menu-toggle][secondary] { - order: map-get($toolbar-order, menu-toggle-secondary); -} - .toolbar [menu-toggle] icon { padding: 0 6px; font-size: 2.8rem; @@ -57,8 +52,6 @@ // -------------------------------------------------- .back-button { - order: map-get($toolbar-order, backButton); - display: none; &.show-back-button { display: flex; diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index a504be4100..8b54064f2d 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -3,15 +3,6 @@ // Toolbar // -------------------------------------------------- -$toolbar-order: ( - backButton: 10, - menu-toggle-left: 20, - content: 30, - left: 40, - right: 50, - menu-toggle-right: 60, -); - .toolbar { position: relative; @@ -40,12 +31,6 @@ $toolbar-order: ( pointer-events: none; } -.toolbar-content { - display: block; - flex: 1; - order: map-get($toolbar-order, content); -} - .toolbar[position=bottom] { order: $flex-order-toolbar-bottom; } @@ -64,27 +49,22 @@ ion-title { overflow: hidden; } -ion-nav-items { +ion-buttons { display: block; margin: 0 0.2rem; pointer-events: none; - order: map-get($toolbar-order, left); } -ion-nav-items[secondary] { - order: map-get($toolbar-order, right); -} - -ion-nav-items button, -ion-nav-items a, -ion-nav-items input, -ion-nav-items textarea, -ion-nav-items div { +ion-buttons button, +ion-buttons a, +ion-buttons input, +ion-buttons textarea, +ion-buttons div { pointer-events: auto; } // TODO this is a temp hack to fix segment overlapping ion-nav-item -ion-nav-items, +ion-buttons, [menu-toggle] { z-index: 99; } diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index c779731271..b0d1e07b5a 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -44,7 +44,7 @@ export class ToolbarBase extends Ion { /** * @private - * A toolbar items include the left and right side `ion-nav-items`, + * A toolbar items include the left and right side `ion-buttons`, * and every `menu-toggle`. It does not include the `ion-title`. * @returns {TODO} Array of this toolbar's item ElementRefs. */ @@ -79,9 +79,9 @@ export class ToolbarBase extends Ion { selector: 'ion-toolbar', template: '
' + - '' + - '' + - '' + + '' + + '' + + '' + '
' + '' + '
', @@ -149,7 +149,7 @@ export class ToolbarTitle extends Ion { * @private */ @Directive({ - selector: 'ion-nav-items,[menu-toggle]' + selector: 'ion-buttons,[menu-toggle]' }) export class ToolbarItem extends Ion { constructor(