Standardize vue-select custom.css styles

2023-11-06 17:39:39 +01:00
parent cfd40aa2a7
commit 2f4ef7ecd4
5 changed files with 207 additions and 59 deletions
@@ -78,10 +78,41 @@ th {
 }

 .v-select {
+  min-width: auto;
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  margin-bottom: 0;
+  font-size: 0.9rem;
+  border-radius: 0.25rem;
+
+  .vs__selected-options {
+    // do not allow growing
+    width: 0;
+  }
+
+  .vs__selected {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
  .vs__search {
    margin-top: 0.375rem;
  }

+  &:not(.vs--open) .vs__selected + .vs__search {
+    // force this to not use any space
+    // we still need it to be rendered for the focus
+    width: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    height: 0;
+  }
+
  .vs__dropdown-toggle {
    padding: 0.375rem;
    padding-top: 0;