Merge pull request #8128 from nextcloud/forwardport-8124

Fixed app navigation flex margins
This commit is contained in:
Morris Jobke 2018-01-31 21:06:54 +01:00 committed by GitHub
commit 46a34f1e27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 26 deletions

View File

@ -118,7 +118,6 @@ kbd {
} }
} }
> a,
> .app-navigation-entry-deleted { > .app-navigation-entry-deleted {
/* Ugly hack for overriding the main entry link */ /* Ugly hack for overriding the main entry link */
padding-left: 44px !important; padding-left: 44px !important;
@ -161,13 +160,14 @@ kbd {
/* Second level nesting for lists */ /* Second level nesting for lists */
> ul { > ul {
flex: 1 0 100%; flex: 0 1 auto;
padding-left: 62px; padding-left: 44px;
width: inherit; width: 100%;
transition: max-height 2000ms ease-in-out, transition: max-height 2000ms ease-in-out,
opacity 250ms ease-in-out; opacity 250ms ease-in-out;
max-height: 9999px; max-height: 9999px;
opacity: 1; opacity: 1;
position: relative;
> li { > li {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -183,19 +183,7 @@ kbd {
/* align loader */ /* align loader */
&.icon-loading-small:after { &.icon-loading-small:after {
left: -10px; left: 22px; /* 44px / 2 */
}
/* Submenu fix for icon */
> a[class*='icon-'],
> a[style*='background-image'],
.app-navigation-entry-bullet {
margin-left: -32px; /* 44px padding - 12px padding */
}
/* Submenu fix for bullet */
> .app-navigation-entry-bullet {
left: -32px;/* 44px padding - 12px padding */
} }
} }
} }
@ -210,6 +198,7 @@ kbd {
&.icon-loading-small { &.icon-loading-small {
> a, > a,
> .app-navigation-entry-bullet { > .app-navigation-entry-bullet {
/* hide icon or bullet if loading state*/
background: none !important; background: none !important;
} }
} }
@ -222,7 +211,7 @@ kbd {
justify-content: space-between; justify-content: space-between;
line-height: 44px; line-height: 44px;
min-height: 44px; min-height: 44px;
padding: 0 12px; padding: 0 12px 0 44px;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; white-space: nowrap;
@ -230,7 +219,7 @@ kbd {
color: $color-main-text; color: $color-main-text;
opacity: .57; opacity: .57;
flex: 1 1 0; flex: 1 1 0;
z-index: 100; /* above the bullet */ z-index: 100; /* above the bullet to allow click*/
/* TODO: forbid using img as icon in menu? */ /* TODO: forbid using img as icon in menu? */
&:first-child img { &:first-child img {
margin-right: 11px; margin-right: 11px;
@ -260,12 +249,6 @@ kbd {
cursor: pointer; cursor: pointer;
} }
/* padding in case of icon or bullet */
> a[class*='icon-'],
> a[style*='background-image'] {
padding-left: 44px;
}
/* popover fix the flex positionning of the li parent */ /* popover fix the flex positionning of the li parent */
> .app-navigation-entry-menu { > .app-navigation-entry-menu {
top: 44px; top: 44px;
@ -467,7 +450,7 @@ kbd {
*/ */
.app-navigation-entry-deleted { .app-navigation-entry-deleted {
display: inline-flex; display: inline-flex;
padding-left: 12px; padding-left: 44px;
transform: translateX(250px); transform: translateX(250px);
.app-navigation-entry-deleted-description { .app-navigation-entry-deleted-description {
position: relative; position: relative;