From e1883ba828a5f6dfe18c815509d9f91e4ddd0d50 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 15 Feb 2018 12:56:20 +0100
Subject: [PATCH] minor select-kit css improvements

---
 .../common/select-kit/category-drop.scss      | 39 +++++++------------
 .../select-kit/dropdown-select-box.scss       |  6 +++
 .../common/select-kit/mini-tag-chooser.scss   |  2 +-
 .../common/select-kit/tag-drop.scss           | 14 +++++--
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 1fdb3dbdb23..391f80d8ae9 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -6,7 +6,6 @@
       .badge-wrapper {
         font-size: $font-0;
         font-weight: normal;
-        line-height: $line-height-large;
 
         &.box {
           margin: 0;
@@ -17,40 +16,24 @@
         }
       }
 
-      &.bar.has-selection .category-drop-header {
-        padding: 4.5px 10px;
+      &.bar.has-selection .category-drop-header,
+      &.box.has-selection .category-drop-header,
+      &.none.has-selection .category-drop-header {
+        padding: 5px 10px;
       }
 
       &.bullet.has-selection .category-drop-header {
-        padding: 6px 10px;
-        span.badge-category {
-          line-height: $line-height-medium;
-        }
-        .selected-name {
-          .bullet {
-            line-height: $line-height-medium;
-          }
-        }
-      }
-
-      &.box.has-selection .category-drop-header {
-        padding: 3px 10px;
-      }
-
-      &.none.has-selection .category-drop-header {
-        padding: 4.5px 10px;
+        padding: 5px 10px;
       }
 
       .category-drop-header {
         background: $primary-low;
         color: $primary;
-        border: none;
-        padding: 6px 10px;
-        font-size: $font-up-1;
-        line-height: $line-height-medium;
+        border: 1px solid transparent;
+        padding: 5px 10px;
+        font-size: $font-0;
         transition: none;
 
-
         .badge-wrapper {
           margin-right: 0;
         }
@@ -64,6 +47,12 @@
         }
       }
 
+      &.is-expanded .category-drop-header {
+        border: 1px solid $tertiary;
+        -webkit-box-shadow: $tertiary 0 0 6px 0px;
+                box-shadow: $tertiary 0 0 6px 0px;
+      }
+
       .select-kit-collection {
         display: flex;
         flex-direction: column;
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 591360d727d..98f7173e366 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -120,6 +120,12 @@
         margin-left: 5px;
       }
 
+      &:hover {
+        .d-icon {
+          color: $primary-low;
+        }
+      }
+
       &.is-focused {
         outline-style: auto;
         outline-color: $tertiary;
diff --git a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
index 56ae2641619..956c9a80647 100644
--- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
@@ -28,7 +28,7 @@
         border-top: 0;
       }
 
-      .select-kit-wrapper {
+      &.is-expanded .select-kit-wrapper, .select-kit-wrapper {
         display: none;
       }
 
diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss
index 24f08ebc060..cc647cf79ba 100644
--- a/app/assets/stylesheets/common/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss
@@ -6,10 +6,10 @@
       .tag-drop-header {
         background: $primary-low;
         color: $primary;
-        border: none;
-        padding: 4.5px 10px;
-        font-size: $font-up-1;
-        line-height: $line-height-large;
+        border: 1px solid transparent;
+        padding: 5px 10px;
+        font-size: $font-0;
+        transition: none;
 
         .d-icon {
           opacity: 1;
@@ -17,6 +17,12 @@
         }
       }
 
+      &.is-expanded .tag-drop-header {
+        border: 1px solid $tertiary;
+        -webkit-box-shadow: $tertiary 0 0 6px 0px;
+                box-shadow: $tertiary 0 0 6px 0px;
+      }
+
       .select-kit-collection {
         display: flex;
         flex-direction: column;