From 0e625ea41cb0865785ce469cd83ea927c9804e10 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Sun, 2 Oct 2022 17:23:15 +0100
Subject: [PATCH] Fix vue-select styling

---
 src/nginxconfig/mount.js              | 1 +
 src/nginxconfig/scss/_callout.scss    | 2 +-
 src/nginxconfig/scss/_vue-select.scss | 6 ++++++
 src/nginxconfig/scss/style.scss       | 7 -------
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/nginxconfig/mount.js b/src/nginxconfig/mount.js
index 08c244d..483fb39 100644
--- a/src/nginxconfig/mount.js
+++ b/src/nginxconfig/mount.js
@@ -26,6 +26,7 @@ THE SOFTWARE.
 
 // Load in the app
 import './scss/style.scss';
+import 'vue-select/dist/vue-select.css';
 import { createApp } from 'vue';
 import './util/prism_bundle';
 import { getI18n } from './i18n/setup';
diff --git a/src/nginxconfig/scss/_callout.scss b/src/nginxconfig/scss/_callout.scss
index 29aefe6..a6c5fa9 100644
--- a/src/nginxconfig/scss/_callout.scss
+++ b/src/nginxconfig/scss/_callout.scss
@@ -33,7 +33,7 @@ THE SOFTWARE.
 
   &.floating {
     bottom: 0;
-    box-shadow: inset 0 0 0 $border-size $border-color;
+    box-shadow: inset 0 0 0 $border-size $border;
     max-width: calc(100% - 1rem);
     position: fixed;
     right: 0;
diff --git a/src/nginxconfig/scss/_vue-select.scss b/src/nginxconfig/scss/_vue-select.scss
index 7244e69..940c99a 100644
--- a/src/nginxconfig/scss/_vue-select.scss
+++ b/src/nginxconfig/scss/_vue-select.scss
@@ -26,6 +26,11 @@ THE SOFTWARE.
 
 // stylelint-disable selector-class-pattern
 .v-select {
+  --vs-border-color: #{$border};
+  --vs-border-radius: #{$border-radius};
+  --vs-dropdown-box-shadow: 0 2px 4px #{rgba($dark-blue, .06)};
+  --vs-dropdown-option--active-bg: #{$primary}; // stylelint-disable-line custom-property-pattern
+
   &.vs--open {
     > ul {
       opacity: 1;
@@ -100,6 +105,7 @@ THE SOFTWARE.
 
   .vs__dropdown-menu {
     .vs__dropdown-option {
+      padding: .25rem 1.25rem;
       white-space: normal;
     }
   }
diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index b652cfc..13a2aa8 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -38,13 +38,6 @@ $callout: #f3f5f9;
 
   @import "~pretty-checkbox/src/pretty-checkbox";
 
-  $vs-border-color: $border;
-  $vs-border-radius: $border-radius;
-  $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
-  $vs-state-active-bg: $primary;
-
-  @import "~vue-select/src/scss/vue-select";
-
   // Local imports
   @import "header";
   @import "tabs";