From 6143f0499b57f7586ddc73a06ca8b4cfe5d052b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dziedzi=C5=84ski?=
 <32803679+Michal-Dziedzinski@users.noreply.github.com>
Date: Wed, 29 Apr 2020 17:20:38 +0200
Subject: [PATCH] fix(default-theme): colors filters displaying (#660)

---
 .../cms/elements/CmsElementCategorySidebarFilter.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/default-theme/cms/elements/CmsElementCategorySidebarFilter.vue b/packages/default-theme/cms/elements/CmsElementCategorySidebarFilter.vue
index 3cce7c333..ada469085 100644
--- a/packages/default-theme/cms/elements/CmsElementCategorySidebarFilter.vue
+++ b/packages/default-theme/cms/elements/CmsElementCategorySidebarFilter.vue
@@ -59,7 +59,7 @@
         <div class="filters">
           <div v-for="filter in filters" :key="filter.name">
             <SfHeading class="filters__title" :level="4" :title="filter.name" />
-            <div v-if="filter && filter.options && filter.options.length">
+            <div v-if="filter && filter.options && filter.options.length" :class="{'filters__filter--color': filter.name && filter.name === 'color'}">
               <SfFilter
                 v-for="option in filter.options"
                 :key="option.value"
@@ -73,6 +73,7 @@
                   )
                 "
                 class="filters__item"
+                :class="{'filters__item--color': option.color}"
                 @change.native="
                   toggleFilter({
                     type: 'equals',
@@ -324,10 +325,17 @@ export default {
       margin: 0 0 var(--spacer-base) 0;
     }
   }
+  &__filter {
+    &--color {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
   &__item {
     padding: var(--spacer-2xs) 0;
     &--color {
-      margin: 0 var(--spacer-xs);
+      width: auto;
+      margin: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) 0;
     }
   }
   &__buttons {