@syncfusion/ej2-dropdowns 20.2.40 → 20.2.43-1234

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

@@ -31,11 +31,14 @@ $ddl-chip-mobile-content-padding: 6px 8px 6px 0 !default;
 $ddl-rtl-chip-mobile-content-padding: 6px 0 6px 8px !default;
 $ddl-chip-padding: 0 0 0 8px !default;
 $ddl-chip-close-top: 8px !default;
-$ddl-chip-close-left: 8px !default;
-$ddl-chip-close-margin: 0 !default;
+$ddl-chip-close-left: 0 !default;
+$ddl-chip-close-margin: 10px 10px 10px 0 !default;
+$ddl-chip-close-rtl-margin: 8px 0 8px 20px !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: auto !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: auto !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -76,12 +79,13 @@ $ddl-rtl-hooker-left: -4px !default;
 $ddl-chip-close-mob-top: 0 !default;
 $ddl-control-placholder-padding: 0 32px 0 2px !default;
 $ddl-overall-close-top: 10px !default;
-$ddl-overall-close-left: 10px !default;
+$ddl-overall-close-left: 0 !default;
 $ddl-sel-chip-close-mobile-top: 0 !default;
 $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 10px !default;
+$ddl-input-placeholder-padding: 0 0 0 10px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $selection-bg !default;
 $ddl-popup-active-focus-font-color: $selection-font !default;
@@ -129,29 +133,34 @@ $ddl-bigger-multiselect-group-checkbox-wrapper-padding-left: 20px !default;
 $ddl-multiselect-group-list-group-item-rtl-padding-right: 10px !default;
 $ddl-multiselect-label-position: 15px !default;
 $multiselect-disable-font-color: $disable !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: 22px !default;
+$ddl-small-chip-close-width: auto !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: 13px !default;
-$ddl-small-closer-margin-top: -2.9em !default;
+$ddl-small-closer-margin-top: -3.2em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: -35px !default;
 $ddl-delimviewheight-small: 24px !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: 12px !default;
 $ddl-bigger-small-chip-close-square: 26px !default;
+$ddl-bigger-small-chip-close-width: auto !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;
 $ddl-delim-bigger-small-font-size: 14px !default;
 $ddl-delimviewheight-bigger-small: 34px !default;
-$ddl-closer-margin-top-bigger-small: -3.2em !default;
+$ddl-closer-margin-top-bigger-small: -3.4em !default;
 
 @include export-module('multiselect-highcontrast') {
   .e-multi-select-wrapper {
@@ -160,97 +169,118 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
         color: $content-font;
         top: 12px;
       }
-    }.e-multiselect #{if(&, '&', '*')} {
+    }
+    .e-multiselect #{if(&, '&', '*')} {
       #{if(&, '&', '*')} input {
-        // sass-lint:disable no-vendor-prefixes
+        /* stylelint-disable property-no-vendor-prefix */
         #{if(&, '&', '*')}.e-dropdownbase:-moz-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
-        }#{if(&, '&', '*')}.e-dropdownbase::-moz-placeholder {
+        }
+        #{if(&, '&', '*')}.e-dropdownbase::-moz-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
-        }#{if(&, '&', '*')}.e-dropdownbase:-ms-input-placeholder {
+        }
+        #{if(&, '&', '*')}.e-dropdownbase:-ms-input-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
-        }#{if(&, '&', '*')}.e-dropdownbase::-webkit-input-placeholder {
+        }
+        #{if(&, '&', '*')}.e-dropdownbase::-webkit-input-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
         }
       }
-    }#{if(&, '&', '*')} .e-chips-collection {
+    }
+    #{if(&, '&', '*')} .e-chips-collection {
       #{if(&, '&', '*')} .e-chips {
         #{if(&, '&', '*')}:hover {
           #{if(&, '&', '*')} .e-chipcontent {
             color: $content-font;
-          }#{if(&, '&', '*')} .e-chips-close.e-icon::before {
+          }
+          #{if(&, '&', '*')} .e-chips-close.e-icon::before {
             color: $content-font;
           }
