Snygga till inmatningsfält ytterligare

Author: stafak

src/assets/extendables.scss

@@ -1,5 +1,5 @@
 %text-input {
-  border: 1px solid #ccc;
+  border: 1px solid var(--bs-border-color);
   border-radius: 4px;
   background-color: #fff;
   transition: border-color 0.3s,

src/assets/main.scss

@@ -5,6 +5,7 @@
 $tooltip-max-width: 320px;
 $tooltip-padding-x: 0.75rem;
 $tooltip-padding-y: 0.5rem;
+$border-color: #bbb;
 @import "bootstrap/scss/bootstrap.scss";
 
 body {

src/components/edit/blocks/EditItemSelector.vue

@@ -25,7 +25,7 @@ const minimumTaxonomyItemLevel = computed(() => {
 </script>
 
 <template>
-  <div class="d-flex">
+  <div class="selector-container">
     <VueSelect
       v-model="taxonomyItemToAdd"
       :filter-by="
@@ -82,10 +82,17 @@ const minimumTaxonomyItemLevel = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+.selector-container {
+  display: flex;
+  padding: 0 0.5rem;
+}
+
 .custom-select {
   /* TODO: Kan hamna för långt upp... */
   --vs-menu-height: 24rem;
 
+  --vs-border: 1px solid var(--bs-border-color);
+
   :deep(.menu) {
     /* Så att dropdownen öppnas uppåt */
     bottom: 100%;