Merge pull request #8124 from nextcloud/app-nav-flex-margins-fix

[stable13] Fixed app navigation flex margins
This commit is contained in:
Roeland Jago Douma 2018-01-31 15:56:18 +01:00 committed by GitHub
commit dabce9685b
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 {
/* Ugly hack for overriding the main entry link */
padding-left: 44px !important;
@ -161,13 +160,14 @@ kbd {
/* Second level nesting for lists */
> ul {
flex: 1 0 100%;
padding-left: 62px;
width: inherit;
flex: 0 1 auto;
padding-left: 44px;
width: 100%;
transition: max-height 2000ms ease-in-out,
opacity 250ms ease-in-out;
max-height: 9999px;
opacity: 1;
position: relative;
> li {
display: inline-flex;
flex-wrap: wrap;
@ -183,19 +183,7 @@ kbd {
/* align loader */
&.icon-loading-small:after {
left: -10px;
}
/* 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 */
left: 22px; /* 44px / 2 */
}
}
}
@ -210,6 +198,7 @@ kbd {
&.icon-loading-small {
> a,
> .app-navigation-entry-bullet {
/* hide icon or bullet if loading state*/
background: none !important;
}
}
@ -222,7 +211,7 @@ kbd {
justify-content: space-between;
line-height: 44px;
min-height: 44px;
padding: 0 12px;
padding: 0 12px 0 44px;
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
@ -230,7 +219,7 @@ kbd {
color: $color-main-text;
opacity: .57;
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? */
&:first-child img {
margin-right: 11px;
@ -260,12 +249,6 @@ kbd {
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 */
> .app-navigation-entry-menu {
top: 44px;
@ -467,7 +450,7 @@ kbd {
*/
.app-navigation-entry-deleted {
display: inline-flex;
padding-left: 12px;
padding-left: 44px;
transform: translateX(250px);
.app-navigation-entry-deleted-description {
position: relative;