Merge pull request #12559 from nextcloud/heading-menu-spacing

Better header navigation display

1 files changed, 51 insertions, 57 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index 72863696d6a..bf360843707 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -461,6 +461,9 @@ nav[role='navigation'] {
 	li {
 		position: relative;
 		cursor: pointer;
+		margin: 0 2px;
+		display: flex;
+		justify-content: center;
 
 		a {
 			position: relative;
@@ -472,82 +475,73 @@ nav[role='navigation'] {
 			justify-content: center;
 			opacity: .6;
 		}
-	}
 
-	.app-loading {
-		> svg {
-			display: none;
+		/* focused app visual feedback */
+		&:hover a,
+		a:focus,
+		a.active {
+			opacity: 1;
 		}
-		.icon-loading-small-dark {
-			width: 20px;
-			height: 20px;
-			display: block !important;
+	
+		&:hover a + span,
+		a:focus + span,
+		&:hover span,
+		&:focus span,
+		a:focus span {
+			display: inline-block;
+			text-overflow: initial;
+			width: auto;
+			overflow: hidden;
+			background-color: var(--color-primary-element);
+			padding: 0 5px;
 		}
-	}
 
-	/* focused app visual feedback */
-	li:hover a,
-	li a:focus,
-	li a.active {
-		opacity: 1;
-	}
-
-	li:hover a,
-	li a:focus {
-		+ span {
+		/* hidden apps menu */
+		img,
+		.icon-more-white {
 			display: inline-block;
+			width: 20px;
+			height: 20px;
+		}
+	
+		/* App title */
+		span {
+			opacity: 0;
+			position: absolute;
+			color: var(--color-primary-text);
+			bottom: -5px;
+			width: calc(100% - 4px);
+			text-align: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			transition: all var(--animation-quick) ease;
 		}
-	}
-
-	li:hover span,
-	li:focus span,
-	li a:focus span {
-		display: inline-block;
-	}
-
-	/* hidden apps menu */
-	li img,
-	.icon-more-white {
-		display: inline-block;
-		width: 20px;
-		height: 20px;
-	}
-
-	/* App title */
-	li span {
-		opacity: 0;
-		position: absolute;
-		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;
 
+		/* Set up transitions for showing app titles on hover */
 		/* 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;
 		}
 	}
 
+	.app-loading {
+		> svg {
+			display: none;
+		}
+		.icon-loading-small-dark {
+			width: 20px;
+			height: 20px;
+			display: block !important;
+		}
+	}
+
+
 	/* Show all app titles on hovering app menu area */
 	&:hover {
 		li {