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

refactor(demos): card and icon styles

Browse Source
This commit is contained in:
Drew Rygh
2015-11-05 14:10:02 -06:00
parent e7fd12d4b3
commit 10992ee53c
8 changed files with 217 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
demos/component-docs/app.scss
View File

@ -10,7 +10,11 @@ $colors: (
$font-path: '../../dist/fonts';
@import "../../ionic/ionic";
@import "slides/styles";
@import "cards/background/styles";
@import "cards/advanced-weather/styles";
@import "cards/advanced-map/styles";
@import "icons/basic/styles";
@import "slides/basic/styles";
body, body:hover, body a, body button, body media-switch {
@ -59,17 +63,6 @@ section.hidden {
height: 100%;
}
.components-icons {
font-size: 2em;
text-align: center;
}
.md .ion-md-share {
color: #ED4248;
}
@ -140,52 +133,6 @@ ion-card.cards-list-demo a > icon {
color: #444444;
}
.advanced-background {
position: relative;
text-align: center !important;
}
ion-card p.advanced-background-title {
position: absolute;
top: 25%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff !important;
}
ion-card p.advanced-background-title-large {
top: 29%;
font-weight: normal;
font-size: 4.4em;
color: #fff !important;
}
ion-card p.advanced-background-title-large span {
vertical-align: top;
padding-top: 5px;
font-size: 72px;
height: 74px;
line-height: 1;
display: inline-block;
}
body.ios ion-card p.advanced-background-title-large span {
font-weight: 300;
}
ion-card ion-item.advanced-trans.item {
position: absolute;
top: 0;
width: 100%;
padding: 12px 20px !important;
background: transparent;
}
ion-card ion-item.advanced-trans.item p {
font-size: 12px;
letter-spacing: 1.7px;
font-weight: 500;
opacity: 0.7;
}
ion-card .advanced-weather-tabs {
position: absolute;
bottom: 0;
@ -193,60 +140,6 @@ ion-card .advanced-weather-tabs {
background: transparent;
}
ion-card .advanced-weather-tabs tabbar {
background: transparent;
border-top: none;
}
body.ios ion-card .advanced-weather-tabs tabbar {
height: 88px;
}
body.md ion-card .advanced-weather-tabs tabbar {
height: 100px;
}
ion-card .advanced-weather-tabs tabbar a {
height: 100%;
border-top: 2px solid transparent !important;
border-bottom: 0px !important;
}
ion-card .advanced-weather-tabs tabbar a icon.tab-button-icon {
color: #fff;
font-size: 2.8em;
}
ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
color: #fff;
font-size: 13px;
}
body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
text-transform: uppercase;
}
body.md .cards-bg tab-highlight {
background-color: #fff !important;
top: 0;
}
.cards-weather md-ripple {
background: rgba(255,255,255, 0.15);
}
ion-content ion-card ion-item.advanced-trans p {
color: #fff;
}
ion-card p.advanced-background-subtitle {
font-size: 1.0em;
position: absolute;
top: 48%;
width: 100%;
color: #fff !important;
}
ion-card .icon-avatar {
margin: 10px 8px;
min-width: 2.4rem !important;
color: #444444;
font-size: 1.8em;
text-align: center;
}
ion-card.adv-map p {
font-size: 0.7em !important;
}
@ -303,22 +196,4 @@ body.ios img#ios-only {
.item-subtle:before {
padding-right: 5px;
}
p.time-ago {
color: #bbbbbb !important;
margin-left: 4px !important;
margin-right: 0px !important;
}
button[fab].fab-map {
top: 190px;
z-index: 50;
}
body.ios button[fab].fab-map {
width: 50px;
height: 50px;
}
body.md button[fab].fab-map {
top: 220px;
}

25
demos/component-docs/cards/advanced-map/styles.scss Normal file
View File

@ -0,0 +1,25 @@
p.time-ago {
color: #bbbbbb !important;
margin-left: 4px !important;
margin-right: 0px !important;
}
button[fab].fab-map {
top: 190px;
z-index: 50;
}
body.ios button[fab].fab-map {
width: 50px;
height: 50px;
}
body.md button[fab].fab-map {
top: 220px;
}
ion-card .icon-avatar {
margin: 10px 8px;
min-width: 2.4rem !important;
color: #444444;
font-size: 1.8em;
text-align: center;
}

127
demos/component-docs/cards/advanced-weather/styles.scss Normal file
View File

@ -0,0 +1,127 @@
body.ios ion-card .advanced-weather-tabs tabbar {
height: 88px;
}
body.md ion-card .advanced-weather-tabs tabbar {
height: 100px;
}
body.md ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
text-transform: uppercase;
}
body.md .cards-bg tab-highlight {
background-color: #fff !important;
top: 0;
}
body.ios ion-card p.advanced-background-title-large span {
font-weight: 300;
}
.preview-weather-cards {
ion-content ion-card ion-item.advanced-trans p {
color: #fff;
}
ion-card p.advanced-background-subtitle {
font-size: 1.0em;
position: absolute;
top: 48%;
width: 100%;
color: #fff !important;
}
.advanced-background {
position: relative;
text-align: center !important;
}
ion-card ion-item.advanced-trans.item {
position: absolute;
top: 0;
width: 100%;
padding: 12px 20px !important;
background: transparent;
}
ion-card ion-item.advanced-trans.item p {
font-size: 12px;
letter-spacing: 1.7px;
font-weight: 500;
opacity: 0.7;
}
ion-card p.advanced-background-title {
position: absolute;
top: 25%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff !important;
}
ion-card p.advanced-background-title-large {
top: 29%;
font-weight: normal;
font-size: 4.4em;
color: #fff !important;
}
ion-card p.advanced-background-title-large span {
vertical-align: top;
padding-top: 5px;
font-size: 72px;
height: 74px;
line-height: 1;
display: inline-block;
}
ion-card .advanced-weather-tabs tabbar {
background: transparent;
border-top: none;
}
ion-card .advanced-weather-tabs tabbar a {
height: 100%;
border-top: 2px solid transparent !important;
border-bottom: 0px !important;
}
ion-card .advanced-weather-tabs tabbar a icon.tab-button-icon {
color: #fff;
font-size: 2.8em;
}
ion-card .advanced-weather-tabs tabbar a span.tab-button-text {
color: #fff;
font-size: 13px;
}
md-ripple {
background: rgba(255,255,255, 0.15);
}
ion-card .advanced-weather-tabs {
position: absolute;
bottom: 0;
width: 100%;
background: transparent;
}
ion-card ion-item.advanced-trans.item {
position: absolute;
top: 0;
width: 100%;
padding: 12px 20px !important;
background: transparent;
}
ion-card ion-item.advanced-trans.item p {
font-size: 12px;
letter-spacing: 1.7px;
font-weight: 500;
opacity: 0.7;
}
ion-content ion-card ion-item.advanced-trans p {
color: #fff;
}
}

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

