mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
remove .item-content requirement
This commit is contained in:
Adam Bradley
202
dist/css/ionic-ios7.css
vendored
202
dist/css/ionic-ios7.css
vendored
@@ -969,9 +969,35 @@ a.subdued {
|
||||
z-index: 2;
|
||||
display: block;
|
||||
margin: -1px;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.item h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.item h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.item h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.item h5, .item h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.item p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.item h1:last-child,
|
||||
.item h2:last-child,
|
||||
.item h3:last-child,
|
||||
.item h4:last-child,
|
||||
.item h5:last-child,
|
||||
.item h6:last-child,
|
||||
.item p:last-child {
|
||||
margin-bottom: 0; }
|
||||
.item .badge {
|
||||
float: right; }
|
||||
.item .badge + .badge {
|
||||
@@ -1085,13 +1111,22 @@ a.subdued {
|
||||
background-color: #444444;
|
||||
color: white; }
|
||||
|
||||
.item,
|
||||
.item-content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
a.item {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
a.item:hover, a.item:focus {
|
||||
text-decoration: none; }
|
||||
|
||||
.item-content {
|
||||
.item-slider {
|
||||
padding: 0; }
|
||||
|
||||
.item-slider .item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
@@ -1099,44 +1134,24 @@ a.item {
|
||||
*/
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.item-content h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.item-content h4, .item-content h5, .item-content h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.item-content p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.item-content h1:last-child,
|
||||
.item-content h2:last-child,
|
||||
.item-content h3:last-child,
|
||||
.item-content h4:last-child,
|
||||
.item-content h5:last-child,
|
||||
.item-content h6:last-child,
|
||||
.item-content p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
|
||||
.item-content i {
|
||||
.item-slider.item-text-wrap {
|
||||
overflow: hidden;
|
||||
white-space: nowrap; }
|
||||
.item-slider.item-text-wrap .item-content {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
|
||||
.item i {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
@@ -1152,22 +1167,30 @@ a.item {
|
||||
height: 100%;
|
||||
font-size: 32px; }
|
||||
|
||||
.item-content .fill-icon {
|
||||
.item .fill-icon {
|
||||
font-size: 28px; }
|
||||
|
||||
.item-icon-left .item-content {
|
||||
.item-icon-left {
|
||||
padding-left: 45px; }
|
||||
.item-icon-left .item-content i {
|
||||
.item-icon-left i {
|
||||
left: 7.5px; }
|
||||
|
||||
.item-icon-right .item-content i {
|
||||
.item-slider.item-icon-left {
|
||||
padding-left: 0; }
|
||||
.item-slider.item-icon-left .item-content {
|
||||
padding-left: 45px; }
|
||||
|
||||
.item-icon-right i {
|
||||
right: 7.5px; }
|
||||
|
||||
.item-icon-left.item-icon-right .item-content i:last-child {
|
||||
.item-icon-left.item-icon-right i:first-child {
|
||||
right: auto; }
|
||||
|
||||
.item-icon-left.item-icon-right i:last-child {
|
||||
left: auto; }
|
||||
|
||||
a .item-content:after,
|
||||
button .item-content:after {
|
||||
a.item:after,
|
||||
button.item:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@@ -1195,14 +1218,14 @@ button .item-content:after {
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
a.item-icon-right .item-content:after,
|
||||
button.item-icon-right .item-content:after {
|
||||
a.item-icon-right:after,
|
||||
button.item-icon-right:after {
|
||||
display: none; }
|
||||
|
||||
.item-thumbnail .item-content {
|
||||
.item-avitar {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
.item-thumbnail .item-content img:first-child, .item-thumbnail .item-content .item-img {
|
||||
.item-avitar img:first-child, .item-avitar .item-img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
@@ -1211,10 +1234,10 @@ button.item-icon-right .item-content:after {
|
||||
width: 100%;
|
||||
border-radius: 4px; }
|
||||
|
||||
.item-thumbnail-lrg .item-content {
|
||||
.item-thumbnail-left {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.item-thumbnail-lrg .item-content img:first-child, .item-thumbnail-lrg .item-content .item-img {
|
||||
.item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -1222,19 +1245,30 @@ button.item-icon-right .item-content:after {
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
|
||||
.item-image .item-content {
|
||||
padding: 0;
|
||||
text-align: center; }
|
||||
.item-image .item-content img:first-child, .item-image .item-content .list-img {
|
||||
vertical-align: middle;
|
||||
.item-thumbnail-right {
|
||||
padding-right: 95px;
|
||||
min-height: 80px; }
|
||||
.item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
|
||||
.item-body .item-content {
|
||||
.item-image {
|
||||
padding: 0;
|
||||
text-align: center; }
|
||||
.item-image img:first-child, .item-image .list-img {
|
||||
width: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.item-body {
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
text-overflow: inherit;
|
||||
white-space: normal; }
|
||||
.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 {
|
||||
.item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px; }
|
||||
|
||||
@@ -1306,13 +1340,13 @@ button.item-icon-right .item-content:after {
|
||||
* The hidden right-side buttons that can be exposed under a list item
|
||||
* with dragging.
|
||||
*/
|
||||
.item-buttons {
|
||||
.item-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%; }
|
||||
.item-buttons .button {
|
||||
.item-options .button {
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
@@ -1368,51 +1402,51 @@ button.item-icon-right .item-content:after {
|
||||
border-radius: 2px; }
|
||||
|
||||
.card {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.card .item,
|
||||
.list-inset .item,
|
||||
.padding > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.card .item:first-child,
|
||||
.list-inset .item:first-child,
|
||||
.padding > .list .item:first-child {
|
||||
margin-top: 0;
|
||||
.card .item:first-child,
|
||||
.list-inset .item:first-child,
|
||||
.padding > .list .item:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:first-child .item-content,
|
||||
.list-inset .item:first-child .item-content,
|
||||
.padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:first-child .item-content,
|
||||
.list-inset .item:first-child .item-content,
|
||||
.padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child,
|
||||
.padding > .list .item:last-child {
|
||||
margin-bottom: 0;
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child,
|
||||
.padding > .list .item:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.card .item:last-child .item-content,
|
||||
.list-inset .item:last-child .item-content,
|
||||
.padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.card .item:last-child .item-content,
|
||||
.list-inset .item:last-child .item-content,
|
||||
.padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
|
||||
.card.list .item:last-child,
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child {
|
||||
margin-bottom: -1px; }
|
||||
|
||||
.card.list .item-divider,
|
||||
.card .item,
|
||||
.card .item-divider,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
.padding-horizontal > .list .item,
|
||||
.padding > .list .item-divider,
|
||||
.padding-horizontal > .list .item-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
|
||||
.padding-left > .list .item,
|
||||
.padding-left > .list .item-divider {
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-right > .list .item {
|
||||
.padding-right > .list .item,
|
||||
.padding-right > .list .item-divider {
|
||||
margin-right: 0; }
|
||||
|
||||
form {
|
||||
|
||||
192
dist/css/ionic-scoped.css
vendored
192
dist/css/ionic-scoped.css
vendored
@@ -1696,9 +1696,35 @@
|
||||
z-index: 2;
|
||||
display: block;
|
||||
margin: -1px;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.ionic .item h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.ionic .item h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.ionic .item h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.ionic .item h5, .ionic .item h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.ionic .item p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.ionic .item h1:last-child,
|
||||
.ionic .item h2:last-child,
|
||||
.ionic .item h3:last-child,
|
||||
.ionic .item h4:last-child,
|
||||
.ionic .item h5:last-child,
|
||||
.ionic .item h6:last-child,
|
||||
.ionic .item p:last-child {
|
||||
margin-bottom: 0; }
|
||||
.ionic .item .badge {
|
||||
float: right; }
|
||||
.ionic .item .badge + .badge {
|
||||
@@ -1811,12 +1837,19 @@
|
||||
.ionic .item.item-dark.active .list-item-content, .ionic .item.item-dark:active .list-item-content {
|
||||
background-color: #444444;
|
||||
color: white; }
|
||||
.ionic .item,
|
||||
.ionic .item-content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.ionic a.item {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
.ionic a.item:hover, .ionic a.item:focus {
|
||||
text-decoration: none; }
|
||||
.ionic .item-content {
|
||||
.ionic .item-slider {
|
||||
padding: 0; }
|
||||
.ionic .item-slider .item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
@@ -1824,42 +1857,21 @@
|
||||
*/
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.ionic .item-content h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.ionic .item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.ionic .item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.ionic .item-content h4, .ionic .item-content h5, .ionic .item-content h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.ionic .item-content p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.ionic .item-content h1:last-child,
|
||||
.ionic .item-content h2:last-child,
|
||||
.ionic .item-content h3:last-child,
|
||||
.ionic .item-content h4:last-child,
|
||||
.ionic .item-content h5:last-child,
|
||||
.ionic .item-content h6:last-child,
|
||||
.ionic .item-content p:last-child {
|
||||
margin-bottom: 0; }
|
||||
.ionic .item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
.ionic .item-content i {
|
||||
.ionic .item-slider.item-text-wrap {
|
||||
overflow: hidden;
|
||||
white-space: nowrap; }
|
||||
.ionic .item-slider.item-text-wrap .item-content {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
.ionic .item i {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
@@ -1874,18 +1886,24 @@
|
||||
top: 0;
|
||||
height: 100%;
|
||||
font-size: 32px; }
|
||||
.ionic .item-content .fill-icon {
|
||||
.ionic .item .fill-icon {
|
||||
font-size: 28px; }
|
||||
.ionic .item-icon-left .item-content {
|
||||
.ionic .item-icon-left {
|
||||
padding-left: 45px; }
|
||||
.ionic .item-icon-left .item-content i {
|
||||
.ionic .item-icon-left i {
|
||||
left: 7.5px; }
|
||||
.ionic .item-icon-right .item-content i {
|
||||
.ionic .item-slider.item-icon-left {
|
||||
padding-left: 0; }
|
||||
.ionic .item-slider.item-icon-left .item-content {
|
||||
padding-left: 45px; }
|
||||
.ionic .item-icon-right i {
|
||||
right: 7.5px; }
|
||||
.ionic .item-icon-left.item-icon-right .item-content i:last-child {
|
||||
.ionic .item-icon-left.item-icon-right i:first-child {
|
||||
right: auto; }
|
||||
.ionic .item-icon-left.item-icon-right i:last-child {
|
||||
left: auto; }
|
||||
.ionic a .item-content:after,
|
||||
.ionic button .item-content:after {
|
||||
.ionic a.item:after,
|
||||
.ionic button.item:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@@ -1912,13 +1930,13 @@
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
.ionic a.item-icon-right .item-content:after,
|
||||
.ionic button.item-icon-right .item-content:after {
|
||||
.ionic a.item-icon-right:after,
|
||||
.ionic button.item-icon-right:after {
|
||||
display: none; }
|
||||
.ionic .item-thumbnail .item-content {
|
||||
.ionic .item-avitar {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
.ionic .item-thumbnail .item-content img:first-child, .ionic .item-thumbnail .item-content .item-img {
|
||||
.ionic .item-avitar img:first-child, .ionic .item-avitar .item-img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
@@ -1926,28 +1944,38 @@
|
||||
max-height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 4px; }
|
||||
.ionic .item-thumbnail-lrg .item-content {
|
||||
.ionic .item-thumbnail-left {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.ionic .item-thumbnail-lrg .item-content img:first-child, .ionic .item-thumbnail-lrg .item-content .item-img {
|
||||
.ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
.ionic .item-image .item-content {
|
||||
.ionic .item-thumbnail-right {
|
||||
padding-right: 95px;
|
||||
min-height: 80px; }
|
||||
.ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
.ionic .item-image {
|
||||
padding: 0;
|
||||
text-align: center; }
|
||||
.ionic .item-image .item-content img:first-child, .ionic .item-image .item-content .list-img {
|
||||
vertical-align: middle;
|
||||
width: 100%; }
|
||||
.ionic .item-body .item-content {
|
||||
.ionic .item-image img:first-child, .ionic .item-image .list-img {
|
||||
width: 100%;
|
||||
vertical-align: middle; }
|
||||
.ionic .item-body {
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
text-overflow: inherit;
|
||||
white-space: normal; }
|
||||
.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 {
|
||||
.ionic .item-body h1, .ionic .item-body h2, .ionic .item-body h3, .ionic .item-body h4, .ionic .item-body h5, .ionic .item-body h6, .ionic .item-body p {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px; }
|
||||
.ionic .item-divider {
|
||||
@@ -2004,13 +2032,13 @@
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
.ionic .item-buttons {
|
||||
.ionic .item-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%; }
|
||||
.ionic .item-buttons .button {
|
||||
.ionic .item-options .button {
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
@@ -2051,46 +2079,46 @@
|
||||
background-color: white;
|
||||
border-radius: 2px; }
|
||||
.ionic .card {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
.ionic .card .item,
|
||||
.ionic .list-inset .item,
|
||||
.ionic .padding > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.ionic .card .item:first-child,
|
||||
.ionic .list-inset .item:first-child,
|
||||
.ionic .padding > .list .item:first-child {
|
||||
margin-top: 0;
|
||||
.ionic .card .item:first-child,
|
||||
.ionic .list-inset .item:first-child,
|
||||
.ionic .padding > .list .item:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.ionic .card .item:first-child .item-content,
|
||||
.ionic .list-inset .item:first-child .item-content,
|
||||
.ionic .padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.ionic .card .item:first-child .item-content,
|
||||
.ionic .list-inset .item:first-child .item-content,
|
||||
.ionic .padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.ionic .card .item:last-child,
|
||||
.ionic .list-inset .item:last-child,
|
||||
.ionic .padding > .list .item:last-child {
|
||||
margin-bottom: 0;
|
||||
.ionic .card .item:last-child,
|
||||
.ionic .list-inset .item:last-child,
|
||||
.ionic .padding > .list .item:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.ionic .card .item:last-child .item-content,
|
||||
.ionic .list-inset .item:last-child .item-content,
|
||||
.ionic .padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.ionic .card .item:last-child .item-content,
|
||||
.ionic .list-inset .item:last-child .item-content,
|
||||
.ionic .padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.ionic .card.list .item:last-child,
|
||||
.ionic .card .item:last-child,
|
||||
.ionic .list-inset .item:last-child {
|
||||
margin-bottom: -1px; }
|
||||
.ionic .card.list .item-divider,
|
||||
.ionic .card .item,
|
||||
.ionic .card .item-divider,
|
||||
.ionic .list-inset .item-divider,
|
||||
.ionic .padding > .list .item,
|
||||
.ionic .padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
.ionic .padding-horizontal > .list .item,
|
||||
.ionic .padding > .list .item-divider,
|
||||
.ionic .padding-horizontal > .list .item-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.ionic .padding-left > .list .item,
|
||||
.ionic .padding-left > .list .item-divider {
|
||||
margin-left: 0; }
|
||||
.ionic .padding-left > .list .item {
|
||||
margin-left: 0; }
|
||||
.ionic .padding-right > .list .item {
|
||||
.ionic .padding-right > .list .item,
|
||||
.ionic .padding-right > .list .item-divider {
|
||||
margin-right: 0; }
|
||||
.ionic form {
|
||||
margin: 0 0 1.42857; }
|
||||
|
||||
202
dist/css/ionic.css
vendored
202
dist/css/ionic.css
vendored
@@ -2112,9 +2112,35 @@ a.subdued {
|
||||
z-index: 2;
|
||||
display: block;
|
||||
margin: -1px;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666; }
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.item h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.item h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.item h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.item h5, .item h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.item p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.item h1:last-child,
|
||||
.item h2:last-child,
|
||||
.item h3:last-child,
|
||||
.item h4:last-child,
|
||||
.item h5:last-child,
|
||||
.item h6:last-child,
|
||||
.item p:last-child {
|
||||
margin-bottom: 0; }
|
||||
.item .badge {
|
||||
float: right; }
|
||||
.item .badge + .badge {
|
||||
@@ -2228,13 +2254,22 @@ a.subdued {
|
||||
background-color: #444444;
|
||||
color: white; }
|
||||
|
||||
.item,
|
||||
.item-content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
a.item {
|
||||
color: #333333;
|
||||
text-decoration: none; }
|
||||
a.item:hover, a.item:focus {
|
||||
text-decoration: none; }
|
||||
|
||||
.item-content {
|
||||
.item-slider {
|
||||
padding: 0; }
|
||||
|
||||
.item-slider .item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
@@ -2242,44 +2277,24 @@ a.item {
|
||||
*/
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
background-color: white;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.item-content h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px; }
|
||||
.item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px; }
|
||||
.item-content h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px; }
|
||||
.item-content h4, .item-content h5, .item-content h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px; }
|
||||
.item-content p {
|
||||
color: #666;
|
||||
font-size: 14px; }
|
||||
.item-content h1:last-child,
|
||||
.item-content h2:last-child,
|
||||
.item-content h3:last-child,
|
||||
.item-content h4:last-child,
|
||||
.item-content h5:last-child,
|
||||
.item-content h6:last-child,
|
||||
.item-content p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
|
||||
.item-content i {
|
||||
.item-slider.item-text-wrap {
|
||||
overflow: hidden;
|
||||
white-space: nowrap; }
|
||||
.item-slider.item-text-wrap .item-content {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
|
||||
.item i {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
@@ -2295,22 +2310,30 @@ a.item {
|
||||
height: 100%;
|
||||
font-size: 32px; }
|
||||
|
||||
.item-content .fill-icon {
|
||||
.item .fill-icon {
|
||||
font-size: 28px; }
|
||||
|
||||
.item-icon-left .item-content {
|
||||
.item-icon-left {
|
||||
padding-left: 45px; }
|
||||
.item-icon-left .item-content i {
|
||||
.item-icon-left i {
|
||||
left: 7.5px; }
|
||||
|
||||
.item-icon-right .item-content i {
|
||||
.item-slider.item-icon-left {
|
||||
padding-left: 0; }
|
||||
.item-slider.item-icon-left .item-content {
|
||||
padding-left: 45px; }
|
||||
|
||||
.item-icon-right i {
|
||||
right: 7.5px; }
|
||||
|
||||
.item-icon-left.item-icon-right .item-content i:last-child {
|
||||
.item-icon-left.item-icon-right i:first-child {
|
||||
right: auto; }
|
||||
|
||||
.item-icon-left.item-icon-right i:last-child {
|
||||
left: auto; }
|
||||
|
||||
a .item-content:after,
|
||||
button .item-content:after {
|
||||
a.item:after,
|
||||
button.item:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@@ -2338,14 +2361,14 @@ button .item-content:after {
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
|
||||
a.item-icon-right .item-content:after,
|
||||
button.item-icon-right .item-content:after {
|
||||
a.item-icon-right:after,
|
||||
button.item-icon-right:after {
|
||||
display: none; }
|
||||
|
||||
.item-thumbnail .item-content {
|
||||
.item-avitar {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
.item-thumbnail .item-content img:first-child, .item-thumbnail .item-content .item-img {
|
||||
.item-avitar img:first-child, .item-avitar .item-img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
@@ -2354,10 +2377,10 @@ button.item-icon-right .item-content:after {
|
||||
width: 100%;
|
||||
border-radius: 4px; }
|
||||
|
||||
.item-thumbnail-lrg .item-content {
|
||||
.item-thumbnail-left {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.item-thumbnail-lrg .item-content img:first-child, .item-thumbnail-lrg .item-content .item-img {
|
||||
.item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -2365,19 +2388,30 @@ button.item-icon-right .item-content:after {
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
|
||||
.item-image .item-content {
|
||||
padding: 0;
|
||||
text-align: center; }
|
||||
.item-image .item-content img:first-child, .item-image .item-content .list-img {
|
||||
vertical-align: middle;
|
||||
.item-thumbnail-right {
|
||||
padding-right: 95px;
|
||||
min-height: 80px; }
|
||||
.item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
|
||||
.item-body .item-content {
|
||||
.item-image {
|
||||
padding: 0;
|
||||
text-align: center; }
|
||||
.item-image img:first-child, .item-image .list-img {
|
||||
width: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.item-body {
|
||||
overflow: auto;
|
||||
padding: 15px;
|
||||
text-overflow: inherit;
|
||||
white-space: normal; }
|
||||
.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 {
|
||||
.item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px; }
|
||||
|
||||
@@ -2449,13 +2483,13 @@ button.item-icon-right .item-content:after {
|
||||
* The hidden right-side buttons that can be exposed under a list item
|
||||
* with dragging.
|
||||
*/
|
||||
.item-buttons {
|
||||
.item-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%; }
|
||||
.item-buttons .button {
|
||||
.item-options .button {
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
@@ -2511,51 +2545,51 @@ button.item-icon-right .item-content:after {
|
||||
border-radius: 2px; }
|
||||
|
||||
.card {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.card .item,
|
||||
.list-inset .item,
|
||||
.padding > .list .item {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.card .item:first-child,
|
||||
.list-inset .item:first-child,
|
||||
.padding > .list .item:first-child {
|
||||
margin-top: 0;
|
||||
.card .item:first-child,
|
||||
.list-inset .item:first-child,
|
||||
.padding > .list .item:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:first-child .item-content,
|
||||
.list-inset .item:first-child .item-content,
|
||||
.padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:first-child .item-content,
|
||||
.list-inset .item:first-child .item-content,
|
||||
.padding > .list .item:first-child .item-content {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px; }
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child,
|
||||
.padding > .list .item:last-child {
|
||||
margin-bottom: 0;
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child,
|
||||
.padding > .list .item:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.card .item:last-child .item-content,
|
||||
.list-inset .item:last-child .item-content,
|
||||
.padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
.card .item:last-child .item-content,
|
||||
.list-inset .item:last-child .item-content,
|
||||
.padding > .list .item:last-child .item-content {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
|
||||
.card.list .item:last-child,
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child {
|
||||
margin-bottom: -1px; }
|
||||
|
||||
.card.list .item-divider,
|
||||
.card .item,
|
||||
.card .item-divider,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
.padding-horizontal > .list .item,
|
||||
.padding > .list .item-divider,
|
||||
.padding-horizontal > .list .item-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
|
||||
.padding-left > .list .item,
|
||||
.padding-left > .list .item-divider {
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0; }
|
||||
|
||||
.padding-right > .list .item {
|
||||
.padding-right > .list .item,
|
||||
.padding-right > .list .item-divider {
|
||||
margin-right: 0; }
|
||||
|
||||
form {
|
||||
|
||||
@@ -9,16 +9,50 @@
|
||||
display: block;
|
||||
margin: $item-border-width * -1;
|
||||
|
||||
border: none;
|
||||
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
|
||||
|
||||
border: none;
|
||||
background-color: $list-default-background;
|
||||
box-shadow: $item-box-shadow;
|
||||
font-size: $list-font-size;
|
||||
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
h5, h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1:last-child,
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child,
|
||||
h6:last-child,
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Align badges within list items
|
||||
.badge {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.badge + .badge {
|
||||
margin-right: 5px;
|
||||
}
|
||||
@@ -46,6 +80,14 @@
|
||||
&.item-dark { @include item-style-active($brand-dark, $gray-dark, $white); }
|
||||
}
|
||||
|
||||
// Handle text overflow
|
||||
.item,
|
||||
.item-content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Linked list items
|
||||
a.item {
|
||||
color: $gray-dark;
|
||||
@@ -59,10 +101,12 @@ a.item {
|
||||
}
|
||||
|
||||
|
||||
// List Item Content
|
||||
// Slidable Item Content
|
||||
// -------------------------------
|
||||
|
||||
.item-content {
|
||||
.item-slider {
|
||||
padding: 0;
|
||||
}
|
||||
.item-slider .item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
@@ -71,60 +115,33 @@ a.item {
|
||||
position: relative;
|
||||
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
|
||||
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
background-color: $list-default-background;
|
||||
box-shadow: $item-box-shadow;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: $list-font-size;
|
||||
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1:last-child,
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child,
|
||||
h6:last-child,
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
.item-slider.item-text-wrap {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
.item-content {
|
||||
overflow: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// List Icons
|
||||
// -------------------------------
|
||||
|
||||
.item-content i {
|
||||
.item i {
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
position: absolute;
|
||||
@@ -133,28 +150,38 @@ a.item {
|
||||
font-size: $item-icon-font-size;
|
||||
}
|
||||
|
||||
.item-content .fill-icon {
|
||||
.item .fill-icon {
|
||||
font-size: $item-icon-fill-font-size;
|
||||
}
|
||||
|
||||
.item-icon-left .item-content {
|
||||
.item-icon-left {
|
||||
padding-left: ($item-padding * 3);
|
||||
|
||||
i {
|
||||
left: $item-padding / 2;
|
||||
}
|
||||
}
|
||||
.item-slider.item-icon-left {
|
||||
padding-left: 0;
|
||||
|
||||
.item-icon-right .item-content i {
|
||||
.item-content {
|
||||
padding-left: ($item-padding * 3);
|
||||
}
|
||||
}
|
||||
|
||||
.item-icon-right i {
|
||||
right: $item-padding / 2;
|
||||
}
|
||||
|
||||
.item-icon-left.item-icon-right .item-content i:last-child {
|
||||
.item-icon-left.item-icon-right i:first-child {
|
||||
right: auto;
|
||||
}
|
||||
.item-icon-left.item-icon-right i:last-child {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
a .item-content:after,
|
||||
button .item-content:after {
|
||||
a.item:after,
|
||||
button.item:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
@@ -176,10 +203,27 @@ button .item-content:after {
|
||||
}
|
||||
|
||||
// do not show the default right arrow when they want their own right side icon
|
||||
a.item-icon-right,
|
||||
button.item-icon-right {
|
||||
.item-content:after {
|
||||
display: none;
|
||||
a.item-icon-right:after,
|
||||
button.item-icon-right:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Item Avitar
|
||||
// -------------------------------
|
||||
|
||||
.item-avitar {
|
||||
padding-left: $item-avitar-width + ($item-padding * 2);
|
||||
min-height: $item-avitar-width + ($item-padding * 2);
|
||||
|
||||
img:first-child, .item-img {
|
||||
position: absolute;
|
||||
top: $item-padding;
|
||||
left: $item-padding;
|
||||
max-width: $item-avitar-width;
|
||||
max-height: $item-avitar-height;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -187,31 +231,30 @@ button.item-icon-right {
|
||||
// Item Thumbnails
|
||||
// -------------------------------
|
||||
|
||||
.item-thumbnail .item-content {
|
||||
padding-left: $item-thumbnail-width + ($item-padding * 2);
|
||||
min-height: $item-thumbnail-width + ($item-padding * 2);
|
||||
.item-thumbnail-left {
|
||||
padding-left: $item-thumbnail-width + $item-padding;
|
||||
min-height: $item-thumbnail-height;
|
||||
|
||||
img:first-child, .item-img {
|
||||
position: absolute;
|
||||
top: $item-padding;
|
||||
left: $item-padding;
|
||||
max-width: $item-thumbnail-width;
|
||||
max-height: $item-thumbnail-height;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-thumbnail-lrg .item-content {
|
||||
padding-left: $item-thumbnail-lrg-width + $item-padding;
|
||||
min-height: $item-thumbnail-lrg-height;
|
||||
|
||||
img:first-child, .item-img {
|
||||
img:first-child, .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: $item-thumbnail-lrg-width;
|
||||
max-height: $item-thumbnail-lrg-height;
|
||||
max-width: $item-thumbnail-width;
|
||||
max-height: $item-thumbnail-height;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-thumbnail-right {
|
||||
padding-right: $item-thumbnail-width + $item-padding;
|
||||
min-height: $item-thumbnail-height;
|
||||
|
||||
img:first-child, .item-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
max-width: $item-thumbnail-width;
|
||||
max-height: $item-thumbnail-height;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -220,13 +263,13 @@ button.item-icon-right {
|
||||
// Item Image
|
||||
// -------------------------------
|
||||
|
||||
.item-image .item-content {
|
||||
.item-image {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
img:first-child, .list-img {
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -234,7 +277,7 @@ button.item-icon-right {
|
||||
// Item Body
|
||||
// -------------------------------
|
||||
|
||||
.item-body .item-content {
|
||||
.item-body {
|
||||
overflow: auto;
|
||||
padding: $item-padding;
|
||||
text-overflow: inherit;
|
||||
@@ -339,7 +382,7 @@ button.item-icon-right {
|
||||
* The hidden right-side buttons that can be exposed under a list item
|
||||
* with dragging.
|
||||
*/
|
||||
.item-buttons {
|
||||
.item-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
@@ -79,6 +79,8 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
padding-top: $item-border-width;
|
||||
padding-bottom: $item-border-width;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
@@ -86,11 +88,8 @@
|
||||
.list-inset .item,
|
||||
.padding > .list .item
|
||||
{
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
//margin-top: 0;
|
||||
border-top-left-radius: $card-border-radius;
|
||||
border-top-right-radius: $card-border-radius;
|
||||
|
||||
@@ -100,7 +99,7 @@
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
//margin-bottom: 0;
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
|
||||
@@ -111,21 +110,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.card.list .item:last-child,
|
||||
.card .item:last-child,
|
||||
.list-inset .item:last-child {
|
||||
margin-bottom: $item-border-width * -1;
|
||||
}
|
||||
|
||||
.card.list .item-divider,
|
||||
.card .item,
|
||||
.card .item-divider,
|
||||
.list-inset .item-divider,
|
||||
.padding > .list .item,
|
||||
.padding-horizontal > .list .item {
|
||||
margin-right: 0;
|
||||
.padding-horizontal > .list .item,
|
||||
.padding > .list .item-divider,
|
||||
.padding-horizontal > .list .item-divider {
|
||||
margin-left: 0;
|
||||
}
|
||||
.padding-left > .list .item {
|
||||
margin-left: 0;
|
||||
}
|
||||
.padding-right > .list .item {
|
||||
margin-right: 0;
|
||||
}
|
||||
.padding-left > .list .item,
|
||||
.padding-left > .list .item-divider {
|
||||
margin-left: 0;
|
||||
}
|
||||
.padding-right > .list .item,
|
||||
.padding-right > .list .item-divider {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@@ -394,11 +394,11 @@ $item-divider-padding: 5px 15px;
|
||||
$item-icon-font-size: 32px !default;
|
||||
$item-icon-fill-font-size: 28px !default;
|
||||
|
||||
$item-thumbnail-width: 40px !default;
|
||||
$item-thumbnail-height: 40px !default;
|
||||
$item-avitar-width: 40px !default;
|
||||
$item-avitar-height: 40px !default;
|
||||
|
||||
$item-thumbnail-lrg-width: 80px !default;
|
||||
$item-thumbnail-lrg-height: 80px !default;
|
||||
$item-thumbnail-width: 80px !default;
|
||||
$item-thumbnail-height: 80px !default;
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
@@ -18,28 +18,28 @@
|
||||
<main class="content has-header">
|
||||
|
||||
<div class="card">
|
||||
<div class="item item-content item-text-wrap">
|
||||
<div class="item item-text-wrap">
|
||||
This is a basic Card with some text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="item item-divider">
|
||||
<div class="item-divider">
|
||||
I'm a Header in a Card!
|
||||
</div>
|
||||
<div class="item item-content item-text-wrap">
|
||||
<div class="item item-text-wrap">
|
||||
This is a basic Card with some text.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="item item-divider">
|
||||
<div class="item-divider">
|
||||
I'm a Header in a Card!
|
||||
</div>
|
||||
<div class="item item-content item-text-wrap">
|
||||
<div class="item item-text-wrap">
|
||||
This is a basic Card with some text.
|
||||
</div>
|
||||
<div class="item item-divider">
|
||||
<div class="item-divider">
|
||||
I'm a Footer in a Card!
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,83 +47,65 @@
|
||||
<div class="list card">
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-home"></i>
|
||||
Enter home address
|
||||
</div>
|
||||
<i class="icon-home"></i>
|
||||
Enter home address
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-ios7-telephone"></i>
|
||||
Enter phone number
|
||||
</div>
|
||||
<i class="icon-ios7-telephone"></i>
|
||||
Enter phone number
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-wifi"></i>
|
||||
Enter wireless password
|
||||
</div>
|
||||
<i class="icon-wifi"></i>
|
||||
Enter wireless password
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-card"></i>
|
||||
Enter card information
|
||||
</div>
|
||||
<i class="icon-card"></i>
|
||||
Enter card information
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list card">
|
||||
|
||||
<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 class="item item-avitar">
|
||||
<img src="http://tutupash.com/site/assets/nin_logo.jpeg">
|
||||
<h2>Pretty Hate Machine</h2>
|
||||
<p>Nine Inch Nails</p>
|
||||
</div>
|
||||
|
||||
<div class="item item-image">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
</div>
|
||||
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-music-note"></i>
|
||||
Start listening
|
||||
</div>
|
||||
<i class="icon-music-note"></i>
|
||||
Start listening
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list card">
|
||||
|
||||
<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 class="item item-avitar">
|
||||
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
|
||||
<h2>Marty McFly</h2>
|
||||
<p>November 05, 1955</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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 class="item item-divider">
|
||||
@@ -132,9 +114,8 @@
|
||||
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
268
test/lists.html
268
test/lists.html
@@ -10,7 +10,7 @@
|
||||
<body>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
<h1 class="title">Lists</h1>
|
||||
</header>
|
||||
|
||||
<main class="content-wrapper">
|
||||
@@ -23,41 +23,51 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-email"></i>
|
||||
Check mail
|
||||
<span class="badge badge-info">5</span>
|
||||
</div>
|
||||
<i class="icon-email"></i>
|
||||
Check mail
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-chatbubble-working"></i>
|
||||
Call Ma
|
||||
<span class="item-label-right">
|
||||
Cell
|
||||
</span>
|
||||
</div>
|
||||
<i class="icon-chatbubble-working"></i>
|
||||
Call Ma
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="item-divider">
|
||||
Work
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-email"></i>
|
||||
Check mail
|
||||
<span class="badge badge-info">5</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-mic-a"></i>
|
||||
Record album
|
||||
<span class="item-label-right">
|
||||
Grammy
|
||||
</span>
|
||||
</div>
|
||||
<i class="icon-chatbubble-working"></i>
|
||||
Call Ma
|
||||
<span class="item-label-right">
|
||||
Cell
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-flask"></i>
|
||||
Breaking Bad
|
||||
<span class="item-label-right">
|
||||
Blue, yellow, pink
|
||||
</span>
|
||||
</div>
|
||||
<i class="icon-mic-a"></i>
|
||||
Record album
|
||||
<span class="item-label-right">
|
||||
Grammy
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<i class="icon-flask"></i>
|
||||
Breaking Bad
|
||||
<span class="item-label-right">
|
||||
Blue, yellow, pink
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
@@ -65,41 +75,33 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-game-controller-b"></i>
|
||||
Games
|
||||
<span class="item-label-right">
|
||||
Super Mario
|
||||
</span>
|
||||
</div>
|
||||
<i class="icon-game-controller-b"></i>
|
||||
Games
|
||||
<span class="item-label-right">
|
||||
Super Mario
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-music-note"></i>
|
||||
Music
|
||||
<span class="item-label-right">
|
||||
JT
|
||||
</span>
|
||||
</div>
|
||||
<i class="icon-music-note"></i>
|
||||
Music
|
||||
<span class="item-label-right">
|
||||
JT
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-bag"></i>
|
||||
Shopping
|
||||
<span class="item-label-right">
|
||||
Bag
|
||||
</span>
|
||||
</div>
|
||||
<i class="icon-bag"></i>
|
||||
Shopping
|
||||
<span class="item-label-right">
|
||||
Bag
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-person-stalker"></i>
|
||||
Friends
|
||||
<span class="badge badge-danger">0</span>
|
||||
</div>
|
||||
<i class="icon-person-stalker"></i>
|
||||
Friends
|
||||
<span class="badge badge-danger">0</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
@@ -111,9 +113,7 @@
|
||||
</div>
|
||||
|
||||
<div href="#" class="item">
|
||||
<div class="item-content">
|
||||
Not a link so no default right arrow
|
||||
</div>
|
||||
Not a link so no default right arrow
|
||||
</div>
|
||||
|
||||
<a href="#" class="item">
|
||||
@@ -133,34 +133,34 @@
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
<a href="#" class="item">
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content slide-left">
|
||||
Computers
|
||||
<span class="badge">Badge</span>
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item">
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content slide-left">
|
||||
Monitors
|
||||
<span class="badge">6</span>
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item">
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content slide-left">
|
||||
Multiple Badges
|
||||
<span class="badge">62</span>
|
||||
<span class="badge">4</span>
|
||||
<span class="badge">143</span>
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
@@ -168,50 +168,52 @@
|
||||
</div>
|
||||
|
||||
<h3>List with padding</h3>
|
||||
<div class="list padding">
|
||||
<div class="padding">
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="item">
|
||||
<div class="item-content slide-right">
|
||||
Madison, WI
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content slide-right">
|
||||
Madison, WI
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
List Divider
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item-divider">
|
||||
List Divider
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content slide-left">
|
||||
Driving Directions
|
||||
</div>
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<a href="#" class="item">
|
||||
<div class="item-content slide-left">
|
||||
Driving Directions
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item">
|
||||
<div class="item-content">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>List with card</h3>
|
||||
<div class="list card">
|
||||
|
||||
<a href="#" class="item">
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content slide-right">
|
||||
Madison, WI
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item">
|
||||
<a href="#" class="item item-slider">
|
||||
<div class="item-content slide-left">
|
||||
Driving Directions
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
@@ -229,37 +231,33 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
<div class="list">
|
||||
|
||||
<div class="item-divider">
|
||||
Without .item-content
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content slide-left">
|
||||
<i class="icon-heart brand-danger"></i>
|
||||
Madison, WI
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
<i class="icon-heart brand-danger"></i>
|
||||
Madison, WI
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content slide-right">
|
||||
<i class="icon-image brand-warning"></i>
|
||||
Driving Directions
|
||||
</div>
|
||||
<i class="icon-image brand-warning"></i>
|
||||
Driving Directions
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left">
|
||||
<div class="item-content">
|
||||
<i class="icon-ios7-cog gray"></i>
|
||||
Settings
|
||||
</div>
|
||||
<a href="#" class="item item-icon-left item-icon-right">
|
||||
<i class="icon-ios7-cog gray"></i>
|
||||
Settings
|
||||
<i class="icon-ios7-information-outline"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right">
|
||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||
<div class="item-content">
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
@@ -267,18 +265,18 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right">
|
||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||
<div class="item-content slide-left">
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right">
|
||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||
<div class="item-content slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
@@ -288,7 +286,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding">
|
||||
<div class="list">
|
||||
|
||||
<div class="list-header">
|
||||
Me List Header
|
||||
@@ -313,27 +311,43 @@
|
||||
</div>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Default has no wrap! This is a list item with really really really really really
|
||||
really really really really long long long long long long
|
||||
text text text texxxxxttt text testy text!!!
|
||||
<i class="icon-chevron-right"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right item-text-wrap">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Assigned "item-text-wrap". This is a list item with really really really really really
|
||||
really really really really long long long long long long
|
||||
text text text texxxxxttt text testy text!!!
|
||||
<i class="icon-chevron-right"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right item-slider">
|
||||
<div class="item-content slide-left slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Default has no wrap! This is a list item with really really really really really
|
||||
Default no wrap and has item-content! This is a list item with really really really really really
|
||||
really really really really long long long long long long
|
||||
text text text texxxxxttt text testy text!!!
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-icon-left item-icon-right">
|
||||
<div class="item-content item-text-wrap slide-left slide-right">
|
||||
<a href="#" class="item item-icon-left item-icon-right item-text-wrap item-slider">
|
||||
<div class="item-content slide-left slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Assigned "item-text-wrap". This is a list item with really really really really really
|
||||
Assigned "item-text-wrap" and has item-content. This is a list item with really really really really really
|
||||
really really really really long long long long long long
|
||||
text text text texxxxxttt text testy text!!!
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="item-buttons">
|
||||
<div class="item-options">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
@@ -348,7 +362,7 @@
|
||||
<h3>Thumbnails .item-thumbnail</h3>
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="item item-thumbnail">
|
||||
<a href="#" class="item item-avitar">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<h2>Pretty Hate Machine</h2>
|
||||
@@ -356,7 +370,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-thumbnail">
|
||||
<a href="#" class="item item-avitar">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<h2>Nevermind</h2>
|
||||
@@ -364,7 +378,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-thumbnail">
|
||||
<a href="#" class="item item-avitar">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<h2>License To Ill</h2>
|
||||
@@ -372,7 +386,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-thumbnail">
|
||||
<a href="#" class="item item-avitar">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<h2>Dookie</h2>
|
||||
@@ -382,10 +396,10 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Large Thumbnails .item-thumbnail-lrg</h3>
|
||||
<h3>Large Thumbnails .item-thumbnail-left and .item-thumbnail-right</h3>
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="item item-thumbnail-lrg">
|
||||
<a href="#" class="item item-thumbnail-left">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<h2>Pretty Hate Machine</h2>
|
||||
@@ -393,7 +407,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-thumbnail-lrg">
|
||||
<a href="#" class="item item-thumbnail-left">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<h2>Nevermind</h2>
|
||||
@@ -401,7 +415,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-thumbnail-lrg">
|
||||
<a href="#" class="item item-thumbnail-right">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<h2>License To Ill</h2>
|
||||
@@ -409,7 +423,7 @@
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="item item-thumbnail-lrg">
|
||||
<a href="#" class="item item-thumbnail-right">
|
||||
<div class="item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<h2>Dookie</h2>
|
||||
|
||||
Reference in New Issue
Block a user