@syncfusion/ej2-angular-dropdowns 20.4.54 → 21.1.35

package/styles/list-box/_bootstrap5-definition.scss

@@ -1,5 +1,4 @@
 //layout variables
-$skin-name: 'bootstrap5' !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -28,8 +27,6 @@ $listbox-groupheader-font-size: $text-xs !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: $text-sm !default;
 $listbox-back-padding-right: 8px !default;
-$listbox-back-icon-height: 20px !default;
-$listbox-back-icon-font-size: auto !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: $text-base !default;

package/styles/list-box/_fabric-dark-definition.scss

@@ -1,5 +1,4 @@
 //default
-$skin-name: 'fabric' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: $neutral-light-font !default;
 $listbox-text-disabled: $neutral-tertiary-alt !default;
@@ -60,8 +59,6 @@ $listbox-border-top-color: transparent !default;
 $listbox-border-right-color: transparent !default;
 $listbox-border-left-color: transparent !default;
 $listbox-back-padding-right: 20px !default;
-$listbox-back-icon-height: 0 !default;
-$listbox-back-icon-font-size: 18px !default;
 $listbox-touch-item-height: 45px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

package/styles/list-box/_fabric-definition.scss

@@ -1,4 +1,3 @@
-$skin-name: 'fabric' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: $neutral-light-font !default;
 $listbox-text-disabled: rgba($neutral-light-font, .54) !default;
@@ -55,8 +54,6 @@ $listbox-border-top-color: transparent !default;
 $listbox-border-right-color: transparent !default;
 $listbox-border-left-color: transparent !default;
 $listbox-back-padding-right: 20px !default;
-$listbox-back-icon-height: 0 !default;
-$listbox-back-icon-font-size: 18px !default;
 $listbox-touch-item-height: 45px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

package/styles/list-box/_fluent-definition.scss

@@ -1,5 +1,4 @@
 //layout variables
-$skin-name: 'FluentUI' !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -28,8 +27,6 @@ $listbox-groupheader-font-size: $text-sm !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: $text-sm !default;
 $listbox-back-padding-right: 8px !default;
-$listbox-back-icon-height: 20px !default;
-$listbox-back-icon-font-size: auto !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 2.1 !default;
 $listbox-touch-item-font-size: $text-base !default;

package/styles/list-box/_fusionnew-definition.scss

@@ -1,5 +1,4 @@
 //layout variables
-$skin-name: 'bootstrap5' !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -28,8 +27,6 @@ $listbox-groupheader-font-size: $text-xs !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: $text-sm !default;
 $listbox-back-padding-right: 8px !default;
-$listbox-back-icon-height: 20px !default;
-$listbox-back-icon-font-size: auto !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: $text-base !default;

package/styles/list-box/_highcontrast-definition.scss

@@ -1,4 +1,3 @@
-$skin-name: 'highcontrast' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: $content-font !default;
 $listbox-text-disabled: rgba($disable, .54) !default;
@@ -55,8 +54,6 @@ $listbox-border-top-color: transparent !default;
 $listbox-border-right-color: transparent !default;
 $listbox-border-left-color: transparent !default;
 $listbox-back-padding-right: 20px !default;
-$listbox-back-icon-height: 0 !default;
-$listbox-back-icon-font-size: 18px !default;
 $listbox-touch-item-height: 45px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

package/styles/list-box/_highcontrast-light-definition.scss

@@ -1,5 +1,4 @@
 //default
-$skin-name: 'highcontrast' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: $content-font !default;
 $listbox-text-disabled: rgba($disable, .54) !default;
@@ -60,8 +59,6 @@ $listbox-border-top-color: transparent !default;
 $listbox-border-right-color: transparent !default;
 $listbox-border-left-color: transparent !default;
 $listbox-back-padding-right: 20px !default;
-$listbox-back-icon-height: 0 !default;
-$listbox-back-icon-font-size: 18px !default;
 $listbox-touch-item-height: 45px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

