[stable13] backport various scss fixes #8777

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

core/css/apps.scss

@@ -199,7 +199,7 @@ kbd {
 				> a,
 				> .app-navigation-entry-bullet {
 					/* hide icon or bullet if loading state*/
-					background: none !important;
+					background: transparent !important;
 				}
 			}
 			/* Main entry link */
@@ -247,6 +247,11 @@ kbd {
 				border: none;
 				border-radius: 50%;
 				cursor: pointer;
+				transition: background 100ms ease-in-out;
+				+ a {
+					/* hide icon if bullet, can't have both */
+					background: transparent !important;
+				}
 			}
 
 			/* popover fix the flex positionning of the li parent */
@@ -303,7 +308,7 @@ kbd {
 			margin: 0;
 			z-index: 110;
 		}
-		&:after {
+		&:before {
 			position: absolute;
 			height: 44px;
 			width: 44px;
@@ -323,13 +328,14 @@ kbd {
 			-webkit-transform: rotate(-90deg);
 			-ms-transform: rotate(-90deg);
 			transform: rotate(-90deg);
+			z-index: 50;
 		}
 
 		/* force padding on link no matter if 'a' has an icon class */
 		> a:first-child {
 			padding-left: 44px;
 		}
-		&:after,
+		&:before,
 		> a {
 			transition: background 100ms ease-in-out,
 						transform 250ms ease-in-out,
@@ -341,7 +347,7 @@ kbd {
 		}
 		&:hover,
 		&:focus {
-			&:after {
+			&:before {
 				opacity: 1;
 			}
 		}