diff options
| -rw-r--r-- | core/css/css-variables.scss | 2 | ||||
| -rw-r--r-- | core/css/header.scss | 100 | ||||
| -rw-r--r-- | core/css/variables.scss | 1 | ||||
| -rw-r--r-- | core/templates/layout.user.php | 4 |
4 files changed, 87 insertions, 20 deletions
diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss index a2946672294..6df2e0a3428 100644 --- a/core/css/css-variables.scss +++ b/core/css/css-variables.scss @@ -39,4 +39,6 @@ --border-radius-pill: $border-radius-pill; --font-face: $font-face; + + --animation-quick: $animation-quick; } diff --git a/core/css/header.scss b/core/css/header.scss index f2527ca3a79..e790f719a1f 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -513,25 +513,89 @@ nav[role='navigation'] { height: 20px; } - /* app title popup */ + /* App title */ li span { - display: none; + opacity: 0; position: absolute; - overflow: visible; - background-color: var(--color-main-background); - white-space: nowrap; - border: none; - border-radius: var(--border-radius); - border-top-left-radius: 0; - border-top-right-radius: 0; - color: var(--color-text-lighter); - width: auto; - left: 50%; - top: 100%; - transform: translateX(-50%); - padding: 4px 10px; - filter: drop-shadow(0 1px 10px var(--color-box-shadow)); - z-index: 100; + color: var(--color-primary-text); + bottom: -5px; + width: 100%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + } + + + /* Set up transitions for showing app titles on hover */ + li { + /* Prevent flicker effect because of low-hanging span element */ + overflow-y: hidden; + + /* App icon */ + svg, + .icon-more-white { + transition: transform var(--animation-quick) ease; + } + + /* App title */ + span { + transition: all var(--animation-quick) ease; + } + + /* Triangle */ + a::before { + transition: border var(--animation-quick) ease; + } + } + + /* Show all app titles on hovering app menu area */ + &:hover { + li { + /* Move up app icon */ + svg, + .icon-more-white { + transform: translateY(-7px); + } + + /* Show app title */ + span { + opacity: .6; + bottom: 2px; + } + + /* Prominent app title for current and hovered/focused app */ + &:hover span, + &:focus span, + .active + span { + opacity: 1; + } + + /* Smaller triangle because of limited space */ + a::before { + border-width: 5px; + } + } + } + + /* Also show app title on focusing single entry (showing all on focus is only possible with CSS4 and parent selectors) */ + li a:focus { + /* Move up app icon */ + svg, + .icon-more-white, { + transform: translateY(-7px); + } + + /* Show app title */ + & + span, + span { + opacity: 1; + bottom: 2px; + } + + /* Smaller triangle because of limited space */ + &::before { + border-width: 5px; + } } /* show triangle below active app */ @@ -549,6 +613,7 @@ nav[role='navigation'] { bottom: 0; display: none; } + /* triangle focus feedback */ li a.active::before, li:hover a::before, @@ -560,7 +625,6 @@ nav[role='navigation'] { z-index: 99; } li:hover a::before, - li:hover a::before, li a.active:hover::before, li a:focus::before { z-index: 101; diff --git a/core/css/variables.scss b/core/css/variables.scss index dffd6403471..a827629479c 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -80,6 +80,7 @@ $border-radius-pill: 100px !default; $font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default; +$animation-quick: 100ms; // various structure data $header-height: 50px; diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index d82043b2572..6f0344aa600 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -47,7 +47,7 @@ <ul id="appmenu" <?php if ($_['themingInvertMenu']) { ?>class="inverted"<?php } ?>> <?php foreach ($_['navigation'] as $entry): ?> - <li data-id="<?php p($entry['id']); ?>" class="hidden"> + <li data-id="<?php p($entry['id']); ?>" class="hidden" tabindex="-1"> <a href="<?php print_unescaped($entry['href']); ?>" <?php if ($entry['active']): ?> class="active"<?php endif; ?> aria-label="<?php p($entry['name']); ?>"> @@ -69,7 +69,7 @@ aria-haspopup="true" aria-controls="navigation" aria-expanded="false"> <a href="#" aria-label="<?php p($l->t('More apps')); ?>"> <div class="icon-more-white"></div> - <span><?php p($l->t('More apps')); ?></span> + <span><?php p($l->t('More')); ?></span> </a> </li> </ul> |