From 64ae1000f43615cdc12a276cbd48d29f4ed52a79 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Sun, 7 Feb 2016 00:37:30 +0100 Subject: [PATCH] refactor(button): refactors button's css to work in chrome/safari --- .../action-sheet/action-sheet.ios.scss | 2 +- ionic/components/alert/alert.ios.scss | 2 +- ionic/components/button/button.ios.scss | 9 ++---- ionic/components/button/button.md.scss | 6 ++-- ionic/components/button/button.scss | 17 +++++++--- ionic/components/button/button.ts | 18 ++++++----- ionic/components/button/test/full/main.html | 31 ++++++++++++------- ionic/components/item/item.ios.scss | 2 +- ionic/components/item/item.md.scss | 2 +- ionic/components/searchbar/searchbar.ios.scss | 2 +- ionic/themes/default.ios.scss | 4 +-- 11 files changed, 56 insertions(+), 39 deletions(-) diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss index 050cec1a56..faf71360bd 100644 --- a/ionic/components/action-sheet/action-sheet.ios.scss +++ b/ionic/components/action-sheet/action-sheet.ios.scss @@ -81,7 +81,7 @@ ion-action-sheet { } .action-sheet-cancel { - font-weight: bold; + font-weight: 600; background: $action-sheet-ios-cancel-button-background-color; } diff --git a/ionic/components/alert/alert.ios.scss b/ionic/components/alert/alert.ios.scss index 7e92b72ea2..9b1244bcf5 100644 --- a/ionic/components/alert/alert.ios.scss +++ b/ionic/components/alert/alert.ios.scss @@ -222,7 +222,7 @@ ion-alert { flex: 1 1 auto; min-width: 50%; font-size: $alert-ios-button-font-size; - min-height: $alert-ios-button-min-height; + height: $alert-ios-button-min-height; border-radius: $alert-ios-button-border-radius; border-top: 1px solid $alert-ios-button-border-color; border-right: 1px solid $alert-ios-button-border-color; diff --git a/ionic/components/button/button.ios.scss b/ionic/components/button/button.ios.scss index b5cad1f3e4..d5c6246c61 100644 --- a/ionic/components/button/button.ios.scss +++ b/ionic/components/button/button.ios.scss @@ -30,7 +30,7 @@ $button-ios-small-icon-font-size: 1.3em !default; margin: $button-ios-margin; padding: $button-ios-padding; - min-height: $button-ios-height; + height: $button-ios-height; font-size: $button-ios-font-size; border-radius: $button-ios-border-radius; @@ -75,13 +75,13 @@ $button-ios-small-icon-font-size: 1.3em !default; .button-large { padding: 0 $button-ios-large-padding; - min-height: $button-ios-large-height; + height: $button-ios-large-height; font-size: $button-ios-large-font-size; } .button-small { padding: 0 $button-ios-small-padding; - min-height: $button-ios-small-height; + height: $button-ios-small-height; font-size: $button-ios-small-font-size; } @@ -93,9 +93,6 @@ $button-ios-small-icon-font-size: 1.3em !default; // -------------------------------------------------- .button-block { - // This fixes an issue with flexbox and button on iOS Safari. See #225 - display: block; - line-height: $button-ios-height; margin-left: 0; margin-right: 0; } diff --git a/ionic/components/button/button.md.scss b/ionic/components/button/button.md.scss index ac5fe0ef34..d49f12a52c 100644 --- a/ionic/components/button/button.md.scss +++ b/ionic/components/button/button.md.scss @@ -43,7 +43,7 @@ $button-md-small-icon-font-size: 1.4em !default; .button { margin: $button-md-margin; padding: $button-md-padding; - min-height: $button-md-height; + height: $button-md-height; border-radius: $button-md-border-radius; font-weight: 500; @@ -96,13 +96,13 @@ $button-md-small-icon-font-size: 1.4em !default; .button-large { padding: 0 $button-md-large-padding; - min-height: $button-md-large-height; + height: $button-md-large-height; font-size: $button-md-large-font-size; } .button-small { padding: 0 $button-md-small-padding; - min-height: $button-md-small-height; + height: $button-md-small-height; font-size: $button-md-small-font-size; } diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 669265179e..3b26fc0234 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -9,11 +9,7 @@ $button-round-border-radius: 64px !default; .button { position: relative; - display: inline-flex; - flex-shrink: 0; - flex-flow: row nowrap; - align-items: center; - justify-content: center; + display: inline-block; transition: background-color, opacity 100ms linear; z-index: 0; @@ -23,6 +19,7 @@ $button-round-border-radius: 64px !default; text-align: center; text-transform: none; + font-kerning: none; vertical-align: top; // the better option for most scenarios vertical-align: -webkit-baseline-middle; // the best for those that support it @@ -32,6 +29,16 @@ $button-round-border-radius: 64px !default; @include appearance(none); } +span.button-inner { + width: 100%; + height: 100%; + display: flex; + flex-shrink: 0; + flex-flow: row nowrap; + align-items: center; + justify-content: center; +} + a.button { text-decoration: none; } diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 794dc90933..1ee615b68e 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Renderer, Attribute, Optional, Input} from 'angular2/core'; +import {Component, ElementRef, Renderer, Attribute, Optional, Input} from 'angular2/core'; import {Config} from '../../config/config'; import {Toolbar} from '../toolbar/toolbar'; @@ -28,8 +28,9 @@ import {Toolbar} from '../toolbar/toolbar'; * @see {@link /docs/v2/components#buttons Button Component Docs} */ -@Directive({ - selector: 'button,[button]' +@Component({ + selector: 'button:not([ion-item]),[button]', + template: '' }) export class Button { private _role: string = 'button'; // bar-button/item-button @@ -78,7 +79,6 @@ export class Button { } this._readAttrs(element); - this._readIcon(element); } /** @@ -89,6 +89,7 @@ export class Button { if (this.color) { this._colors = [this.color]; } + this._readIcon(this._elementRef.nativeElement); this._assignCss(true); } @@ -124,6 +125,9 @@ export class Button { private _readIcon(element: HTMLElement) { // figure out if and where the icon lives in the button let childNodes = element.childNodes; + if (childNodes.length == 1) { + childNodes = childNodes[0].childNodes; + } let childNode; let nodes = []; for (let i = 0, l = childNodes.length; i < l; i++) { @@ -218,9 +222,9 @@ export class Button { } } -/** - * @private - */ + /** + * @private + */ static setRoles(contentButtonChildren, role: string) { let buttons = contentButtonChildren.toArray(); buttons.forEach(button => { diff --git a/ionic/components/button/test/full/main.html b/ionic/components/button/test/full/main.html index 15590211b5..195c7296fb 100644 --- a/ionic/components/button/test/full/main.html +++ b/ionic/components/button/test/full/main.html @@ -1,28 +1,37 @@ - Full Buttons -
+

