Merge pull request #976 from ae-utbm/tom-select-style

make ajax select appearance consistant with other inputs
ae-utbm · Jan 8, 2025 · b9e27ef · b9e27ef
2 parents 4226ba8 + 0d3fd95
commit b9e27ef
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 36 deletions.
diff --git a/core/static/core/components/ajax-select.scss b/core/static/core/components/ajax-select.scss
@@ -1,11 +1,27 @@
+.ts-wrapper.multi .ts-control {
+  min-width: calc(100% - 0.2rem);
+}
+
 /* This also requires ajax-select-index.css */
 .ts-dropdown {
+  width: calc(100% - 0.2rem);
+  left: 0.1rem;
+  top: calc(100% - 0.2rem - var(--nf-input-border-bottom-width));
+  border: var(--nf-input-border-color) var(--nf-input-border-width) solid;
+  border-top: none;
+  border-bottom-width: var(--nf-input-border-bottom-width);
+
+  .option.active {
+    background-color: #e5eafa;
+    color: inherit;
+  }
 
   .select-item {
     display: flex;
     flex-direction: row;
     gap: 10px;
     align-items: center;
+    overflow: hidden;
 
     img {
       height: 40px;
@@ -16,19 +32,44 @@
   }
 }
 
-.ts-wrapper {
-  margin: 5px;
+.ts-wrapper.single {
+  > .ts-control {
+    box-shadow: none;
+    max-width: 300px;
+    background-color: var(--nf-input-background-color);
+
+    &::after {
+      content: none;
+    }
+  }
+
+  > .ts-dropdown {
+    max-width: 300px;
+  }
+}
+
+.ts-wrapper input[type="text"] {
+  border: none;
+  border-radius: 0;
 }
 
-.ts-wrapper.single {
-  width: 263px; // same length as regular text inputs
+.ts-wrapper.multi, .ts-wrapper.single {
+  .ts-control:has(input:focus) {
+    outline: none;
+    border-color: var(--nf-input-focus-border-color);
+    box-shadow: none;
+  }
 }
 
 .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
   border-left: 1px solid #aaa;
 }
 
-.ts-wrapper.multi .ts-control {
+.ts-wrapper.multi.has-items .ts-control {
+  padding: calc(var(--nf-input-size) * 0.65);
+  display: flex;
+  gap: calc(var(--nf-input-size) / 3);
+
   [data-value],
   [data-value].active {
     background-image: none;
@@ -37,19 +78,17 @@
     border: 1px solid #aaa;
     border-radius: 4px;
     display: inline-block;
-    margin-left: 5px;
-    margin-top: 5px;
-    margin-bottom: 5px;
     padding-right: 10px;
     padding-left: 10px;
     text-shadow: none;
     box-shadow: none;
+
+    .remove {
+      vertical-align: baseline;
+    }
   }
 }
 
-.ts-dropdown {
-  .option.active {
-    background-color: #e5eafa;
-    color: inherit;
-  }
-}
+.ts-wrapper.focus .ts-control {
+  box-shadow: none;
+}
diff --git a/core/static/core/forms.scss b/core/static/core/forms.scss
@@ -48,7 +48,8 @@
 
   input,
   textarea[type="text"],
-  [type="number"] {
+  [type="number"],
+  .ts-control {
     border: none;
     text-decoration: none;
     background-color: $background-button-color;
@@ -69,7 +70,7 @@
     font-family: sans-serif;
   }
 
-  select {
+  select, .ts-control {
     border: none;
     text-decoration: none;
     font-size: 1.2em;
@@ -177,7 +178,7 @@ form {
   }
 
   // wrap texts
-  label, legend, ul.errorlist>li, .helptext {
+  label, legend, ul.errorlist > li, .helptext {
     text-wrap: wrap;
   }
 
@@ -218,23 +219,25 @@ form {
     }
   }
 
-  input[type="text"],
-  input[type="email"],
-  input[type="tel"],
-  input[type="url"],
-  input[type="password"],
-  input[type="number"],
-  input[type="date"],
-  input[type="week"],
-  input[type="time"],
-  input[type="month"],
-  input[type="search"],
-  textarea,
-  select {
-    min-width: 300px;
-
-    &.grow {
-      width: 95%;
+  :not(.ts-control) > {
+    input[type="text"],
+    input[type="email"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="password"],
+    input[type="number"],
+    input[type="date"],
+    input[type="week"],
+    input[type="time"],
+    input[type="search"],
+    textarea,
+    input[type="month"],
+    select {
+      min-width: 300px;
+
+      &.grow {
+        width: 95%;
+      }
     }
   }
 
@@ -253,7 +256,8 @@ form {
   input[type="month"],
   input[type="search"],
   textarea,
-  select {
+  select,
+  .ts-control {
     background: var(--nf-input-background-color);
     font-size: var(--nf-input-font-size);
     border-color: var(--nf-input-border-color);
@@ -713,7 +717,11 @@ form {
 
   // ---------------- SELECT
 
-  select {
+  select,
+  .ts-wrapper.multi .ts-control,
+  .ts-wrapper.single .ts-control,
+  .ts-wrapper.single.input-active .ts-control {
+    background-color: var(--nf-input-background-color);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280'  stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
     background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%;
     background-repeat: no-repeat;