From 2f3e74f34d0d6ae12c4b05ac552175ec09718180 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Tue, 31 May 2016 12:26:32 +0200 Subject: [PATCH] Improved search input design --- .../files/style/layout/pageHeader.scss | 34 +++++++++++++------ .../files/style/layout/pageHeaderSticky.scss | 17 ++++------ wcfsetup/setup/db/install.sql | 10 +++--- 3 files changed, 35 insertions(+), 26 deletions(-) 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)'); -- 2.20.1