@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51

package/styles/multi-select/_fluent-definition.scss

@@ -8,21 +8,21 @@ $ddl-bigger-search-wrapper-width: calc(100% - 38px) !default;
 $ddl-bigger-small-search-wrapper-width: calc(100% - 32px) !default;
 $ddl-small-search-wrapper-width: calc(100% - 30px) !default;
 $ddl-popup-shadow-value: $shadow-lg !default;
-$ddl-remains-padding-left: 0 !default;
+$ddl-remains-padding-left: 8px !default;
 $ddl-chip-margin: 3px !default;
 $ddl-chip-margin-bigger: 3px !default;
 $ddl-chip-radius: 0 !default;
-$ddl-chip-content-padding: 0 6px 0 0 !default;
+$ddl-chip-content-padding: 0 6px 1px 0 !default;
 $ddl-chip-mobile-content-padding: 8px 4px 8px 0 !default;
 $ddl-chip-bigger-content-padding: 7px 8px 7px 4px !default;
 $ddl-rtl-chip-mobile-content-padding: 8px 0 8px 4px !default;
-$ddl-chip-padding: 0 6px 0 4px !default;
-$ddl-chip-close-top: 0 !default;
-$ddl-chip-close-left: 0 !default;
+$ddl-chip-padding: 0 8px 0 4px !default;
+$ddl-chip-close-top: 3px !default;
+$ddl-chip-close-left: 6px !default;
 $ddl-chip-close-margin: 0 0 0 !default;
 $ddl-chip-close-square: 14px !default;
 $ddl-chip-hooker-square: 24px !default;
-$ddl-chip-close-font: 14px !default;
+$ddl-chip-close-font: 10px !default;
 $ddl-chip-height: 24px !default;
 $ddl-chip-mobile-height: 30px !default;
 $ddl-chip-collection-top: 0 !default;
@@ -30,7 +30,7 @@ $ddl-input-height: 30px !default;
 $ddl-input-bigger-height: 36px !default;
 $ddl-input-mob-height: 30px !default;
 $ddl-control-height: 30px !default;
-$ddl-control-bigger-height: 36px !default;
+$ddl-control-bigger-height: 38px !default;
 $ddl-delimviewheight: 28px !default;
 $ddl-delimviewheight-bigger: 36px !default;
 $ddl-delimview-bigger-padding-left: 12px !default;
@@ -38,9 +38,10 @@ $ddl-closer-hooker-font: $text-xxs !default;
 $ddl-chip-font-family: $font-family !default;
 $ddl-closer-margin-top: -2.4em !default;
 $ddl-closer-margin-top-bigger: -2.7em !default;
-$ddl-icon-margin-top: -2.1em !default;
+$ddl-icon-margin-top: -1.68em !default;
 $ddl-clear-margin-top: -2em !default;
-$ddl-icon-margin-top-bigger: -2.25em !default;
+$ddl-bigger-clear-margin-top: -2.25em !default;
+$ddl-icon-margin-top-bigger: -1.68em !default;
 $ddl-chip-mobile-radius: 2px !default;
 $ddl-chip-sel-mobile-height: 40px !default;
 $ddl-chip-selected-padding: 12px 4px 11px 0 !default;
@@ -78,7 +79,8 @@ $ddl-popup-active-focus-shadow-item: none !default;
 $ddl-popup-active-border-width: 0 !default;
 $ddl-delim-text-indent: 8px !default;
 $ddl-popup-normal-border-width: 0 !default;
-$ddl-check-right: 12px !default;
+$ddl-check-right: 8px !default;
+$ddl-check-group-right: 12px !default;
 $ddl-check-left: 12px !default;
 $ddl-bigger-select-all-height: 48px !default;
 $ddl-select-all-height: 36px !default;
@@ -86,13 +88,14 @@ $ddl-back-icon-margin: 2.5px 10px 0 -52px !default;
 $ddl-back-icon-padding: 0 8px !default;
 $ddl-filterbar-padding: 8px !default;
 $ddl-bigger-filterbar-padding: 0 !default;
