Merge branch 'master' into teams

frontend/components/forms/fields/Dropdown/_styles.scss

@@ -46,36 +46,31 @@
     background-color: $ui-light-grey;
     border-radius: $border-radius;
     height: 40px;
-
-    .Select-value {
-      border: 0;
-    }
   }
 
   .Select-value {
     font-size: $x-small;
     border-radius: $border-radius;
-    background-color: $ui-light-grey;
-    border: solid 1px $ui-fleet-blue-15;
+    background-color: $ui-off-white;
+    border: solid 1px $core-dark-blue-grey;
 
     .Select-value-icon {
       border: 0;
       float: right;
       position: relative;
-      line-height: 34px;
-      width: 25px;
+      line-height: 28px;
+      width: 20px;
       padding: 0;
       margin: 0 5px;
       text-indent: -999em;
 
       &::after {
-        @extend %kolidecon;
         transition: color 150ms ease-in-out;
-        transform: translate(-50%, -50%);
-        content: "\f036";
+        content: url(../assets/images/icon-close-dark-blue-grey-16x16@2x.png);
+        transform: scale(0.5);
         position: absolute;
-        top: 50%;
-        left: 50%;
+        top: -5px;
+        left: -5px;
         visibility: visible;
         font-size: $small;
         color: $ui-gray;
@@ -84,9 +79,9 @@
     }
 
     .Select-value-label {
-      font-size: $small;
-      font-weight: $regular;
-      color: $core-fleet-black;
+      font-size: $x-small;
+      font-weight: $bold;
+      color: $core-dark-blue-grey;
       line-height: 28px;
     }
   }
@@ -156,8 +151,8 @@
     &.is-pseudo-focused > .Select-control {
       .Select-value {
         .Select-value-label {
-          color: $core-fleet-black;
-          font-size: $small;
+          color: $core-dark-blue-grey;
+          font-size: $x-small;
         }
       }
     }
@@ -242,12 +237,11 @@
     }
 
     .Select-value {
-      margin-top: 3px;
-      margin-bottom: 3px;
+      margin-top: 4px;
     }
 
     .Select-value-label {
-      padding: 0 0 0 1rem;
+      padding: 0 0 0 10px;
     }
   }
 }