@openeuropa/bcl-theme-default 1.11.0 → 1.12.0

package/src/scss/_multiselect.scss

@@ -1,58 +1,185 @@
+@use "sass:map";
 /* stylelint-disable selector-no-qualifying-type,
    selector-max-class, selector-max-compound-selectors,
    no-descending-specificity,
    function-calc-no-unspaced-operator,
+   declaration-block-no-shorthand-property-overrides,
 */
-@use "slim-select/src/slim-select/slimselect.scss" with (
-  $primary-color: $primary
-);
-
-// Multiselect Spacers
-$multiselect-spacers: (
-  "disabled-spacer": calc(map-get($spacers, 2) - 1px),
-  "disabled-spacer-md": calc(map-get($spacers, 2) - 2px),
-  "select-spacer": calc(map-get($spacers, 2) - 2px),
-  "select-spacer-md": 0.075rem,
-  "select-spacer-start": 0.3rem,
-  "badge-padding-x": map-get($spacers, 1),
-  "badge-padding-y": map-get($spacers, 1),
-  "add-margin-top": map-get($spacers, "2-5"),
-  "add-margin-top-md": map-get($spacers, 2),
-  "icon-position-x": map-get($spacers, 4),
-);
-
-select.multi-select {
-  position: absolute;
-  // stylelint-disable declaration-no-important
-  display: inline-block !important;
-  max-width: 0;
-  max-height: 35px;
-  pointer-events: none;
-  opacity: 0;
+
+:root {
+  // Colors
+  --ss-bg-color: #ffffff;
+  --ss-font-color: #4d4d4d;
+  --ss-placeholder-color: #212529;
+  --ss-disabled-color: #dcdee2;
+  --ss-border-color: #6c757d;
+  --ss-highlight-color: #fffb8c;
+  --ss-success-color: #00b755;
+  --ss-error-color: #dc3545;
+  --ss-focus-color: #5897fb;
+
+  // Heights
+  --ss-main-height: 38px;
+  --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: 0.375rem;
 }
 
-.ss-main.multi-select.ss-1 {
-  padding: 0;
-  &.form-select.is-invalid,
-  &.form-select.is-valid {
+// 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;
+  user-select: none;
+  color: var(--ss-font-color);
+  width: 100%;
+  padding: 0.075rem 0 0.075rem 0.3rem;
+  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);
+  overflow: hidden;
+  min-height: 38px;
+
+  &:focus-visible {
+    @include form-focus-ring();
+  }
+
+  &.form-select {
     background: none;
-    padding: 0;
+    padding: 0.075rem 0 0.075rem 0.3rem;
   }
+
+  &.ss-disabled {
+    background-color: var(--ss-disabled-color);
+    cursor: not-allowed;
+
+    .ss-values {
+      .ss-disabled {
+        color: var(--ss-font-color);
+      }
+
+      .ss-value {
+        .ss-value-delete {
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  &.ss-dir-above {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
+  &.ss-dir-below {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
   .ss-values {
-    @include font-size($h4-font-size);
-    .ss-value {
-      display: inline-block;
-      padding: $badge-padding-y $badge-padding-x;
-      @include font-size($badge-font-size);
-      font-weight: $badge-font-weight;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--ss-spacing-m);
+    flex: 1 1 100%;
+
+    .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-placeholder-color);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    // Max is used to display max number of values
+    .ss-max {
+      display: flex;
+      user-select: none;
+      align-items: center;
+      width: fit-content;
+      font-size: 12px;
+      color: var(--ss-bg-color);
       line-height: 1;
-      color: $badge-color;
-      text-align: left;
-      white-space: normal;
-      vertical-align: baseline;
-      padding-right: map-get($spacers, "3-5");
-      @include border-radius($badge-border-radius);
-      @include gradient-bg();
+      padding: var(--ss-spacing-s) var(--ss-spacing-m);
+      background-color: $primary;
+      border-radius: var(--ss-border-radius);
+    }
+
+    // Used for single select selected value
+    .ss-single {
+      display: flex;
+      margin: auto 0px auto var(--ss-spacing-s);
+    }
+
+    // Used for the selected values
+    .ss-value {
+      display: flex;
+      user-select: none;
+      align-items: center;
+      width: fit-content;
+      background-color: $primary;
+      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;
+      margin: 3px 5px 3px 0;
+      padding: 0.35em 1.25rem 0.35em 0.65em;
+
+      &.ss-value-out {
+        animation-name: ss-valueOut;
+        animation-duration: var(--ss-animation-timing);
+        animation-timing-function: ease-out;
+      }
+
+      .ss-value-text {
+        color: var(--ss-bg-color);
+        line-height: 1;
+        margin-right: 5px;
+      }
+
       .ss-value-delete {
         font-size: 0;
         &:after {
@@ -78,120 +205,372 @@ select.multi-select {
         }
       }
     }
-    .ss-disabled {
-      padding-top: map-get($multiselect-spacers, "disabled-spacer");
-      padding-bottom: map-get($multiselect-spacers, "disabled-spacer");
-      @include font-size(1rem);
-    }
   }
-  .ss-multi-selected {
-    border-color: $input-border-color;
-    padding: map-get($multiselect-spacers, "select-spacer") 0
-      map-get($multiselect-spacers, "select-spacer")
-      map-get($multiselect-spacers, "select-spacer-start");
-    &.ss-disabled {
-      .ss-values {
-        .ss-value {
-          background: $gray-500;
-        }
+
+  .ss-deselect {
+    flex: 0 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: auto;
+    padding: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m);
+
+    svg {
+      width: 8px;
+      height: 8px;
+
+      path {
+        fill: none;
+        stroke: var(--ss-font-color);
+        stroke-width: 20;
+        stroke-linecap: round;
+        stroke-linejoin: round;
       }
     }
-    .ss-add {
-      margin-top: 0;
-      align-self: center;
-    }
-    .ss-values {
-      .ss-disabled {
-        color: #6c757d;
-      }
+  }
+
+  .ss-arrow {
+    flex: 0 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    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);
     }
   }
 }
 
-.ss-main.ss-1 {
-  &.form-select.is-invalid,
-  &.form-select.is-valid {
-    background: none;
-    padding: 0;
-  }
+// Content container
+.ss-content {
+  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 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);
+  transform-origin: center top;
+  overflow: hidden;
+  z-index: 10000;
+
   &.form-select {
-    border: none;
-    background: none;
-    padding: 0.075rem 0 0.075rem 0.3rem;
+    padding: 0;
+    background: var(--ss-bg-color);
   }
-  .ss-single-selected {
-    min-height: 37px;
-    .placeholder {
-      background: none;
-      cursor: pointer;
-      opacity: 1;
-    }
+
+  &.ss-relative {
+    position: relative;
+    height: 100%;
   }
-}
 
-.ss-main.multi-select.is-invalid,
-.ss-main.multi-select.is-valid,
-.was-validated .multi-select:invalid + .ss-main.multi-select,
-.was-validated .multi-select:valid + .ss-main.multi-select {
-  .ss-multi-selected {
-    background-repeat: no-repeat;
-    background-position: right map-get($multiselect-spacers, "icon-position-x")
-      center;
-    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  &.ss-fixed {
+    position: fixed;
   }
-}
-.ss-main.multi-select.is-invalid,
-.was-validated .multi-select:invalid + .ss-main.multi-select {
-  .ss-multi-selected {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
-    border-color: $danger;
+
+  &.ss-open {
+    opacity: 1;
+    transform: scaleY(1);
   }
-  .ss-values {
-    .ss-value {
-      background: $danger;
-    }
+
+  &.ss-dir-above {
+    flex-direction: column-reverse;
+    transform-origin: center bottom;
+    border-top-left-radius: var(--ss-border-radius);
+    border-top-right-radius: var(--ss-border-radius);
   }
-}
-.ss-main.multi-select.is-valid,
-.was-validated .multi-select:valid + .ss-main.multi-select {
-  .ss-multi-selected {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
-    border-color: $success;
+
+  &.ss-dir-below {
+    transform-origin: center top;
+    border-bottom-left-radius: var(--ss-border-radius);
+    border-bottom-right-radius: var(--ss-border-radius);
   }
-  .ss-values {
-    .ss-value {
-      background: $success;
+
+  .ss-search {
+    flex: 0 1 auto;
+    display: flex;
+    flex-direction: row;
+    padding: var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m)
+      var(--ss-spacing-l);
+
+    input {
+      display: inline-flex;
+      font-size: inherit;
+      line-height: inherit;
+      flex: 1 1 auto;
+      width: 100%;
+      min-width: 0px;
+      padding: var(--ss-spacing-m) var(--ss-spacing-l);
+      margin: 0;
+      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;
+
+      &::placeholder {
+        color: var(--ss-placeholder-color);
+        vertical-align: middle;
+      }
+
+      &:focus {
+        @include form-focus-ring();
+      }
+    }
+
+    .ss-addable {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      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);
+
+      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;
+        }
+      }
     }
   }
-}
 
-@include media-breakpoint-up(md) {
-  .ss-main.ss-1.multi-select {
-    .ss-multi-selected {
-      padding: map-get($multiselect-spacers, "select-spacer-md") 0
-        map-get($multiselect-spacers, "select-spacer-md")
-        map-get($multiselect-spacers, "select-spacer-start");
+  .ss-list {
+    flex: 1 1 auto;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .ss-error {
+      color: var(--ss-error-color);
+      padding: var(--ss-spacing-l);
     }
-    .ss-values {
-      @include font-size(1rem);
-      .ss-value {
-        @include font-size($badge-font-size-desktop);
+
+    .ss-searching {
+      color: var(--ss-font-color);
+      padding: var(--ss-spacing-l);
+    }
+
+    .ss-optgroup {
+      // If optgroup has close, hide all options
+      &.ss-close {
+        .ss-option {
+          display: none !important;
+        }
       }
-      .ss-disabled {
-        padding-top: calc(
-          map-get($multiselect-spacers, "disabled-spacer-md") + 1px
-        );
-        padding-bottom: map-get($multiselect-spacers, "disabled-spacer-md");
+
+      .ss-optgroup-label {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
+          var(--ss-spacing-l);
+
+        .ss-optgroup-label-text {
+          flex: 1 1 auto;
+          font-weight: bold;
+          color: var(--ss-font-color);
+        }
+
+        // If optgroup has arrow, make label clickable
+        &:has(.ss-arrow) {
+          cursor: pointer;
+        }
+
+        .ss-optgroup-actions {
+          flex: 0 1 auto;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: var(--ss-spacing-m);
+
+          .ss-selectall {
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+
+            &:hover {
+              opacity: 0.5;
+            }
+
+            &.ss-selected {
+              svg {
+                path {
+                  stroke: var(--ss-error-color);
+                }
+              }
+            }
+
+            span {
+              flex: 0 1 auto;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: calc(100% * 0.6);
+              text-align: center;
+              padding: 0 var(--ss-spacing-s) 0 0;
+            }
+
+            svg {
+              flex: 0 1 auto;
+              width: 13px;
+              height: 13px;
+
+              path {
+                fill: none;
+                stroke: var(--ss-success-color);
+                stroke-linecap: round;
+                stroke-linejoin: round;
+              }
+
+              &:first-child {
+                stroke-width: 5;
+              }
+              &:last-child {
+                stroke-width: 11;
+              }
+            }
+          }
+
+          .ss-closable {
+            flex: 0 1 auto;
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+
+            .ss-arrow {
+              flex: 1 1 auto;
+              width: 10px;
+              height: 10px;
+
+              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);
+              }
+            }
+          }
+        }
+      }
+
+      .ss-option {
+        padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s)
+          calc(var(--ss-spacing-l) * 3);
       }
     }
-  }
 
-  .ss-main.multi-select.is-invalid,
-  .ss-main.multi-select.is-valid,
-  .was-validated .multi-select:invalid + .ss-main.multi-select,
-  .was-validated .multi-select:valid + .ss-main.multi-select {
-    .ss-multi-selected {
-      background-position: right 1.6rem center;
+    .ss-option {
+      display: block; // Important for text with mark element highlight
+      padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
+        var(--ss-spacing-l);
+      white-space: normal;
+      color: var(--ss-font-color);
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        color: var(--ss-bg-color);
+        background-color: $primary;
+      }
+
+      &.ss-highlighted,
+      &:not(.ss-disabled).ss-selected {
+        color: var(--ss-bg-color);
+        background-color: $primary;
+      }
+
+      &.ss-disabled {
+        cursor: not-allowed;
+        background-color: var(--ss-disabled-color);
+
+        &:hover {
+          color: var(--ss-font-color);
+        }
+      }
+
+      // Sub div wrapper for highlighting text
+      .ss-search-highlight {
+        display: inline-block;
+        background-color: var(--ss-highlight-color);
+      }
     }
   }
 }
+
+.form-select.ss-main.multi-select.is-invalid,
+.was-validated .multi-select:invalid + .form-select.ss-main.multi-select {
+  border-color: $danger;
+  background-position: right 2.5rem center;
+  background-repeat: no-repeat;
+  padding-right: 0.5rem;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23a51f2c' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
+  &:focus-visible {
+    border-color: $gray-600;
+    outline-color: $danger;
+  }
+}
+.form-select.ss-main.multi-select.is-valid,
+.was-validated .multi-select:valid + .form-select.ss-main.multi-select {
+  border-color: $success;
+  background-position: right 2.5rem center;
+  background-repeat: no-repeat;
+  padding-right: 0.5rem;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
+  &:focus-visible {
+    border-color: $gray-600;
+    outline-color: $success;
+  }
+}
+
+.ss-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+}