From 455c81eaafdbc889c7ed0caa10534a387518e81a Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Mon, 17 Jul 2017 17:51:20 +0300 Subject: [PATCH 1/4] topnav ixd and hero search bar fixes --- .../LocationAutocompleteInput.css | 3 +- src/components/Menu/Menu.js | 2 +- src/components/MenuContent/MenuContent.css | 6 ++-- .../TopbarDesktop/TopbarDesktop.css | 30 +++++++++++++++++-- .../LocationSearchForm/LocationSearchForm.css | 18 ++++++++++- 5 files changed, 51 insertions(+), 8 deletions(-) diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 2c0bb89d..02e530eb 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -16,7 +16,7 @@ display: flex; width: 24px; align-self: stretch; - border-bottom: 2px solid var(--marketplaceColor); + border-bottom: 4px solid var(--marketplaceColor); background-color: var(--matterColorLight); } @@ -40,6 +40,7 @@ padding-left: 10px; margin: 0; line-height: unset; + border-bottom-width: 4px; /* Safari bugfix: without this Safari will print placeholder to a wrong place */ &::-webkit-input-placeholder { diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 96fc8019..0059e731 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -23,7 +23,7 @@ import { MenuContent, MenuLabel } from '../../components'; import css from './Menu.css'; const KEY_CODE_ESCAPE = 27; -const CONTENT_PLACEMENT_OFFSET = 22; +const CONTENT_PLACEMENT_OFFSET = 0; // This should work, but it doesn't
{}} role="button" /> /* eslint-disable jsx-a11y/no-static-element-interactions */ diff --git a/src/components/MenuContent/MenuContent.css b/src/components/MenuContent/MenuContent.css index bd425afd..47670c82 100644 --- a/src/components/MenuContent/MenuContent.css +++ b/src/components/MenuContent/MenuContent.css @@ -1,7 +1,7 @@ @import '../../marketplace.css'; .root { - visibility: hidden; + opacity: 0; pointer-events: none; position: absolute; @@ -10,10 +10,12 @@ background-color: var(--matterColorLight); border: 1px solid var(--matterColorAnti); box-shadow: var(--boxShadowPopup); + border-radius: 0 0 2px 2px; + transition: var(--transitionStyleButton); } .isOpen { - visibility: visible; + opacity: 1; pointer-events: auto; } diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 2ca7fafa..12749439 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -167,9 +167,14 @@ height: 100%; margin: 0; padding: 0 12px 0 12px; + + &:active { + border-bottom: 0; + } } .avatar { + margin: 16px 0; width: 41px; height: 41px; } @@ -180,21 +185,35 @@ /* Authentication */ .signupLink { + @apply --linkHoverState; flex-shrink: 0; height: 100%; - margin-right: 24px; + padding: 0 12px 0 12px; + + color: var(--matterColor); + + &:hover { + color: var(--matterColorDark); + } } .loginLink { + @apply --linkHoverState; flex-shrink: 0; height: 100%; + padding: 0 12px 0 12px; + + color: var(--matterColor); + + &:hover { + color: var(--matterColorDark); + } } .signup, .login { @apply --marketplaceH4FontStyles; @apply --topbarDesktopLabelStyles; - color: var(--matterColor); } .logoutButton { @@ -206,6 +225,12 @@ color: var(--matterColor); text-align: left; white-space: nowrap; + transition: var(--transitionStyleButton); + + &:hover { + color: var(--matterColorDark); + text-decoration: none; + } @media (--desktopViewport) { margin: 0; @@ -213,6 +238,5 @@ &:focus { outline: none; - text-decoration: underline; } } diff --git a/src/containers/LocationSearchForm/LocationSearchForm.css b/src/containers/LocationSearchForm/LocationSearchForm.css index 9eaa5b61..dd3b71c3 100644 --- a/src/containers/LocationSearchForm/LocationSearchForm.css +++ b/src/containers/LocationSearchForm/LocationSearchForm.css @@ -1,15 +1,31 @@ -.root { +@import '../../marketplace.css'; +.root { + border-radius: 2px; } .searchInputIcon { box-sizing: content-box; padding-left: 24px; margin-top: 2px; + border-bottom-left-radius: 2px; } .searchInput { height: 69px; + border-bottom-right-radius: 2px; + + &:hover::placeholder, + &:focus::placeholder { + color: var(--matterColor); + } + + &::placeholder { + text-overflow: ellipsis; + overflow-x: hidden; + font-weight: var(--fontWeightRegular); + transition: var(--transitionStyleButton); + } } .searchPredictions { From f88853904027c45adf96b7aa0c2d051ca2bc4697 Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Tue, 18 Jul 2017 19:39:53 +0300 Subject: [PATCH 2/4] fixes based on Vesa's review --- src/components/HeroSection/HeroSection.css | 3 +++ .../LocationAutocompleteInput/LocationAutocompleteInput.css | 4 ++-- src/components/MenuContent/MenuContent.css | 2 ++ src/containers/LocationSearchForm/LocationSearchForm.css | 2 -- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css index 8e9745f4..aae55052 100644 --- a/src/components/HeroSection/HeroSection.css +++ b/src/components/HeroSection/HeroSection.css @@ -81,6 +81,9 @@ .desktopSearchForm { display: none; background-color: var(--matterColorLight); + border-bottom: 4px solid var(--marketplaceColor); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; @media (--desktopViewport) { display: block; diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 02e530eb..a60a418a 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -16,7 +16,7 @@ display: flex; width: 24px; align-self: stretch; - border-bottom: 4px solid var(--marketplaceColor); + border-bottom: 2px solid var(--marketplaceColor); background-color: var(--matterColorLight); } @@ -40,7 +40,7 @@ padding-left: 10px; margin: 0; line-height: unset; - border-bottom-width: 4px; + border-bottom-width: 2px; /* Safari bugfix: without this Safari will print placeholder to a wrong place */ &::-webkit-input-placeholder { diff --git a/src/components/MenuContent/MenuContent.css b/src/components/MenuContent/MenuContent.css index 47670c82..5846fda7 100644 --- a/src/components/MenuContent/MenuContent.css +++ b/src/components/MenuContent/MenuContent.css @@ -1,6 +1,7 @@ @import '../../marketplace.css'; .root { + visibility:hidden; opacity: 0; pointer-events: none; @@ -15,6 +16,7 @@ } .isOpen { + visibility:visible; opacity: 1; pointer-events: auto; } diff --git a/src/containers/LocationSearchForm/LocationSearchForm.css b/src/containers/LocationSearchForm/LocationSearchForm.css index dd3b71c3..0b4fb906 100644 --- a/src/containers/LocationSearchForm/LocationSearchForm.css +++ b/src/containers/LocationSearchForm/LocationSearchForm.css @@ -8,12 +8,10 @@ box-sizing: content-box; padding-left: 24px; margin-top: 2px; - border-bottom-left-radius: 2px; } .searchInput { height: 69px; - border-bottom-right-radius: 2px; &:hover::placeholder, &:focus::placeholder { From b4399cd23cae6d40b465284a8b3928b0a9699a93 Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Tue, 18 Jul 2017 21:07:42 +0300 Subject: [PATCH 3/4] more stuff for the topBar --- src/components/HeroSection/HeroSection.css | 2 +- .../LocationAutocompleteInput.css | 9 +++++++-- src/components/MenuContent/MenuContent.css | 2 +- src/components/TopbarDesktop/TopbarDesktop.css | 1 + 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css index aae55052..756394dc 100644 --- a/src/components/HeroSection/HeroSection.css +++ b/src/components/HeroSection/HeroSection.css @@ -52,7 +52,7 @@ .heroSubTitle { color: var(--matterColorLight); - margin-bottom: 47px; + margin-bottom: 63px; margin-top: 0; @media (--desktopViewport) { diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index a60a418a..681333bd 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -99,20 +99,25 @@ bottom of the container. & li { color: var(--matterColorLight); + transition: var(--transitionStyleButton); margin: 0; /* Remove the double white space */ /* Assign enough vertical padding to make the element at least 44px high */ padding: 9px var(--sidePadding); @media (--desktopViewport) { - padding: 8px var(--sidePaddingDesktop); + color: rgba(255,255,255,0.65); + padding: 10px var(--sidePaddingDesktop); margin: 0; } &:hover, &.highlighted { - text-decoration: underline; cursor: pointer; + border-left: 6px solid #FFF; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + color: var(--matterColorLight); } } } diff --git a/src/components/MenuContent/MenuContent.css b/src/components/MenuContent/MenuContent.css index 5846fda7..e042ba8f 100644 --- a/src/components/MenuContent/MenuContent.css +++ b/src/components/MenuContent/MenuContent.css @@ -9,7 +9,7 @@ z-index: var(--zIndexPopup); background-color: var(--matterColorLight); - border: 1px solid var(--matterColorAnti); + border-top: 1px solid var(--matterColorAnti); box-shadow: var(--boxShadowPopup); border-radius: 0 0 2px 2px; transition: var(--transitionStyleButton); diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 12749439..fe44b4ac 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -230,6 +230,7 @@ &:hover { color: var(--matterColorDark); text-decoration: none; + border-left: 6px solid var(--marketplaceColor); } @media (--desktopViewport) { From aa0fd8b670d4c1418d4e7c6f54637f7884f234d7 Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Tue, 18 Jul 2017 21:51:43 +0300 Subject: [PATCH 4/4] fixes for comments --- .../LocationAutocompleteInput/LocationAutocompleteInput.css | 4 ++-- src/marketplace.css | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css index 681333bd..80e8096b 100644 --- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css +++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css @@ -106,7 +106,7 @@ bottom of the container. padding: 9px var(--sidePadding); @media (--desktopViewport) { - color: rgba(255,255,255,0.65); + color: var(--matterColorLightTransparent); padding: 10px var(--sidePaddingDesktop); margin: 0; } @@ -114,7 +114,7 @@ bottom of the container. &:hover, &.highlighted { cursor: pointer; - border-left: 6px solid #FFF; + border-left: 6px solid var(--matterColorLight); border-top-right-radius: 20px; border-bottom-right-radius: 20px; color: var(--matterColorLight); diff --git a/src/marketplace.css b/src/marketplace.css index 97887094..19f1753f 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -29,6 +29,8 @@ --matterColorBright: #FDFDFD; --matterColorLight: #FFFFFF; + --matterColorLightTransparent: rgba(255,255,255,0.65); + /* Spacing units */ /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */ --spacingUnit: 6px;