a[button][full] -

+

-
+

+ + + a[button][full] + icon + + +

+ +

a[button][full][outline][secondary] -

+

-
+

a[button][full][clear][light] -

+

-
+

a[button][full][clear][dark] -

- - +

+ \ No newline at end of file diff --git a/ionic/components/item/item.ios.scss b/ionic/components/item/item.ios.scss index ceec190ab7..8fb685a18d 100644 --- a/ionic/components/item/item.ios.scss +++ b/ionic/components/item/item.ios.scss @@ -121,7 +121,7 @@ ion-thumbnail[item-right] { .item-button { padding: 0 0.5em; font-size: 1.3rem; - min-height: 24px; + height: 24px; } .item-button.button-icon-only ion-icon, diff --git a/ionic/components/item/item.md.scss b/ionic/components/item/item.md.scss index 3393e8642c..3ff147bb63 100644 --- a/ionic/components/item/item.md.scss +++ b/ionic/components/item/item.md.scss @@ -94,7 +94,7 @@ ion-icon[item-right] { .item-button { padding: 0 0.6em; - min-height: 25px; + height: 25px; font-size: 1.2rem; } diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss index b7468db2a1..ac27d3803d 100644 --- a/ionic/components/searchbar/searchbar.ios.scss +++ b/ionic/components/searchbar/searchbar.ios.scss @@ -102,7 +102,7 @@ ion-searchbar { .searchbar-ios-cancel { transition: $searchbar-ios-cancel-transition; - min-height: 30px; + height: 30px; margin-left: 0; margin-right: 0; diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss index c85244041d..968d5dcea0 100644 --- a/ionic/themes/default.ios.scss +++ b/ionic/themes/default.ios.scss @@ -42,8 +42,8 @@ $item-ios-padding-top: 12px !default; $item-ios-padding-right: 16px !default; $item-ios-padding-bottom: 13px !default; $item-ios-padding-left: 16px !default; -$item-ios-padding-media-top: 10px !default; -$item-ios-padding-media-bottom: 10px !default; +$item-ios-padding-media-top: 8px !default; +$item-ios-padding-media-bottom: 8px !default; $item-ios-padding-icon-top: 10px !default; $item-ios-padding-icon-bottom: 9px !default;