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

card body text

Browse Source
This commit is contained in:
Adam Bradley
2013-10-24 08:42:21 -05:00
parent ca90a13524
commit b2b30f0d9b
6 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2070,6 +2070,8 @@ a.button {
.card-body {
padding: 10px; }
.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
margin-top: 10px; }
.card-footer {
padding: 10px;
@ -2282,6 +2284,9 @@ a.button {
height: 0;
content: "."; }
.full-image {
width: 100%; }
.padding {
padding: 10px; }

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

@ -2743,6 +2743,8 @@
background-color: #444444; }
.ionic .card-body {
padding: 10px; }
.ionic .card-body h1, .ionic .card-body h2, .ionic .card-body h3, .ionic .card-body h4, .ionic .card-body h5, .ionic .card-body h6, .ionic .card-body p {
margin-top: 10px; }
.ionic .card-footer {
padding: 10px;
border-bottom-right-radius: 2px;
@ -2892,6 +2894,8 @@
clear: both;
height: 0;
content: "."; }
.ionic .full-image {
width: 100%; }
.ionic .padding {
padding: 10px; }
.ionic .padding-top,

5
dist/css/ionic.css vendored
View File

@ -3291,6 +3291,8 @@ a.button {
.card-body {
padding: 10px; }
.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body p {
margin-top: 10px; }
.card-footer {
padding: 10px;
@ -3554,6 +3556,9 @@ a.button {
height: 0;
content: "."; }
.full-image {
width: 100%; }
.padding {
padding: 10px; }

3
scss/ionic/_card.scss
View File

@ -31,6 +31,9 @@
.card-body {
padding: $card-padding;
h1, h2, h3, h4, h5, h6, p {
margin-top: $content-padding;
}
}
.card-footer {

4
scss/ionic/_util.scss
View File

@ -22,6 +22,10 @@
}
}
.full-image {
width: 100%;
}
// Content Padding
// -------------------------------

45
test/cards.html
View File

@ -32,18 +32,6 @@
</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="card">
<div class="card-header">
I'm a Header in a Card!
@ -90,7 +78,7 @@
<div class="list card">
<div href="#" class="list-item list-item-thumbnail">
<div class="list-item list-item-thumbnail">
<div class="list-item-content">
<img src="http://tutupash.com/site/assets/nin_logo.jpeg">
<h2>Pretty Hate Machine</h2>
@ -98,7 +86,7 @@
</div>
</div>
<div href="#" class="list-item list-item-image">
<div class="list-item list-item-image">
<div class="list-item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
</div>
@ -113,6 +101,35 @@
</div>
<div class="list card">
<div class="list-item list-item-thumbnail">
<div class="list-item-content">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
</div>
<div class="card-body">
<img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of a Tab Bar, icons aligned left, within the card-footer.
</p>
<p>
<a href="#">1 Like</a>
<a href="#">5 Comments</a>
</p>
</div>
<div class="card-footer">
Like Comment Share
</div>
</div>
<hr>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>