mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
List item left side button fixes
This commit is contained in:
27
dist/ionic-ios7.css
vendored
27
dist/ionic-ios7.css
vendored
@ -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
27
dist/ionic.css
vendored
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user