diff --git a/src/components/action-menu/action-menu.js b/src/components/action-menu/action-menu.js index 1ce6ac70cf..c999e706c9 100644 --- a/src/components/action-menu/action-menu.js +++ b/src/components/action-menu/action-menu.js @@ -1,5 +1,7 @@ import {NgElement, Component, Template, Parent} from 'angular2/angular2' import {ComponentConfig} from 'ionic2/config/component-config' +import {Icon} from 'ionic2/components/icon/icon' +import {Item} from 'ionic2/components/item/item' export let ActionMenuConfig = new ComponentConfig('action-menu') @@ -13,23 +15,29 @@ export let ActionMenuConfig = new ComponentConfig('action-menu')
-
-
Action Menu Label
- - +
Action Menu List Header
+
+ +
-
-
Action Menu Label
- - +
Action Menu Label
+
+ +
-
- +
+
+
-
` +
`, + directives: [Item,Icon] }) export class ActionMenu { constructor( @@ -37,8 +45,6 @@ export class ActionMenu { @NgElement() ngElement:NgElement ) { this.domElement = ngElement.domElement - this.domElement.classList.add('pane') - this.domElement.classList.add('pane-overlay') this.config = configFactory.create(this) } } diff --git a/src/components/action-menu/action-menu.scss b/src/components/action-menu/action-menu.scss index d856699df0..949dce0c03 100644 --- a/src/components/action-menu/action-menu.scss +++ b/src/components/action-menu/action-menu.scss @@ -14,21 +14,14 @@ $action-menu-button-text-color: #007aff !default; left: 0; bottom: 0; width: 100%; + + .list, + .list-header { + width: $action-menu-width; + max-width: $action-menu-max-width; + margin-right: auto; + margin-left: auto; + } + } -.action-menu-group { - width: $action-menu-width; - max-width: $action-menu-max-width; - margin-right: auto; - margin-left: auto; -} - -.action-menu-group .action-menu-label { - display: block; - width: 100%; -} - -.action-menu-group .action-menu-button { - display: block; - width: 100%; -} diff --git a/src/components/action-menu/extensions/ios.scss b/src/components/action-menu/extensions/ios.scss index 6dd6dd4b46..c2ca3eb8c2 100644 --- a/src/components/action-menu/extensions/ios.scss +++ b/src/components/action-menu/extensions/ios.scss @@ -14,6 +14,8 @@ $action-menu-ios-label-font-size: 1.3rem !default; $action-menu-ios-button-color: #007aff !default; $action-menu-ios-button-font-size: 2rem !default; +$action-menu-ios-icon-font-size: 1.4em !default; + .action-menu-ios { text-align: center; @@ -68,4 +70,15 @@ $action-menu-ios-button-font-size: 2rem !default; border-bottom-right-radius: $action-menu-ios-border-radius; } + .action-menu-container icon { + @include flex-display(); + @include flex-align-items(center); + position: absolute; + top: 0; + left: 0; + height: 100%; + padding: 0 10px 2px; + font-size: $action-menu-ios-icon-font-size; + } + } diff --git a/src/components/item/item.js b/src/components/item/item.js index 54ae2e4355..364e99c596 100644 --- a/src/components/item/item.js +++ b/src/components/item/item.js @@ -8,7 +8,7 @@ import { } from 'ionic2/components/item/item-swipe-buttons' @Component({ - selector: 'ion-item' + selector: 'ion-item,[ion-item]' }) @Template({ inline: ` diff --git a/src/components/item/item.scss b/src/components/item/item.scss index e5aadb1e67..3b0389d34b 100644 --- a/src/components/item/item.scss +++ b/src/components/item/item.scss @@ -13,9 +13,13 @@ $item-padding: 15px !default; @include flex-justify-content(space-between); @include flex-align-items(center); + width: 100%; min-height: $item-min-height; margin: 0; padding: 0; + border: 0; + outline: none; + text-align: initial; } ion-primary-swipe-buttons,