slim-select 1.27.0 → 2.0.0

package/src/slim-select/slimselect.scss

@@ -1,285 +1,257 @@
-$height: 30px !default;
-$white: #ffffff !default;
-$font-color: #666666 !default;
-$font-placeholder-color: #8a8a8a !default;
-$font-disabled-color: #dedede !default;
-$primary-color: #5897fb !default;
-$border-color: #dcdee2 !default;
-$search-highlight-color: #fffb8c !default;
-$border-radius: 4px !default;
-$spacing-l: 8px !default;
-$spacing-m: 6px !default;
-$spacing-s: 4px !default;
+:root {
+  // Colors
+  --ss-primary-color: #5897fb;
+  --ss-bg-color: #ffffff;
+  --ss-font-color: #4d4d4d;
+  --ss-font-placeholder-color: #8d8d8d;
+  --ss-disabled-color: #8a8a8a;
+  --ss-border-color: #dcdee2;
+  --ss-highlight-color: #fffb8c;
+  --ss-error-color: #dc3545;
+
+  // Heights
+  --ss-main-height: 30px;
+  --ss-content-height: 300px;
+
+  // Spacing
+  --ss-spacing-l: 7px;
+  --ss-spacing-m: 5px;
+  --ss-spacing-s: 3px;
+
+  // Misc
+  --ss-animation-timing: 0.2s;
+  --ss-border-radius: 4px;
+}
 
