diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-12-03 10:35:31 +0300 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-01-29 10:12:03 +0300 |
commit | bb9e282e9581fc65ad4be39cd01bc578c3b0d95e (patch) | |
tree | d88dcfe8ac4b325b46473b3b519e5839ca00655e /core/css | |
parent | 198a45ff75c64d38c1ccb6bd903ee55b446177b3 (diff) |
Unify headers menu design, fix click area
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'core/css')
-rw-r--r-- | core/css/header.scss | 167 |
1 files changed, 50 insertions, 117 deletions
diff --git a/core/css/header.scss b/core/css/header.scss index 4511b44668d..82263eb14fe 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -77,6 +77,8 @@ #header { /* Header menu */ + $header-menu-entry-height: 44px; + .header-left > nav > .menu, .header-right > div > .menu { background-color: var(--color-main-background); @@ -86,10 +88,11 @@ z-index: 2000; position: absolute; max-width: 350px; - max-height: 280px; - right: 5px; + max-height: $header-menu-entry-height * 7.5; // half entry + right: 5px; // relative to parent top: $header-height; margin: 0; + -webkit-overflow-scrolling: touch; &:not(.popovermenu) { display: none; @@ -107,6 +110,51 @@ pointer-events: none; right: 10px; } + + /* Use by the apps menu and the settings right menu */ + ul { + li { + a { + display: inline-flex; + align-items: center; + height: $header-menu-entry-height; + color: var(--color-main-text); + padding: 10px 12px; + box-sizing: border-box; + opacity: .7; + white-space: nowrap; + position: relative; + width: 100%; + &:hover, + &:focus, + &:active, + &.active { + opacity: 1; + box-shadow: inset 4px 0 var(--color-primary); + } + span { + display: inline-block; + padding-bottom: 0; + color: var(--color-main-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 110px; + } + .icon-loading-small { + margin-right: 10px; + background-size: 16px 16px; + } + img, + svg { + opacity: .7; + margin-right: 10px; + height: 16px; + width: 16px; + } + } + } + } } .logo { display: inline-flex; @@ -265,81 +313,9 @@ nav[role='navigation'] { #navigation { box-sizing: border-box; - * { - box-sizing: border-box; - } - li { - display: inline-block; - } - a { - position: relative; - width: 100%; - display: inline-flex; - padding: 10px 12px; - height: 40px; - align-items: center; - span { - display: inline-block; - padding-bottom: 0; - padding-left: 10px; - color: var(--color-main-text); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 110px; - } - svg, - span { - opacity: .7; - } - &:hover svg, - &:focus svg, - &:hover span, - &:focus span { - opacity: 1; - } - &.active { - svg, span { - opacity: 1; - } - } - } - .app-icon { - margin: 0 auto; - padding: 0; - max-height: 32px; - max-width: 32px; - } - - /* loading feedback for apps */ - .app-loading { - .icon-loading-small { - display: inline !important; - position: absolute; - left: 12px; - width: 16px; - height: 16px; - } - .app-icon { - opacity: 0; - } - } - -} - -/* Apps management */ -#apps { - max-height: inherit; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; .in-header { display: none; } - ul { - display: flex; - flex-direction: column; - } } /* USER MENU -----------------------------------------------------------------*/ @@ -421,37 +397,6 @@ nav[role='navigation'] { } } -/* Settings menu */ -#expanddiv { - a { - display: inline-flex; - align-items: center; - height: 40px; - color: var(--color-main-text); - padding: 12px; - box-sizing: border-box; - opacity: .7; - white-space: nowrap; - - .icon-loading-small { - margin-right: 9px; - background-size: 16px 16px; - } - img { - margin-right: 9px; - height: 16px; - width: 16px; - } - &:hover, - &:focus, - &:active, - &.active { - opacity: 1; - box-shadow: inset 4px 0 var(--color-primary); - } - } -} - /* Apps menu */ #appmenu { display: inline-flex; @@ -532,18 +477,6 @@ nav[role='navigation'] { } } - .app-loading { - > svg { - display: none; - } - .icon-loading-small-dark { - width: 20px; - height: 20px; - display: block !important; - } - } - - /* Show all app titles on hovering app menu area */ &:hover { li { |