Delete and edit animation

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-09-10 15:26:20 +02:00
parent da232d4ce7
commit 76f055d7d3
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
1 changed files with 28 additions and 10 deletions

View File

@ -187,14 +187,26 @@ kbd {
/* fix the flex positionning of the li parent */
top: 44px;
}
/* Show edit field if editing */
&.editing {
/* Show edit/undo field if editing/deleted */
&.editing,
&.deleted {
> a,
> .app-navigation-entry-utils {
display: none;
//display: none;
//transform: translateX(100%);
}
}
&.editing {
.app-navigation-entry-edit {
display: block;
//display: block;
transform: translateX(0);
}
}
&.deleted {
.app-navigation-entry-deleted {
//display: inline-flex;
transform: translateX(0);
}
}
}
@ -321,8 +333,12 @@ kbd {
.app-navigation-entry-edit {
padding-left: 5px;
padding-right: 5px;
display: none;
width: 100%;
display: block;
width: calc(100% - 1px); /* Avoid border overlapping */
transition: transform 250ms ease-in-out;
transform: translateX(250px);
position: absolute;
background-color: $color-main-background;
form {
display: inline-flex;
width: 100%;
@ -333,8 +349,7 @@ kbd {
padding: 5px;
margin-right: 0;
height: 38px;
float: left;
border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
border: 1px solid nc-darken($color-main-background, 8%);
}
input[type='text'] {
width: 100%;
@ -344,7 +359,6 @@ kbd {
input[type='submit'] {
width: 36px;
height: 38px;
float: left;
}
.icon-checkmark {
border-bottom-left-radius: 0;
@ -360,7 +374,11 @@ kbd {
.app-navigation-entry-deleted {
display: inline-flex;
height: 44px;
width: 100%;
width: calc(100% - 1px); /* Avoid border overlapping */
transition: transform 250ms ease-in-out;
transform: translateX(250px);
position: absolute;
background-color: $color-main-background;
.app-navigation-entry-deleted-description {
padding-left: 12px;
position: relative;