Files
ionic-framework/ionic/components/app/test/snapcat/main.html
Max Lynch 87c81a7e19 Cards
2015-06-07 23:39:22 -05:00

114 lines
2.3 KiB
HTML

<ion-slides >
<ion-slide>
<ion-view>
<ion-toolbar id="p1toolbar">
<div class="toolbar-inner">
<ion-title>secret</ion-title>
</div>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-item>
Activity
</ion-item>
<ion-item>
Chat
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</ion-slide>
<ion-slide>
<ion-view>
<ion-toolbar id="p2toolbar">
<div class="toolbar-inner">
<ion-title>feed</ion-title>
</div>
</ion-toolbar>
<ion-content>
<div class="card">
<div class="card-content">
I tried to keep both arts alive, but the camera won. I found that while the camera does not express the soul, perhaps a photograph can!
</div>
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p.jpg">
<div class="card-footer">
Posted 5 days ago
</div>
</div>
</ion-content>
</ion-view>
</ion-slide>
</ion-slides>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
ion-view {
background-color: #F5F5F5;
}
ion-content {
background-color: #F5F5F5 !important;
}
.card {
box-shadow: none !important;
}
.card .card-content, .card .card-footer {
font-family: 'lato';
font-size: 16px;
line-height: 25px;
}
.card .card-footer {
color: #B8B8B8;
}
.card .item {
border: none !important;
}
.card .card-content, .card .card-footer {
padding: 25px !important;
}
.item {
font-family: 'lato';
font-size: 16px;
}
.item-content {
min-height: 70px !important;
}
ion-toolbar {
text-align: center;
align-items: center;
}
ion-toolbar:after {
background: none !important;
}
ion-toolbar {
letter-spacing: 1px;
}
.platform-ios .item:first-of-type:before,
.platform-ios .item:last-of-type:after,
.platform-ios .item-content:after {
background-color: #F5F5F5 !important;
}
#p1toolbar {
background-color: #FFB400;
}
#p1toolbar ion-title {
color: white;
font-family: 'lato';
}
#p2toolbar {
background-color: #FF0000;
}
#p2toolbar ion-title {
color: white;
font-family: 'lato';
}
</style>