@ -3,7 +3,7 @@
<ion-title>Weather Card</ion-title>
</ion-navbar>
<ion-content class="has-header components-demo cards-bg cards-weather">
<ion-content class="has-header components-demo cards-bg preview-weather-cards">
<ion-card class="advanced-background">
<img src="img/advance-card-alaska.jpg"/>

54
demos/component-docs/cards/background/styles.scss Normal file
View File

@ -0,0 +1,54 @@
ion-content ion-card ion-item.advanced-trans p {
color: #fff;
}
ion-card p.advanced-background-subtitle {
font-size: 1.0em;
position: absolute;
top: 48%;
width: 100%;
color: #fff !important;
}
.advanced-background {
position: relative;
text-align: center !important;
}
ion-card ion-item.advanced-trans.item {
position: absolute;
top: 0;
width: 100%;
padding: 12px 20px !important;
background: transparent;
}
ion-card ion-item.advanced-trans.item p {
font-size: 12px;
letter-spacing: 1.7px;
font-weight: 500;
opacity: 0.7;
}
ion-card p.advanced-background-title {
position: absolute;
top: 25%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff !important;
}
ion-card p.advanced-background-title-large {
top: 29%;
font-weight: normal;
font-size: 4.4em;
color: #fff !important;
}
ion-card p.advanced-background-title-large span {
vertical-align: top;
padding-top: 5px;
font-size: 72px;
height: 74px;
line-height: 1;
display: inline-block;
}

4
demos/component-docs/icons/basic/styles.scss Normal file
View File

@ -0,0 +1,4 @@
.preview-icons {
font-size: 2em;
text-align: center;
}

2
demos/component-docs/icons/basic/template.html
View File

@ -3,7 +3,7 @@
<ion-title>Icons</ion-title>
</ion-navbar>
<ion-content class="has-header components-icons">
<ion-content class="has-header preview-icons">
<ion-row>
<ion-col><icon ionic></icon></ion-col>

0
demos/component-docs/slides/styles.scss → demos/component-docs/slides/basic/styles.scss
View File