mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
button updates
This commit is contained in:
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -87,7 +87,7 @@ ion-title {
|
||||
}
|
||||
|
||||
.toolbar [aside-toggle] icon {
|
||||
padding: 0 14px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.toolbar-item {
|
||||
|
@ -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.
Reference in New Issue
Block a user