button updates

This commit is contained in:
Adam Bradley
2015-09-03 14:15:07 -05:00
parent e99764d7c9
commit 17e1360cda
13 changed files with 92 additions and 53 deletions

View File

@ -3,5 +3,5 @@
<ion-tab tab-title="Home" tab-icon="globe" [root]="homeTab"></ion-tab>
<ion-tab tab-title="Peek" tab-icon="glasses" [root]="peekTab"></ion-tab>
<ion-tab tab-title="Me" tab-icon="person"></ion-tab>
<ion-tab tab-title="More" tab-icon="more-horizontal"></ion-tab>
<ion-tab tab-title="More" tab-icon="more"></ion-tab>
</ion-tabs>

View File

@ -14,8 +14,8 @@ $item-ios-padding-left: 16px !default;
$item-ios-padding-media-top: 10px !default;
$item-ios-padding-media-bottom: 10px !default;
$item-ios-padding-icon-top: 8px !default;
$item-ios-padding-icon-bottom: 8px !default;
$item-ios-padding-icon-top: 10px !default;
$item-ios-padding-icon-bottom: 10px !default;
$item-ios-avatar-size: 3.6rem !default;
$item-ios-thumbnail-size: 5.6rem !default;
@ -92,23 +92,30 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
[button][item-left],
[button][item-right] {
padding: 0 0.6em;
font-size: 1.5rem;
font-size: 1.3rem;
min-height: 25px;
}
[item-left].icon-only,
[item-right].icon-only,
[item-left].icon-only icon,
[item-right].icon-only icon {
padding: 0;
[item-right].icon-only icon,
[item-left][clear],
[item-right][clear] {
padding: 0 1px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
padding-right: 0.2em;
margin-left: 0;
margin-bottom: 1px;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
padding-left: 0.2em;
margin-right: 0;
margin-bottom: 1px;
}
.item-note {

View File

@ -81,22 +81,32 @@ $item-md-forward-icon-color: $item-md-border-color !default;
[button][item-right] {
padding: 0 0.6em;
min-height: 26px;
font-size: 1.3rem;
font-size: 1.2rem;
}
[item-left].icon-only,
[item-right].icon-only,
[item-left].icon-only icon,
[item-right].icon-only icon {
padding: 0;
padding: 0 1px;
}
[item-left][clear],
[item-right][clear] {
padding: 0 8px;
}
[item-left].icon-left icon,
[item-right].icon-left icon {
padding-right: 0.2em;
margin-left: 0;
margin-bottom: 1px;
padding-right: 0.3em;
}
[item-left].icon-right icon,
[item-right].icon-right icon {
padding-left: 0.2em;
margin-right: 0;
margin-bottom: 1px;
}
.item-text-wrap ion-item-content {

View File

@ -53,12 +53,12 @@
</ion-item>
<ion-item>
<button item-left>
<icon help-circle></icon>
<button clear item-left>
<icon navigate></icon>
</button>
icon only buttons
<button item-right>
<icon help-circle></icon>
<button clear item-right>
<icon navigate></icon>
</button>
</ion-item>

View File

@ -1,6 +1,6 @@
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
<ion-content class="outer-content" style="background:#EFEFF4">
<ion-content class="outer-content">
<ion-list>

View File

@ -48,7 +48,7 @@
</ion-input>
<ion-input fixed-label>
<ion-label>More Info</ion-label>
<icon contact item-left></icon>
<input placeholder="Placeholder Text" type="text">
</ion-input>
@ -69,6 +69,7 @@
</ion-input>
<ion-input fixed-label>
<icon create item-left></icon>
<ion-label>Message</ion-label>
<textarea>To infinity and beyond</textarea>
</ion-input>

View File

@ -50,15 +50,28 @@ $toolbar-ios-title-font-size: 1.7rem !default;
overflow: inherit;
}
.back-button-icon {
padding-right: 0.6rem;
}
button,
[button] {
margin-top: 0;
margin-bottom: 0;
padding: 0 5px;
min-height: 32px;
}
.back-button-icon {
padding-right: 0.6rem;
button.icon-only,
[button].icon-only {
padding-right: 0;
padding-left: 0;
}
button icon,
[button] icon {
padding: 0;
min-width: 28px;
}
}

View File

@ -30,10 +30,24 @@ $toolbar-md-button-font-size: 1.4rem !default;
[button].activated {
margin-top: 0;
margin-bottom: 0;
padding: 0 5px;
min-height: 32px;
box-shadow: none;
}
[aside-toggle],
button.icon-only,
[button].icon-only {
padding-right: 0;
padding-left: 0;
}
button icon,
[button] icon {
padding: 0;
min-width: 28px;
}
button[aside-toggle],
[aside-toggle].activated {
margin: -$toolbar-padding 0 -$toolbar-padding -$toolbar-padding;
padding-bottom: $toolbar-padding / 2;

View File

@ -10,15 +10,15 @@
<ion-toolbar>
<ion-nav-items primary>
<button>
<icon settings></icon>
<icon ios=contact></icon>
</button>
<button>
<icon heart></icon>
<icon search></icon>
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button>
<icon more-horizontal></icon>
<icon more></icon>
</button>
</ion-nav-items>
<ion-title>Defaults</ion-title>
@ -28,15 +28,15 @@
<ion-toolbar>
<ion-nav-items primary>
<button class="hover">
<icon settings></icon>
<icon ios=contact></icon>
</button>
<button class="hover">
<icon heart></icon>
<icon search></icon>
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button class="hover">
<icon more-horizontal></icon>
<icon more></icon>
</button>
</ion-nav-items>
<ion-title>Defaults.hover</ion-title>
@ -46,15 +46,15 @@
<ion-toolbar>
<ion-nav-items primary>
<button class="activated">
<icon settings></icon>
<icon ios=contact></icon>
</button>
<button class="activated">
<icon heart></icon>
<icon search></icon>
</button>
</ion-nav-items>
<ion-nav-items secondary>
<button class="activated">
<icon more-horizontal></icon>
<icon more></icon>
</button>
</ion-nav-items>
<ion-title>Defaults.activated</ion-title>
@ -64,10 +64,10 @@
<ion-toolbar>
<ion-nav-items primary>
<button clear>
<icon flag></icon>
<icon contact></icon>
</button>
<button clear>
<icon settings></icon>
<icon contact></icon>
Clear
</button>
</ion-nav-items>
@ -84,10 +84,10 @@
<ion-toolbar>
<ion-nav-items primary>
<button clear class="hover">
<icon flag></icon>
<icon contact></icon>
</button>
<button clear class="hover">
<icon settings></icon>
<icon contact></icon>
Clear
</button>
</ion-nav-items>
@ -104,10 +104,10 @@
<ion-toolbar>
<ion-nav-items primary>
<button clear class="activated">
<icon flag></icon>
<icon contact></icon>
</button>
<button clear class="activated">
<icon settings></icon>
<icon contact></icon>
Clear
</button>
</ion-nav-items>
@ -124,7 +124,7 @@
<ion-toolbar>
<ion-nav-items primary>
<button outline>
<icon settings></icon>
<icon contact></icon>
</button>
<button outline>
<icon star></icon>
@ -133,7 +133,7 @@
</ion-nav-items>
<ion-nav-items secondary>
<button secondary outline>
<icon flag></icon>
<icon contact></icon>
</button>
</ion-nav-items>
<ion-title>Outline</ion-title>
@ -143,7 +143,7 @@
<ion-toolbar>
<ion-nav-items primary>
<button outline class="hover">
<icon settings></icon>
<icon contact></icon>
</button primary>
<button outline class="hover">
<icon star></icon>
@ -152,7 +152,7 @@
</ion-nav-items>
<ion-nav-items secondary>
<button secondary outline class="hover">
<icon flag></icon>
<icon contact></icon>
</button>
</ion-nav-items>
<ion-title>Outline.hover</ion-title>
@ -162,7 +162,7 @@
<ion-toolbar>
<ion-nav-items primary>
<button outline class="activated">
<icon settings></icon>
<icon contact></icon>
</button>
<button outline class="activated">
<icon star></icon>
@ -171,7 +171,7 @@
</ion-nav-items>
<ion-nav-items secondary>
<button secondary outline class="activated">
<icon flag></icon>
<icon contact></icon>
</button>
</ion-nav-items>
<ion-title>Outline.activated</ion-title>
@ -226,7 +226,7 @@
<ion-toolbar>
<ion-nav-items primary>
<button>
<icon settings></icon>
<icon contact></icon>
Clear
</button>
</ion-nav-items>

View File

@ -87,7 +87,7 @@ ion-title {
}
.toolbar [aside-toggle] icon {
padding: 0 14px;
padding: 0 12px;
}
.toolbar-item {

View File

@ -632,13 +632,9 @@
.ion-ios-moon-outline:before { content: "\f467"; }
.ion-ios-more-horizontal:before { content: "\f1c8"; }
.ion-ios-more:before { content: "\f1c8"; }
.ion-ios-more-horizontal-outline:before { content: "\f1c7"; }
.ion-ios-more-vertical:before { content: "\f1ca"; }
.ion-ios-more-vertical-outline:before { content: "\f1c9"; }
.ion-ios-more-outline:before { content: "\f1c7"; }
.ion-ios-move:before { content: "\f1cb"; }
@ -1396,9 +1392,7 @@
.ion-md-moon:before { content: "\f32e"; }
.ion-md-more-horizontal:before { content: "\f32f"; }
.ion-md-more-vertical:before { content: "\f330"; }
.ion-md-more:before { content: "\f1c9"; }
.ion-md-move:before { content: "\f331"; }

Binary file not shown.

Binary file not shown.