Fix editable entry design and flex
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
04929640ac
commit
da232d4ce7
|
@ -187,6 +187,16 @@ kbd {
|
||||||
/* fix the flex positionning of the li parent */
|
/* fix the flex positionning of the li parent */
|
||||||
top: 44px;
|
top: 44px;
|
||||||
}
|
}
|
||||||
|
/* Show edit field if editing */
|
||||||
|
&.editing {
|
||||||
|
> a,
|
||||||
|
> .app-navigation-entry-utils {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.app-navigation-entry-edit {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.hidden {
|
&.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -205,11 +215,11 @@ kbd {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -286,7 +296,8 @@ kbd {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.app-navigation-entry-utils-menu-button {
|
.app-navigation-entry-utils-menu-button {
|
||||||
button {
|
/* Prevent bg img override if an icon class is set */
|
||||||
|
button:not([class^='icon-']):not([class*=' icon-']) {
|
||||||
background-image: url('../img/actions/more.svg?v=1');
|
background-image: url('../img/actions/more.svg?v=1');
|
||||||
}
|
}
|
||||||
&:hover button,
|
&:hover button,
|
||||||
|
@ -310,19 +321,25 @@ kbd {
|
||||||
.app-navigation-entry-edit {
|
.app-navigation-entry-edit {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
display: inline-block;
|
display: none;
|
||||||
height: 39px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
form {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
input {
|
input {
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
width: calc(100% - 36px);
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
float: left;
|
float: left;
|
||||||
border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
|
border: 1px solid rgba(nc-lighten($color-main-text, 73%), 0.9);
|
||||||
}
|
}
|
||||||
|
input[type='text'] {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1 1 0;
|
||||||
|
}
|
||||||
button,
|
button,
|
||||||
input[type='submit'] {
|
input[type='submit'] {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
|
@ -341,7 +358,7 @@ kbd {
|
||||||
* Deleted entries with undo button
|
* Deleted entries with undo button
|
||||||
*/
|
*/
|
||||||
.app-navigation-entry-deleted {
|
.app-navigation-entry-deleted {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.app-navigation-entry-deleted-description {
|
.app-navigation-entry-deleted-description {
|
||||||
|
@ -350,20 +367,14 @@ kbd {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
flex: 1 1 0;
|
||||||
width: calc(100% - 49px);
|
|
||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
.app-navigation-entry-deleted-button {
|
.app-navigation-entry-deleted-button {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
width: 44px;
|
width: 44px;
|
||||||
line-height: 44px;
|
line-height: 44px;
|
||||||
border: 0;
|
|
||||||
display: inline-block;
|
|
||||||
background-color: transparent;
|
|
||||||
opacity: .5;
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue