Awesome animation with calc

This commit is contained in:
Max Lynch
2013-10-09 21:18:46 -05:00
parent e1bfd2550e
commit 9d253231f1
3 changed files with 17 additions and 6 deletions

7
dist/ionic-ios7.css vendored
View File

@@ -1063,7 +1063,8 @@ a.list-item {
text-decoration: none; }
.list-editing .list-item-content {
left: 50px; }
left: 48px;
width: calc(100% - 48px); }
.list-editing .list-item-edit {
left: 0px;
opacity: 1; }
@@ -1073,7 +1074,9 @@ a.list-item {
background-color: #fff;
z-index: 1;
padding: 15px 15px;
-webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out; }
-webkit-transition-property: left, right, opacity, width;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in-out; }
.list-item-content > i:last-child {
float: right; }

7
dist/ionic.css vendored
View File

@@ -1151,7 +1151,8 @@ a.list-item {
text-decoration: none; }
.list-editing .list-item-content {
left: 50px; }
left: 48px;
width: calc(100% - 48px); }
.list-editing .list-item-edit {
left: 0px;
opacity: 1; }
@@ -1161,7 +1162,9 @@ a.list-item {
background-color: #fff;
z-index: 1;
padding: 15px 15px;
-webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out; }
-webkit-transition-property: left, right, opacity, width;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in-out; }
.list-item-content > i:last-child {
float: right; }

View File

@@ -90,7 +90,8 @@ a.list-item {
.list-editing {
.list-item-content {
left: 50px;
left: 48px;
width: unquote("calc(100% - 48px)");
}
.list-item-edit {
left: 0px;
@@ -107,7 +108,11 @@ a.list-item {
padding: 15px 15px;
-webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out;
-webkit-transition-property: left, right, opacity, width;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in-out;
// Align icons to the right
> i:last-child {