-        }#{if(&, '&', '*')} .e-chips-close.e-icon::before {
+        }
+        #{if(&, '&', '*')} .e-chips-close.e-icon::before {
           line-height: 26px;
           top: 0;
         }
       }
-    }#{if(&, '&', '*')} .e-delim-values {
+    }
+    #{if(&, '&', '*')} .e-delim-values {
       #{if(&, '&', '*')}.e-delim-view {
         -webkit-text-fill-color: $border-fg;
         color: $border-fg;
       }
-    }#{if(&, '&', '*')}.e-delimiter {
+    }
+    #{if(&, '&', '*')}.e-delimiter {
       #{if(&, '&', '*')} .e-delim-values {
         -webkit-text-fill-color: $border-fg;
         color: $border-fg;
       }
-    }#{if(&, '&', '*')} .e-searcher input[type='text'] {
+    }
+    #{if(&, '&', '*')} .e-searcher input[type='text'] {
       color: $content-font;
       height: 100%;
-      min-height: 28px;#{if(&, '&', '*')}::selection {
+      min-height: 28px;
+      #{if(&, '&', '*')}::selection {
         background-color: $selection-bg;
-        }
       }
-  }#{&}.e-popup {
+    }
+  }
+  #{&}.e-popup {
     #{if(&, '&', '*')}.e-multi-select-list-wrapper {
       #{if(&, '&', '*')}.e-ddl,
       .e-bigger #{if(&, '&', '*')}.e-ddl {
         #{if(&, '&', '*')}.e-checkbox .e-filter-parent .e-clear-icon {
           padding-left: 0;
         }
-      }#{if(&, '&', '*')}.e-checkbox {
+      }
+      #{if(&, '&', '*')}.e-checkbox {
         #{if(&, '&', '*')} .e-selectall-parent {
           border-bottom: 1px solid $content-font;
-        }#{if(&, '&', '*')} .e-list-parent {
+        }
+        #{if(&, '&', '*')} .e-list-parent {
           #{if(&, '&', '*')} .e-list-item.e-item-focus.e-active.e-hover {
             background-color: $selection-bg;
-          }#{if(&, '&', '*')} .e-list-item.e-item-focus.e-active {
+          }
+          #{if(&, '&', '*')} .e-list-item.e-item-focus.e-active {
             border: 2px solid $selection-bg;
-          }#{if(&, '&', '*')} .e-list-item.e-active.e-hover:not(.e-item-focus) {
+          }
+          #{if(&, '&', '*')} .e-list-item.e-active.e-hover:not(.e-item-focus) {
             border-bottom: 2px solid $content-font;
             border-left: 2px solid $content-font;
             border-right: 2px solid $content-font;
             border-top: 2px solid $content-font;
           }
-       }
-     }#{if(&, '&', '*')} .e-list-parent {
+        }
+      }
+      #{if(&, '&', '*')} .e-list-parent {
         #{if(&, '&', '*')} .e-list-item.e-item-focus {
           border: 2px solid $hover-bg;
-        }#{if(&, '&', '*')} .e-list-item.e-active.e-hover {
+        }
+        #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
           background-color: $content-font;
           border-bottom: $ddl-popup-active-border-width solid $content-font;
           border-left: $ddl-popup-active-border-width solid $content-font;
           border-right: $ddl-popup-active-border-width solid $content-font;
           border-top: $ddl-popup-active-border-width solid $content-font;
-        }#{if(&, '&', '*')} .e-list-item.e-hover:not(.e-active) {
+        }
+        #{if(&, '&', '*')} .e-list-item.e-hover:not(.e-active) {
           border: 2px solid $hover-border;
-        }#{if(&, '&', '*')} .e-list-item:not(.e-hover):not(.e-item-focus) {
+        }
+        #{if(&, '&', '*')} .e-list-item:not(.e-hover):not(.e-item-focus) {
           border: 2px solid $bg-base-0;
-        }#{if(&, '&', '*')} .e-list-item.e-active {
+        }
+        #{if(&, '&', '*')} .e-list-item.e-active {
           border: 2px solid $selection-border;
         }
       }

