fix: remove column gap and leave it to be customizable by user (#270)

- add a CSS/SASS variable instead to make it customizable
ghiscoding · May 2, 2024 · 9db3fd4 · 9db3fd4
1 parent b8dc704
commit 9db3fd4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/packages/multiple-select-vanilla/src/styles/_variables.scss b/packages/multiple-select-vanilla/src/styles/_variables.scss
@@ -68,6 +68,7 @@ $ms-drop-scrollbar-color: #c1c1c1 #f1f1f1 !default;
 $ms-drop-zindex: 1050 !default;
 $ms-input-focus-outline: none !default;
 $ms-infinite-empty-option-height: 20px !default;
+$ms-label-column-gap: 0 !default;
 $ms-label-margin-bottom: 0 !default;
 $ms-label-min-height: 1.25rem !default;
 $ms-label-padding: 0 0 0 2px !default;

diff --git a/packages/multiple-select-vanilla/src/styles/multiple-select.scss b/packages/multiple-select-vanilla/src/styles/multiple-select.scss
@@ -62,7 +62,7 @@
       & + span {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: var(--ms-label-column-gap, $ms-label-column-gap);
         padding-left: var(--ms-label-text-padding-left, $ms-label-text-padding-left);
       }
     }
@@ -127,10 +127,10 @@
       display: flex;
       flex: 1;
       align-items: center;
-      column-gap: 4px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      column-gap: var(--ms-label-column-gap, $ms-label-column-gap);
 
       &.ms-placeholder {
         color: var(--ms-placeholder-color, $ms-placeholder-color);