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