mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
list thumbnails
This commit is contained in:
Adam Bradley
205
dist/css/ionic-ios7.css
vendored
205
dist/css/ionic-ios7.css
vendored
@ -960,9 +960,6 @@ address {
|
||||
padding-bottom: 1px;
|
||||
padding-left: 0; }
|
||||
|
||||
/**
|
||||
* An individual list item.
|
||||
*/
|
||||
.list-item {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@ -1101,20 +1098,35 @@ a.list-item {
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
.list-item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 15px 45px 15px 15px;
|
||||
overflow: hidden;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
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; }
|
||||
.list-item-content h1:last-child,
|
||||
.list-item-content h2:last-child,
|
||||
.list-item-content h3:last-child,
|
||||
.list-item-content h4:last-child,
|
||||
.list-item-content h5:last-child,
|
||||
.list-item-content h6:last-child,
|
||||
.list-item-content p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.list-item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
|
||||
.list-item-content i {
|
||||
position: absolute;
|
||||
@ -1137,6 +1149,7 @@ a.list-item {
|
||||
|
||||
a .list-item-content:after,
|
||||
button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 11px;
|
||||
@ -1159,23 +1172,27 @@ a.list-icon-right .list-item-content:after,
|
||||
button.list-icon-right .list-item-content:after {
|
||||
display: none; }
|
||||
|
||||
.list-thumbnail h2 {
|
||||
overflow: hidden;
|
||||
.list-thumbnail h2,
|
||||
.list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px; }
|
||||
|
||||
.list-thumbnail p {
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
.list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
max-width: 40px;
|
||||
max-height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 4px; }
|
||||
|
||||
.list-thumbnail-lrg .list-item-content {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
|
||||
.list-thumbnail-lrg .list-item-content img:first-child, .list-thumbnail-lrg .list-item-content .list-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -1183,6 +1200,26 @@ button.list-icon-right .list-item-content:after {
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
|
||||
.list-header {
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.card.list .list-divider {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
|
||||
@ -1253,43 +1290,19 @@ button.list-icon-right .list-item-content:after {
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
/**
|
||||
* A list divider.
|
||||
*/
|
||||
.list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red; }
|
||||
|
||||
.card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red; }
|
||||
.list-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
form {
|
||||
margin: 0 0 1.42857; }
|
||||
@ -1886,11 +1899,11 @@ a.button {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
line-height: 16px;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
@ -1903,6 +1916,45 @@ a.button {
|
||||
position: relative;
|
||||
top: -1px; }
|
||||
|
||||
.badge-default {
|
||||
background: white; }
|
||||
|
||||
.badge-secondary {
|
||||
background: whitesmoke; }
|
||||
|
||||
.badge-primary {
|
||||
background: #4a87ee; }
|
||||
|
||||
.badge-info {
|
||||
background: #43cee6; }
|
||||
|
||||
.badge-success {
|
||||
background: #66cc33; }
|
||||
|
||||
.badge-warning {
|
||||
background: #f0b840; }
|
||||
|
||||
.badge-danger {
|
||||
background: #ef4e3a; }
|
||||
|
||||
.badge-dark {
|
||||
background: #444444; }
|
||||
|
||||
.badge-gray-darker {
|
||||
background: #222222; }
|
||||
|
||||
.badge-gray-dark {
|
||||
background: #333333; }
|
||||
|
||||
.badge-gray {
|
||||
background: #555555; }
|
||||
|
||||
.badge-gray-light {
|
||||
background: #999999; }
|
||||
|
||||
.badge-gray-ligher {
|
||||
background: #eeeeee; }
|
||||
|
||||
.alert {
|
||||
margin: 10px;
|
||||
padding: 8px 35px 8px 14px;
|
||||
@ -2099,6 +2151,19 @@ a.button {
|
||||
-webkit-animation: fadeIn 0.3s;
|
||||
animation: fadeIn 0.3s; }
|
||||
|
||||
@-moz-keyframes spin {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg); } }
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
.fill-icon {
|
||||
color: white !important; }
|
||||
.fill-icon:before {
|
||||
@ -2133,6 +2198,36 @@ a.button {
|
||||
.fill-icon.gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
|
||||
.icon-loading {
|
||||
font-family: 'ionicons';
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
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; }
|
||||
.icon-loading:before {
|
||||
content: "\e036"; }
|
||||
|
||||
.icon-refreshing {
|
||||
font-family: 'ionicons';
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
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; }
|
||||
.icon-refreshing:before {
|
||||
content: "\e036"; }
|
||||
|
||||
.hidden,
|
||||
.hide {
|
||||
display: none !important; }
|
||||
|
||||
180
dist/css/ionic-scoped.css
vendored
180
dist/css/ionic-scoped.css
vendored
@ -149,18 +149,10 @@
|
||||
/**
|
||||
* Modals are independent windows that slide in from off-screen.
|
||||
*/
|
||||
/**
|
||||
* An individual list item.
|
||||
*/
|
||||
/**
|
||||
* List editing styles. These trigger when the entire list goes into
|
||||
* "edit mode"
|
||||
*/
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
/**
|
||||
* The left-side edit area of a complex list item. This area shows
|
||||
* whe the list item is in edit mode.
|
||||
@ -169,15 +161,6 @@
|
||||
* The hidden right-side buttons that can be exposed under a list item
|
||||
* with dragging.
|
||||
*/
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
/**
|
||||
* A list divider.
|
||||
*/
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
/* the checkmark within the box */
|
||||
/* what the background looks like when its checked */
|
||||
/* what the checkmark looks like when its checked */
|
||||
@ -220,6 +203,19 @@
|
||||
|
||||
to {
|
||||
opacity: 1; } }
|
||||
|
||||
@-moz-keyframes spin {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg); } }
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
}
|
||||
.ionic [data-icon]:before {
|
||||
font-family: 'ionicons';
|
||||
@ -1820,14 +1816,33 @@
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
.ionic .list-item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 15px 45px 15px 15px;
|
||||
overflow: hidden;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
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 .list-item-content h1:last-child,
|
||||
.ionic .list-item-content h2:last-child,
|
||||
.ionic .list-item-content h3:last-child,
|
||||
.ionic .list-item-content h4:last-child,
|
||||
.ionic .list-item-content h5:last-child,
|
||||
.ionic .list-item-content h6:last-child,
|
||||
.ionic .list-item-content p:last-child {
|
||||
margin-bottom: 0; }
|
||||
.ionic .list-item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
.ionic .list-item-content i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -1845,6 +1860,7 @@
|
||||
left: auto; }
|
||||
.ionic a .list-item-content:after,
|
||||
.ionic button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 11px;
|
||||
@ -1865,27 +1881,48 @@
|
||||
.ionic a.list-icon-right .list-item-content:after,
|
||||
.ionic button.list-icon-right .list-item-content:after {
|
||||
display: none; }
|
||||
.ionic .list-thumbnail h2 {
|
||||
overflow: hidden;
|
||||
.ionic .list-thumbnail h2,
|
||||
.ionic .list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px; }
|
||||
.ionic .list-thumbnail p {
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
.ionic .list-thumbnail .list-item-content {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
.ionic .list-thumbnail .list-item-content img:first-child, .ionic .list-thumbnail .list-item-content .list-img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
max-width: 40px;
|
||||
max-height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 4px; }
|
||||
.ionic .list-thumbnail-lrg .list-item-content {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.ionic .list-thumbnail .list-item-content img:first-child, .ionic .list-thumbnail .list-item-content .list-img {
|
||||
.ionic .list-thumbnail-lrg .list-item-content img:first-child, .ionic .list-thumbnail-lrg .list-item-content .list-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
.ionic .list-header {
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
.ionic .list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
.ionic .card.list .list-divider {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
.ionic .list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
.ionic .list-item-reordering {
|
||||
@ -1942,30 +1979,17 @@
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
.ionic .list-header {
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
.ionic .list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
.ionic .card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.ionic .card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
.ionic .list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red; }
|
||||
.ionic .card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
.ionic .list-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
.ionic form {
|
||||
margin: 0 0 1.42857; }
|
||||
.ionic legend {
|
||||
@ -2577,11 +2601,11 @@
|
||||
.ionic .badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
line-height: 16px;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
@ -2592,6 +2616,32 @@
|
||||
.ionic .button .badge {
|
||||
position: relative;
|
||||
top: -1px; }
|
||||
.ionic .badge-default {
|
||||
background: white; }
|
||||
.ionic .badge-secondary {
|
||||
background: whitesmoke; }
|
||||
.ionic .badge-primary {
|
||||
background: #4a87ee; }
|
||||
.ionic .badge-info {
|
||||
background: #43cee6; }
|
||||
.ionic .badge-success {
|
||||
background: #66cc33; }
|
||||
.ionic .badge-warning {
|
||||
background: #f0b840; }
|
||||
.ionic .badge-danger {
|
||||
background: #ef4e3a; }
|
||||
.ionic .badge-dark {
|
||||
background: #444444; }
|
||||
.ionic .badge-gray-darker {
|
||||
background: #222222; }
|
||||
.ionic .badge-gray-dark {
|
||||
background: #333333; }
|
||||
.ionic .badge-gray {
|
||||
background: #555555; }
|
||||
.ionic .badge-gray-light {
|
||||
background: #999999; }
|
||||
.ionic .badge-gray-ligher {
|
||||
background: #eeeeee; }
|
||||
.ionic .alert {
|
||||
margin: 10px;
|
||||
padding: 8px 35px 8px 14px;
|
||||
@ -2764,6 +2814,34 @@
|
||||
background: #999999; }
|
||||
.ionic .fill-icon.gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
.ionic .icon-loading {
|
||||
font-family: 'ionicons';
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
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; }
|
||||
.ionic .icon-loading:before {
|
||||
content: "\e036"; }
|
||||
.ionic .icon-refreshing {
|
||||
font-family: 'ionicons';
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
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; }
|
||||
.ionic .icon-refreshing:before {
|
||||
content: "\e036"; }
|
||||
.ionic .hidden,
|
||||
.ionic .hide {
|
||||
display: none !important; }
|
||||
|
||||
205
dist/css/ionic.css
vendored
205
dist/css/ionic.css
vendored
@ -2103,9 +2103,6 @@ address {
|
||||
padding-bottom: 1px;
|
||||
padding-left: 0; }
|
||||
|
||||
/**
|
||||
* An individual list item.
|
||||
*/
|
||||
.list-item {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@ -2244,20 +2241,35 @@ a.list-item {
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
.list-item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 15px 45px 15px 15px;
|
||||
overflow: hidden;
|
||||
padding: 15px 40px 15px 15px;
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
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; }
|
||||
.list-item-content h1:last-child,
|
||||
.list-item-content h2:last-child,
|
||||
.list-item-content h3:last-child,
|
||||
.list-item-content h4:last-child,
|
||||
.list-item-content h5:last-child,
|
||||
.list-item-content h6:last-child,
|
||||
.list-item-content p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.list-item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal; }
|
||||
|
||||
.list-item-content i {
|
||||
position: absolute;
|
||||
@ -2280,6 +2292,7 @@ a.list-item {
|
||||
|
||||
a .list-item-content:after,
|
||||
button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 11px;
|
||||
@ -2302,23 +2315,27 @@ a.list-icon-right .list-item-content:after,
|
||||
button.list-icon-right .list-item-content:after {
|
||||
display: none; }
|
||||
|
||||
.list-thumbnail h2 {
|
||||
overflow: hidden;
|
||||
.list-thumbnail h2,
|
||||
.list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px; }
|
||||
|
||||
.list-thumbnail p {
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: 70px;
|
||||
min-height: 70px; }
|
||||
.list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
max-width: 40px;
|
||||
max-height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 4px; }
|
||||
|
||||
.list-thumbnail-lrg .list-item-content {
|
||||
padding-left: 95px;
|
||||
min-height: 80px; }
|
||||
.list-thumbnail .list-item-content img:first-child, .list-thumbnail .list-item-content .list-img {
|
||||
.list-thumbnail-lrg .list-item-content img:first-child, .list-thumbnail-lrg .list-item-content .list-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -2326,6 +2343,26 @@ button.list-icon-right .list-item-content:after {
|
||||
max-height: 80px;
|
||||
width: 100%; }
|
||||
|
||||
.list-header {
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.card.list .list-divider {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
|
||||
@ -2396,43 +2433,19 @@ button.list-icon-right .list-item-content:after {
|
||||
border: none;
|
||||
border-radius: 0; }
|
||||
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
margin-top: 20px;
|
||||
padding: 5px 15px;
|
||||
background-color: transparent;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
/**
|
||||
* A list divider.
|
||||
*/
|
||||
.list-divider {
|
||||
margin: -1px;
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
background-color: whitesmoke;
|
||||
box-shadow: inset 0 0 1px #666666;
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red; }
|
||||
|
||||
.card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red; }
|
||||
.list-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px; }
|
||||
|
||||
form {
|
||||
margin: 0 0 1.42857; }
|
||||
@ -3107,11 +3120,11 @@ a.button {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
min-width: 10px;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
line-height: 16px;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
@ -3124,6 +3137,45 @@ a.button {
|
||||
position: relative;
|
||||
top: -1px; }
|
||||
|
||||
.badge-default {
|
||||
background: white; }
|
||||
|
||||
.badge-secondary {
|
||||
background: whitesmoke; }
|
||||
|
||||
.badge-primary {
|
||||
background: #4a87ee; }
|
||||
|
||||
.badge-info {
|
||||
background: #43cee6; }
|
||||
|
||||
.badge-success {
|
||||
background: #66cc33; }
|
||||
|
||||
.badge-warning {
|
||||
background: #f0b840; }
|
||||
|
||||
.badge-danger {
|
||||
background: #ef4e3a; }
|
||||
|
||||
.badge-dark {
|
||||
background: #444444; }
|
||||
|
||||
.badge-gray-darker {
|
||||
background: #222222; }
|
||||
|
||||
.badge-gray-dark {
|
||||
background: #333333; }
|
||||
|
||||
.badge-gray {
|
||||
background: #555555; }
|
||||
|
||||
.badge-gray-light {
|
||||
background: #999999; }
|
||||
|
||||
.badge-gray-ligher {
|
||||
background: #eeeeee; }
|
||||
|
||||
.alert {
|
||||
margin: 10px;
|
||||
padding: 8px 35px 8px 14px;
|
||||
@ -3371,6 +3423,19 @@ a.button {
|
||||
-webkit-animation: fadeIn 0.3s;
|
||||
animation: fadeIn 0.3s; }
|
||||
|
||||
@-moz-keyframes spin {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg); } }
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg); } }
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
.fill-icon {
|
||||
color: white !important; }
|
||||
.fill-icon:before {
|
||||
@ -3405,6 +3470,36 @@ a.button {
|
||||
.fill-icon.gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
|
||||
.icon-loading {
|
||||
font-family: 'ionicons';
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
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; }
|
||||
.icon-loading:before {
|
||||
content: "\e036"; }
|
||||
|
||||
.icon-refreshing {
|
||||
font-family: 'ionicons';
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
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; }
|
||||
.icon-refreshing:before {
|
||||
content: "\e036"; }
|
||||
|
||||
.hidden,
|
||||
.hide {
|
||||
display: none !important; }
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
|
||||
// Cards
|
||||
// --------------------------------------------------
|
||||
|
||||
.card {
|
||||
margin: $content-padding;
|
||||
border: none;
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
.list {
|
||||
|
||||
// List
|
||||
// -------------------------------
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// No need to set list-style: none; since .list-item is block level
|
||||
@ -11,9 +14,10 @@
|
||||
// make room for the list item borders
|
||||
}
|
||||
|
||||
/**
|
||||
* An individual list item.
|
||||
*/
|
||||
|
||||
// List Item
|
||||
// -------------------------------
|
||||
|
||||
.list-item {
|
||||
position: relative;
|
||||
|
||||
@ -86,27 +90,50 @@ a.list-item {
|
||||
}
|
||||
|
||||
|
||||
// List Item Content
|
||||
// -------------------------------
|
||||
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
.list-item-content {
|
||||
/**
|
||||
* The content area of a complex list item. This area can
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
position: relative;
|
||||
|
||||
z-index: 2;
|
||||
//margin: $list-item-border-width * -1;
|
||||
padding: $list-item-padding ($list-item-padding * 3) $list-item-padding $list-item-padding;
|
||||
overflow: hidden;
|
||||
padding: $list-item-padding (($list-item-padding * 3) - 5) $list-item-padding $list-item-padding;
|
||||
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 0 $list-item-border-width #666;
|
||||
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;
|
||||
|
||||
h1:last-child,
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child,
|
||||
h6:last-child,
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-text-wrap {
|
||||
overflow: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
// List Icons
|
||||
// -------------------------------
|
||||
|
||||
.list-item-content i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -134,6 +161,7 @@ a.list-item {
|
||||
|
||||
a .list-item-content:after,
|
||||
button .list-item-content:after {
|
||||
/* By default, both <a> and <button> have right side arrow icons */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $list-item-padding - 4;
|
||||
@ -162,35 +190,85 @@ button.list-icon-right {
|
||||
}
|
||||
|
||||
|
||||
.list-thumbnail h2 {
|
||||
overflow: hidden;
|
||||
// List Thumbnails
|
||||
// -------------------------------
|
||||
|
||||
.list-thumbnail h2,
|
||||
.list-thumbnail-lrg h2 {
|
||||
margin: 0 0 8px 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.list-thumbnail p {
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: $list-thumbnail-width + ($list-item-padding * 2);
|
||||
min-height: $list-thumbnail-width + ($list-item-padding * 2);
|
||||
|
||||
img:first-child, .list-img {
|
||||
position: absolute;
|
||||
top: $list-item-padding;
|
||||
left: $list-item-padding;
|
||||
max-width: $list-thumbnail-width;
|
||||
max-height: $list-thumbnail-height;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-thumbnail .list-item-content {
|
||||
padding-left: $list-thumbnail-width + $list-item-padding;
|
||||
min-height: $list-thumbnail-width;
|
||||
.list-thumbnail-lrg .list-item-content {
|
||||
padding-left: $list-thumbnail-lrg-width + $list-item-padding;
|
||||
min-height: $list-thumbnail-lrg-height;
|
||||
|
||||
img:first-child, .list-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: $list-thumbnail-width;
|
||||
max-height: $list-thumbnail-width;
|
||||
max-width: $list-thumbnail-lrg-width;
|
||||
max-height: $list-thumbnail-lrg-height;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// List Header
|
||||
// -------------------------------
|
||||
|
||||
.list-header {
|
||||
margin-top: $list-header-margin-top;
|
||||
padding: $list-header-padding;
|
||||
background-color: $list-header-bg;
|
||||
color: $list-header-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
// List Divider
|
||||
// -------------------------------
|
||||
|
||||
.list-divider {
|
||||
margin: $list-item-border-width * -1;
|
||||
padding: $list-divider-padding;
|
||||
border: none;
|
||||
background-color: $list-divider-bg;
|
||||
box-shadow: inset 0 0 $list-item-border-width #666;
|
||||
color: $list-divider-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.card.list .list-divider {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// inset so they layout the same as list items
|
||||
.list-divider,
|
||||
.list-header {
|
||||
//margin-left: $list-item-border-width * -1;
|
||||
//margin-right: $list-item-border-width * -1;
|
||||
}
|
||||
|
||||
|
||||
// List Animations
|
||||
// -------------------------------
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out;
|
||||
}
|
||||
@ -282,40 +360,15 @@ button.list-icon-right {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A list header.
|
||||
*/
|
||||
.list-header {
|
||||
margin-top: $list-header-margin-top;
|
||||
padding: $list-header-padding;
|
||||
background-color: $list-header-bg;
|
||||
color: $list-header-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
// List Refresher
|
||||
// -------------------------------
|
||||
|
||||
|
||||
/**
|
||||
* A list divider.
|
||||
*/
|
||||
.list-divider {
|
||||
margin: $list-item-border-width * -1;
|
||||
padding: $list-divider-padding;
|
||||
border: none;
|
||||
background-color: $list-divider-bg;
|
||||
box-shadow: inset 0 0 $list-item-border-width #666;
|
||||
color: $list-divider-color;
|
||||
font-weight: bold;
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red;
|
||||
}
|
||||
.card.list .list-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// inset so they layout the same as list items
|
||||
.list-divider,
|
||||
.list-header {
|
||||
//margin-left: $list-item-border-width * -1;
|
||||
//margin-right: $list-item-border-width * -1;
|
||||
.list-refreshing {
|
||||
}
|
||||
|
||||
|
||||
@ -325,13 +378,8 @@ button.list-icon-right {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
/**
|
||||
* List refreser elements
|
||||
*/
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red;
|
||||
}
|
||||
.list-refreshing {
|
||||
.list-label-right {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -381,7 +381,11 @@ $list-dark-border: $brand-dark;
|
||||
|
||||
$list-icon-font-size: 28px !default;
|
||||
|
||||
$list-thumbnail-width: 80px !default;
|
||||
$list-thumbnail-width: 40px !default;
|
||||
$list-thumbnail-height: 40px !default;
|
||||
|
||||
$list-thumbnail-lrg-width: 80px !default;
|
||||
$list-thumbnail-lrg-height: 80px !default;
|
||||
|
||||
|
||||
// Icons
|
||||
@ -435,8 +439,9 @@ $badge-bg: $gray-light !default;
|
||||
$badge-active-color: $link-color !default;
|
||||
$badge-active-bg: #fff !default;
|
||||
|
||||
$badge-font-size: 14px !default;
|
||||
$badge-line-height: 16px !default;
|
||||
$badge-font-weight: bold !default;
|
||||
$badge-line-height: 1 !default;
|
||||
$badge-border-radius: 10px !default;
|
||||
|
||||
|
||||
|
||||
169
test/lists.html
169
test/lists.html
@ -16,6 +16,94 @@
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="list-divider">
|
||||
Work
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-email"></i>
|
||||
Check mail
|
||||
<span class="badge badge-info">5</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-chatbubble-working"></i>
|
||||
Call Ma
|
||||
<span class="list-label-right">
|
||||
Cell
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-mic-a"></i>
|
||||
Record album
|
||||
<span class="list-label-right">
|
||||
Grammy
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-flask"></i>
|
||||
Breaking Bad
|
||||
<span class="list-label-right">
|
||||
Blue, yellow, pink
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="list-divider">
|
||||
Leisure
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-game-controller-b"></i>
|
||||
Games
|
||||
<span class="list-label-right">
|
||||
Super Mario
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-music-note"></i>
|
||||
Music
|
||||
<span class="list-label-right">
|
||||
JT
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-bag"></i>
|
||||
Shopping
|
||||
<span class="list-label-right">
|
||||
Bag
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-person-stalker"></i>
|
||||
Friends
|
||||
<span class="badge badge-danger">0</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="list-header">
|
||||
@ -36,8 +124,8 @@
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
Custom Right Icon
|
||||
<i class="icon-ios7-information-outline"></i>
|
||||
Processing Icon
|
||||
<i class="icon-loading"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -202,17 +290,21 @@
|
||||
|
||||
<div class="list padding">
|
||||
|
||||
<div class="list-header">
|
||||
Me List Header
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
Icon is filled!!
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
.fill-icon
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -223,7 +315,20 @@
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
This is a list item with really really really really really
|
||||
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>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content list-item-text-wrap slide-left slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Assigned "list-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>
|
||||
@ -240,11 +345,12 @@
|
||||
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
|
||||
</div>
|
||||
|
||||
<h3>Thumbnails .list-thumbnail</h3>
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<h2>Pretty Hate Machine</h2>
|
||||
<p>Nine Inch Nails</p>
|
||||
</div>
|
||||
@ -252,15 +358,7 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
|
||||
<h2>Siamese Dream</h2>
|
||||
<p>Smashing Pumpkins</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<h2>Nevermind</h2>
|
||||
<p>Nirvana</p>
|
||||
</div>
|
||||
@ -268,7 +366,7 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<h2>License To Ill</h2>
|
||||
<p>Bestie Boys</p>
|
||||
</div>
|
||||
@ -276,7 +374,44 @@
|
||||
|
||||
<a href="#" class="list-item list-thumbnail">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<h2>Dookie</h2>
|
||||
<p>Green Day</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<h3>Large Thumbnails .list-thumbnail-lrg</h3>
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="list-item list-thumbnail-lrg">
|
||||
<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-thumbnail-lrg">
|
||||
<div class="list-item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<h2>Nevermind</h2>
|
||||
<p>Nirvana</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail-lrg">
|
||||
<div class="list-item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<h2>License To Ill</h2>
|
||||
<p>Bestie Boys</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail-lrg">
|
||||
<div class="list-item-content">
|
||||
<img src="http://ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<h2>Dookie</h2>
|
||||
<p>Green Day</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user