-$ddl-delimviewheight-check-bigger: 34px !default;
+$ddl-delimviewheight-check-bigger: 36px !default;
 $ddl-popup-reorder-border: $border-light !default;
 $ddl-check-right-margin: 8px !default;
 $ddl-bigger-check-right-margin: 12px !default;
 $ddl-selectall-font-size: 14px !default;
 $ddl-bigger-selectall-font-size: $text-base !default;
-$ddl-close-icon-left: 25px !default;
+$ddl-close-icon-left: 30px !default;
+$ddl-close-down-icon-left: 35px !default;
 $ddl-check-icon-top: 0 !default;
 $ddl-bigger-check-right: 16px !default;
 $ddl-delim-text-padding-right: 6px !default;
@@ -112,12 +115,13 @@ $ddl-multiselect-filled-input-min-height: 39px !default;
 $ddl-multiselect-filled-float-input-chip-clear-icon-size: 12px !default;
 $ddl-multiselect-filled-chip-clear-icon-size: 14px !default;
 $multiselect-disable-font-color: $content-text-color-disabled !default;
+$ddl-bigger-chip-close-font: 12px !default;
 // Small size
 $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
 $ddl-chip-small-font-size: 12px !default;
 $ddl-small-chip-close-square: 12px !default;
-$ddl-small-chip-close-font: 12px !default;
+$ddl-small-chip-close-font: 8px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: 12px !default;
@@ -128,6 +132,9 @@ $ddl-multiselect-filled-input-min-height-small: 32px !default;
 $ddl-multiselect-filled-float-input-min-height-small: 22px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-small: 10px !default;
 $ddl-multiselect-filled-chip-clear-icon-size-small: 10px !default;
+$ddl-chip-close-small-left: 6px !default;
+$ddl-chip-close-small-top: 2px !default;
+$ddl-small-down-icon-left: -2px !default;
 
 // Touch
 $ddl-multiselect-filled-input-min-height-bigger: 52px !default;
@@ -135,18 +142,21 @@ $ddl-multiselect-filled-float-input-min-height-bigger: 36px !default;
 $ddl-multiselect-filled-floatlabel-fontsize-bigger: 12px !default;
 $ddl-bigger-chip-close-font: 14px !default;
 $ddl-bigger-chip-close-square: 14px !default;
+$ddl-bigger-chip-down-icon-font: 14px !default;
 
 // Touch Small size
 $ddl-select-all-height-bigger-small: 40px !default;
 $ddl-bigger-small-chip-height: 26px !default;
 $ddl-chip-bigger-small-font-size: 13px !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
-$ddl-bigger-small-chip-close-font: 14px !default;
+$ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;
 $ddl-delim-bigger-small-font-size: 13px !default;
 $ddl-delimviewheight-bigger-small: 28px !default;
 $ddl-closer-margin-top-bigger-small: -2.4em !default;
+$ddl-biggersmall-chip-down-icon-font: 12px !default;
+$ddl-close-icon-bigger-right: 42px !default;
 
 // color
 
@@ -174,7 +184,12 @@ $ddl-multi-list-default-font-color: $content-text-color !default;
 $ddl-multi-list-hover-bg-color: $content-bg-color-hover !default;
 $ddl-delim-font-color: $content-text-color !default;
 $ddl-close-icon-color: $content-text-color !default;
-
+$ddl-clear-icon-right: 2px !default;
+$ddl-clear-icon-top: 80% !default;
+$ddl-list-header-font-color: $primary-outline !default;
+$ddl-closer-hooker-font-small: 8px !default;
+$ddl-small-clear-icon-height: 12px !default;
+$ddl-small-clear-icon-width: 12px !default;
 
 @include export-module('multiselect-bootstrap5') {
   .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
@@ -212,4 +227,3 @@ $ddl-close-icon-color: $content-text-color !default;
     border-left-width: 0;
   }
 }
-