javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(demos): weather card style tweaks

Browse Source
This commit is contained in:
Drew Rygh
2015-10-27 18:20:30 -05:00
parent 48d570f7c1
commit 655c6ffed7
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
demos/component-docs/app.css
View File

@ -177,6 +177,9 @@ ion-card p.advanced-background-title-large span {
line-height: 1; line-height: 1;
display: inline-block; display: inline-block;
} }
body.ios ion-card p.advanced-background-title-large span {
font-weight: 300;
}
ion-card ion-item.advanced-trans.item { ion-card ion-item.advanced-trans.item {
position: absolute; position: absolute;
@ -186,10 +189,12 @@ ion-card ion-item.advanced-trans.item {
background: transparent; background: transparent;
} }
ion-card ion-item.advanced-trans.item p { ion-card ion-item.advanced-trans.item p {
font-size: 12px; font-size: 12px;
letter-spacing: 1.7px;
font-weight: 500;
opacity: 0.7;
} }
ion-card .advanced-weather-tabs { ion-card .advanced-weather-tabs {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -213,12 +218,14 @@ ion-card .advanced-weather-tabs tab-bar a {
ion-card .advanced-weather-tabs tab-bar a icon.tab-button-icon { ion-card .advanced-weather-tabs tab-bar a icon.tab-button-icon {
color: #fff; color: #fff;
font-size: 2.8em; font-size: 2.8em;
margin-bottom: 2px;
} }
ion-card .advanced-weather-tabs tab-bar a span.tab-button-text { ion-card .advanced-weather-tabs tab-bar a span.tab-button-text {
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
} }
body.md ion-card .advanced-weather-tabs tab-bar a span.tab-button-text {
text-transform: uppercase;
}
body.md tab-highlight { body.md tab-highlight {
background-color: #fff !important; background-color: #fff !important;
} }

20
demos/component-docs/cards/cards-advanced-weather.html
View File

@ -19,9 +19,9 @@
</p> </p>
<ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom"> <ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom">
<ion-tab light tab-title="SUN" tab-icon="sunny"></ion-tab> <ion-tab light tab-title="Sun" tab-icon="sunny"></ion-tab>
<ion-tab tab-title="MON" tab-icon="snow"></ion-tab> <ion-tab tab-title="Mon" tab-icon="snow"></ion-tab>
<ion-tab tab-title="TUE" tab-icon="cloudy"></ion-tab> <ion-tab tab-title="Tue" tab-icon="cloudy"></ion-tab>
</ion-tabs> </ion-tabs>
</ion-card> </ion-card>
@ -34,14 +34,14 @@
</ion-item> </ion-item>
<p class="advanced-background-title advanced-background-title-large"> <p class="advanced-background-title advanced-background-title-large">
<icon sunny></icon> <icon Sunny></icon>
<span>78&deg;</span> <span>78&deg;</span>
</p> </p>
<ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom"> <ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom">
<ion-tab light tab-title="TUE" tab-icon="sunny"></ion-tab> <ion-tab light tab-title="Tue" tab-icon="sunny"></ion-tab>
<ion-tab tab-title="WED" tab-icon="partly-sunny"></ion-tab> <ion-tab tab-title="Wed" tab-icon="partly-sunny"></ion-tab>
<ion-tab tab-title="THR" tab-icon="cloudy"></ion-tab> <ion-tab tab-title="Thr" tab-icon="cloudy"></ion-tab>
</ion-tabs> </ion-tabs>
</ion-card> </ion-card>
@ -59,9 +59,9 @@
</p> </p>
<ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom"> <ion-tabs light class="advanced-weather-tabs" no-navbar tab-bar-placement="bottom">
<ion-tab light tab-title="SUN" tab-icon="thunderstorm"></ion-tab> <ion-tab light tab-title="Sun" tab-icon="thunderstorm"></ion-tab>
<ion-tab tab-title="MON" tab-icon="rainy"></ion-tab> <ion-tab tab-title="Mon" tab-icon="rainy"></ion-tab>
<ion-tab tab-title="TUE" tab-icon="rainy"></ion-tab> <ion-tab tab-title="Tue" tab-icon="rainy"></ion-tab>
</ion-tabs> </ion-tabs>
</ion-card> </ion-card>