mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
improve list icon alignments
This commit is contained in:
Adam Bradley
111
dist/css/ionic-ios7.css
vendored
111
dist/css/ionic-ios7.css
vendored
@ -1114,63 +1114,26 @@ a.list-item {
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/ }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: 60px; }
|
||||
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: 60px; }
|
||||
|
||||
.align-icon-left, .align-icon-right {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 28px; }
|
||||
|
||||
.align-icon-left {
|
||||
left: 12px; }
|
||||
.align-icon-left:after {
|
||||
padding-left: 45px; }
|
||||
.list-icon-left .list-item-content i {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
left: -12px;
|
||||
top: -13px;
|
||||
background: white;
|
||||
content: ' '; }
|
||||
top: 10.5px;
|
||||
left: 7.5px;
|
||||
font-size: 28px; }
|
||||
|
||||
.list-item:first-child .align-icon-left:after {
|
||||
display: none; }
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: 45px; }
|
||||
.list-icon-right .list-item-content i {
|
||||
position: absolute;
|
||||
top: 10.5px;
|
||||
right: 7.5px;
|
||||
font-size: 28px; }
|
||||
|
||||
.item-opened .align-icon-left:after {
|
||||
display: none; }
|
||||
|
||||
.align-icon-right {
|
||||
right: 12px; }
|
||||
.list-icon-left.list-icon-right .list-item-content i:last-child {
|
||||
left: auto; }
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
@ -2027,44 +1990,38 @@ a.button {
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
|
||||
.fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: 6px; }
|
||||
.fill-icon.align-icon-left, .fill-icon.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
font-size: 24px; }
|
||||
.fill-icon.brand-default {
|
||||
color: white !important; }
|
||||
.fill-icon:before {
|
||||
background: black;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
padding: 1px; }
|
||||
.fill-icon.brand-default:before {
|
||||
background: white; }
|
||||
.fill-icon.brand-secondary {
|
||||
.fill-icon.brand-secondary:before {
|
||||
background: whitesmoke; }
|
||||
.fill-icon.brand-primary {
|
||||
.fill-icon.brand-primary:before {
|
||||
background: #4a87ee; }
|
||||
.fill-icon.brand-info {
|
||||
.fill-icon.brand-info:before {
|
||||
background: #43cee6; }
|
||||
.fill-icon.brand-success {
|
||||
.fill-icon.brand-success:before {
|
||||
background: #66cc33; }
|
||||
.fill-icon.brand-warning {
|
||||
.fill-icon.brand-warning:before {
|
||||
background: #f0b840; }
|
||||
.fill-icon.brand-danger {
|
||||
.fill-icon.brand-danger:before {
|
||||
background: #ef4e3a; }
|
||||
.fill-icon.brand-dark {
|
||||
.fill-icon.brand-dark:before {
|
||||
background: #444444; }
|
||||
.fill-icon.gray-darker {
|
||||
.fill-icon.gray-darker:before {
|
||||
background: #222222; }
|
||||
.fill-icon.gray-dark {
|
||||
.fill-icon.gray-dark:before {
|
||||
background: #333333; }
|
||||
.fill-icon.gray {
|
||||
.fill-icon.gray:before {
|
||||
background: #555555; }
|
||||
.fill-icon.gray-light {
|
||||
.fill-icon.gray-light:before {
|
||||
background: #999999; }
|
||||
.fill-icon.gray-lighter {
|
||||
.fill-icon.gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
.fill-icon.white {
|
||||
background: white; }
|
||||
|
||||
.hidden,
|
||||
.hide {
|
||||
|
||||
107
dist/css/ionic-scoped.css
vendored
107
dist/css/ionic-scoped.css
vendored
@ -160,12 +160,6 @@
|
||||
* Slide left and right and be dragged to support different
|
||||
* UI interactions.
|
||||
*/
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
/**
|
||||
* The left-side edit area of a complex list item. This area shows
|
||||
* whe the list item is in edit mode.
|
||||
@ -1816,50 +1810,23 @@
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/ }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.ionic .list-icon-left .list-item-content {
|
||||
padding-left: 60px; }
|
||||
.ionic .list-icon-right .list-item-content {
|
||||
padding-right: 60px; }
|
||||
.ionic .align-icon-left, .ionic .align-icon-right {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 28px; }
|
||||
.ionic .align-icon-left {
|
||||
left: 12px; }
|
||||
.ionic .align-icon-left:after {
|
||||
padding-left: 45px; }
|
||||
.ionic .list-icon-left .list-item-content i {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
left: -12px;
|
||||
top: -13px;
|
||||
background: white;
|
||||
content: ' '; }
|
||||
.ionic .list-item:first-child .align-icon-left:after {
|
||||
display: none; }
|
||||
.ionic .item-opened .align-icon-left:after {
|
||||
display: none; }
|
||||
.ionic .align-icon-right {
|
||||
right: 12px; }
|
||||
top: 10.5px;
|
||||
left: 7.5px;
|
||||
font-size: 28px; }
|
||||
.ionic .list-icon-right .list-item-content {
|
||||
padding-right: 45px; }
|
||||
.ionic .list-icon-right .list-item-content i {
|
||||
position: absolute;
|
||||
top: 10.5px;
|
||||
right: 7.5px;
|
||||
font-size: 28px; }
|
||||
.ionic .list-icon-left.list-icon-right .list-item-content i:last-child {
|
||||
left: auto; }
|
||||
.ionic .list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
.ionic .list-item-reordering {
|
||||
@ -2667,44 +2634,38 @@
|
||||
animation: fadein 0.5s;
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
.ionic .fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: 6px; }
|
||||
.ionic .fill-icon.align-icon-left, .ionic .fill-icon.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
font-size: 24px; }
|
||||
.ionic .fill-icon.brand-default {
|
||||
color: white !important; }
|
||||
.ionic .fill-icon:before {
|
||||
background: black;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
padding: 1px; }
|
||||
.ionic .fill-icon.brand-default:before {
|
||||
background: white; }
|
||||
.ionic .fill-icon.brand-secondary {
|
||||
.ionic .fill-icon.brand-secondary:before {
|
||||
background: whitesmoke; }
|
||||
.ionic .fill-icon.brand-primary {
|
||||
.ionic .fill-icon.brand-primary:before {
|
||||
background: #4a87ee; }
|
||||
.ionic .fill-icon.brand-info {
|
||||
.ionic .fill-icon.brand-info:before {
|
||||
background: #43cee6; }
|
||||
.ionic .fill-icon.brand-success {
|
||||
.ionic .fill-icon.brand-success:before {
|
||||
background: #66cc33; }
|
||||
.ionic .fill-icon.brand-warning {
|
||||
.ionic .fill-icon.brand-warning:before {
|
||||
background: #f0b840; }
|
||||
.ionic .fill-icon.brand-danger {
|
||||
.ionic .fill-icon.brand-danger:before {
|
||||
background: #ef4e3a; }
|
||||
.ionic .fill-icon.brand-dark {
|
||||
.ionic .fill-icon.brand-dark:before {
|
||||
background: #444444; }
|
||||
.ionic .fill-icon.gray-darker {
|
||||
.ionic .fill-icon.gray-darker:before {
|
||||
background: #222222; }
|
||||
.ionic .fill-icon.gray-dark {
|
||||
.ionic .fill-icon.gray-dark:before {
|
||||
background: #333333; }
|
||||
.ionic .fill-icon.gray {
|
||||
.ionic .fill-icon.gray:before {
|
||||
background: #555555; }
|
||||
.ionic .fill-icon.gray-light {
|
||||
.ionic .fill-icon.gray-light:before {
|
||||
background: #999999; }
|
||||
.ionic .fill-icon.gray-lighter {
|
||||
.ionic .fill-icon.gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
.ionic .fill-icon.white {
|
||||
background: white; }
|
||||
.ionic .hidden,
|
||||
.ionic .hide {
|
||||
display: none !important; }
|
||||
|
||||
111
dist/css/ionic.css
vendored
111
dist/css/ionic.css
vendored
@ -2223,63 +2223,26 @@ a.list-item {
|
||||
z-index: 2;
|
||||
margin-top: -1px;
|
||||
padding: 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/ }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: 60px; }
|
||||
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: 60px; }
|
||||
|
||||
.align-icon-left, .align-icon-right {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
z-index: 3;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 28px; }
|
||||
|
||||
.align-icon-left {
|
||||
left: 12px; }
|
||||
.align-icon-left:after {
|
||||
padding-left: 45px; }
|
||||
.list-icon-left .list-item-content i {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 4px;
|
||||
left: -12px;
|
||||
top: -13px;
|
||||
background: white;
|
||||
content: ' '; }
|
||||
top: 10.5px;
|
||||
left: 7.5px;
|
||||
font-size: 28px; }
|
||||
|
||||
.list-item:first-child .align-icon-left:after {
|
||||
display: none; }
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: 45px; }
|
||||
.list-icon-right .list-item-content i {
|
||||
position: absolute;
|
||||
top: 10.5px;
|
||||
right: 7.5px;
|
||||
font-size: 28px; }
|
||||
|
||||
.item-opened .align-icon-left:after {
|
||||
display: none; }
|
||||
|
||||
.align-icon-right {
|
||||
right: 12px; }
|
||||
.list-icon-left.list-icon-right .list-item-content i:last-child {
|
||||
left: auto; }
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
|
||||
@ -3248,44 +3211,38 @@ a.button {
|
||||
-webkit-animation: fadein 0.5s; }
|
||||
|
||||
.fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: 6px; }
|
||||
.fill-icon.align-icon-left, .fill-icon.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
font-size: 24px; }
|
||||
.fill-icon.brand-default {
|
||||
color: white !important; }
|
||||
.fill-icon:before {
|
||||
background: black;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
padding: 1px; }
|
||||
.fill-icon.brand-default:before {
|
||||
background: white; }
|
||||
.fill-icon.brand-secondary {
|
||||
.fill-icon.brand-secondary:before {
|
||||
background: whitesmoke; }
|
||||
.fill-icon.brand-primary {
|
||||
.fill-icon.brand-primary:before {
|
||||
background: #4a87ee; }
|
||||
.fill-icon.brand-info {
|
||||
.fill-icon.brand-info:before {
|
||||
background: #43cee6; }
|
||||
.fill-icon.brand-success {
|
||||
.fill-icon.brand-success:before {
|
||||
background: #66cc33; }
|
||||
.fill-icon.brand-warning {
|
||||
.fill-icon.brand-warning:before {
|
||||
background: #f0b840; }
|
||||
.fill-icon.brand-danger {
|
||||
.fill-icon.brand-danger:before {
|
||||
background: #ef4e3a; }
|
||||
.fill-icon.brand-dark {
|
||||
.fill-icon.brand-dark:before {
|
||||
background: #444444; }
|
||||
.fill-icon.gray-darker {
|
||||
.fill-icon.gray-darker:before {
|
||||
background: #222222; }
|
||||
.fill-icon.gray-dark {
|
||||
.fill-icon.gray-dark:before {
|
||||
background: #333333; }
|
||||
.fill-icon.gray {
|
||||
.fill-icon.gray:before {
|
||||
background: #555555; }
|
||||
.fill-icon.gray-light {
|
||||
.fill-icon.gray-light:before {
|
||||
background: #999999; }
|
||||
.fill-icon.gray-lighter {
|
||||
.fill-icon.gray-lighter:before {
|
||||
background: #eeeeee; }
|
||||
.fill-icon.white {
|
||||
background: white; }
|
||||
|
||||
.hidden,
|
||||
.hide {
|
||||
|
||||
@ -1,62 +1,52 @@
|
||||
|
||||
|
||||
.fill-icon {
|
||||
background: black;
|
||||
color: white !important;
|
||||
border-radius: $icon-fill-border-radius;
|
||||
|
||||
&.align-icon-left,
|
||||
&.align-icon-right {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
padding: 4px 3px;
|
||||
width: $icon-font-size + 2;
|
||||
height: $icon-font-size + 3;
|
||||
font-size: $icon-font-size - 4;
|
||||
&:before {
|
||||
background: black;
|
||||
position: relative;
|
||||
border-radius: $icon-fill-border-radius;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
&.brand-default {
|
||||
&.brand-default:before {
|
||||
background: $brand-default;
|
||||
}
|
||||
&.brand-secondary {
|
||||
&.brand-secondary:before {
|
||||
background: $brand-secondary;
|
||||
}
|
||||
&.brand-primary {
|
||||
&.brand-primary:before {
|
||||
background: $brand-primary;
|
||||
}
|
||||
&.brand-info {
|
||||
&.brand-info:before {
|
||||
background: $brand-info;
|
||||
}
|
||||
&.brand-success {
|
||||
&.brand-success:before {
|
||||
background: $brand-success;
|
||||
}
|
||||
&.brand-warning {
|
||||
&.brand-warning:before {
|
||||
background: $brand-warning;
|
||||
}
|
||||
&.brand-danger {
|
||||
&.brand-danger:before {
|
||||
background: $brand-danger;
|
||||
}
|
||||
&.brand-dark {
|
||||
&.brand-dark:before {
|
||||
background: $brand-dark;
|
||||
}
|
||||
|
||||
&.gray-darker {
|
||||
&.gray-darker:before {
|
||||
background: $gray-darker;
|
||||
}
|
||||
&.gray-dark {
|
||||
&.gray-dark:before {
|
||||
background: $gray-dark;
|
||||
}
|
||||
&.gray {
|
||||
&.gray:before {
|
||||
background: $gray;
|
||||
}
|
||||
&.gray-light {
|
||||
&.gray-light:before {
|
||||
background: $gray-light;
|
||||
}
|
||||
&.gray-lighter {
|
||||
&.gray-lighter:before {
|
||||
background: $gray-lighter;
|
||||
}
|
||||
&.white {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
}
|
||||
@ -127,72 +127,34 @@ a.list-item {
|
||||
padding: $list-item-padding;
|
||||
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
|
||||
/* // Align icons
|
||||
> i:first-child {
|
||||
float: left;
|
||||
}
|
||||
> i:last-child {
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Make every last form element go to the right of the item
|
||||
|
||||
> .toggle:last-child, input:last-child, > button:last-child {
|
||||
float: right;
|
||||
}
|
||||
> .toggle:last-child {
|
||||
margin-top: -5px;
|
||||
}*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Left-side icon
|
||||
*/
|
||||
.list-icon-left .list-item-content {
|
||||
padding-left: $list-item-padding * 4;
|
||||
}
|
||||
padding-left: ($list-item-padding * 3);
|
||||
|
||||
/**
|
||||
* Right-side icon
|
||||
*/
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: $list-item-padding * 4;
|
||||
}
|
||||
|
||||
.align-icon-left, .align-icon-right {
|
||||
position: absolute;
|
||||
top: $list-item-padding - 4;
|
||||
z-index: 3;
|
||||
width: $icon-font-size + 4;
|
||||
height: $icon-font-size + 4;
|
||||
font-size: $icon-font-size;
|
||||
}
|
||||
|
||||
.align-icon-left {
|
||||
left: ($list-item-padding - 3);
|
||||
|
||||
&:after {
|
||||
i {
|
||||
position: absolute;
|
||||
width: $icon-font-size * 2;
|
||||
height: 4px;
|
||||
left: ($list-item-padding - 3) * -1;
|
||||
top: ($list-item-padding * -1) + 2;
|
||||
background: $list-default-background;
|
||||
content: ' ';
|
||||
top: ($list-item-padding / 2) + 3;
|
||||
left: $list-item-padding / 2;
|
||||
font-size: $icon-font-size;
|
||||
}
|
||||
}
|
||||
.list-item:first-child .align-icon-left:after {
|
||||
display: none;
|
||||
|
||||
.list-icon-right .list-item-content {
|
||||
padding-right: ($list-item-padding * 3);
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: ($list-item-padding / 2) + 3;
|
||||
right: $list-item-padding / 2;
|
||||
font-size: $icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.item-opened .align-icon-left:after {
|
||||
display: none;
|
||||
.list-icon-left.list-icon-right .list-item-content i:last-child {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.align-icon-right {
|
||||
right: $list-item-padding - 3;
|
||||
}
|
||||
|
||||
.list-item-sliding {
|
||||
-webkit-transition: -webkit-transform 0.1s ease-in-out;
|
||||
|
||||
@ -43,17 +43,17 @@
|
||||
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-right">
|
||||
Madison, WI
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right list-icon-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
Driving Directions
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
@ -63,7 +63,7 @@
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content">
|
||||
Settings
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="align-icon-left icon-heart brand-danger"></i>
|
||||
<i class="icon-heart brand-danger"></i>
|
||||
Madison, WI asdf
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
@ -83,14 +83,14 @@
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="align-icon-left icon-image brand-warning"></i>
|
||||
<i class="icon-image brand-warning"></i>
|
||||
Driving Directions
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-ios7-cog gray"></i>
|
||||
<i class="icon-ios7-cog gray"></i>
|
||||
Settings
|
||||
</div>
|
||||
</a>
|
||||
@ -101,17 +101,17 @@
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-heart brand-danger fill-icon"></i>
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="align-icon-left icon-image brand-warning fill-icon"></i>
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
@ -120,9 +120,9 @@
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -132,25 +132,27 @@
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-heart brand-danger fill-icon"></i>
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="align-icon-left icon-image brand-warning fill-icon"></i>
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left slide-right">
|
||||
<i class="align-icon-left icon-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
<i class="align-icon-right icon-chevron-right"></i>
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user