From 6ff81cdd4b36ff57a82c8256da4494fea9f4770c Mon Sep 17 00:00:00 2001
From: "John Molakvoæ (skjnldsv)" <skjnldsv@protonmail.com>
Date: Tue, 12 Sep 2017 16:43:28 +0200
Subject: Animation fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/apps.scss | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

(limited to 'core/css')

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 63510d1b365..0a7de8e29c7 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -113,11 +113,9 @@ kbd {
 					box-shadow: inset 2px 0 $color-primary;
 				}
 			}
-			&.open > ul {
-				display: block;
-			}
-			/* hide and animate the deletion of subitems */
-			&.deleted {
+			/* hide and animate deletion/collapse of subitems */
+			&.deleted,
+			&.collapsible:not(.open) {
 				> ul {
 					opacity: 0;
 					max-height: 0;
@@ -133,6 +131,7 @@ kbd {
 				transition: max-height 250ms cubic-bezier(0, 1, 0, 1),
 							opacity 250ms ease-in-out;
 				max-height: 2000px;
+				opacity: 1;
 				> li {
 					display: inline-flex;
 					flex-wrap: wrap;
@@ -218,12 +217,6 @@ kbd {
 				}
 			}
 		}
-
-		.collapsible.open {
-			ul {
-				display: block;
-			}
-		}
 	}
 	&.hidden {
 		display: none;
@@ -253,9 +246,6 @@ kbd {
 	 * Collapsible menus
 	 */
 	.collapsible {
-		> ul {
-			display: none;
-		}
 		&:after {
 			position: absolute;
 			height: 44px;
@@ -276,11 +266,11 @@ kbd {
 			-webkit-transform: rotate(-90deg);
 			-ms-transform: rotate(-90deg);
 			transform: rotate(-90deg);
+		}
 
-			/* force padding on link if collapse is here no matter if a has an icon class */
-			& + a {
-				padding-left: 44px;
-			}
+		/* force padding on link if collapse is here no matter if a has an icon class */
+		> a:first-child {
+			padding-left: 44px;
 		}
 		&:after,
 		> a {
-- 
cgit v1.2.3