package/styles/list-box/_material-dark-definition.scss

@@ -1,5 +1,4 @@
 //default
-$skin-name: 'material' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: $grey-dark-font !default;
 $listbox-text-disabled: $grey-dark-font !default;
@@ -61,8 +60,6 @@ $listbox-groupheader-font-size: 15px !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: 15px !default;
 $listbox-back-padding-right: 30px !default;
-$listbox-back-icon-height: 1px !default;
-$listbox-back-icon-font-size: auto !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

package/styles/list-box/_material-definition.scss

@@ -1,4 +1,3 @@
-$skin-name: 'material' !default;
 $listbox-font-family: $font-family !default;
 $listbox-text-color: rgba($grey-light-font, .87) !default;
 $listbox-text-disabled: $grey-light-font !default;
@@ -56,8 +55,6 @@ $listbox-groupheader-font-size: 15px !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: 15px !default;
 $listbox-back-padding-right: 30px !default;
-$listbox-back-icon-height: 1px !default;
-$listbox-back-icon-font-size: auto !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: 15px !default;

package/styles/list-box/_tailwind-definition.scss

@@ -1,5 +1,4 @@
 //layout variables
-$skin-name: 'tailwind' !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -29,8 +28,6 @@ $listbox-groupheader-font-size: $text-xs !default;
 $listbox-border-size: 0 !default;
 $listbox-font-size: $text-sm !default;
 $listbox-back-padding-right: 8px !default;
-$listbox-back-icon-height: 20px !default;
-$listbox-back-icon-font-size: auto !default;
 $listbox-touch-item-height: 48px !default;
 $listbox-touch-item-line-height: 1.6 !default;
 $listbox-touch-item-font-size: $text-base !default;

package/styles/list-box/bootstrap4.css

@@ -2,14 +2,6 @@
   padding: 0 8px 0 0;
 }
 
-.e-bigger .e-content.e-dropdownbase {
-  padding: 8px 0;
-}
-
-.e-content.e-dropdownbase {
-  padding: 6px 0;
-}
-
 .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
   font-size: 16px;
 }

package/styles/material-dark.css

@@ -190,7 +190,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #424242;
   border-bottom: 0;
   border-color: transparent;
   color: #fff;
@@ -200,11 +199,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 16px;
+  background-color: #424242;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #424242;
   border-color: transparent;
   color: rgba(255, 255, 255, 0.7);
   font-family: inherit;
@@ -214,6 +213,7 @@
   min-height: 36px;
   padding-left: 16px;
   padding-right: 16px;
+  background-color: #424242;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -554,9 +554,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;
@@ -598,6 +595,7 @@
 
 .e-ddl.e-popup {
   background: #424242;
+  border: 1px solid transparent;
   position: absolute;
 }
 .e-ddl.e-popup .e-search-icon {
@@ -1037,6 +1035,7 @@ ejs-dropdownlist {
   width: 0;
 }
 .e-ddt.e-popup {
+  border: 1px solid transparent;
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12);
   position: absolute;
 }
