Skip to content

refactor(button): refactors button's css to avoid using flex #5310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 7, 2016
Merged

refactor(button): refactors button's css to avoid using flex #5310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ionic/components/action-sheet/action-sheet.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ ion-action-sheet {
}

.action-sheet-cancel {
font-weight: bold;
font-weight: 600;
background: $action-sheet-ios-cancel-button-background-color;
}

Expand Down
2 changes: 1 addition & 1 deletion ionic/components/alert/alert.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 3 additions & 6 deletions ionic/components/button/button.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}
Expand Down
6 changes: 3 additions & 3 deletions ionic/components/button/button.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
17 changes: 12 additions & 5 deletions ionic/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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
Expand All @@ -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;
}
Expand Down
18 changes: 11 additions & 7 deletions ionic/components/button/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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: '<span class="button-inner"><ng-content></ng-content></span>'
})
export class Button {
private _role: string = 'button'; // bar-button/item-button
Expand Down Expand Up @@ -78,7 +79,6 @@ export class Button {
}

this._readAttrs(element);
this._readIcon(element);
}

/**
Expand All @@ -89,6 +89,7 @@ export class Button {
if (this.color) {
this._colors = [this.color];
}
this._readIcon(this._elementRef.nativeElement);
this._assignCss(true);
}

Expand Down Expand Up @@ -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++) {
Expand Down Expand Up @@ -218,9 +222,9 @@ export class Button {
}
}

/**
* @private
*/
/**
* @private
*/
static setRoles(contentButtonChildren, role: string) {
let buttons = contentButtonChildren.toArray();
buttons.forEach(button => {
Expand Down
31 changes: 20 additions & 11 deletions ionic/components/button/test/full/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,37 @@

<ion-toolbar>
<ion-title>Full Buttons</ion-title>
</ion-toolbar>

<ion-content>

<div>
<p>
<a button full href="#">a[button][full]</a>
<button full>button[full]</button>
</div>
</p>

<p>
<a button full href="#">
<ion-icon name="help-circle"></ion-icon>
a[button][full] + icon
</a>
<button full>
<ion-icon name="help-circle"></ion-icon>
button[full] + icon
</button>
</p>

<div>
<p>
<a button full outline secondary href="#">a[button][full][outline][secondary]</a>
<button full outline secondary>button[full][outline][secondary]</button>
</div>
</p>

<div>
<p>
<a button full clear light href="#">a[button][full][clear][light]</a>
<button full clear light>button[full][clear][light]</button>
</div>
</p>

<div>
<p>
<a button full clear dark href="#">a[button][full][clear][dark]</a>
<button full clear dark>button[full][clear][dark]</button>
</div>

</ion-content>
</p>
</ion-content>
2 changes: 1 addition & 1 deletion ionic/components/item/item.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion ionic/components/item/item.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ ion-icon[item-right] {

.item-button {
padding: 0 0.6em;
min-height: 25px;
height: 25px;
font-size: 1.2rem;
}

Expand Down
2 changes: 1 addition & 1 deletion ionic/components/searchbar/searchbar.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions ionic/themes/default.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this caused items to grow in height, when a button was used.

$item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 9px !default;

Expand Down