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

item-body

Browse Source
This commit is contained in:
Adam Bradley
2013-10-24 20:20:49 -05:00
parent 8508560455
commit e91614dd47
6 changed files with 120 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -182,7 +182,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@ -524,6 +524,15 @@ address {
font-style: normal;
line-height: 1.42857; }
a.subdued‎ {
padding-right: 10px;
color: #555555;
text-decoration: none; }
a.subdued‎:hover {
text-decoration: none; }
a.subdued‎:last-child {
padding-right: 0; }
.bar {
-webkit-user-select: none;
-moz-user-select: none;
@ -1213,6 +1222,11 @@ button.item-icon-right .item-content:after {
.item-image .item-content img:first-child, .item-image .item-content .list-img {
width: 100%; }
.item-body .item-content {
padding: 15px; }
.item-body .item-content h1, .item-body .item-content h2, .item-body .item-content h3, .item-body .item-content h4, .item-body .item-content h5, .item-body .item-content h6, .item-body .item-content p {
margin: 15px; }
.item-divider {
margin: -1px;
padding: 5px 15px;
@ -1344,37 +1358,6 @@ button.item-icon-right .item-content:after {
background-color: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.card-header {
padding: 10px;
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 {
background-color: #4a87ee; }
.card-header.card-header-info {
background-color: #43cee6; }
.card-header.card-header-success {
background-color: #66cc33; }
.card-header.card-header-warning {
background-color: #f0b840; }
.card-header.card-header-danger {
background-color: #ef4e3a; }
.card-header.card-header-dark {
background-color: #444444; }
.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;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background-color: whitesmoke; }
form {
margin: 0 0 1.42857; }
@ -1621,7 +1604,7 @@ input[type="checkbox"][readonly] {
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
transition-delay: 0s, 0.05s; }
transition-delay: 0s, .05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
@ -1636,7 +1619,7 @@ input[type="checkbox"][readonly] {
right: 0;
left: 20px;
-webkit-transform: none;
transition-delay: 0.05s, 0s; }
transition-delay: .05s, 0s; }
.item-radio .item-content {
/* give some room to the right for the checkmark icon */
@ -1906,7 +1889,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@ -2245,9 +2228,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@ -2260,9 +2243,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

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

@ -1024,7 +1024,7 @@
.ionic fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
.ionic legend {
padding: 0;
/* 2 */
@ -1261,6 +1261,14 @@
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857; }
.ionic a.subdued‎ {
padding-right: 10px;
color: #555555;
text-decoration: none; }
.ionic a.subdued‎:hover {
text-decoration: none; }
.ionic a.subdued‎:last-child {
padding-right: 0; }
.ionic .action-sheet {
position: fixed;
z-index: 10;
@ -1925,6 +1933,10 @@
padding: 0; }
.ionic .item-image .item-content img:first-child, .ionic .item-image .item-content .list-img {
width: 100%; }
.ionic .item-body .item-content {
padding: 15px; }
.ionic .item-body .item-content h1, .ionic .item-body .item-content h2, .ionic .item-body .item-content h3, .ionic .item-body .item-content h4, .ionic .item-body .item-content h5, .ionic .item-body .item-content h6, .ionic .item-body .item-content p {
margin: 15px; }
.ionic .item-divider {
margin: -1px;
padding: 5px 15px;
@ -2029,34 +2041,6 @@
border-radius: 2px;
background-color: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.ionic .card-header {
padding: 10px;
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 {
background-color: #4a87ee; }
.ionic .card-header.card-header-info {
background-color: #43cee6; }
.ionic .card-header.card-header-success {
background-color: #66cc33; }
.ionic .card-header.card-header-warning {
background-color: #f0b840; }
.ionic .card-header.card-header-danger {
background-color: #ef4e3a; }
.ionic .card-header.card-header-dark {
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;
border-bottom-left-radius: 2px;
background-color: whitesmoke; }
.ionic form {
margin: 0 0 1.42857; }
.ionic legend {
@ -2261,7 +2245,7 @@
border-radius: 50%;
background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; }
transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after {
position: absolute;
top: 34%;
@ -2274,7 +2258,7 @@
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity 0.05s ease-in-out;
transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.ionic .checkbox input:checked:before {
@ -2612,7 +2596,7 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.ionic .button.block, .ionic .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@ -2861,9 +2845,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.ionic .icon-loading:before {
content: "\e144"; }
.ionic .icon-refreshing {
@ -2875,9 +2859,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.ionic .icon-refreshing:before {
content: "\e144"; }
.ionic .hidden,

65
dist/css/ionic.css vendored
View File

@ -1261,7 +1261,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@ -1603,6 +1603,15 @@ address {
font-style: normal;
line-height: 1.42857; }
a.subdued‎ {
padding-right: 10px;
color: #555555;
text-decoration: none; }
a.subdued‎:hover {
text-decoration: none; }
a.subdued‎:last-child {
padding-right: 0; }
.action-sheet {
position: fixed;
z-index: 10;
@ -2356,6 +2365,11 @@ button.item-icon-right .item-content:after {
.item-image .item-content img:first-child, .item-image .item-content .list-img {
width: 100%; }
.item-body .item-content {
padding: 15px; }
.item-body .item-content h1, .item-body .item-content h2, .item-body .item-content h3, .item-body .item-content h4, .item-body .item-content h5, .item-body .item-content h6, .item-body .item-content p {
margin: 15px; }
.item-divider {
margin: -1px;
padding: 5px 15px;
@ -2487,37 +2501,6 @@ button.item-icon-right .item-content:after {
background-color: white;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.card-header {
padding: 10px;
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 {
background-color: #4a87ee; }
.card-header.card-header-info {
background-color: #43cee6; }
.card-header.card-header-success {
background-color: #66cc33; }
.card-header.card-header-warning {
background-color: #f0b840; }
.card-header.card-header-danger {
background-color: #ef4e3a; }
.card-header.card-header-dark {
background-color: #444444; }
.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;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
background-color: whitesmoke; }
form {
margin: 0 0 1.42857; }
@ -2747,7 +2730,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; }
transition: background-color .1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@ -2762,7 +2745,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity 0.05s ease-in-out;
transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@ -3127,7 +3110,7 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
@ -3517,9 +3500,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
@ -3532,9 +3515,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }

35
scss/ionic/_card.scss
View File

@ -6,40 +6,7 @@
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: 0 1px 2px rgba(0, 0, 0, .15);
}
.card-header {
padding: $card-padding;
//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; }
&.card-header-info { background-color: $brand-info; }
&.card-header-success { background-color: $brand-success; }
&.card-header-warning { background-color: $brand-warning; }
&.card-header-danger { background-color: $brand-danger; }
&.card-header-dark { background-color: $brand-dark; }
}
.card-body {
padding: $card-padding;
h1, h2, h3, h4, h5, h6, p {
margin-top: $content-padding;
}
}
.card-footer {
padding: $card-padding;
//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;
}
}

12
scss/ionic/_items.scss
View File

@ -227,6 +227,18 @@ button.item-icon-right {
}
// Item Body
// -------------------------------
.item-body .item-content {
padding: $item-padding;
h1, h2, h3, h4, h5, h6, p {
margin: $item-padding;
}
}
// Item Divider
// -------------------------------

72
test/cards.html
View File

@ -15,60 +15,60 @@
<h1 class="title">Cards</h1>
</header>
<main class="content has-header" style="background:#F8F8F8">
<main class="content has-header">
<div class="card">
<div class="card-body">
<div class="item item-content">
This is a basic Card with some text.
</div>
</div>
<div class="card">
<div class="card-header">
<div class="item item-divider">
I'm a Header in a Card!
</div>
<div class="card-body">
<div class="item item-content">
This is a basic Card with some text.
</div>
</div>
<div class="card">
<div class="card-header">
<div class="item item-divider">
I'm a Header in a Card!
</div>
<div class="card-body">
<div class="item item-content">
This is a basic Card with some text.
</div>
<div class="card-footer">
<div class="item item-divider">
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">
<a href="#" class="item item-icon-left">
<div class="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">
<a href="#" class="item item-icon-left">
<div class="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">
<a href="#" class="item item-icon-left">
<div class="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">
<a href="#" class="item item-icon-left">
<div class="item-content">
<i class="icon-card"></i>
Enter card information
</div>
@ -78,22 +78,22 @@
<div class="list card">
<div class="list-item list-item-thumbnail">
<div class="list-item-content">
<div class="item item-thumbnail">
<div class="item-content">
<img src="http://tutupash.com/site/assets/nin_logo.jpeg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
</div>
<div class="list-item list-item-image">
<div class="list-item-content">
<div class="item item-image">
<div class="item-content">
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
</div>
</div>
<a href="#" class="list-item list-icon-left">
<div class="list-item-content">
<a href="#" class="item item-icon-left">
<div class="item-content">
<i class="icon-music-note"></i>
Start listening
</div>
@ -103,28 +103,30 @@
<div class="list card">
<div class="list-item list-item-thumbnail">
<div class="list-item-content">
<div class="item item-thumbnail">
<div class="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 class="item item-body">
<div class="item-content">
<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="#" class="subdued‎">1 Like</a>
<a href="#" class="subdued‎">5 Comments</a>
</p>
</div>
</div>
<div class="card-footer">
<div class="item item-divider">
Like Comment Share
</div>