Fixed inline confirm icon index

Fixed bullet/icon combination visibility

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

2 files changed, 18 insertions, 7 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index fc255aca676..07557a03acc 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -215,7 +215,7 @@ kbd {
 				> a,
 				> .app-navigation-entry-bullet {
 					/* hide icon or bullet if loading state*/
-					background: none !important;
+					background: transparent !important;
 				}
 			}
 			/* Main entry link */
@@ -263,6 +263,12 @@ 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 */
@@ -319,7 +325,7 @@ kbd {
 			margin: 0;
 			z-index: 110;
 		}
-		&:after {
+		&:before {
 			position: absolute;
 			height: 44px;
 			width: 44px;
@@ -339,13 +345,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,
@@ -357,12 +364,15 @@ kbd {
 		}
 		&:hover,
 		&:focus {
-			&:after {
+			&:before {
 				opacity: 1;
 			}
+			.app-navigation-entry-bullet {
+				background: transparent !important;
+			}
 		}
 		&.open {
-			&:after {
+			&:before {
 				-webkit-transform: rotate(0);
 				-ms-transform: rotate(0);
 				transform: rotate(0);
@@ -449,7 +459,7 @@ kbd {
 			height: 38px;
 			flex: 0 0 36px;
 			&:not(:last-child) {
-				border-radius: 0;
+				border-radius: 0 !important;
 			}
 			&:not(:first-child) {
 				margin-left: -1px;
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index caa8209bdbd..7509575f9e5 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -219,7 +219,7 @@ input {
 			background-clip: padding-box; /* Avoid background under border */
 			background-color: $color-main-background !important;
 			opacity: 1;
-			width: 16px;
+			width: 34px;
 			padding: 7px 6px;
 			cursor: pointer;
 			&:disabled {
@@ -247,6 +247,7 @@ input {
 			+ .icon-confirm {
 				border-color: $color-primary-element !important;
 				border-left-color: transparent !important;
+				z-index: 2; /* above previous input */
 			}
 		}
 	}