javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

starting card tests

Browse Source
This commit is contained in:
Adam Bradley
2013-10-23 21:49:00 -05:00
parent 1932d9eb3c
commit ce8d34fa5e
7 changed files with 134 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
dist/css/ionic-ios7.css vendored
View File

@ -2036,16 +2036,18 @@ a.button {
color: #3a87ad; } color: #3a87ad; }
.card { .card {
margin: 10px; overflow: hidden;
margin: 20px 10px;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background-color: white; background-color: white;
box-shadow: inset 0 0 1px #666666; } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.card-header { .card-header {
padding: 10px; padding: 10px;
border-bottom: 1px solid #dddddd; border-top-left-radius: 2px;
background-color: #eeeeee; } border-top-right-radius: 2px;
background-color: whitesmoke; }
.card-header.card-header-secondary { .card-header.card-header-secondary {
background-color: whitesmoke; } background-color: whitesmoke; }
.card-header.card-header-primary { .card-header.card-header-primary {
@ -2066,8 +2068,9 @@ a.button {
.card-footer { .card-footer {
padding: 10px; padding: 10px;
border-top: 1px solid #dddddd; border-bottom-right-radius: 2px;
background-color: #eeeeee; } border-bottom-left-radius: 2px;
background-color: whitesmoke; }
.slide-in-up { .slide-in-up {
opacity: 0; opacity: 0;
@ -2237,7 +2240,7 @@ a.button {
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin 0.75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e036"; } content: "\e144"; }
.icon-refreshing { .icon-refreshing {
font-family: 'ionicons'; font-family: 'ionicons';
@ -2252,7 +2255,7 @@ a.button {
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin 0.75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e036"; } content: "\e144"; }
.hidden, .hidden,
.hide { .hide {

19
dist/css/ionic-scoped.css vendored
View File

@ -2712,15 +2712,17 @@
.ionic .alert-info h4 { .ionic .alert-info h4 {
color: #3a87ad; } color: #3a87ad; }
.ionic .card { .ionic .card {
margin: 10px; overflow: hidden;
margin: 20px 10px;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background-color: white; background-color: white;
box-shadow: inset 0 0 1px #666666; } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.ionic .card-header { .ionic .card-header {
padding: 10px; padding: 10px;
border-bottom: 1px solid #dddddd; border-top-left-radius: 2px;
background-color: #eeeeee; } border-top-right-radius: 2px;
background-color: whitesmoke; }
.ionic .card-header.card-header-secondary { .ionic .card-header.card-header-secondary {
background-color: whitesmoke; } background-color: whitesmoke; }
.ionic .card-header.card-header-primary { .ionic .card-header.card-header-primary {
@ -2739,8 +2741,9 @@
padding: 10px; } padding: 10px; }
.ionic .card-footer { .ionic .card-footer {
padding: 10px; padding: 10px;
border-top: 1px solid #dddddd; border-bottom-right-radius: 2px;
background-color: #eeeeee; } border-bottom-left-radius: 2px;
background-color: whitesmoke; }
.ionic .slide-in-up { .ionic .slide-in-up {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
@ -2854,7 +2857,7 @@
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin 0.75s linear infinite; }
.ionic .icon-loading:before { .ionic .icon-loading:before {
content: "\e036"; } content: "\e144"; }
.ionic .icon-refreshing { .ionic .icon-refreshing {
font-family: 'ionicons'; font-family: 'ionicons';
speak: none; speak: none;
@ -2868,7 +2871,7 @@
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin 0.75s linear infinite; }
.ionic .icon-refreshing:before { .ionic .icon-refreshing:before {
content: "\e036"; } content: "\e144"; }
.ionic .hidden, .ionic .hidden,
.ionic .hide { .ionic .hide {
display: none !important; } display: none !important; }

19
dist/css/ionic.css vendored
View File

@ -3257,16 +3257,18 @@ a.button {
color: #3a87ad; } color: #3a87ad; }
.card { .card {
margin: 10px; overflow: hidden;
margin: 20px 10px;
border: none; border: none;
border-radius: 2px; border-radius: 2px;
background-color: white; background-color: white;
box-shadow: inset 0 0 1px #666666; } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.card-header { .card-header {
padding: 10px; padding: 10px;
border-bottom: 1px solid #dddddd; border-top-left-radius: 2px;
background-color: #eeeeee; } border-top-right-radius: 2px;
background-color: whitesmoke; }
.card-header.card-header-secondary { .card-header.card-header-secondary {
background-color: whitesmoke; } background-color: whitesmoke; }
.card-header.card-header-primary { .card-header.card-header-primary {
@ -3287,8 +3289,9 @@ a.button {
.card-footer { .card-footer {
padding: 10px; padding: 10px;
border-top: 1px solid #dddddd; border-bottom-right-radius: 2px;
background-color: #eeeeee; } border-bottom-left-radius: 2px;
background-color: whitesmoke; }
.slide-box { .slide-box {
background-color: #000; background-color: #000;
@ -3509,7 +3512,7 @@ a.button {
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin 0.75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e036"; } content: "\e144"; }
.icon-refreshing { .icon-refreshing {
font-family: 'ionicons'; font-family: 'ionicons';
@ -3524,7 +3527,7 @@ a.button {
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin 0.75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e036"; } content: "\e144"; }
.hidden, .hidden,
.hide { .hide {

16
scss/ionic/_card.scss
View File

@ -3,19 +3,23 @@
// -------------------------------------------------- // --------------------------------------------------
.card { .card {
margin: $content-padding; overflow: hidden;
margin: ($content-padding * 2) $content-padding;
border: none; border: none;
//border: $card-border-width solid $card-border-color;
border-radius: $card-border-radius; border-radius: $card-border-radius;
background-color: $card-body-bg; background-color: $card-body-bg;
box-shadow: inset 0 0 $card-border-width #666; box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
} }
.card-header { .card-header {
padding: $card-padding; padding: $card-padding;
border-bottom: $card-border-width solid $card-border-color; //border-bottom: $card-border-width solid $card-border-color;
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
background-color: $card-header-bg; background-color: $card-header-bg;
&.card-header-secondary { background-color: $brand-secondary; } &.card-header-secondary { background-color: $brand-secondary; }
&.card-header-primary { background-color: $brand-primary; } &.card-header-primary { background-color: $brand-primary; }
&.card-header-info { background-color: $brand-info; } &.card-header-info { background-color: $brand-info; }
@ -31,6 +35,8 @@
.card-footer { .card-footer {
padding: $card-padding; padding: $card-padding;
border-top: $card-border-width solid $card-border-color; //border-top: $card-border-width solid $card-border-color;
border-bottom-right-radius: $card-border-radius;
border-bottom-left-radius: $card-border-radius;
background-color: $card-footer-bg; background-color: $card-footer-bg;
} }

4
scss/ionic/_icons.scss
View File

@ -66,7 +66,7 @@
animation:spin .75s linear infinite; animation:spin .75s linear infinite;
&:before { &:before {
content: "\e036"; content: "\e144";
} }
} }
@ -85,6 +85,6 @@
animation:spin .75s linear infinite; animation:spin .75s linear infinite;
&:before { &:before {
content: "\e036"; content: "\e144";
} }
} }

6
scss/ionic/_variables.scss
View File

@ -406,12 +406,12 @@ $menu-animation-speed: 200ms;
// Cards // Cards
// ------------------------------- // -------------------------------
$card-header-bg: #eee; $card-header-bg: #F5F5F5;
$card-body-bg: #fff; $card-body-bg: #fff;
$card-footer-bg: #eee; $card-footer-bg: #F5F5F5;
$card-padding: 10px !default; $card-padding: 10px !default;
$card-border-width: 1px !default; $card-border-width: 1px !default;
$card-border-color: #ddd; $card-border-color: #ccc;
$card-border-radius: 2px !default; $card-border-radius: 2px !default;

96
test/cards.html
View File

@ -15,32 +15,106 @@
<h1 class="title">Cards</h1> <h1 class="title">Cards</h1>
</header> </header>
<main class="content padding has-header"> <main class="content has-header" style="background:#F8F8F8">
<div class="card"> <div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body"> <div class="card-body">
Card Body This is a basic Card with some text.
</div>
<div class="card-footer">
Card Footer
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
Card Header I'm a Header in a Card!
</div> </div>
<div class="card-body"> <div class="card-body">
Card Body This is a basic Card with some text.
</div>
</div>
<div class="card">
<div class="card-header">
I'm a Header in a Card!
</div>
<div class="card-body">
This is a basic Card with some text.
</div> </div>
<div class="card-footer"> <div class="card-footer">
Card Footer I'm a Footer in a Card!
</div> </div>
</div> </div>
<div class="card">
<div class="card-header">
I'm a Header in a Card!
</div>
<div class="card-body">
This is a basic Card with some text.
</div>
<div class="card-footer">
I'm a Footer in a Card!
</div>
</div>
<div class="list card">
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-home"></i>
Enter home address
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-ios7-telephone"></i>
Enter phone number
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-wifi"></i>
Enter wireless password
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-card"></i>
Enter card information
</div>
</a>
</div>
<div class="list card">
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="http://tutupash.com/site/assets/nin_logo.jpeg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
</a>
<a href="#" class="list-item list-thumbnail">
<div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
</a>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<i class="icon-music-note"></i>
Start listening
</div>
</a>
</div>
<hr> <hr>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> <p><a class="button button-secondary" href="index.html">Homepage</a></p>