mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
128 lines
2.5 KiB
HTML
128 lines
2.5 KiB
HTML
<ion-slides bounce="false">
|
|
|
|
<ion-slide>
|
|
|
|
<ion-view>
|
|
|
|
<ion-toolbar id="p1toolbar"><button (click)="openHeart()" class="toolbar-primary-item"><i class="icon ion-ios-heart"></i></button><ion-title>secret</ion-title><button (click)="openGear()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar>
|
|
|
|
<ion-content>
|
|
<ion-list>
|
|
<ion-item>
|
|
Activity
|
|
</ion-item>
|
|
<ion-item>
|
|
Chat
|
|
</ion-item>
|
|
</ion-list>
|
|
|
|
<h2 style="text-align: center; color: #555; font-size: 16px;">Swipe Right <i class="icon ion-ios-arrow-right"></i></h2>
|
|
</ion-content>
|
|
|
|
</ion-view>
|
|
|
|
</ion-slide>
|
|
|
|
<ion-slide>
|
|
|
|
<ion-nav [root]="rootView"></ion-nav>
|
|
|
|
</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-app {
|
|
font-family: 'lato' !important;
|
|
}
|
|
ion-view {
|
|
background-color: #F5F5F5;
|
|
}
|
|
.mode-ios ion-toolbar {
|
|
padding-top: 20px;
|
|
}
|
|
ion-content {
|
|
background-color: #F5F5F5 !important;
|
|
}
|
|
.card {
|
|
box-shadow: none !important;
|
|
}
|
|
.card .card-content {
|
|
font-family: 'lato';
|
|
font-size: 16px;
|
|
line-height: 25px;
|
|
}
|
|
.card .item {
|
|
border: none !important;
|
|
}
|
|
.card .card-content {
|
|
padding: 25px !important;
|
|
}
|
|
.item {
|
|
font-family: 'lato';
|
|
font-size: 16px;
|
|
}
|
|
ion-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;
|
|
}
|
|
.mode-ios ion-toolbar button i {
|
|
color: #fff !important;
|
|
font-size: 24px !important;
|
|
}
|
|
.mode-ios .item:first-of-type:before,
|
|
.mode-ios .item:last-of-type:after,
|
|
.mode-ios ion-item-content:after {
|
|
background-color: #F5F5F5 !important;
|
|
}
|
|
#p1toolbar {
|
|
background-color: #FFB400;
|
|
}
|
|
#p1toolbar ion-title {
|
|
color: white;
|
|
font-family: 'lato';
|
|
}
|
|
#p2toolbar {
|
|
background-color: #F93822;
|
|
}
|
|
#p2toolbar ion-title {
|
|
color: white;
|
|
font-family: 'lato';
|
|
}
|
|
|
|
#heart-modal {
|
|
background-color: #FFB400 !important;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
}
|
|
#heart-modal h2 {
|
|
font-size: 36px !important;
|
|
}
|
|
#heart-modal p {
|
|
font-size: 18px;
|
|
}
|
|
|
|
#heart-modal icon {
|
|
position: absolute;
|
|
top: 13px;
|
|
left: 0px;
|
|
}
|
|
|
|
#heart-modal icon i {
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
</style>
|