List item left side button fixes

This commit is contained in:
Max Lynch
2013-10-11 10:26:02 -05:00
parent 82ba734a73
commit 8f718c6086
3 changed files with 82 additions and 9 deletions

27
dist/ionic-ios7.css vendored
View File

@ -941,6 +941,9 @@ address {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #52a329; }
/**
* An individual list item.
*/
.list-item {
position: relative;
display: block;
@ -1070,12 +1073,21 @@ a.list-item {
a.list-item:hover, a.list-item:focus {
text-decoration: none; }
/**
* List editing styles. These trigger when the entire list goes into
* "edit mode"
*/
.list-editing .list-item-content {
margin-left: 48px; }
margin-left: 30px; }
.list-editing .list-item-edit {
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 {
position: relative;
background-color: #fff;
@ -1088,6 +1100,10 @@ a.list-item {
.list-item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
/**
* The left-side edit area of a complex list item. This area shows
* whe the list item is in edit mode.
*/
.list-item-edit {
position: absolute;
z-index: 0;
@ -1098,10 +1114,16 @@ a.list-item {
line-height: 100%;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.list-item-edit .button {
height: 100%; }
.list-item-edit i {
color: #ef4e3a;
font-size: 24px; }
/**
* The hidden right-side buttons that can be exposed under a list item
* with dragging.
*/
.list-item-buttons {
position: absolute;
z-index: 0;
@ -1113,6 +1135,9 @@ a.list-item {
border-radius: 0;
border: none; }
/**
* A list divider.
*/
.list-divider {
padding: 5px 15px;
background-color: whitesmoke;

27
dist/ionic.css vendored
View File

@ -2028,6 +2028,9 @@ address {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
border-color: #52a329; }
/**
* An individual list item.
*/
.list-item {
position: relative;
display: block;
@ -2157,12 +2160,21 @@ a.list-item {
a.list-item:hover, a.list-item:focus {
text-decoration: none; }
/**
* List editing styles. These trigger when the entire list goes into
* "edit mode"
*/
.list-editing .list-item-content {
margin-left: 48px; }
margin-left: 30px; }
.list-editing .list-item-edit {
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 {
position: relative;
background-color: #fff;
@ -2175,6 +2187,10 @@ a.list-item {
.list-item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
/**
* The left-side edit area of a complex list item. This area shows
* whe the list item is in edit mode.
*/
.list-item-edit {
position: absolute;
z-index: 0;
@ -2185,10 +2201,16 @@ a.list-item {
line-height: 100%;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.list-item-edit .button {
height: 100%; }
.list-item-edit i {
color: #ef4e3a;
font-size: 24px; }
/**
* The hidden right-side buttons that can be exposed under a list item
* with dragging.
*/
.list-item-buttons {
position: absolute;
z-index: 0;
@ -2200,6 +2222,9 @@ a.list-item {
border-radius: 0;
border: none; }
/**
* A list divider.
*/
.list-divider {
padding: 5px 15px;
background-color: whitesmoke;

View File

@ -10,9 +10,9 @@
}
}
// Individual list items
// -------------------------
/**
* An individual list item.
*/
.list-item {
position: relative;
display: block;
@ -65,6 +65,7 @@
}
}
// Different themes for list items
&.list-item-default { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
&.list-item-secondary { @include list-item-style-active($brand-default, $gray-dark, $gray-dark); }
&.list-item-primary { @include list-item-style-active($brand-primary, $gray-dark, $white); }
@ -88,9 +89,13 @@ a.list-item {
}
}
/**
* List editing styles. These trigger when the entire list goes into
* "edit mode"
*/
.list-editing {
.list-item-content {
margin-left: 48px;
margin-left: 30px;
}
.list-item-edit {
left: 0px;
@ -99,6 +104,12 @@ a.list-item {
}
/**
* 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 {
position: relative;
@ -120,6 +131,10 @@ a.list-item {
-webkit-transition: -webkit-transform 0.1s ease-in-out;
}
/**
* The left-side edit area of a complex list item. This area shows
* whe the list item is in edit mode.
*/
.list-item-edit {
position: absolute;
z-index: 0;
@ -132,12 +147,20 @@ a.list-item {
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
.button {
height: 100%;
}
i {
color: $brand-danger;
font-size: 24px;
}
}
/**
* The hidden right-side buttons that can be exposed under a list item
* with dragging.
*/
.list-item-buttons {
position: absolute;
z-index: 0;
@ -153,6 +176,9 @@ a.list-item {
}
/**
* A list divider.
*/
.list-divider {
padding: 5px 15px;
background-color: $list-divider-bg;
@ -161,9 +187,6 @@ a.list-item {
}
// Custom content options
// -------------------------
.list-item-heading {
margin-top: 0;
margin-bottom: 5px;