+// Animation keyframes
+@keyframes ss-valueIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes ss-valueOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+// Misc classes
+.ss-hide {
+  display: none !important;
+}
+
+// Main container
 .ss-main {
+  display: flex;
+  flex-direction: row;
   position: relative;
-  display: inline-block;
   user-select: none;
-  color: $font-color;
+  color: var(--ss-font-color);
+  min-height: var(--ss-main-height);
   width: 100%;
+  padding: var(--ss-spacing-s);
+  cursor: pointer;
+  border: 1px solid var(--ss-border-color);
+  border-radius: var(--ss-border-radius);
+  background-color: var(--ss-bg-color);
+  outline: 0;
+  box-sizing: border-box;
+  transition: background-color var(--ss-animation-timing);
 
-  .ss-single-selected {
-    display: flex;
-    cursor: pointer;
-    width: 100%;
-    height: $height;
-    padding: $spacing-m;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
-    background-color: $white;
-    outline: 0;
-    box-sizing: border-box;
-    transition: background-color .2s;
-
-    &.ss-disabled {
-      background-color: $border-color;
-      cursor: not-allowed;
-    }
-
-    &.ss-open-above {
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-    }
-    &.ss-open-below {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-
-    .placeholder {
-      display: flex;
-      flex: 1 1 100%;
-      align-items: center;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      text-align: left;
-      width: calc(100% - 30px);
-      line-height: 1em;
-      -webkit-user-select: none;  
-      -moz-user-select: none;    
-      -ms-user-select: none;      
-      user-select: none;
+  &:focus {
+    box-shadow: 0 0 5px var(--ss-primary-color);
+  }
 
-      * {
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: auto;
-      }
+  &.ss-disabled {
+    background-color: var(--ss-border-color);
+    cursor: not-allowed;
 
+    .ss-values {
       .ss-disabled {
-        color: $font-disabled-color;
+        color: var(--ss-font-color);
       }
-    }
-
-    .ss-deselect {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      flex: 0 1 auto;
-      margin: 0 $spacing-m 0 $spacing-m;
-      font-weight: bold;
 
-      &.ss-hide {
-        display: none;
-      }
-    }
-
-    .ss-arrow {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      flex: 0 1 auto;
-      margin: 0 $spacing-m 0 $spacing-m;
-
-      span {
-        border: solid $font-color;
-        border-width: 0 2px 2px 0;
-        display: inline-block;
-        padding: 3px;
-        transition: transform .2s, margin .2s;
-
-        &.arrow-up {
-          transform: rotate(-135deg);
-          margin: 3px 0 0 0;
-        }
-        &.arrow-down {
-          transform: rotate(45deg);
-          margin: -3px 0 0 0;
+      .ss-value {
+        .ss-value-delete {
+          cursor: not-allowed;
         }
       }
     }
   }
 
-  .ss-multi-selected {
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-    min-height: $height;
-    width: 100%;
-    padding: 0 0 0 3px;
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
-    background-color: $white;
-    outline: 0;
-    box-sizing: border-box;
-    transition: background-color .2s;
-
-    &.ss-disabled {
-      background-color: $border-color;
-      cursor: not-allowed;
-
-      .ss-values {
-        .ss-disabled {
-          color: $font-color;
-        }
+  &.ss-open-above {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
+  &.ss-open-below {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
 
-        .ss-value {
-          .ss-value-delete {
-            cursor: not-allowed;
-          }
-        }
-      }
-    }
+  .ss-values {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--ss-spacing-m);
+    flex: 1 1 100%;
 
-    &.ss-open-above {
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-    }
-    &.ss-open-below {
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
+    .ss-placeholder {
+      display: flex;
+      padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) var(--ss-spacing-m);
+      margin: auto 0px auto 0px;
+      line-height: 1em;
+      align-items: center;
+      width: 100%;
+      color: var(--ss-font-placeholder-color);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .ss-values {
+    .ss-single {
       display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      flex: 1 1 100%;
-      width: calc(100% - 30px);
+      margin: auto 0px auto var(--ss-spacing-s);
+    }
 
-      .ss-disabled {
-        display: flex;
-        padding: 4px 5px;
-        margin: 2px 0px;
-        line-height: 1em;
-        align-items: center;
-        width: 100%;
-        color: $font-disabled-color;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    .ss-value {
+      display: flex;
+      user-select: none;
+      align-items: center;
+      width: fit-content;
+      background-color: var(--ss-primary-color);
+      border-radius: var(--ss-border-radius);
+      animation-name: ss-valueIn;
+      animation-duration: var(--ss-animation-timing);
+      animation-timing-function: ease-out;
+      animation-fill-mode: both;
+
+      &.ss-value-out {
+        animation-name: ss-valueOut;
+        animation-duration: var(--ss-animation-timing);
+        animation-timing-function: ease-out;
       }
 
-      @keyframes scaleIn {
-        0% {transform: scale(0); opacity: 0;}
-        100% {transform: scale(1); opacity: 1;}
-      }
-      @keyframes scaleOut {
-        0% {transform: scale(1); opacity: 1;}
-        100% {transform: scale(0); opacity: 0;}
+      .ss-value-text {
+        font-size: 12px;
+        color: var(--ss-bg-color);
+        line-height: 1;
+        padding: var(--ss-spacing-s) var(--ss-spacing-m);
       }
 
-      .ss-value {
+      .ss-value-delete {
         display: flex;
-        user-select: none;
         align-items: center;
-        font-size: 12px;
-        padding: 3px 5px;
-        margin: 3px 5px 3px 0px;
-        color: $white;
-        background-color: $primary-color;
-        border-radius: $border-radius;
-        animation-name: scaleIn;
-        animation-duration: .2s;
-        animation-timing-function: ease-out;
-        animation-fill-mode: both;
-
-        &.ss-out {
-          animation-name: scaleOut;
-          animation-duration: .2s;
-          animation-timing-function: ease-out;
-        }
-
-        .ss-value-delete {
-          margin: 0 0 0 5px;
-          cursor: pointer;
+        width: var(--ss-spacing-l);
+        padding: var(--ss-spacing-s) var(--ss-spacing-m);
+        cursor: pointer;
+        border-left: solid 1px var(--ss-bg-color);
+
+        svg {
+          path {
+            fill: none;
+            stroke: var(--ss-bg-color);
+            stroke-width: 18;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
         }
       }
     }
+  }
 
-    .ss-add {
-      display: flex;
-      flex: 0 1 3px;
-      margin: 9px 12px 0 5px;
-
-      .ss-plus {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: $font-color;
-        position: relative;
-        height: 10px;
-        width: 2px;
-        transition: transform .2s;
-
-        &:after {
-          background: $font-color;
-          content: "";
-          position: absolute;
-          height: 2px;
-          width: 10px;
-          left: -4px;
-          top: 4px;
-        }
-
-        &.ss-cross {
-          transform: rotate(45deg);
-        }
+  .ss-deselect {
+    display: flex;
+    align-self: center;
+    justify-content: flex-end;
+    flex: 0 1 auto;
+    width: 8px;
+    height: 8px;
+    margin: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
+
+    svg {
+      path {
+        fill: none;
+        stroke: var(--ss-font-color);
+        stroke-width: 20;
+        stroke-linecap: round;
+        stroke-linejoin: round;
       }
     }
+  }
 
+  .ss-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 0 1 auto;
+    width: 12px;
+    height: 12px;
+    margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m);
+
+    path {
+      fill: none;
+      stroke: var(--ss-font-color);
+      stroke-width: 18;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transition-timing-function: ease-out;
+      transition: var(--ss-animation-timing);
+    }
   }
 }
+
+// Content container
 .ss-content {
-  position: absolute;
-  width: 100%;
-  margin: -1px 0 0 0;
+  position: absolute; // default position
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  width: auto;
+  max-height: var(--ss-content-height);
   box-sizing: border-box;
-  border: solid 1px $border-color;
-  z-index: 1010;
-  background-color: $white;
-  transform-origin: center top;
-  transition: transform .2s, opacity .2s;
+  border: solid 1px var(--ss-border-color);
+  background-color: var(--ss-bg-color);
+  transition: transform var(--ss-animation-timing), opacity var(--ss-animation-timing);
   opacity: 0;
   transform: scaleY(0);
+  overflow: hidden;
+  z-index: 10000;
 
-  &.ss-open {
-    display: block;
+  &.ss-relative {
+    position: relative;
+    height: 100%;
+  }
+
+  &.ss-open-above {
     opacity: 1;
     transform: scaleY(1);
+    transform-origin: center bottom;
+    border-top-left-radius: var(--ss-border-radius);
+    border-top-right-radius: var(--ss-border-radius);
+  }
+
+  &.ss-open-below {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: center top;
+    border-bottom-left-radius: var(--ss-border-radius);
+    border-bottom-right-radius: var(--ss-border-radius);
   }
 
   .ss-search {
+    flex: 0 1 auto;
     display: flex;
     flex-direction: row;
-    padding: $spacing-l $spacing-l $spacing-m $spacing-l;
-
-    &.ss-hide {
-      height: 0px;
-      opacity: 0;
-      padding: 0px 0px 0px 0px;
-      margin: 0px 0px 0px 0px;
-
-      input {
-        height: 0px;
-        opacity: 0;
-        padding: 0px 0px 0px 0px;
-        margin: 0px 0px 0px 0px;
-      }
-    }
+    padding: var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
 
     input {
       display: inline-flex;
@@ -288,25 +260,22 @@ $spacing-s: 4px !default;
       flex: 1 1 auto;
       width: 100%;
       min-width: 0px;
-      height: 30px;
-      padding: $spacing-m $spacing-l;
+      padding: var(--ss-spacing-m) var(--ss-spacing-l);
       margin: 0;
-      border: 1px solid $border-color;
-      border-radius: $border-radius;
-      background-color: $white;
+      border: 1px solid var(--ss-border-color);
+      border-radius: var(--ss-border-radius);
+      background-color: var(--ss-bg-color);
       outline: 0;
       text-align: left;
       box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      -webkit-appearance: textfield;
-      
+
       &::placeholder {
-        color: $font-placeholder-color;
+        color: var(--ss-font-placeholder-color);
         vertical-align: middle;
       }
 
       &:focus {
-        box-shadow: 0 0 5px $primary-color;
+        box-shadow: 0 0 5px var(--ss-primary-color);
       }
     }
 
@@ -315,76 +284,92 @@ $spacing-s: 4px !default;
       justify-content: center;
       align-items: center;
       cursor: pointer;
-      font-size: 22px;
-      font-weight: bold;
-      flex: 0 0 30px;
-      height: 30px;
-      margin: 0 0 0 8px;
-      border: 1px solid $border-color;
-      border-radius: $border-radius;
-      box-sizing: border-box;
-    }
-  }
+      flex: 0 0 auto;
+      height: auto;
+      margin: 0 0 0 var(--ss-spacing-m);
+      border: 1px solid var(--ss-border-color);
+      border-radius: var(--ss-border-radius);
 
-  .ss-addable {
-    padding-top: 0px;
+      svg {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 0 1 auto;
+        width: 12px;
+        height: 12px;
+        margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m);
+
+        path {
+          fill: none;
+          stroke: var(--ss-font-color);
+          stroke-width: 18;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      }
+    }
   }
 
   .ss-list {
-    max-height: 200px;
+    flex: 1 1 auto;
+    height: auto;
     overflow-x: hidden;
     overflow-y: auto;
-    text-align: left;
+
+    .ss-error {
+      color: var(--ss-error-color);
+      padding: var(--ss-spacing-l);
+    }
+
+    .ss-searching {
+      color: var(--ss-font-color);
+      padding: var(--ss-spacing-l);
+    }
 
     .ss-optgroup {
       .ss-optgroup-label {
-        padding: 6px 10px 6px 10px;
+        padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
         font-weight: bold;
       }
 
       .ss-option {
-        padding: 6px 6px 6px 25px;
+        padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l) * 3);
       }
     }
 
-    .ss-optgroup-label-selectable {
+    .ss-optgroup-selectable {
       cursor: pointer;
-      
+
       &:hover {
-        color: $white;
-        background-color: $primary-color;
+        color: var(--ss-bg-color);
+        background-color: var(--ss-primary-color);
       }
     }
 
     .ss-option {
-      padding: 6px 10px 6px 10px;
+      padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
       cursor: pointer;
       user-select: none;
 
-      * {
-        display: inline-block;
-      }
-
-      &:hover, &.ss-highlighted {
-        color: $white;
-        background-color: $primary-color;
+      &:hover,
+      &.ss-highlighted {
+        color: var(--ss-bg-color);
+        background-color: var(--ss-primary-color);
       }
 
       &.ss-disabled {
         cursor: not-allowed;
-        color: $font-disabled-color;
-        background-color: $white;
+        color: var(--ss-disabled-color);
+        background-color: var(--ss-bg-color);
       }
 
       &:not(.ss-disabled).ss-option-selected {
-        color: $font-color;
-        background-color: rgba($primary-color, .1);
+        color: var(--ss-font-color);
+        background-color: var(--ss-highlight-color);
       }
 
-      &.ss-hide { display: none; }
-
       .ss-search-highlight {
-        background-color: $search-highlight-color;
+        background-color: var(--ss-highlight-color);
       }
     }
   }