@@ -3923,10 +3922,6 @@ ejs-multiselect {
 .e-listbox-container * {
   box-sizing: border-box;
 }
-.e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.e-listbox-container.e-listboxtool-container .e-list-wrap {
-  width: 86% !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-listbox-wrapper:focus,
 .e-listbox-container:focus {
   outline: none;
@@ -4293,12 +4288,6 @@ ejs-listbox {
   margin-left: 15px;
 }
 
-.e-bigger .e-listbox-wrapper.e-listboxtool-container .e-list-wrap,
-.e-listbox-wrapper.e-bigger.e-listboxtool-container .e-list-wrap,
-.e-bigger .e-listbox-container.e-listboxtool-container .e-list-wrap,
-.e-listbox-container.e-bigger.e-listboxtool-container .e-list-wrap {
-  width: 85% !important; /* stylelint-disable-line declaration-no-important */
-}
 .e-bigger .e-listbox-wrapper .e-list-item,
 .e-listbox-wrapper.e-bigger .e-list-item,
 .e-bigger .e-listbox-container .e-list-item,

package/styles/material.css

@@ -190,7 +190,6 @@
 .e-dropdownbase .e-list-item {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
-  background-color: #fff;
   border-bottom: 0;
   border-color: #fff;
   color: rgba(0, 0, 0, 0.87);
@@ -200,11 +199,11 @@
   min-height: 36px;
   padding-right: 16px;
   text-indent: 16px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-group-item,
 .e-fixed-head {
-  background-color: #fff;
   border-color: #fff;
   color: rgba(0, 0, 0, 0.54);
   font-family: inherit;
@@ -214,6 +213,7 @@
   min-height: 36px;
   padding-left: 16px;
   padding-right: 16px;
+  background-color: #fff;
 }
 
 .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -587,9 +587,6 @@
 .e-popup-full-page .e-popup-full-page.e-ddl.e-popup.e-ddl-device-filter {
   margin: 0;
 }
-.e-popup-full-page .e-popup-full-page.e-ios {
-  position: fixed;
-}
 
 .e-ddl.e-control-wrapper .e-ddl-disable-icon {
   position: relative;

package/styles/mention/bootstrap4.css

@@ -19,14 +19,6 @@
   padding: 0 8px 0 0;
 }
 
-.e-bigger .e-content.e-dropdownbase {
-  padding: 8px 0;
-}
-
-.e-content.e-dropdownbase {
-  padding: 6px 0;
-}
-
 .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
   font-size: 16px;
 }

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

@@ -12,7 +12,7 @@ $ddl-remains-padding-left: 8px !default;
 $ddl-chip-margin: 3px !default;
 $ddl-chip-margin-bigger: 3px !default;
 $ddl-chip-radius: 4px !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;
@@ -94,7 +94,7 @@ $ddl-delimviewheight-check-bigger: 34px !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-selectall-font-size: $text-sm !default;
 $ddl-bigger-selectall-font-size: $text-base !default;
 $ddl-close-icon-left: 30px !default;
 $ddl-close-down-icon-left: 40px !default;
@@ -124,13 +124,13 @@ $multiselect-disable-font-color: $content-text-color-alt1 !default;
 // Small size
 $ddl-select-all-height-small: 26px !default;
 $ddl-small-chip-height: 20px !default;
-$ddl-chip-small-font-size: 12px !default;
+$ddl-chip-small-font-size: $text-xs !default;
 $ddl-small-chip-close-square: 12px !default;
 $ddl-small-chip-close-width: 12px !default;
 $ddl-small-chip-close-font: 12px !default;
 $ddl-control-small-height: 24px !default;
 $ddl-small-input-height: 24px !default;
-$ddl-delim-small-font-size: 12px !default;
+$ddl-delim-small-font-size: $text-xs !default;
 $ddl-small-closer-margin-top: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
 $ddl-chip-close-hooker-small-bigger-left: 0 !default;
@@ -151,13 +151,13 @@ $ddl-bigger-chip-close-width: 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-chip-bigger-small-font-size: $text-xs !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
 $ddl-bigger-small-chip-close-width: 14px !default;
 $ddl-bigger-small-chip-close-font: 14px !default;
 $ddl-control-bigger-small-height: 28px !default;
 $ddl-bigger-small-input-height: 32px !default;
-$ddl-delim-bigger-small-font-size: 13px !default;
+$ddl-delim-bigger-small-font-size: $text-xs !default;
 $ddl-delimviewheight-bigger-small: 28px !default;
 $ddl-closer-margin-top-bigger-small: -2em !default;
 

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

@@ -12,8 +12,8 @@ $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 1px 0 !default;
-$ddl-chip-mobile-content-padding: 8px 4px 8px 0 !default;
+$ddl-chip-content-padding: 0 6px 1.5px 0 !default;
+$ddl-chip-mobile-content-padding: 8px 4px 10px 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 8px 0 4px !default;
@@ -96,7 +96,7 @@ $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-selectall-font-size: $text-sm !default;
 $ddl-bigger-selectall-font-size: $text-base !default;
 $ddl-close-icon-left: 30px !default;
 $ddl-close-down-icon-left: 35px !default;
@@ -124,13 +124,13 @@ $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-chip-small-font-size: $text-xs !default;
 $ddl-small-chip-close-square: 12px !default;
 $ddl-small-chip-close-width: 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;
+$ddl-delim-small-font-size: $text-xs !default;
 $ddl-small-closer-margin-top: -2em !default;
 $ddl-chip-close-hooker-small-left: 0 !default;
 $ddl-chip-close-hooker-small-bigger-left: 0 !default;
@@ -155,13 +155,13 @@ $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-chip-bigger-small-font-size: $text-sm !default;
 $ddl-bigger-small-chip-close-square: 14px !default;
 $ddl-bigger-small-chip-close-width: 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-delim-bigger-small-font-size: $text-sm !default;
 $ddl-delimviewheight-bigger-small: 28px !default;
 $ddl-closer-margin-top-bigger-small: -2.4em !default;
 $ddl-biggersmall-chip-down-icon-font: 12px !default;

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

@@ -24,10 +24,12 @@ $ddl-search-wrapper-width: calc(100% - 40px) !default;
 $ddl-bigger-search-wrapper-width: calc(100% - 48px) !default;
 $ddl-bigger-small-search-wrapper-width: calc(100% - 44px) !default;
 $ddl-small-search-wrapper-width: calc(100% - 40px) !default;
-$ddl-chip-margin: 1.5px 2px 2px 0 !default;
+$ddl-chip-margin: 2px 2px 2px 0 !default;
+$ddl-chip-small-margin: 1.5px 2px 2px 0 !default;
 $ddl-chip-margin-bigger: 4px 2px 2px 0 !default;
-$ddl-chip-content-padding: 3px 8px 4.2px 0 !default;
-$ddl-chip-mobile-content-padding: 6px 8px 6px 0 !default;
+$ddl-chip-content-padding: 3px 8px 5.5px 0 !default;
+$ddl-chip-small-content-padding: 3px 8px 4.2px 0 !default;
+$ddl-chip-mobile-content-padding: 6px 8px 7.5px 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;
@@ -52,9 +54,9 @@ $ddl-control-bigger-height: 38px !default;
 $ddl-delimviewheight: 29px !default;
 $ddl-delimviewheight-bigger: 36px !default;
 $ddl-closer-hooker-font: 10px !default;
-$ddl-closer-margin-top: -3.2em !default;
-$ddl-icon-margin-top: -2.8em !default;
-$ddl-icon-margin-top-bigger: -2.8em !default;
+$ddl-closer-margin-top: -3em !default;
+$ddl-icon-margin-top: -2.5em !default;
+$ddl-icon-margin-top-bigger: -3.1em !default;
 $ddl-clear-margin-top: -3.2em !default;
 $ddl-closer-margin-top-bigger: -3.5em !default;
 $ddl-chip-font-family: inherit !default;

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

@@ -25,8 +25,10 @@ $ddl-bigger-search-wrapper-width: calc(100% - 48px) !default;
 $ddl-bigger-small-search-wrapper-width: calc(100% - 44px) !default;
 $ddl-small-search-wrapper-width: calc(100% - 40px) !default;
 $ddl-chip-margin: 1.5px 2px 2px 0 !default;
+$ddl-chip-small-margin: none !default;
 $ddl-chip-margin-bigger: 4px 2px 2px 0 !default;
 $ddl-chip-content-padding: 3px 8px 4.2px 0 !default;
+$ddl-chip-small-content-padding: none !default;
 $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;