Fleet UI: Fix multi select styling on schedule, packs, members (#9102)

2022-12-22 16:34:47 -05:00
parent 468f90f897
commit 8980088f98
4 changed files with 15 additions and 12 deletions
@@ -0,0 +1 @@
+- Fixes to multiselect styling
@@ -251,10 +251,15 @@
      flex-grow: 1;

      .Select-value {
-        margin-top: 1px;
+        border: 1px solid $ui-fleet-black-75;
+        vertical-align: middle;
+        margin-top: 0;
+        display: inline-flex;
+        flex-direction: row-reverse;

        .Select-value-label {
          font-size: $x-small;
+          align-self: center;
        }
      }
    }
@@ -98,13 +98,6 @@
          border-bottom-left-radius: 0;
        }
      }
-
-      .Select-value {
-        line-height: 34px;
-        border: 1px solid $ui-fleet-black-75;
-        margin-top: 5px;
-        margin-bottom: 0;
-      }
    }
  }

@@ -1,5 +1,13 @@
 .autocomplete-dropdown {
  .Select {
+    border: solid 1px $ui-fleet-blue-15;
+    border-radius: 4px;
+
+    &:hover,
+    &.is-focused {
+      border-color: $core-vibrant-blue;
+    }
+
    &.Select--multi {
      .Select-option {
        color: $core-fleet-black;
@@ -33,10 +41,6 @@
        border: 1px solid $core-vibrant-blue;
        background-color: $ui-vibrant-blue-10;

-        .Select-value-label {
-          font-weight: $bold;
-        }
-
        .Select-value-icon {
          &:after {
            color: $core-fleet-black;