mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
list/item/button/card css overhaul
This commit is contained in:
Adam Bradley
11
.gitignore
vendored
11
.gitignore
vendored
@ -1,5 +1,4 @@
|
||||
*~
|
||||
.DS_Store
|
||||
*.sw[mnpcod]
|
||||
*.log
|
||||
*.tmp
|
||||
@ -7,14 +6,20 @@
|
||||
log.txt
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
UserInterfaceState.xcuserstate
|
||||
|
||||
.idea/
|
||||
.sass-cache/
|
||||
.versions/
|
||||
coverage/
|
||||
dist/
|
||||
node_modules/
|
||||
tmp/
|
||||
temp/
|
||||
dist/
|
||||
$RECYCLE.BIN/
|
||||
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
UserInterfaceState.xcuserstate
|
||||
|
||||
scripts/resources/web-animations-js/test/
|
||||
scripts/resources/web-animations-js/inter-*
|
||||
|
||||
@ -87,11 +87,11 @@ export class IonicApp {
|
||||
|
||||
let platformVersion = versions[platformName];
|
||||
if (platformVersion) {
|
||||
// platform-ios_8
|
||||
platformClass += '_' + platformVersion.major;
|
||||
// platform-ios9
|
||||
platformClass += platformVersion.major;
|
||||
bodyEle.classList.add(platformClass);
|
||||
|
||||
// platform-ios_8_3
|
||||
// platform-ios9_3
|
||||
bodyEle.classList.add(platformClass + '_' + platformVersion.minor);
|
||||
}
|
||||
});
|
||||
|
||||
@ -7,7 +7,7 @@ $badge-font-weight: bold !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
|
||||
|
||||
.badge {
|
||||
item-badge {
|
||||
display: inline-block;
|
||||
|
||||
padding: 3px 8px;
|
||||
|
||||
@ -7,20 +7,21 @@ button,
|
||||
[button] {
|
||||
|
||||
&.icon-left icon {
|
||||
margin-left: -0.6rem;
|
||||
padding-right: 0.6rem;
|
||||
margin-left: -0.2em;
|
||||
padding-right: 0.4em;
|
||||
}
|
||||
|
||||
&.icon-right icon {
|
||||
margin-right: -0.6rem;
|
||||
padding-left: 0.6rem;
|
||||
margin-right: -0.2em;
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
&.icon-only {
|
||||
padding: 0;
|
||||
min-width: 0.9em;
|
||||
|
||||
icon {
|
||||
padding: 0 1.6rem;
|
||||
padding: 0 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,11 +30,6 @@ button,
|
||||
border: none;
|
||||
}
|
||||
|
||||
&[large] icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&[small] icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-large-font-size: 2rem !default;
|
||||
$button-large-height: 5.4rem !default;
|
||||
$button-large-padding: 1.4rem !default;
|
||||
$button-large-height: 2.8em !default;
|
||||
$button-large-padding: 1.0em !default;
|
||||
|
||||
$button-small-font-size: 1.3rem !default;
|
||||
$button-small-height: 2.8rem !default;
|
||||
$button-small-padding: 1.1rem !default;
|
||||
$button-small-height: 2.1em !default;
|
||||
$button-small-padding: 0.9em !default;
|
||||
|
||||
|
||||
button,
|
||||
@ -16,14 +16,12 @@ button,
|
||||
|
||||
&[large] {
|
||||
padding: 0 $button-large-padding;
|
||||
min-width: ($button-large-padding * 4);
|
||||
min-height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
}
|
||||
|
||||
&[small] {
|
||||
padding: 0 $button-small-padding;
|
||||
min-width: ($button-small-padding * 3);
|
||||
min-height: $button-small-height;
|
||||
font-size: $button-small-font-size;
|
||||
}
|
||||
|
||||
@ -4,13 +4,12 @@
|
||||
|
||||
$button-font-size: 1.6rem !default;
|
||||
$button-margin: 0.4rem 0 !default;
|
||||
$button-padding: 0 2rem !default;
|
||||
$button-height: 4.4rem !default;
|
||||
$button-border-width: 1px !default;
|
||||
$button-padding: 0 1em !default;
|
||||
$button-height: 2.8em !default;
|
||||
$button-border-radius: 4px !default;
|
||||
|
||||
$button-round-border-radius: 64px !default;
|
||||
$button-round-padding: 0 2.6rem !default;
|
||||
$button-round-border-radius: 64px !default;
|
||||
|
||||
$button-color: color(primary) !default;
|
||||
$button-color-activated: darken-or-lighten($button-color) !default;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
$button-md-font-size: 1.4rem !default;
|
||||
$button-md-min-height: 3.6rem !default;
|
||||
$button-md-padding: 0 1.6rem !default;
|
||||
$button-md-padding: 0 1.2em !default;
|
||||
$button-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$button-md-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
|
||||
$button-md-border-radius: 2px !default;
|
||||
@ -72,14 +72,12 @@ $button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
|
||||
|
||||
&[large] {
|
||||
padding: 0 $button-large-padding;
|
||||
min-width: ($button-large-padding * 4);
|
||||
min-height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
}
|
||||
|
||||
&[small] {
|
||||
padding: 0 $button-small-padding;
|
||||
min-width: ($button-small-padding * 3);
|
||||
min-height: $button-small-height;
|
||||
font-size: $button-small-font-size;
|
||||
}
|
||||
@ -90,10 +88,6 @@ $button-md-clear-active-bg-color: rgba(158, 158, 158, 0.2);
|
||||
|
||||
&.icon-only {
|
||||
padding: 0;
|
||||
|
||||
icon {
|
||||
padding: 0 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Generate iOS Checkbox Auxiliary Colors
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.card {
|
||||
ion-card {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card img {
|
||||
ion-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -8,10 +8,7 @@ import * as util from 'ionic/util';
|
||||
|
||||
|
||||
@IonicDirective({
|
||||
selector: 'ion-card',
|
||||
host: {
|
||||
'class': 'list'
|
||||
}
|
||||
selector: 'ion-card'
|
||||
})
|
||||
export class Card extends Ion {
|
||||
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
|
||||
|
||||
@ -12,6 +12,9 @@ $card-ios-padding-right: 16px !default;
|
||||
$card-ios-padding-bottom: 14px !default;
|
||||
$card-ios-padding-left: 16px !default;
|
||||
|
||||
$card-ios-padding-media-top: 10px !default;
|
||||
$card-ios-padding-media-bottom: 10px !default;
|
||||
|
||||
$card-ios-background-color: $list-background-color !default;
|
||||
$card-ios-box-shadow: 0 1px 2px rgba(0,0,0,.3) !default;
|
||||
$card-ios-border-radius: 2px !default;
|
||||
@ -28,31 +31,27 @@ $card-ios-header-padding: 16px !default;
|
||||
$card-ios-header-color: #333 !default;
|
||||
|
||||
|
||||
.card.list[mode=ios] {
|
||||
ion-card[mode=ios] {
|
||||
margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
|
||||
font-size: $card-ios-font-size;
|
||||
|
||||
background: $card-ios-background-color;
|
||||
box-shadow: $card-ios-box-shadow;
|
||||
border-radius: $card-ios-border-radius;
|
||||
font-size: $card-ios-font-size;
|
||||
overflow: hidden;
|
||||
|
||||
.item:first-child {
|
||||
margin-top: 0;
|
||||
.item {
|
||||
padding-right: ($card-ios-padding-right / 2);
|
||||
padding-left: ($card-ios-padding-left / 2);
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
margin-bottom: 0;
|
||||
ion-item-content {
|
||||
padding: $card-ios-padding-top ($card-ios-padding-right / 2) $card-ios-padding-bottom ($card-ios-padding-left / 2);
|
||||
}
|
||||
|
||||
.item:first-child:before,
|
||||
.item:last-child:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.item:before,
|
||||
.item:after {
|
||||
left: 0;
|
||||
ion-card-content {
|
||||
padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
|
||||
font-size: $card-ios-font-size;
|
||||
}
|
||||
|
||||
ion-card-header {
|
||||
@ -62,9 +61,19 @@ $card-ios-header-color: #333 !default;
|
||||
color: $card-ios-header-color;
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
|
||||
font-size: $card-ios-font-size;
|
||||
[item-left],
|
||||
[item-right] {
|
||||
margin: $card-ios-padding-media-top ($card-ios-padding-right / 2) $card-ios-padding-media-bottom ($card-ios-padding-left / 2);
|
||||
}
|
||||
|
||||
button[item-left],
|
||||
button[item-right],
|
||||
[button][item-left],
|
||||
[button][item-right], {
|
||||
margin: $item-ios-padding-icon-top ($item-ios-padding-right / 2) $item-ios-padding-icon-bottom ($item-ios-padding-left / 2);
|
||||
padding: 2px 6px;
|
||||
min-height: 26px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@ -73,6 +82,17 @@ $card-ios-header-color: #333 !default;
|
||||
color: $card-ios-title-text-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
max-width: $item-ios-avatar-size;
|
||||
max-height: $item-ios-avatar-size;
|
||||
border-radius: $item-ios-avatar-size / 2;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
max-width: $item-ios-thumbnail-size;
|
||||
max-height: $item-ios-thumbnail-size;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 2.4rem;
|
||||
@ -103,6 +123,6 @@ $card-ios-header-color: #333 !default;
|
||||
|
||||
}
|
||||
|
||||
.card.list[mode=ios] + .card {
|
||||
ion-card[mode=ios] + ion-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -12,6 +12,12 @@ $card-md-padding-right: 16px !default;
|
||||
$card-md-padding-bottom: 13px !default;
|
||||
$card-md-padding-left: 16px !default;
|
||||
|
||||
$card-md-padding-media-top: 10px !default;
|
||||
$card-md-padding-media-bottom: 10px !default;
|
||||
|
||||
$card-md-avatar-size: 4rem !default;
|
||||
$card-md-thumbnail-size: 8rem !default;
|
||||
|
||||
$card-md-background-color: $list-background-color !default;
|
||||
$card-md-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
|
||||
$card-md-border-radius: 2px !default;
|
||||
@ -28,45 +34,22 @@ $card-md-header-padding: 16px !default;
|
||||
$card-md-header-color: #222 !default;
|
||||
|
||||
|
||||
.card.list[mode=md] {
|
||||
ion-card[mode=md] {
|
||||
margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
|
||||
font-size: $card-md-font-size;
|
||||
|
||||
background: $card-md-background-color;
|
||||
box-shadow: $card-md-box-shadow;
|
||||
border-radius: $card-md-border-radius;
|
||||
font-size: $card-md-font-size;
|
||||
overflow: hidden;
|
||||
|
||||
.item:before,
|
||||
.item:after {
|
||||
left: 0;
|
||||
.item {
|
||||
padding-right: ($card-md-padding-right / 2);
|
||||
padding-left: ($card-md-padding-left / 2);
|
||||
}
|
||||
|
||||
.item:first-child {
|
||||
margin-top: 0;
|
||||
|
||||
&:before {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
margin-bottom: 0;
|
||||
|
||||
&:after {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
ion-item-content button:first-child,
|
||||
ion-item-content [button]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ion-card-header {
|
||||
padding: $card-md-header-padding;
|
||||
font-size: $card-md-header-font-size;
|
||||
color: $card-md-header-color;
|
||||
ion-item-content {
|
||||
padding: $card-md-padding-top ($card-md-padding-right / 2) $card-md-padding-bottom ($card-md-padding-left / 2);
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
@ -75,21 +58,55 @@ $card-md-header-color: #222 !default;
|
||||
line-height: $card-md-line-height;
|
||||
}
|
||||
|
||||
ion-card-header {
|
||||
padding: $card-md-header-padding;
|
||||
font-size: $card-md-header-font-size;
|
||||
color: $card-md-header-color;
|
||||
}
|
||||
|
||||
[item-left],
|
||||
[item-right] {
|
||||
margin: $card-md-padding-media-top ($card-md-padding-right / 2) $card-md-padding-media-bottom ($card-md-padding-left / 2);
|
||||
}
|
||||
|
||||
button[item-left],
|
||||
button[item-right],
|
||||
[button][item-left],
|
||||
[button][item-right], {
|
||||
margin: 0 ($card-md-padding-right / 2) 0 ($card-md-padding-left / 2);
|
||||
padding: 2px 6px;
|
||||
min-height: 26px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: $card-md-title-padding;
|
||||
font-size: $card-md-title-font-size;
|
||||
color: $card-md-title-text-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
max-width: $card-md-avatar-size;
|
||||
max-height: $card-md-avatar-size;
|
||||
border-radius: $card-md-avatar-size / 2;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
max-width: $card-md-thumbnail-size;
|
||||
max-height: $card-md-thumbnail-size;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 2.4rem;
|
||||
font-weight: normal;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 2px 0 2px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
@ -99,6 +116,7 @@ $card-md-header-color: #222 !default;
|
||||
h6 {
|
||||
margin: 2px 0 2px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
@ -106,11 +124,12 @@ $card-md-header-color: #222 !default;
|
||||
font-size: 1.4rem;
|
||||
margin: 0 0 2px;
|
||||
line-height: 1.5;
|
||||
font-weight: normal;
|
||||
color: $card-md-text-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card.list[mode=md] + .card {
|
||||
ion-card[mode=md] + ion-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -4,11 +4,10 @@
|
||||
|
||||
<ion-card>
|
||||
|
||||
<div class="item">
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
|
||||
|
||||
<ion-card-content>
|
||||
<h2 class="card-title">
|
||||
Card Title Goes Here
|
||||
@ -35,17 +34,15 @@
|
||||
|
||||
<ion-card>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-media">
|
||||
<ion-item>
|
||||
<div item-left class="item-media">
|
||||
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
<ion-item-content>
|
||||
<h2>Card With An Inset Picture</h2>
|
||||
<p>Isn't it beautiful</p>
|
||||
</ion-item-content>
|
||||
</div>
|
||||
<h2>Card With An Inset Picture</h2>
|
||||
<p>Isn't it beautiful</p>
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
|
||||
|
||||
@ -18,17 +18,15 @@
|
||||
|
||||
<ion-card>
|
||||
|
||||
<div class="item">
|
||||
<icon name="ion-location"></icon>
|
||||
<ion-item-content>
|
||||
All Out Card
|
||||
</ion-item-content>
|
||||
<button outline>View</button>
|
||||
</div>
|
||||
<ion-item>
|
||||
<icon name="ion-location" item-left></icon>
|
||||
ion-iteam in a card, icon left, button right
|
||||
<button outline item-right>View</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-card-content>
|
||||
This is a multiline content within a card that should
|
||||
take up multiple lines and stuff.
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-card-content element.
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
@ -36,8 +34,28 @@
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-card-content>
|
||||
Card, no header
|
||||
</ion-card-content>
|
||||
<a ion-item href="#">
|
||||
<icon name="ion-ionic" item-left></icon>
|
||||
Card Link Item 1
|
||||
<icon forward item-right></icon>
|
||||
</a>
|
||||
|
||||
<a ion-item href="#">
|
||||
<icon name="ion-ionic" item-left></icon>
|
||||
Card Link Item 2
|
||||
<icon forward item-right></icon>
|
||||
</a>
|
||||
|
||||
<button ion-item>
|
||||
<icon name="ion-ionic" item-left></icon>
|
||||
Card Button Item 1
|
||||
<icon forward item-right></icon>
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<icon name="ion-ionic" item-left></icon>
|
||||
Card Button Item 2
|
||||
<icon forward item-right></icon>
|
||||
</button>
|
||||
|
||||
</ion-card>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
|
||||
<ion-card>
|
||||
<div class="item">
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
<ion-card-content>
|
||||
@ -15,24 +15,19 @@
|
||||
|
||||
<ion-card>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-media">
|
||||
<ion-item>
|
||||
<div item-left class="item-media">
|
||||
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
<ion-item-content>
|
||||
<h2>Card With An Inset Picture, H2 text</h2>
|
||||
<p>Isn't it beautiful.</p>
|
||||
</ion-item-content>
|
||||
</div>
|
||||
<h2>Card With An Inset Picture, H2 text</h2>
|
||||
<p>Isn't it beautiful.</p>
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<ion-item-content>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-item-content>
|
||||
</div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
<style>
|
||||
.avatar {
|
||||
width: 80px !important;
|
||||
|
||||
@ -1 +0,0 @@
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
|
||||
|
||||
document.body.style.background='#eee';
|
||||
@ -1,81 +0,0 @@
|
||||
|
||||
<ion-toolbar><ion-title>Card with Links</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-card>
|
||||
|
||||
<a class="item" href="#">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Link 1
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<a class="item" href="#">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Link 2
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<button class="item">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Button 1
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</button>
|
||||
|
||||
<button class="item">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Button 2
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</button>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-card-header>
|
||||
Card Header
|
||||
</ion-card-header>
|
||||
|
||||
<a class="item" href="#">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Link 1
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<a class="item" href="#">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Link 2
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<a class="item" href="#">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Link 3
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<a class="item" href="#">
|
||||
<icon name="ion-ionic"></icon>
|
||||
<ion-item-content>
|
||||
Link 4
|
||||
</ion-item-content>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
</ion-card>
|
||||
|
||||
@ -33,7 +33,7 @@ import {TapClick} from '../button/button';
|
||||
})
|
||||
@IonicView({
|
||||
template:
|
||||
'<div class="item-media media-checkbox">' +
|
||||
'<div item-left class="item-media media-checkbox">' +
|
||||
'<div class="checkbox-icon"></div>' +
|
||||
'</div>' +
|
||||
'<ion-item-content id="{{labelId}}">' +
|
||||
|
||||
@ -33,8 +33,8 @@ $input-label-color: #888 !default;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.input-label + .input {
|
||||
margin-top: 0;
|
||||
padding-left: 16px;
|
||||
.text-input {
|
||||
align-self: stretch;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,16 +22,18 @@
|
||||
|
||||
a.item,
|
||||
button.item.item {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
min-height: 4.4rem;
|
||||
line-height: normal;
|
||||
justify-content: inherit;
|
||||
box-shadow: none;
|
||||
min-height: 4.4rem;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
ion-item-content {
|
||||
@ -46,18 +48,18 @@ ion-item-content {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.list .item > icon:first-child {
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list .item > icon[small]:first-child {
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
.list .item {
|
||||
border-radius: 0;
|
||||
|
||||
icon:first-child {
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
icon[small]:first-child {
|
||||
min-width: 18px;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
@ -69,34 +71,7 @@ ion-item-content {
|
||||
|
||||
}
|
||||
|
||||
.list .item.item {
|
||||
|
||||
ion-item-content + button,
|
||||
ion-item-content + [button],
|
||||
button + ion-item-content,
|
||||
[button] + ion-item-content,
|
||||
icon + icon,
|
||||
ion-item-content + icon,
|
||||
.item-media + ion-item-content,
|
||||
ion-item-content + .item-media,
|
||||
ion-item-content + ion-item-content,
|
||||
icon + .input,
|
||||
.input + icon,
|
||||
icon + .input-label,
|
||||
.input-label + .input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list a.item.item,
|
||||
.list button.item.item {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item icon {
|
||||
.item > icon {
|
||||
font-size: 2.4rem;
|
||||
|
||||
&[large] {
|
||||
@ -108,18 +83,6 @@ ion-item-content {
|
||||
}
|
||||
}
|
||||
|
||||
.list .item button.icon-only,
|
||||
.item button.icon-only icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item > button.icon-left icon,
|
||||
.item > button.icon-right icon {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
h1 {
|
||||
@ -171,10 +134,7 @@ ion-item-content {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.item.item.item.no-border-bottom:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.item.item.item.no-border-bottom:after,
|
||||
.item.item.item.no-border-bottom + .item:before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -11,51 +11,51 @@ $item-ios-padding-bottom: 14px !default;
|
||||
$item-ios-padding-left: 16px !default;
|
||||
|
||||
$item-ios-padding-media-top: 10px !default;
|
||||
$item-ios-padding-media-bottom: 11px !default;
|
||||
$item-ios-padding-media-bottom: 10px !default;
|
||||
|
||||
$item-ios-padding-icon-top: 8px !default;
|
||||
$item-ios-padding-icon-bottom: 8px !default;
|
||||
|
||||
$item-ios-avatar-size: 3.6rem !default;
|
||||
$item-ios-thumbnail-size: 5.6rem !default;
|
||||
$item-ios-note-color: $item-ios-border-color !default;
|
||||
$item-ios-note-color: darken($item-ios-border-color, 10%) !default;
|
||||
$item-ios-forward-icon-color: $item-ios-border-color !default;
|
||||
|
||||
|
||||
.list[mode=ios] {
|
||||
|
||||
.item {
|
||||
font-size: $item-ios-font-size;
|
||||
margin-top: -1px;
|
||||
padding-right: ($item-ios-padding-right / 2);
|
||||
padding-left: ($item-ios-padding-left / 2);
|
||||
font-size: $item-ios-font-size;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: $item-ios-padding-left;
|
||||
border-top: 1px solid $item-ios-border-color;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: $item-ios-padding-left;
|
||||
border-top: 1px solid $item-ios-border-color;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
&:first-child:before,
|
||||
&:last-child:after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -1px;
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
ion-header + .item:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&[inset] .item {
|
||||
@ -65,53 +65,54 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label,
|
||||
ion-item-content,
|
||||
.item-note {
|
||||
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
|
||||
ion-item-content {
|
||||
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
|
||||
}
|
||||
|
||||
.item-media {
|
||||
margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom $item-ios-padding-left;
|
||||
[item-left],
|
||||
[item-right] {
|
||||
margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($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;
|
||||
}
|
||||
|
||||
button[item-left],
|
||||
button[item-right],
|
||||
[button][item-left],
|
||||
[button][item-right] {
|
||||
padding: 0 0.6em;
|
||||
font-size: 1.5rem;
|
||||
min-height: 25px;
|
||||
}
|
||||
|
||||
[item-left].icon-only icon,
|
||||
[item-right].icon-only icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[item-left].icon-left icon,
|
||||
[item-right].icon-left icon {
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
|
||||
[item-left].icon-right icon,
|
||||
[item-right].icon-right icon {
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
|
||||
.item-note {
|
||||
color: $item-ios-note-color;
|
||||
}
|
||||
|
||||
.item icon + ion-item-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.item > icon {
|
||||
margin-left: $item-ios-padding-left;
|
||||
margin-right: $item-ios-padding-right;
|
||||
}
|
||||
|
||||
.item-input > icon {
|
||||
margin-top: $item-ios-padding-media-top - 1;
|
||||
}
|
||||
|
||||
icon[forward] {
|
||||
font-size: 2rem;
|
||||
color: $item-ios-forward-icon-color;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 $item-ios-padding-right 0 $item-ios-padding-left;
|
||||
padding: 2px 6px;
|
||||
min-height: 26px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.item-input .input + button {
|
||||
margin-top: $item-ios-padding-media-top;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-right: $item-ios-padding-right;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
max-width: $item-ios-avatar-size;
|
||||
max-height: $item-ios-avatar-size;
|
||||
|
||||
@ -18,40 +18,73 @@ $item-md-body-text-line-height: 1.5 !default;
|
||||
|
||||
$item-md-avatar-size: 4rem !default;
|
||||
$item-md-thumbnail-size: 8rem !default;
|
||||
$item-md-note-color: $item-md-border-color !default;
|
||||
$item-md-note-color: darken($item-md-border-color, 10%) !default;
|
||||
$item-md-forward-icon-color: $item-md-border-color !default;
|
||||
|
||||
|
||||
.list[mode=md] {
|
||||
|
||||
.item {
|
||||
font-size: $item-md-font-size;
|
||||
margin-top: -1px;
|
||||
padding-right: ($item-md-padding-right / 2);
|
||||
padding-left: ($item-md-padding-left / 2);
|
||||
font-size: $item-md-font-size;
|
||||
text-transform: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: $item-md-padding-left;
|
||||
border-top: 1px solid $item-md-border-color;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-top: 1px solid $item-md-border-color;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.input-label,
|
||||
ion-item-content,
|
||||
.item-note {
|
||||
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
|
||||
ion-header + .item:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
ion-item-content {
|
||||
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
|
||||
}
|
||||
|
||||
[item-left],
|
||||
[item-right] {
|
||||
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
|
||||
}
|
||||
|
||||
button[item-left],
|
||||
button[item-right],
|
||||
[button][item-left],
|
||||
[button][item-right] {
|
||||
padding: 0 0.6em;
|
||||
min-height: 26px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
[item-left].icon-only icon,
|
||||
[item-right].icon-only icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[item-left].icon-left icon,
|
||||
[item-right].icon-left icon {
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
|
||||
[item-left].icon-right icon,
|
||||
[item-right].icon-right icon {
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
|
||||
.item-text-wrap ion-item-content {
|
||||
@ -59,21 +92,16 @@ $item-md-forward-icon-color: $item-md-border-color !default;
|
||||
line-height: $item-md-body-text-line-height;
|
||||
}
|
||||
|
||||
.item-media {
|
||||
margin: $item-md-padding-media-top $item-md-padding-right $item-md-padding-media-bottom $item-md-padding-left;
|
||||
}
|
||||
|
||||
.item-note {
|
||||
color: $item-md-note-color;
|
||||
}
|
||||
|
||||
.item > icon {
|
||||
margin-left: $item-md-padding-left;
|
||||
margin-right: $item-md-padding-right;
|
||||
.item[actions] ion-item-content {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.item-input > icon {
|
||||
margin-top: $item-md-padding-media-top;
|
||||
icon + ion-item-content {
|
||||
margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
|
||||
}
|
||||
|
||||
icon[forward] {
|
||||
@ -81,24 +109,6 @@ $item-md-forward-icon-color: $item-md-border-color !default;
|
||||
color: $item-md-forward-icon-color;
|
||||
}
|
||||
|
||||
.item > button {
|
||||
margin: 0 $item-md-padding-right 0 $item-md-padding-left;
|
||||
padding: 2px 6px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.item-input .input + button {
|
||||
margin-top: $item-md-padding-media-top;
|
||||
}
|
||||
|
||||
.item[actions] ion-item-content {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-right: $item-md-padding-right;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
max-width: $item-md-avatar-size;
|
||||
max-height: $item-md-avatar-size;
|
||||
|
||||
@ -23,17 +23,40 @@
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
<button item-left>Edit</button>
|
||||
ion-item left button
|
||||
<button item-left>Default</button>
|
||||
Inner Buttons
|
||||
<button outline item-right>Outline</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
ion-item right button[outline][secondary]
|
||||
<button secondary outline item-right>Open</button>
|
||||
<button item-left>
|
||||
<icon name="ion-home"></icon>
|
||||
Left Icon
|
||||
</button>
|
||||
left icon buttons
|
||||
<button outline item-right>
|
||||
<icon name="ion-star"></icon>
|
||||
Left Icon
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
ion-item icon only button
|
||||
<button item-left>
|
||||
Right Icon
|
||||
<icon name="ion-home"></icon>
|
||||
</button>
|
||||
right icon buttons
|
||||
<button outline item-right>
|
||||
Right Icon
|
||||
<icon name="ion-star"></icon>
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<button item-left>
|
||||
<icon name="ion-help-circled"></icon>
|
||||
</button>
|
||||
icon only buttons
|
||||
<button item-right>
|
||||
<icon name="ion-help-circled"></icon>
|
||||
</button>
|
||||
|
||||
@ -8,43 +8,49 @@
|
||||
</ion-item>
|
||||
|
||||
<a ion-item href="#">
|
||||
a[ion-item] with forward icon
|
||||
a[ion-item] w/ forward icon
|
||||
<icon forward item-right></icon>
|
||||
</a>
|
||||
|
||||
<button ion-item>
|
||||
button[ion-item] with forward icon
|
||||
button[ion-item] w/ forward icon
|
||||
<icon forward item-right></icon>
|
||||
</button>
|
||||
|
||||
<a ion-item href="#">
|
||||
a[ion-item] with right side default icon
|
||||
a[ion-item] w/ right side default icon
|
||||
<icon name="ion-ios-information-outline" item-right></icon>
|
||||
</a>
|
||||
|
||||
<a ion-item href="#">
|
||||
a[ion-item] with right side large icon
|
||||
a[ion-item] w/ right side large icon
|
||||
<icon large name="ion-ios-information-outline" item-right></icon>
|
||||
</a>
|
||||
|
||||
<a ion-item href="#">
|
||||
a[ion-item] with right side small icon
|
||||
a[ion-item] w/ right side small icon
|
||||
<icon small name="ion-ios-information-outline" item-right></icon>
|
||||
</a>
|
||||
|
||||
<button ion-item>
|
||||
<icon name="ion-star" item-left></icon>
|
||||
button[ion-item] with left side icon
|
||||
button[ion-item] w/ left side icon
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<icon name="ion-flag" item-left></icon>
|
||||
button[ion-item] with both side icons
|
||||
button[ion-item] w/ both side icons
|
||||
<icon name="ion-ios-checkmark" item-right></icon>
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
<icon name="ion-flag" item-left></icon>
|
||||
ion-item w/ both side icons
|
||||
<icon name="ion-ios-checkmark" item-right></icon>
|
||||
</ion-item>
|
||||
|
||||
<a ion-item href="#">
|
||||
a[ion-item] with two right side icons
|
||||
a[ion-item] w/ two right side icons
|
||||
<icon name="ion-checkmark-circled" item-right></icon>
|
||||
<icon name="ion-shuffle" item-right></icon>
|
||||
</a>
|
||||
@ -52,12 +58,17 @@
|
||||
<button ion-item>
|
||||
<icon name="ion-clipboard" item-left></icon>
|
||||
<icon name="ion-minus-circled" item-left></icon>
|
||||
button[ion-item] with two left side icons
|
||||
button[ion-item] w/ two left side icons
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
Red Balloons
|
||||
<div class="badge" item-right>99</div>
|
||||
<item-badge item-right>99</item-badge>
|
||||
</button>
|
||||
|
||||
<ion-item>
|
||||
Problems
|
||||
<item-badge item-right>99</item-badge>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
@ -104,7 +104,7 @@ export class RadioGroup extends Ion {
|
||||
'<ion-item-content id="{{labelId}}">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</ion-item-content>' +
|
||||
'<div class="item-media media-radio">' +
|
||||
'<div item-right class="item-media media-radio">' +
|
||||
'<div class="radio-icon"></div>' +
|
||||
'</div>'
|
||||
})
|
||||
|
||||
@ -26,7 +26,7 @@ $switch-ios-transition-duration: 300ms !default;
|
||||
|
||||
.item-media {
|
||||
margin: 0;
|
||||
padding: 6px $item-ios-padding-right 6px ($item-ios-padding-left + 20);
|
||||
padding: 6px ($item-ios-padding-right / 2) 6px ($item-ios-padding-left);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ $switch-md-transition-duration: 300ms !default;
|
||||
|
||||
.item-media {
|
||||
margin: 0;
|
||||
padding: 6px $item-md-padding-right 6px ($item-md-padding-left + 20);
|
||||
padding: 6px ($item-md-padding-right / 2) 6px $item-md-padding-left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -127,7 +127,7 @@ class MediaSwitch {
|
||||
'<ion-item-content id="{{labelId}}">' +
|
||||
'<ng-content></ng-content>' +
|
||||
'</ion-item-content>' +
|
||||
'<div class="item-media media-switch">' +
|
||||
'<div item-right class="item-media media-switch">' +
|
||||
'<div class="switch-icon"></div>' +
|
||||
'</div>',
|
||||
directives: [MediaSwitch]
|
||||
|
||||
@ -3,10 +3,11 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.list[mode=ios] {
|
||||
ion-list[mode=ios],
|
||||
ion-card[mode=ios] {
|
||||
|
||||
.text-input {
|
||||
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
|
||||
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -15,4 +16,8 @@
|
||||
padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
|
||||
}
|
||||
|
||||
ion-label {
|
||||
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -3,10 +3,11 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.list[mode=md] {
|
||||
ion-list[mode=md],
|
||||
ion-card[mode=md] {
|
||||
|
||||
.text-input {
|
||||
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
|
||||
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -15,4 +16,8 @@
|
||||
padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
|
||||
}
|
||||
|
||||
ion-label {
|
||||
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<ion-input fixed-label>
|
||||
<ion-label>From</ion-label>
|
||||
<input value="Text 3" type="text">
|
||||
<button clear>
|
||||
<button clear item-right>
|
||||
<icon name="ion-power"></icon>
|
||||
</button>
|
||||
</ion-input>
|
||||
@ -30,19 +30,19 @@
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<icon name="ion-earth"></icon>
|
||||
<icon name="ion-earth" item-left></icon>
|
||||
<ion-label>Website</ion-label>
|
||||
<input value="http://ionic.io/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<icon name="ion-email"></icon>
|
||||
<icon name="ion-email" item-left></icon>
|
||||
<ion-label>Email</ion-label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
<icon name="ion-earth"></icon>
|
||||
<icon name="ion-earth" item-left></icon>
|
||||
<ion-label>Phone</ion-label>
|
||||
<input value="867-5309" type="tel">
|
||||
</ion-input>
|
||||
@ -55,7 +55,7 @@
|
||||
<ion-input fixed-label>
|
||||
<ion-label>Score</ion-label>
|
||||
<input value="10" type="number">
|
||||
<button outline>Update</button>
|
||||
<button outline item-right>Update</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input fixed-label>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<ion-input>
|
||||
<ion-label>From:</ion-label>
|
||||
<input value="Text 3" type="text">
|
||||
<button clear>
|
||||
<button clear item-right>
|
||||
<icon name="ion-power"></icon>
|
||||
</button>
|
||||
</ion-input>
|
||||
@ -30,19 +30,19 @@
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<icon name="ion-earth"></icon>
|
||||
<icon name="ion-earth" item-left></icon>
|
||||
<ion-label>Website:</ion-label>
|
||||
<input value="http://ionic.io/" type="url">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<icon name="ion-email"></icon>
|
||||
<icon name="ion-email" item-left></icon>
|
||||
<ion-label>Email:</ion-label>
|
||||
<input value="email6@email.com" type="email">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<icon name="ion-edit"></icon>
|
||||
<icon name="ion-edit" item-left></icon>
|
||||
<ion-label>Feedback:</ion-label>
|
||||
<textarea placeholder="Placeholder Text"></textarea>
|
||||
</ion-input>
|
||||
@ -50,13 +50,13 @@
|
||||
<ion-input>
|
||||
<ion-label>More Info:</ion-label>
|
||||
<input placeholder="Placeholder Text" type="text">
|
||||
<icon name="ion-flag"></icon>
|
||||
<icon name="ion-flag" item-right></icon>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Score:</ion-label>
|
||||
<input value="10" type="number">
|
||||
<button outline>Update</button>
|
||||
<button outline item-right>Update</button>
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
<ion-list inset>
|
||||
|
||||
<ion-input>
|
||||
<icon name="ion-search"></icon>
|
||||
<icon name="ion-search" item-left></icon>
|
||||
<input value="Input inside an inset list" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<input value="Input inside an inset list" type="text">
|
||||
<icon name="ion-ios-mic"></icon>
|
||||
<icon name="ion-ios-mic" item-right></icon>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
@ -23,13 +23,13 @@
|
||||
<ion-list inset>
|
||||
|
||||
<ion-input inset>
|
||||
<icon name="ion-search"></icon>
|
||||
<icon name="ion-search" item-left></icon>
|
||||
<input value="Inset input inside an inset list" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input inset>
|
||||
<input value="Inset input inside an inset list" type="text">
|
||||
<icon name="ion-ios-mic"></icon>
|
||||
<icon name="ion-ios-mic" item-right></icon>
|
||||
</ion-input>
|
||||
|
||||
</ion-list>
|
||||
@ -38,9 +38,9 @@
|
||||
<ion-list>
|
||||
|
||||
<ion-input inset>
|
||||
<icon name="ion-search"></icon>
|
||||
<icon name="ion-search" item-left></icon>
|
||||
<input value="Inset input inside a list" type="text">
|
||||
<button outline>Search</button>
|
||||
<button outline item-right>Search</button>
|
||||
</ion-input inset>
|
||||
|
||||
</ion-list>
|
||||
@ -49,13 +49,13 @@
|
||||
<ion-card>
|
||||
|
||||
<ion-input>
|
||||
<icon name="ion-search"></icon>
|
||||
<icon name="ion-search" item-left></icon>
|
||||
<input value="Input inside a card" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<input value="Input inside a card" type="text">
|
||||
<icon name="ion-ios-mic"></icon>
|
||||
<icon name="ion-ios-mic" item-right></icon>
|
||||
</ion-input>
|
||||
|
||||
</ion-card>
|
||||
|
||||
@ -15,12 +15,12 @@
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<icon name="ion-ios-telephone"></icon>
|
||||
<icon name="ion-ios-telephone" item-left></icon>
|
||||
<input placeholder="Text Input Placeholder" type="text">
|
||||
</ion-input>
|
||||
|
||||
<ion-input>
|
||||
<icon name="ion-android-call"></icon>
|
||||
<icon name="ion-android-call" item-left></icon>
|
||||
<input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
|
||||
</ion-input>
|
||||
|
||||
|
||||
@ -59,6 +59,3 @@
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>
|
||||
|
||||
@ -51,18 +51,6 @@
|
||||
<ion-loading-icon></ion-loading-icon>
|
||||
</ion-app>
|
||||
|
||||
<!-- <script src="../../../lib/traceur-runtime.js"></script>
|
||||
<script src="../../../lib/system.js"></script>
|
||||
<script src="../../../lib/e2e.config.js"></script>
|
||||
|
||||
<script src="../../../lib/angular2.dev.js"></script>
|
||||
|
||||
<script src="index.js"></script>
|
||||
|
||||
<script src="../../../lib/ionic.bundle.js"></script>
|
||||
|
||||
<script src="../../../lib/web-animations.min.js"></script> -->
|
||||
|
||||
<script src="../../../js/ionic.bundle.js"></script>
|
||||
|
||||
<script>System.config({"baseURL": "../../../"})</script>
|
||||
|
||||
Reference in New Issue
Block a user