From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 29 Jan 2016 11:13:54 +0000 (+0100)
Subject: Improved visuals of interactive dropdowns
X-Git-Tag: 3.0.0_Beta_1~2030^2~117
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a61812376790355cf8d79488b9ab04a8798913a2;p=GitHub%2FWoltLab%2FWCF.git

Improved visuals of interactive dropdowns
---

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index a1aee5bc22..6ec7895a31 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -187,20 +187,12 @@
 			display: flex;
 			flex: 0 auto;
 			
-			/* item margins (list item can contain <a> and <div>) */
-			> a,
-			> div {
-				margin-left: 10px;
-				
-				&:not(:last-child) {
-					margin-right: 10px;
-				}
-			}
+			/* margin between items, do not use the inner elements (such as a contained <a>) for
+			   this as it causes the last item to be of uneven size compared to all other items */
+			margin-left: 10px;
+			
 			&:not(:last-child) {
-				> a,
-				> div {
-					margin-right: 10px;
-				}
+				margin-right: 10px;
 			}
 			
 			> a {
diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 435d9a202f..3d9cbe5852 100644
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -5,6 +5,7 @@
 /* styling for interactive dropdowns (currently only used in the user panel) */
 .interactiveDropdown {
 	background-color: $wcfContentBackground;
+	border: 1px solid $wcfDropdownBorder;
 	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
 	color: $wcfContentText;
 	display: block;
@@ -14,38 +15,38 @@
 	z-index: 450;
 	
 	> .elementPointer {
-		border: 10px solid transparent;
-		//border-bottom-color: $wcfDropdownBorder;
-		border-top-width: 0;
+		border-color: $wcfDropdownBorder transparent;
+		border-style: solid;
+		border-width: 0 10px 10px;
 		content: "";
 		display: block;
 		position: absolute;
 		z-index: 100;
 		
 		> span {
-			border: 8px solid transparent;
-			border-bottom-color: $wcfSidebarBackground;
-			border-top-width: 0;
+			border-color: $wcfSidebarBackground transparent;
+			border-style: solid;
+			border-width: 0 10px 10px;
 			content: "";
 			display: block;
 			position: absolute;
-			top: 2px;
+			top: 1px;
 			z-index: 101;
 		}
 		
 		&.left {
-			left: 16px;
+			left: 5px;
 			
 			> span {
-				left: -8px;
+				left: -10px;
 			}
 		}
 		
 		&.right {
-			right: 16px;
+			right: 5px;
 			
 			> span {
-				right: -7px;
+				right: -10px;
 			}
 		}
 	}