fix(components): style adjustments

feature/select-with-image
takenet · Nov 19, 2019 · e6b5202 · e6b5202
1 parent 76fd6c9
commit e6b5202
Showing 1 changed file with 74 additions and 6 deletions.
diff --git a/src/scss/components/_select.scss b/src/scss/components/_select.scss
@@ -2,6 +2,15 @@
   @include flex-box;
   flex-wrap: wrap;
 
+  &:hover {
+    border: 1px solid $bp-color-bot;
+  }
+
+  &.bp-input-wrapper--focus {
+    box-shadow: 0 0 0 3px $bp-color-blip-light;
+    transition: none;
+  }
+
   &.bp-input-wrapper { background-color: $bp-color-white; }
 
   &.bp-select-wrapper--invalid {
@@ -45,6 +54,17 @@
   .bp-select-hide-label {
     height: 0;
   }
+
+  .bp-select-placeholder-icon {
+    display: flex;
+    align-items: center;
+    margin-right: 8px;
+    max-width: 36px;
+
+    img, svg {
+      height: auto;
+    }
+  }
 }
 
 .blip-select__input {
@@ -85,16 +105,16 @@
 .blip-select__options {
   background: #fff;
   position: absolute;
-  top: 100%; left: 0;
+  top: 108%; left: 0;
   width: 100%; max-height: 500px;
   border: 0.1*$m solid $bp-color-breeze;
-  border-radius: 0.3*$m;
+  border-radius: 0.8*$m;
   box-shadow: 0 0.2*$m 1.2*$m 0 rgba(0, 0, 0, 0.1);
-  transform-origin: 0 0;
-  transform: scale(0);
-  display: none;
+  transform-origin: top left;
+  transform: scaleY(0);
+  visibility: hidden;
   opacity: 0;
-  transition: 200ms;
+  transition: transform .25s,opacity .75s,visibility .75s;
   overflow-y: auto;
   z-index: 2;
 
@@ -129,6 +149,10 @@
   &:focus {
     background: $bp-color-offwhite;
     outline: 0;
+
+    .blip-select__option__label:not(:only-child) {
+      color: $bp-color-bot;
+    }
   }
 
   &.blip-select__empty-option {
@@ -152,6 +176,18 @@
 }
 
 .blip-select__add-option {
+  background: $bp-color-bot;
+  border: 0;
+  color: #fff;
+  padding: 15px 0;
+  justify-content: center;
+
+  &:hover,
+  &:focus {
+    background: $bp-color-bot;
+    outline: 0;
+  }
+
   small {
     margin-right: 0.5*$m;
     color: #fff;
@@ -165,3 +201,35 @@
 .blip-select__option--selected {
   background: $bp-color-offwhite;
 }
+
+.blip-select__option--description-bottom {
+  flex-wrap: wrap;
+
+  .blip-select__option__description {
+    margin-left: 0;
+    font-size: $bp-fs-8;
+  }
+}
+
+.blip-select__option--with-icon {
+  display: flex;
+  align-items: center;
+
+  .blip-select__option__icon {
+    max-width: 36px;
+    line-height: 0;
+
+    img, svg {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  .blip-select__option__content {
+    margin-left: 10px;
+
+    span {
+      display: block;
+    }
+  }
+}