From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 31 May 2016 10:26:32 +0000 (+0200)
Subject: Improved search input design
X-Git-Tag: 3.0.0_Beta_1~1556
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=2f3e74f34d0d6ae12c4b05ac552175ec09718180;p=GitHub%2FWoltLab%2FWCF.git

Improved search input design
---

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index ac7576f452..f81ef3089f 100644
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -26,7 +26,7 @@
 	@include screen-lg {
 		align-items: center;
 		flex-wrap: wrap;
-		padding-top: 20px;
+		padding-top: 30px;
 		padding-bottom: 0;
 	}
 }
@@ -35,7 +35,7 @@
 .pageHeaderLogo {
 	@include screen-lg {
 		flex: 0 0 50%;
-		margin-bottom: 20px;
+		margin-bottom: 30px;
 		
 		.pageHeaderLogoSmall {
 			display: none;
@@ -171,10 +171,10 @@
 				width: 100%;
 			}
 		}
-		
-		.pageHeaderSearchInputContainer .pageHeaderSearchInput {
-			width: 200px;
-		}
+	}
+	
+	.pageHeaderSearchInputContainer .pageHeaderSearchInput {
+		width: 250px;
 	}
 }
 
@@ -245,9 +245,8 @@
 /* SEARCH AREA */
 .pageHeaderSearch {
 	@include screen-lg {
-		align-self: flex-start;
 		flex: 0 0 50%;
-		margin-bottom: 20px;
+		margin-bottom: 30px;
 		text-align: right;
 		
 		.pageHeaderSearchLabel {
@@ -259,13 +258,26 @@
 .pageHeaderSearchInputContainer {
 	background-color: $wcfHeaderSearchBoxBackground;
 	border-radius: 2px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
 	display: inline-flex;
-	padding: 2px;
+	padding: 3px;
 	position: relative;
 	
 	.pageHeaderSearchType > .button {
 		border-radius: 2px 0 0 2px;
-		padding: 4px 7px;
+		min-width: 100px;
+		padding: 4px 22px 4px 7px;
+		position: relative;
+		text-align: left;
+		white-space: nowrap;
+		
+		&::after {
+			color: inherit;
+			content: $fa-var-caret-down;
+			font-family: FontAwesome;
+			position: absolute;
+			right: 7px;
+		}
 	}
 	
 	.pageHeaderSearchInputButton {
@@ -308,7 +320,7 @@
 		
 		/* remove broken cancel-button (webkit) */
 		&::-webkit-search-cancel-button {
-			display:none;
+			display: none;
 		}
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index 6f0454e24d..7020703ccb 100644
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -89,15 +89,10 @@
 			margin-left: 10px;
 			order: 3;
 			
-			.pageHeaderSearchInput {
-				border-radius: 0 0 2px 2px;
-				height: 100%;
-				width: 100%;
-			}
-			
 			.pageHeaderSearchLabel {
-				background-color: $wcfHeaderSearchBoxBackground;
+				background-color: $wcfHeaderMenuBackground;
 				bottom: 0;
+				color: $wcfHeaderMenuLink;
 				cursor: pointer;
 				display: block;
 				position: absolute;
@@ -105,10 +100,12 @@
 				width: 50px;
 				
 				&:hover {
-					background-color: $wcfHeaderSearchBoxBackgroundActive;
+					background: $wcfHeaderMenuBackgroundActive;
+					color: $wcfHeaderMenuLinkActive;
 				}
 				
 				&::before {
+					color: inherit;
 					content: $fa-var-search;
 					display: block;
 					font-family: FontAwesome;
@@ -138,8 +135,8 @@
 			}
 			
 			.pageHeaderSearchLabel {
-				background-color: $wcfHeaderSearchBoxBackgroundActive;
-				width: 50px;
+				background: $wcfHeaderMenuBackgroundActive;
+				color: $wcfHeaderMenuLinkActive;
 			}
 		}
 	}
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index de18136d67..f255dfe437 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -2015,14 +2015,14 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderM
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownBorder', 'rgba(55, 73, 95, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLink', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderMenuDropdownLinkActive', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(44, 62, 80, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(34, 49, 63, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(255, 255, 255, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackground', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBackgroundActive', 'rgba(255, 255, 255, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxText', 'rgba(66, 66, 66, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxTextActive', 'rgba(66, 66, 66, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBorder', 'rgba(128, 139, 150, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxBorderActive', 'rgba(255, 255, 255, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholder', 'rgba(169, 169, 169, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderActive', 'rgba(204, 204, 204, 1)');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfHeaderSearchBoxPlaceholderActive', 'rgba(169, 169, 169, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackground', 'rgba(241, 246, 251, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBackgroundActive', 'rgba(241, 246, 251, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfInputBorder', 'rgba(176, 200, 224, 1)');