From d449d0c7dbbafac84efc57cab0c880438e50c30c Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 10 Jan 2016 22:47:09 +0100
Subject: [PATCH] Updated visuals for interactive dropdowns

---
 com.woltlab.wcf/templates/pageHeaderUser.tpl  |  1 -
 .../files/style/ui/dropdownInteractive.scss   | 87 ++++++++++---------
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index d483d7b512..3a284b95e2 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -47,7 +47,6 @@
 							{event name='userMenuItemsBefore'}
 							
 							{foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
-								<li class="dropdownDivider"></li>
 								<li class="interactiveDropdownUserMenuItem">
 									<div class="box32">
 										<div><span class="icon icon32 {@$menuCategory->getIconClassName()}"></span></div>
diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 80c2e87c50..0ea41bb109 100644
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -1,13 +1,13 @@
 .interactiveDropdown {
 	background-color: $wcfDropdownBackground;
 	border: 1px solid $wcfDropdownBorder;
+	border-width: 1px 0;
+	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
 	color: $wcfDropdownLink;
 	display: block;
 	position: absolute;
 	z-index: 450;
 	
-	@include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-	
 	&:not(.open) {
 		display: none !important;
 	}
@@ -55,6 +55,7 @@
 
 .interactiveDropdownHeader {
 	align-items: center;
+	background-color: rgb(247, 248, 250);
 	display: flex;
 	padding: 5px 10px;
 }
@@ -74,7 +75,6 @@
 	border: 1px solid $wcfDropdownBorderInner;
 	border-width: 1px 0;
 	max-height: 300px;
-	padding: 3px 0;
 	
 	&.ps-container {
 		> .interactiveDropdownItems {
@@ -91,6 +91,32 @@
 .interactiveDropdownItems {
 	background-color: $wcfDropdownBackground;
 	
+	> li {
+		color: $wcfContentText;
+		padding: 8px 10px;
+		position: relative;
+		
+		&:not(:last-child) {
+			border-bottom: 1px solid $wcfDropdownBorderInner;
+		}
+		
+		&:hover {
+			background-color: rgb(242, 242, 242);
+		}
+		
+		> .box32 {
+			margin-bottom: 0;
+		}
+		
+		a {
+			color: $wcfContentLink;
+			
+			&:hover {
+				color: $wcfContentLinkActive;
+			}
+		}
+	}
+	
 	.loading,
 	.noItems {
 		padding: 20px 10px;
@@ -134,21 +160,15 @@
 }
 
 .interactiveDropdownItemOutstanding {
-	/*//background-color: @wcfDropdownHoverBackgroundColor;
-	background-repeat: no-repeat;
-	background-size: 200%;
-	
-	//.linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");
-	
-	&:hover {
-		background-position: 100%;
-	}*/
-	
 	display: flex;
 	
 	> .box32 {
 		flex: 1 1 auto;
 	}
+	
+	h3 {
+		font-weight: bold;
+	}
 }
 
 .interactiveDropdownItemMarkAsRead {
@@ -157,10 +177,6 @@
 	margin-left: 5px;
 }
 
-.interactiveDropdownItemOutstandingIcon > div.box32 {
-	//padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
-}
-
 &.interactiveDropdownItemShadow {
 	> .box32 {
 		position: relative;
@@ -187,15 +203,6 @@
 }
 	
 .interactiveDropdownItemsUserMenu > li {
-	&.dropdownDivider {
-		border-bottom: 1px solid $wcfDropdownBorderInner;
-		padding: 0 !important;
-	}
-	
-	&:not(.dropdownDivider) {
-		padding: 5px;
-	}
-	
 	h3 {
 		@extend .wcfFontHeadline
 	}
@@ -203,28 +210,35 @@
 	.box64 {
 		position: relative;
 		
+		.containerHeadline {
+			padding-bottom: 10px;
+		}
+		
 		.interactiveDropdownUserMenuLinkList {
 			bottom: 0;
 			position: absolute;
 		}
 	}
 	
+	.icon {
+		position: relative;
+		top: 5px;
+	}
+	
 	.interactiveDropdownUserMenuLinkList > li {
 		display: inline-block;
 		
 		@extend .wcfFontSmall;
 		
-		&:after {
-			content: " \2013 ";
-		}
-		
-		&:last-child:after {
-			content: "";
+		&:not(:last-child)::after {
+			content: "\00b7";
+			margin-left: 5px;
 		}
 	}
 }
 
 .interactiveDropdownShowAll {
+	background-color: rgb(247, 248, 250);
 	color: $wcfDropdownLink;
 	display: block;
 	padding: 5px 10px;
@@ -249,15 +263,6 @@
 	.interactiveDropdownItems .notificationItem {
 		max-width: 400px;
 	}
-	
-	.interactiveDropdownItemMarkAsRead {
-		opacity: .6;
-		transition: opacity .2s linear;
-	}
-	
-	.interactiveDropdownItemOutstandingIcon:hover .interactiveDropdownItemMarkAsRead {
-		opacity: 1;
-	}
 }
 
 @media only screen and (max-width: 800px) {
-- 
2.20.1