javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +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; }
.card {
margin: 10px;
overflow: hidden;
margin: 20px 10px;
border: none;
border-radius: 2px;
background-color: white;
box-shadow: inset 0 0 1px #666666; }
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.card-header {
padding: 10px;
border-bottom: 1px solid #dddddd;
background-color: #eeeeee; }
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: whitesmoke; }
.card-header.card-header-secondary {
background-color: whitesmoke; }
.card-header.card-header-primary {
@ -2066,8 +2068,9 @@ a.button {
.card-footer {
padding: 10px;
border-top: 1px solid #dddddd;
background-color: #eeeeee; }
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background-color: whitesmoke; }
.slide-in-up {
opacity: 0;
@ -2237,7 +2240,7 @@ a.button {
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-loading:before {
content: "\e036"; }
content: "\e144"; }
.icon-refreshing {
font-family: 'ionicons';
@ -2252,7 +2255,7 @@ a.button {
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-refreshing:before {
content: "\e036"; }
content: "\e144"; }
.hidden,
.hide {

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

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

19
dist/css/ionic.css vendored
View File

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

16
scss/ionic/_card.scss
View File

@ -3,18 +3,22 @@
// --------------------------------------------------
.card {
margin: $content-padding;
overflow: hidden;
margin: ($content-padding * 2) $content-padding;
border: none;
//border: $card-border-width solid $card-border-color;
border-radius: $card-border-radius;
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 {
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;
&.card-header-secondary { background-color: $brand-secondary; }
&.card-header-primary { background-color: $brand-primary; }
@ -31,6 +35,8 @@
.card-footer {
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;
}

4
scss/ionic/_icons.scss
View File

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

6
scss/ionic/_variables.scss
View File

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

96
test/cards.html
View File

@ -15,31 +15,105 @@
<h1 class="title">Cards</h1>
</header>
<main class="content padding has-header">
<main class="content has-header" style="background:#F8F8F8">
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
Card Body
</div>
<div class="card-footer">
Card Footer
This is a basic Card with some text.
</div>
</div>
<div class="card">
<div class="card-header">
Card Header
I'm a Header in a Card!
</div>
<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 class="card-footer">
Card Footer
I'm a Footer in a Card!
</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>