From 4ed729a17dfbcdaa4c81853ed42d32d31bb63072 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 27 Mar 2018 14:06:25 +0300
Subject: [PATCH] Define inline svg color in css

---
 src/components/TabNav/TabNav.css | 4 ++--
 src/marketplace.css              | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css
index d75f0318..ad2e1be2 100644
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@@ -41,7 +41,7 @@
   border-bottom-color: transparent;
 
   transition: var(--transitionStyleButton);
-  background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
   background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */
 
   &:hover {
@@ -59,7 +59,7 @@
     margin-top: 0;
 
     &:hover {
-      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
+      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
       background-position: right center;
     }
   }
diff --git a/src/marketplace.css b/src/marketplace.css
index d29cbc65..57ec63b3 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -51,6 +51,9 @@
 
   --matterColorLightTransparent: rgba(255, 255, 255, 0.65);
 
+  /* Used with inline CSS SVGs */
+  --marketplaceColorEncoded: %23c0392b;
+
   /* ================ Spacing unites ================ */
 
   /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */