From 3d1e9f0b96c1604f5007c0c0e9a28bee86309cbf Mon Sep 17 00:00:00 2001 From: Janne Koivistoinen Date: Thu, 18 Jan 2018 00:58:28 +0200 Subject: [PATCH] filter dr done --- .../SearchFilters/SearchFilters.css | 3 +- .../SearchFiltersMobile.css | 5 ++- .../SelectSingleFilter/SelectSingleFilter.css | 24 ++++++++--- .../SelectSingleFilterMobile.css | 41 +++++++++++-------- src/containers/SearchPage/SearchPage.css | 3 +- src/marketplace.css | 2 +- 6 files changed, 50 insertions(+), 28 deletions(-) diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index ea6a1dec..73b3a398 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -9,5 +9,6 @@ .searchResultSummary { @apply --marketplaceH4FontStyles; line-height: 20px; - margin-top: 9px; + margin-top: 11px; + margin-bottom: 13px; } diff --git a/src/components/SearchFiltersMobile/SearchFiltersMobile.css b/src/components/SearchFiltersMobile/SearchFiltersMobile.css index dea27d34..d5ec8ccf 100644 --- a/src/components/SearchFiltersMobile/SearchFiltersMobile.css +++ b/src/components/SearchFiltersMobile/SearchFiltersMobile.css @@ -63,9 +63,9 @@ } .modalHeadingWrapper { - padding-bottom: 26px; + padding-bottom: 31px; border-bottom: 1px solid var(--matterColorNegative); - margin-bottom: 30px; + margin-bottom: 27px; } .modalHeading { @@ -82,6 +82,7 @@ display: inline; float: right; margin: 17px 0 0 0; + padding: 0; /* Override button styles */ outline: none; diff --git a/src/components/SelectSingleFilter/SelectSingleFilter.css b/src/components/SelectSingleFilter/SelectSingleFilter.css index 34ab88c1..ca9ced04 100644 --- a/src/components/SelectSingleFilter/SelectSingleFilter.css +++ b/src/components/SelectSingleFilter/SelectSingleFilter.css @@ -13,7 +13,7 @@ @apply --marketplaceButtonStylesSecondary; @apply --marketplaceSearchFilterLabelFontStyles; - padding: 9px 16px 9px 16px; + padding: 9px 16px 10px 16px; width: auto; height: auto; min-height: 0; @@ -33,15 +33,21 @@ @apply --marketplaceSearchFilterLabelFontStyles; font-weight: var(--fontWeightSemiBold); - padding: 9px 16px 9px 16px; + padding: 9px 16px 10px 16px; width: auto; height: auto; min-height: 0; border-radius: 4px; + border: 1px solid var(--marketplaceColor); + + &:hover, + &:focus { + border: 1px solid var(--marketplaceColorDark); + } } .menuContent { - margin-top: 8px; + margin-top: 7px; padding-top: 13px; min-width: 300px; border-radius: 4px; @@ -63,7 +69,7 @@ position: absolute; top: 2px; left: 0px; - height: calc(100% - 4px); + height: calc(100% - 7px); width: 6px; background-color: var(--matterColorDark); } @@ -83,6 +89,8 @@ text-align: left; border: none; + cursor: pointer; + &:focus, &:hover { color: var(--matterColorDark); @@ -94,7 +102,7 @@ } .clearMenuItem { - @apply --marketplaceH5FontStyles; + @apply --marketplaceH4FontStyles; font-weight: var(--fontWeightMedium); color: var(--matterColorAnti); @@ -102,15 +110,19 @@ position: relative; min-width: 300px; margin: 0; - padding: 34px 30px 19px 30px; + padding: 32px 30px 18px 30px; /* Override button styles */ outline: none; text-align: left; border: none; + cursor: pointer; + transition: width var(--transitionStyleButton); + &:focus, &:hover { color: var(--matterColor); + transition: width var(--transitionStyleButton); } } diff --git a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css index 1a98895a..7cc9f1a1 100644 --- a/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css +++ b/src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css @@ -1,17 +1,21 @@ @import '../../marketplace.css'; .root { - padding-bottom: 18px; + padding-bottom: 16px; border-bottom: 1px solid var(--matterColorNegative); } -.filterLabel { +.filterLabel, +.filterLabelSelected { @apply --marketplaceH3FontStyles; + margin-bottom: 16px; +} + +.filterLabel { color: var(--matterColorDark); } .filterLabelSelected { - @apply --marketplaceH3FontStyles; color: var(--marketplaceColor); } @@ -32,38 +36,38 @@ overflow: hidden; } +.optionBorder, +.optionBorderSelected { + position: absolute; + height: calc(100% - 12px); + top: 4px; + left: -24px; + transition: width var(--transitionStyleButton); +} + /* left animated "border" like hover element */ .optionBorder { - position: absolute; - top: 2px; - left: -24px; - height: calc(100% - 7px); width: 0; background-color: var(--matterColorDark); - transition: width var(--transitionStyleButton); } /* left static border for selected element */ .optionBorderSelected { - position: absolute; - top: 2px; - left: -24px; - height: calc(100% - 7px); - width: 12px; + width: 8px; background-color: var(--matterColorDark); - transition: width var(--transitionStyleButton); } .option { - @apply --marketplaceH3FontStyles; + @apply --marketplaceH4FontStyles; font-weight: var(--fontWeightMedium); + font-size: 18px; color: var(--matterColor); /* Layout */ display: block; position: relative; margin: 0; - padding: 4px 0 4px 20px; + padding: 4px 0 8px 20px; /* Override button styles */ outline: none; @@ -77,6 +81,10 @@ &:hover .menuItemBorder { width: 6px; } + + &:last-child { + margin-bottom: 18px; + } } .clearButton { @@ -88,6 +96,7 @@ display: inline; float: right; margin-top: 6px; + padding: 0; /* Override button styles */ outline: none; diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css index 977dcf2c..bf3a5253 100644 --- a/src/containers/SearchPage/SearchPage.css +++ b/src/containers/SearchPage/SearchPage.css @@ -50,7 +50,7 @@ @media (--viewportLarge) { flex-basis: 62.5%; - padding: 24px 36px 36px 36px; + padding: 23px 36px 36px 36px; } } @@ -74,7 +74,6 @@ @media (--viewportMedium) { display: flex; padding: 0 24px; - margin-top: 3px; margin-bottom: 21px; } } diff --git a/src/marketplace.css b/src/marketplace.css index b44b568e..d29cbc65 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -470,7 +470,7 @@ width: auto; /* Sizing (touch area) */ - padding: 24px 40px; + padding: 24px; margin: 0; border: 0;