mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
Merge branch 'master' into list-border-refactor
This commit is contained in:
Brandy Carney
@ -7,9 +7,14 @@ $colors: (
|
||||
energized: #ffc527,
|
||||
royal: #7e60ff,
|
||||
);
|
||||
|
||||
$font-path: '../../dist/fonts';
|
||||
|
||||
@import "../../ionic/ionic";
|
||||
@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 {
|
||||
@ -20,6 +25,15 @@ body ion-app {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
ion-page {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ion-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.has-scrollbar scroll-content {
|
||||
margin-right: -15px;
|
||||
}
|
||||
@ -27,30 +41,14 @@ body.has-scrollbar ion-menu scroll-content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
ion-page {
|
||||
display: flex;
|
||||
scroll-content {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
section.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#ionitron {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
margin-top: -50px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
.animation-buttons {
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
left: 60px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.components-demo h4 {
|
||||
text-align: center;
|
||||
@ -65,42 +63,6 @@ section.hidden {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.components-icons {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ion-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.demo-slide {
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 500px 0;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 2.5em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.demo-slide-1 {
|
||||
background-color: #32db64;
|
||||
}
|
||||
|
||||
.demo-slide-2 {
|
||||
background-color: #387ef5;
|
||||
}
|
||||
|
||||
.demo-slide-3 {
|
||||
background-color: #f53d3d;
|
||||
}
|
||||
|
||||
scroll-content {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.md .ion-md-share {
|
||||
color: #ED4248;
|
||||
}
|
||||
@ -171,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;
|
||||
@ -224,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;
|
||||
}
|
||||
@ -334,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
25
demos/component-docs/cards/advanced-map/styles.scss
Normal 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
127
demos/component-docs/cards/advanced-weather/styles.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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
54
demos/component-docs/cards/background/styles.scss
Normal 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
4
demos/component-docs/icons/basic/styles.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.preview-icons {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -3,7 +3,7 @@ import {forwardRef} from 'angular2/angular2';
|
||||
import {AndroidAttribute} from '../../helpers';
|
||||
|
||||
@Page({
|
||||
templateUrl: 'slides/basic/slides.html',
|
||||
templateUrl: 'slides/basic/template.html',
|
||||
directives: [forwardRef(() => AndroidAttribute)]
|
||||
})
|
||||
export class BasicPage {
|
||||
|
||||
26
demos/component-docs/slides/basic/styles.scss
Normal file
26
demos/component-docs/slides/basic/styles.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.preview-slides {
|
||||
|
||||
.slide-contents {
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 500px 0;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 2.5em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#slide-1 {
|
||||
background-color: #32db64;
|
||||
}
|
||||
|
||||
#slide-2 {
|
||||
background-color: #387ef5;
|
||||
}
|
||||
|
||||
#slide-3 {
|
||||
background-color: #f53d3d;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -3,20 +3,20 @@
|
||||
<ion-title>Slides</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content class="has-header">
|
||||
<ion-content class="has-header preview-slides">
|
||||
<ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
|
||||
<ion-slide>
|
||||
<div class="demo-slide demo-slide-1">
|
||||
<div class="slide-contents" id="slide-1">
|
||||
Slide 1
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<div class="demo-slide demo-slide-2">
|
||||
<div class="slide-contents" id="slide-2">
|
||||
Slide 2
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<div class="demo-slide demo-slide-3">
|
||||
<div class="slide-contents" id="slide-3">
|
||||
Slide 3
|
||||
</div>
|
||||
</ion-slide>
|
||||
|
||||
Reference in New Issue
Block a user