diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index 1f13d585ec..4f5ffe3ed3 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -97,3 +97,41 @@ sup { sub { bottom: -0.25em; } + +// Text Alignment +// -------------------------------------------------- + +[text-left] { + text-align: left; +} + +[text-center] { + text-align: center; +} + +[text-right] { + text-align: right; +} + +[text-justify] { + text-align: justify; +} + +[text-nowrap] { + white-space: nowrap; +} + +// Text Transformation +// -------------------------------------------------- + +[text-uppercase] { + text-transform: uppercase; +} + +[text-lowercase] { + text-transform: lowercase; +} + +[text-capitalize] { + text-transform: capitalize; +} diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 504d54c87e..932be6f642 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -37,7 +37,8 @@ export class Button { constructor( config: Config, private _elementRef: ElementRef, - private _renderer: Renderer + private _renderer: Renderer, + @Attribute('ion-item') ionItem: string ) { this._role = 'button'; // bar-button/item-button this._size = null; // large/small @@ -48,6 +49,7 @@ export class Button { this._colors = []; // primary/secondary this._icon = null; // left/right/only this._disabled = false; // disabled + this.isItem = (ionItem === ''); let element = _elementRef.nativeElement; @@ -92,6 +94,13 @@ export class Button { } } + /** + * @private + */ + addClass(className) { + this._renderer.setElementClass(this._elementRef, className, true); + } + /** * @private */ diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html index 7c56a7dae6..c19ea12092 100644 --- a/ionic/components/card/test/advanced/main.html +++ b/ionic/components/card/test/advanced/main.html @@ -19,16 +19,20 @@

- - - - + + + + + + + + @@ -51,19 +55,24 @@

Hello. I am a paragraph.

- - - - - Right Note - - + + + + + + + + + @@ -76,20 +85,27 @@ This card was breaking the border radius. - - - - - + + + + + + + + + + + + diff --git a/ionic/components/grid/test/alignment/index.ts b/ionic/components/grid/test/alignment/index.ts new file mode 100644 index 0000000000..43aed36502 --- /dev/null +++ b/ionic/components/grid/test/alignment/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class E2EApp {} diff --git a/ionic/components/grid/test/alignment/main.html b/ionic/components/grid/test/alignment/main.html new file mode 100644 index 0000000000..65ed491976 --- /dev/null +++ b/ionic/components/grid/test/alignment/main.html @@ -0,0 +1,71 @@ +Grid Alignment + + + + + ion-col + + + ion-col[text-right] + + + + + + ion-row[text-center] + + + ion-row[text-center] + + + ion-row[text-center] + + + + + + ion-col[text-left] + + + ion-col[text-left] + + + ion-col[text-right] + + + ion-col[text-right] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 31f4962a96..04ea84e87a 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -48,6 +48,13 @@ export class Icon { this.mode = config.get('iconMode'); } + /** + * @private + */ + addClass(className) { + this._renderer.setElementClass(this._elementRef, className, true); + } + /** * @private */ diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss index e7a74de578..0236f52253 100644 --- a/ionic/components/item/item.ios.scss +++ b/ionic/components/item/item.ios.scss @@ -83,30 +83,26 @@ $item-ios-sliding-content-bg: $list-ios-background-color !default; border-bottom: 1px solid $list-ios-border-color; } -&.hairlines .item-inner { - border-bottom-width: 0.55px; -} - ion-item-content { margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; } +&.hairlines .item-inner { + border-bottom-width: 0.55px; +} + // iOS Item Media // -------------------------------------------------- [item-left] { - margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0; + margin-left: 0; + margin-right: $item-ios-padding-right; } [item-right] { - margin: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); -} - -icon[item-left], -icon[item-right] { - margin-top: $item-ios-padding-icon-top; - margin-bottom: $item-ios-padding-icon-bottom; + margin-left: ($item-ios-padding-left / 2); + margin-right: ($item-ios-padding-right / 2); } ion-avatar[item-left], @@ -119,38 +115,17 @@ ion-thumbnail[item-right] { margin: ($item-ios-padding-right / 2); } -button[item-left], -button[item-right], -[button][item-left], -[button][item-right] { +.item-button { padding: 0 0.5em; font-size: 1.3rem; min-height: 25px; - margin-top: 9px; } -[item-left].button-icon-only, -[item-right].button-icon-only, -[item-left].button-icon-only icon, -[item-right].button-icon-only icon, -[item-left][clear], -[item-right][clear] { +.button-icon-only icon, +.button-icon-only { padding: 0 1px; } -[item-left].icon-left icon, -[item-right].icon-left icon { - margin-left: 0; - margin-bottom: 1px; - padding-right: 0.3em; -} - -[item-left].icon-right icon, -[item-right].icon-right icon { - margin-right: 0; - margin-bottom: 1px; -} - ion-avatar { min-width: $item-ios-avatar-size; min-height: $item-ios-avatar-size; @@ -231,6 +206,6 @@ ion-item-sliding { // todo } - + } } diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss index 5a288d32e5..f546fb5f63 100644 --- a/ionic/components/item/item.md.scss +++ b/ionic/components/item/item.md.scss @@ -96,40 +96,17 @@ icon[item-right] { margin-left: 0; } -button[item-left], -button[item-right], -[button][item-left], -[button][item-right] { +.item-button { padding: 0 0.6em; min-height: 26px; font-size: 1.2rem; } -[item-left].button-icon-only, -[item-right].button-icon-only, -[item-left].button-icon-only icon, -[item-right].button-icon-only icon { +.button-icon-only icon, +.button-icon-only { padding: 0 1px; } -[item-left][clear], -[item-right][clear] { - padding: 0 8px; -} - -[item-left].icon-left icon, -[item-right].icon-left icon { - margin-bottom: 1px; - margin-left: 0; - padding-right: 0.3em; -} - -[item-left].icon-right icon, -[item-right].icon-right icon { - margin-right: 0; - margin-bottom: 1px; -} - [text-wrap] ion-item-content { font-size: $item-md-body-text-font-size; line-height: $item-md-body-text-line-height; diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index b7bf7f32b9..70762502c8 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -1,4 +1,7 @@ -import {Component} from 'angular2/core'; +import {Component, ContentChildren} from 'angular2/core'; + +import {Button} from '../button/button'; +import {Icon} from '../icon/icon'; /** @@ -47,7 +50,7 @@ import {Component} from 'angular2/core'; template: '' + '
' + - '' + + '' + '' + ''+ '' + @@ -57,4 +60,21 @@ import {Component} from 'angular2/core'; 'class': 'item' } }) -export class Item {} +export class Item { + + @ContentChildren(Button) + set _buttons(buttons) { + buttons.toArray().forEach(button => { + if (!button.isItem) { + button.addClass('item-button'); + } + }); + } + + @ContentChildren(Icon) + set _icons(icons) { + icons.toArray().forEach(icon => { + icon.addClass('item-icon'); + }); + } +} diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html index 459d935d1c..4243ccc996 100644 --- a/ionic/components/item/test/buttons/main.html +++ b/ionic/components/item/test/buttons/main.html @@ -87,5 +87,5 @@ and a link. - + diff --git a/ionic/util/util.scss b/ionic/util/util.scss index 6483857860..dba4404a59 100755 --- a/ionic/util/util.scss +++ b/ionic/util/util.scss @@ -1,17 +1,5 @@ @import "../globals.core"; -.align-left { - text-align: left; -} - -.align-center { - text-align: center; -} - -.align-right { - text-align: right; -} - .no-transition { transition: none !important; } @@ -61,6 +49,9 @@ $content-padding: 16px !default; padding-left: $content-padding; } +[no-padding] { + padding: 0; +} // Focus Outline // --------------------------------------------------