package/styles/multi-select/_highcontrast-light-definition.scss

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-chip-mobile-close-font: 16px !default;
 $ddl-multiselect-skin-name: 'highcontrast' !default;
 $ddl-delim-font-size: 14px !default;
@@ -33,9 +33,12 @@ $ddl-chip-padding: 0 0 0 8px !default;
 $ddl-chip-close-top: 8px !default;
 $ddl-chip-close-left: 8px !default;
 $ddl-chip-close-margin: 0 !default;
+$ddl-chip-close-rtl-margin: 0 !default;
 $ddl-chip-mobile-close-margin: 3px 0 0 !default;
 $ddl-chip-close-square: 26px !default;
+$ddl-chip-close-width: 26px !default;
 $ddl-chip-hooker-square: 30px !default;
+$ddl-chip-hooker-width: 30px !default;
 $ddl-chip-close-font: 10px !default;
 $ddl-chip-close-mobile-top: 0 !default;
 $ddl-chip-height: 26px !default;
@@ -82,6 +85,7 @@ $ddl-sel-chip-close-mobile-left: 12px !default;
 $ddl-chip-sel-mobile-close-height: 26px !default;
 $ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
 $ddl-input-text-indent: 10px !default;
+$ddl-input-placeholder-padding: 0 0 0 10px !default;
 $ddl-rtl-chip-sel-close-left: -12px !default;
 $ddl-popup-active-focus-bg-color: $selection-bg !default;
 $ddl-popup-active-focus-font-color: $selection-font !default;
@@ -129,23 +133,28 @@ $ddl-bigger-multiselect-group-checkbox-wrapper-padding-left: 20px !default;
 $ddl-multiselect-group-list-group-item-rtl-padding-right: 10px !default;
 $ddl-multiselect-label-position: 15px !default;
 $multiselect-disable-font-color: $disable !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: 22px !default;
+$ddl-small-chip-close-width: 22px !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: 13px !default;
 $ddl-small-closer-margin-top: -2.9em !default;
 $ddl-chip-close-hooker-small-left: 7px !default;
+$ddl-chip-close-hooker-small-bigger-left: 7px !default;
 $ddl-delimviewheight-small: 24px !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: 12px !default;
 $ddl-bigger-small-chip-close-square: 26px !default;
+$ddl-bigger-small-chip-close-width: 26px !default;
 $ddl-bigger-small-chip-close-font: 10px !default;
 $ddl-control-bigger-small-height: 26px !default;
 $ddl-bigger-small-input-height: 34px !default;
@@ -161,95 +170,116 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
         color: $content-font;
         top: 12px;
       }
-    }.e-multiselect #{if(&, '&', '*')} {
+    }
+    .e-multiselect #{if(&, '&', '*')} {
       #{if(&, '&', '*')} input {
-        // sass-lint:disable no-vendor-prefixes
+        /* stylelint-disable property-no-vendor-prefix */
         #{if(&, '&', '*')}.e-dropdownbase:-moz-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
-        }#{if(&, '&', '*')}.e-dropdownbase::-moz-placeholder {
+        }
+        #{if(&, '&', '*')}.e-dropdownbase::-moz-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
-        }#{if(&, '&', '*')}.e-dropdownbase:-ms-input-placeholder {
+        }
+        #{if(&, '&', '*')}.e-dropdownbase:-ms-input-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
-        }#{if(&, '&', '*')}.e-dropdownbase::-webkit-input-placeholder {
+        }
+        #{if(&, '&', '*')}.e-dropdownbase::-webkit-input-placeholder {
           color: $content-font-alt;
           font-family: inherit;
           font-size: 14px;
           font-style: italic;
         }
       }
-    }#{if(&, '&', '*')} .e-chips-collection {
+    }
+    #{if(&, '&', '*')} .e-chips-collection {
       #{if(&, '&', '*')} .e-chips {
         #{if(&, '&', '*')}:hover {
           #{if(&, '&', '*')} .e-chipcontent {
             color: $content-font;
-          }#{if(&, '&', '*')} .e-chips-close.e-icon::before {
+          }
+          #{if(&, '&', '*')} .e-chips-close.e-icon::before {
             color: $content-font;
           }
