Navigation flex magic

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2017-09-07 14:46:53 +02:00
parent d85781d5f4
commit 0a67e0e2a8
No known key found for this signature in database
GPG Key ID: FB5ACEED51955BF8
1 changed files with 12 additions and 20 deletions

View File

@ -101,7 +101,7 @@ kbd {
box-sizing: border-box;
> li {
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
&:focus,
&:hover,
&.active,
@ -112,6 +112,15 @@ kbd {
box-shadow: inset 2px 0 $color-primary;
}
}
/* Second level nesting for lists */
> ul {
display: none;
flex: 1 0 100%;
> li {
display: inline-flex;
flex-wrap: wrap;
}
}
}
}
li {
@ -134,6 +143,7 @@ kbd {
text-overflow: ellipsis;
color: $color-main-text;
opacity: .57;
flex: 1 1 0;
&:first-child img {
margin-bottom: -3px;
margin-right: 11px;
@ -149,22 +159,6 @@ kbd {
}
}
}
> {
/* Second level nesting for lists */
ul ul {
display: none;
li > a {
padding-left: 32px;
}
}
.with-icon ul li {
> a,
&.app-navigation-entry-loading > a {
padding-left: 68px;
background-position: 44px center;
}
}
}
&.hidden {
display: none;
}
@ -289,7 +283,7 @@ kbd {
* App navigation utils, buttons and counters for drop down menu
*/
.app-navigation-entry-utils {
flex-shrink: 0;
flex: 0 1 auto;
ul {
display: flex !important;
align-items: center;
@ -322,10 +316,8 @@ kbd {
}
.app-navigation-entry-utils-counter {
overflow: hidden;
text-overflow: hidden;
text-align: right;
font-size: 9pt;
width: 38px;
line-height: 44px;
padding: 0 12px; /* Same padding as all li > a in the app-navigation */
}