From ac7c7782ff0681e6f192e4f0b9858af753cb7234 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Thu, 29 Nov 2018 16:52:44 +0100 Subject: [PATCH] Remove animation on the sidebar for accessibility purpose MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/apps.scss | 28 ++++++---------------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/core/css/apps.scss b/core/css/apps.scss index 494502e8f0..43055680e2 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -171,16 +171,12 @@ kbd { top: 22px; } - /* hide and animate deletion/collapse of subitems */ + /* hide deletion/collapse of subitems */ &.deleted, &.collapsible:not(.open) { > ul { - opacity: 0; - max-height: 0; - overflow-y: hidden; - /* bezier override the hide/slow effect due to the 2000 max-height */ - transition: max-height 1000ms cubic-bezier(0, 1, 0, 1), - opacity 250ms ease-in-out; + // NO ANIMATE because if not really hidden, we can still tab through it + display: none; } } @@ -205,10 +201,6 @@ kbd { > ul { flex: 0 1 auto; 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; @@ -387,23 +379,15 @@ kbd { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); - z-index: 50; + z-index: 105; // above a, under button + background-color: var(--color-main-background); + transition: opacity $animation-quick ease-in-out; } /* force padding on link no matter if 'a' has an icon class */ > a:first-child { padding-left: 44px; } - &:before, - > a { - transition: background-position 100ms ease-in-out, - transform 250ms ease-in-out, - opacity 100ms ease-in-out; - } - &:hover > a, - &:focus > a { - background-position-x: -50px; - } &:hover, &:focus { &:before {