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);
|
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
27
dist/ionic.css
vendored
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user