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

View File

@ -10,9 +10,9 @@
} }
} }
// Individual list items /**
// ------------------------- * An individual list item.
*/
.list-item { .list-item {
position: relative; position: relative;
display: block; 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-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-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); } &.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-editing {
.list-item-content { .list-item-content {
margin-left: 48px; margin-left: 30px;
} }
.list-item-edit { .list-item-edit {
left: 0px; 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 { .list-item-content {
position: relative; position: relative;
@ -120,6 +131,10 @@ a.list-item {
-webkit-transition: -webkit-transform 0.1s ease-in-out; -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 { .list-item-edit {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@ -132,12 +147,20 @@ a.list-item {
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
.button {
height: 100%;
}
i { i {
color: $brand-danger; color: $brand-danger;
font-size: 24px; font-size: 24px;
} }
} }
/**
* The hidden right-side buttons that can be exposed under a list item
* with dragging.
*/
.list-item-buttons { .list-item-buttons {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@ -153,6 +176,9 @@ a.list-item {
} }
/**
* A list divider.
*/
.list-divider { .list-divider {
padding: 5px 15px; padding: 5px 15px;
background-color: $list-divider-bg; background-color: $list-divider-bg;
@ -161,9 +187,6 @@ a.list-item {
} }
// Custom content options
// -------------------------
.list-item-heading { .list-item-heading {
margin-top: 0; margin-top: 0;
margin-bottom: 5px; margin-bottom: 5px;