Merge pull request #457 from storyblok/feat/FT-329_styling_feedback

feat(FT-329): implement review feedback
storyblok · Oct 24, 2023 · abe40ed · abe40ed
2 parents 41da29b + b264e0e
commit abe40ed
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/components/Select/components/SelectInner.vue b/src/components/Select/components/SelectInner.vue
@@ -128,7 +128,7 @@
       </button>
 
       <slot name="rightIcon">
-        <SbIcon class="sb-select-inner__chevron" :name="rightIconName" :data-testid="`${dataTestid}-right-icon`"/>
+        <SbIcon :class="{ 'sb-select-inner__chevron': !currentOptionLabel }" :name="rightIconName" :data-testid="`${dataTestid}-right-icon`"/>
       </slot>
     </div>
   </div>

diff --git a/src/components/Select/select.scss b/src/components/Select/select.scss
@@ -235,6 +235,32 @@
       outline: none;
     }
   }
+
+  &__icons-single-plugin {
+    position: absolute;
+    right: $s-2;
+    top: 20px;
+    display: flex;
+
+    @include mq($from: md) {
+      opacity: 0;
+    }
+
+    &--visible,
+    &:hover,
+    &:focus {
+      background: $white;
+      border-radius: $base-border-radius;
+      opacity: 1;
+    }
+
+    &.sb-select-inner__chevron-dropdown {
+      padding: 6px;
+      color: $black;
+      border-radius: 0 $base-border-radius $base-border-radius 0;
+      cursor: pointer;
+    }
+  }
 }
 
 .sb-select-inner--error:hover,