From cdf83b70a93cb5c1a1d42905cdc3b9bb3bcefbc6 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Fri, 2 Jun 2017 11:41:18 +0300
Subject: [PATCH] Review fixes

---
 .../LocationAutocompleteInput.css                    | 12 ++++++------
 src/containers/StyleguidePage/StyleguidePage.css     | 10 +++++-----
 src/containers/Topbar/Topbar.css                     |  7 ++++---
 src/marketplace.css                                  |  8 ++++----
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
index 4d3ca703..d81fd3ba 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
@@ -44,10 +44,10 @@ size and position, etc.
   padding-bottom: 98px;
   top: var(--inputHeight);
   background-color: var(--marketplaceColor);
-  z-index: 1;
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: var(--borderRadius);
+  border-bottom-right-radius: var(--borderRadius);
   box-shadow: var(--boxShadowPopup);
+  z-index: var(--zIndexPopup + 1);
 }
 
 /*
@@ -64,14 +64,14 @@ bottom of the container.
   background-size: auto var(--poweredImageHeight);
   background-position: center;
 
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
     background-position: center left var(--sidePaddingDesktop);
   }
 }
 
 /* List of predictions, with a responsive padding size */
 .predictions {
-  composes: searchResultsFont;
+  composes: searchResultsFont from '../../marketplace.css';
 
   margin: 0;
   padding: 14px 0;
@@ -82,7 +82,7 @@ bottom of the container.
     /* Assign enough vertical padding to make the element at least 44px high */
     padding: 10px var(--sidePadding);
 
-    @media (--desktop-viewport) {
+    @media (--desktopViewport) {
       padding: 10px var(--sidePaddingDesktop);
     }
 
diff --git a/src/containers/StyleguidePage/StyleguidePage.css b/src/containers/StyleguidePage/StyleguidePage.css
index 391b75e3..2fbaa2e8 100644
--- a/src/containers/StyleguidePage/StyleguidePage.css
+++ b/src/containers/StyleguidePage/StyleguidePage.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
 
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
     flex-direction: row;
   }
 }
@@ -12,7 +12,7 @@
 .withPadding {
   padding: calc(2 * var(--spacingUnit));
 
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
     padding: calc(2 * var(--spacingUnitDesktop));
   }
 }
@@ -21,7 +21,7 @@
 .defaultWrapperStyles {
   margin: calc(2 * var(--spacingUnit)) 0;
 
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
     margin: calc(2 * var(--spacingUnitDesktop)) 0;
   }
 }
@@ -37,7 +37,7 @@
   flex-grow: 1;
   composes: withPadding;
 
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
     padding: 56px 0 0 16px;
   }
 }
@@ -66,7 +66,7 @@
   background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 5h10M0 11h10M0 17h10" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
   background-repeat: repeat;
 
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
       background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 7h10M0 15h10M0" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
       background-repeat: repeat;
   }
diff --git a/src/containers/Topbar/Topbar.css b/src/containers/Topbar/Topbar.css
index 3816caf5..69e65c8b 100644
--- a/src/containers/Topbar/Topbar.css
+++ b/src/containers/Topbar/Topbar.css
@@ -23,7 +23,7 @@
   /* shadows */
   box-shadow: 0 1px 1px 0 #dcdcdc;
 
-  @media (min-width: 768px) {
+  @media (--desktopViewport) {
     display: none;
   }
 }
@@ -47,7 +47,7 @@
 .desktop {
   display: none;
 
-  @media (min-width: 768px) {
+  @media (--desktopViewport) {
     display: block;
   }
 }
@@ -67,7 +67,8 @@
   color: var(--matterColorAnti);
   margin: 0 24px;
 
-  /* Absolute position to prevent changing search form positioning */
+  /* Absolute position to avoid affecting the layout of the autocomplete
+   predictions list */
   position: absolute;
   top: 115px;
 
diff --git a/src/marketplace.css b/src/marketplace.css
index 8c51e98a..52ded8c3 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -41,7 +41,7 @@
 
 /* ================ Custom media queries ================ */
 
-@custom-media --desktop-viewport (min-width: 768px);
+@custom-media --desktopViewport (min-width: 768px);
 
 /* ================ Fonts ================ */
 
@@ -59,7 +59,7 @@ h1,
   letter-spacing: -1px;
 
   /* TODO: this seems to be biggest font in Page titles (except in Hero) - is it h1 then? */
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
     font-family: "sofiapro";
     font-weight: 600;
     font-size: 48px;
@@ -79,7 +79,7 @@ h2,
   letter-spacing: -0.5px;
 
   /* TODO Are these correct settings? */
-  @media (--desktop-viewport) {
+  @media (--desktopViewport) {
     font-size: 24px;
     line-height: 32px;
     padding: 4px 0 4px 0; /* 4px + 4px = 8px */
@@ -150,7 +150,7 @@ li,
   letter-spacing: -0.1px;
 
   /* TODO Desktop styles needs to be extracted */
-  @media (min-width: 768px) {
+  @media (--desktopViewport) {
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;