-        }#{if(&, '&', '*')} .e-chips-close.e-icon::before {
+        }
+        #{if(&, '&', '*')} .e-chips-close.e-icon::before {
           line-height: 26px;
           top: 0;
         }
       }
-    }#{if(&, '&', '*')} .e-delim-values {
+    }
+    #{if(&, '&', '*')} .e-delim-values {
       #{if(&, '&', '*')}.e-delim-view {
         color: $border-fg;
       }
-    }#{if(&, '&', '*')}.e-delimiter {
+    }
+    #{if(&, '&', '*')}.e-delimiter {
       #{if(&, '&', '*')} .e-delim-values {
         color: $border-fg;
       }
-    }#{if(&, '&', '*')} .e-searcher input[type='text'] {
+    }
+    #{if(&, '&', '*')} .e-searcher input[type='text'] {
       color: $content-font;
       height: 100%;
-      min-height: 28px;#{if(&, '&', '*')}::selection {
+      min-height: 28px;
+      #{if(&, '&', '*')}::selection {
         background-color: $selection-bg;
-        }
       }
-  }#{&}.e-popup {
+    }
+  }
+  #{&}.e-popup {
     #{if(&, '&', '*')}.e-multi-select-list-wrapper {
       #{if(&, '&', '*')}.e-ddl,
       .e-bigger #{if(&, '&', '*')}.e-ddl {
         #{if(&, '&', '*')}.e-checkbox .e-filter-parent .e-clear-icon {
           padding-left: 0;
         }
-      }#{if(&, '&', '*')}.e-checkbox {
+      }
+      #{if(&, '&', '*')}.e-checkbox {
         #{if(&, '&', '*')} .e-selectall-parent {
           border-bottom: 1px solid $content-font;
-        }#{if(&, '&', '*')} .e-list-parent {
+        }
+        #{if(&, '&', '*')} .e-list-parent {
           #{if(&, '&', '*')} .e-list-item.e-item-focus.e-active.e-hover {
             background-color: $selection-bg;
-          }#{if(&, '&', '*')} .e-list-item.e-item-focus.e-active {
+          }
+          #{if(&, '&', '*')} .e-list-item.e-item-focus.e-active {
             border: 2px solid $selection-bg;
-          }#{if(&, '&', '*')} .e-list-item.e-active.e-hover:not(.e-item-focus) {
+          }
+          #{if(&, '&', '*')} .e-list-item.e-active.e-hover:not(.e-item-focus) {
             border-bottom: 2px solid $content-font;
             border-left: 2px solid $content-font;
             border-right: 2px solid $content-font;
             border-top: 2px solid $content-font;
           }
-       }
-     }#{if(&, '&', '*')} .e-list-parent {
+        }
+      }
+      #{if(&, '&', '*')} .e-list-parent {
         #{if(&, '&', '*')} .e-list-item.e-item-focus {
           border: 2px solid $hover-bg;
-        }#{if(&, '&', '*')} .e-list-item.e-active.e-hover {
+        }
+        #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
           background-color: $content-font;
           border-bottom: $ddl-popup-active-border-width solid $content-font;
           border-left: $ddl-popup-active-border-width solid $content-font;
           border-right: $ddl-popup-active-border-width solid $content-font;
           border-top: $ddl-popup-active-border-width solid $content-font;
-        }#{if(&, '&', '*')} .e-list-item.e-hover:not(.e-active) {
+        }
+        #{if(&, '&', '*')} .e-list-item.e-hover:not(.e-active) {
           border: 2px solid $hover-border;
-        }#{if(&, '&', '*')} .e-list-item:not(.e-hover):not(.e-item-focus) {
+        }
+        #{if(&, '&', '*')} .e-list-item:not(.e-hover):not(.e-item-focus) {
           border: 2px solid $bg-base-0;
-        }#{if(&, '&', '*')} .e-list-item.e-active {
+        }
+        #{if(&, '&', '*')} .e-list-item.e-active {
           border: 2px solid $selection-border;
         }
       }