@syncfusion/ej2-dropdowns 19.4.56 → 20.1.51

package/styles/drop-down-tree/_layout.scss

@@ -1,4 +1,4 @@
-@mixin ddt-rotate($position) {
+@mixin ddt-rotate($position) {
   transform: rotate($position);
   transition: transform 300ms ease;
 }
@@ -30,7 +30,7 @@
     &.e-float-input.e-control-wrapper {
       .e-clear-icon {
         box-sizing: content-box;
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'FluentUI' {
           min-height: $ddt-close-icon-min-height;
         }
       }
@@ -68,7 +68,9 @@
         }
 
         .e-ddt-icon {
-          bottom: $ddt-dd-icon-bottom;
+          @if $ddt-skin-name != 'FluentUI' {
+            bottom: $ddt-dd-icon-bottom;
+          }
           position: absolute;
           right: 0;
         }
@@ -130,6 +132,12 @@
           }
         }
       }
+
+      .e-ddt-icon {
+        @if $ddt-skin-name == 'FluentUI' {
+          bottom: 0;
+        }
+      }
     }
     @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
       &.e-outline {
@@ -309,7 +317,7 @@
             padding-left: 8px;
           }
         }
-        @if $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'bootstrap5' or  $ddt-skin-name == 'FluentUI' {
           line-height: 30px;
         }
       }
@@ -321,7 +329,7 @@
         text-overflow: ellipsis;
 
         .e-remain {
-          @if $ddt-skin-name == 'bootstrap5' {
+          @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
             line-height: 30px;
           }
           @else {
@@ -347,7 +355,12 @@
             padding: $ddt-overflow-count-padding;
           }
           @else {
-            padding-top: $ddt-overflow-count-padding-top;
+            @if $ddt-skin-name == 'FluentUI' {
+              line-height: 30px;
+            }
+            @else {
+              padding-top: $ddt-overflow-count-padding-top;
+            }
           }
         }
       }
@@ -360,6 +373,11 @@
             padding: $ddt-delim-padding;
           }
         }
+        @if $ddt-skin-name == 'FluentUI' {
+          .e-remain.e-wrap-count {
+            padding-left: 4px;
+          }
+        }
       }
     }
 
@@ -399,7 +417,7 @@
     }
 
     &.e-popup {
-      @if $skin-name != 'material' {
+      @if $skin-name != 'material' and $skin-name != 'FluentUI' {
         border: 1px solid $ddt-popup-border-color;
       }
 
@@ -412,14 +430,26 @@
         border-radius: $ddt-chip-radius;
       }
 
+      @if $skin-name == 'FluentUI' {
+        border-radius: 2px;
+      }
+
       box-shadow: $ddt-box-shadow;
       position: absolute;
 
+      .e-checkbox-wrapper {
+        .e-frame {
+          @if$ddt-skin-name == 'bootstrap5' {
+            background-color: transparent;
+          }
+        }
+      }
+
       .e-selectall-parent {
         border-bottom: 1px solid;
         cursor: pointer;
         display: block;
-        @if $ddt-skin-name != 'tailwind' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'FluentUI' {
           line-height: $ddt-select-all-height;
         }
         overflow: hidden;
@@ -427,7 +457,7 @@
         text-indent: $ddt-select-all-text-indent;
         white-space: nowrap;
         width: 100%;
-        @if $ddt-skin-name == 'tailwind' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'FluentUI' {
           padding: 8px 12px;
         }
         @else if $ddt-skin-name == 'bootstrap5' {
@@ -443,7 +473,7 @@
           text-indent: 0;
 
           .e-frame {
-            @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+            @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
               margin-top: -3px;
             }
           }
@@ -467,7 +497,7 @@
       }
 
       .e-filter-wrap {
-        @if $ddt-skin-name == 'tailwind' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'FluentUI' {
           border-bottom: $ddt-filter-border;
         }
         @else {
@@ -554,7 +584,7 @@
 
           .e-ddt-nodata {
             display: block;
-            @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5'  {
+            @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5'or $ddt-skin-name == 'FluentUI'  {
               line-height: 22px;
             }
           }
@@ -585,13 +615,13 @@
 
         & > .e-ul {
           overflow: hidden;
-          @if $ddt-skin-name != 'tailwind' {
+          @if $ddt-skin-name != 'FluentUI'  {
             padding: $ddt-treeview-padding;
           }
         }
 
         &.e-fullrow-wrap .e-text-content {
-          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' {
+          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'FluentUI' {
             padding-bottom: $ddt-treeview-content-padding-top;
             padding-top: $ddt-treeview-content-padding-bottom;
           }
@@ -751,7 +781,7 @@
       }
 
       &.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-left: 18px;
           margin-right: 4px;
         }
@@ -762,7 +792,7 @@
       }
 
       &.e-show-clear .e-chips-wrapper .e-chips:last-child {
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-left: 18px;
           margin-right: 4px;
         }
@@ -774,7 +804,7 @@
 
       &.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
         margin-left: $ddt-last-chip-right-margin;
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-right: 4px;
         }
         @else {
@@ -831,6 +861,9 @@
           padding: $ddt-big-chip-content-padding;
         }
       }
+      @if $ddt-skin-name == 'FluentUI' {
+        font-size: $text-lg;
+      }
     }
 
     &.e-input-group.e-control-wrapper,
@@ -846,7 +879,7 @@
           @else if $ddt-skin-name == 'bootstrap4' {
             right: 33px;
           }
-          @else if $ddt-skin-name == 'bootstrap5' {
+          @else if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
             bottom: auto;
             right: 36px;
           }
@@ -855,7 +888,7 @@
           }
         }
 
-        @if $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           &.e-show-chip {
             &.e-show-dd-icon .e-clear-icon {
               bottom: 0;
@@ -914,6 +947,15 @@
             vertical-align: middle;
           }
         }
+        @if $ddt-skin-name == 'FluentUI' {
+          line-height: 27px;
+          min-height: 32px;
+          min-width: 32px;
+
+          &::before {
+            font-size: 12px;
+          }
+        }
       }
     }
 
@@ -924,12 +966,18 @@
         @if $ddt-skin-name == 'bootstrap5' {
           line-height: 37px;
         }
+        @if $ddt-skin-name == 'FluentUI' {
+          line-height: 38px;
+        }
       }
 
       .e-remain {
         @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
           font-size: $text-base;
         }
+        @else if $ddt-skin-name == 'FluentUI' {
+          font-size: $text-lg;
+        }
       }
     }
 
@@ -1104,6 +1152,10 @@
               line-height: 22px;
               padding-top: 7px;
             }
+            @if $ddt-skin-name == 'FluentUI' {
+              line-height: 38px;
+              padding-top: 0;
+            }
           }
         }
 
@@ -1116,6 +1168,10 @@
             @else if $ddt-skin-name == 'tailwind' {
               padding: 8px 12px;
             }
+            @else if  $ddt-skin-name == 'FluentUI' {
+              line-height: 38px;
+              padding: 0 8px;
+            }
           }
         }
       }
@@ -1150,13 +1206,16 @@
 
       .e-selectall-parent {
         text-indent: $ddt-select-all-bigger-text-indent;
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           @if $ddt-skin-name == 'bootstrap5' {
             padding: 3px 12px;
           }
-          @else {
+          @else if $ddt-skin-name == 'tailwind'  {
             padding: 12px 16px;
           }
+          @else {
+            padding: 10px 16px;
+          }
 
           .e-all-text {
             font-size: $text-base;
@@ -1171,7 +1230,7 @@
         }
       }
 
-      @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+      @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI'  {
         .e-popup-content {
           &.e-no-data {
             @if $ddt-skin-name == 'bootstrap5' {
@@ -1182,7 +1241,12 @@
             }
 
             .e-ddt-nodata {
-              font-size: $text-base;
+              @if $ddt-skin-name == 'FluentUI' {
+                font-size: $text-lg;
+              }
+              @else {
+                font-size: $text-base;
+              }
               line-height: 24px;
             }
           }
@@ -1201,7 +1265,10 @@
 
       .e-treeview > .e-ul {
         @if $ddt-skin-name == 'bootstrap5' {
-          padding: 0 16px;
+          padding: 8px 16px;
+        }
+        @if $ddt-skin-name == 'tailwind' {
+          padding: 8px 0 8px 16px;
         }
       }
     }
@@ -1269,7 +1336,7 @@
       }
 
       &.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-right: 4px;
         }
         @else {
@@ -1279,7 +1346,7 @@
       }
 
       &.e-show-clear .e-chips-wrapper .e-chips:last-child {
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-right: 4px;
         }
         @else {
@@ -1290,7 +1357,7 @@
 
       &.e-show-clear.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
         margin-left: $ddt-last-chip-bigger-right-margin;
-        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
+        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
           margin-right: 4px;
         }
         @else {

package/styles/drop-down-tree/_tailwind-definition.scss

@@ -13,6 +13,7 @@ $ddt-chip-margin: 3px 4px !default;
 $ddt-chip-padding: 0 8px 0 8px !default;
 $ddt-chip-radius: 0px !default;
 $ddt-chip-height: 22px !default;
+$ddt-treeview-padding: 4px 0 4px 12px !default;
 $ddt-chip-bigger-height: 30px !default;
 $ddt-chip-content-padding: 0 4px 0 0 !default;
 $ddt-chip-content-padding: 0 4px 0 0 !default;
@@ -31,7 +32,7 @@ $ddt-select-all-text-indent: 0 !default;
 $ddt-select-all-bigger-text-indent: 0 !default;
 $ddt-select-all-text-font-size: 14px !default;
 $ddt-popup-reorder-border: $border-light !default;
-$ddt-chip-width: calc(100% - 2px) !default;
+$ddt-chip-width: calc(100% - 6px) !default;
 $ddt-chip-ddi-width: calc(100% - 26px) !default;
 $ddt-chip-ci-width: calc(100% - 29px) !default;
 $ddt-chip-ddi-ci-width: calc(100% - 55px) !default;

package/styles/drop-down-tree/_theme.scss

@@ -1,4 +1,4 @@
-@include export-module('dropdowntree-theme') {
+@include export-module('dropdowntree-theme') {
 
   .e-ddt {
 
@@ -68,7 +68,7 @@
     &.e-input-group.e-control-wrapper,
     &.e-float-input.e-control-wrapper {
       .e-clear-icon {
-        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'material' and  $ddt-skin-name != 'material-dark' {
+        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'material' and  $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'FluentUI' {
           background-color: $ddt-icon-bg-color;
         }
       }
@@ -76,8 +76,13 @@
 
     &.e-input-group.e-control-wrapper .e-input[readonly],
     &.e-float-input.e-control-wrapper input[readonly] {
-      @if $ddt-skin-name == 'bootstrap4' or $ddt-skin-name == 'bootstrap5' {
-        background: $ddt-readonly-input-bg-color;
+      @if $ddt-skin-name == 'bootstrap4' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
+        @if $ddt-skin-name == 'FluentUI' {
+          background: transparent;
+        }
+        @else {
+          background: $ddt-readonly-input-bg-color;
+        }
 
         @if $ddt-skin-name == 'bootstrap5' {
           ~ span.e-input-group-icon.e-ddt-icon {

package/styles/drop-down-tree/bootstrap5-dark.css

@@ -234,6 +234,10 @@
   position: absolute;
 }
 
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+  background-color: transparent;
+}
+
 .e-ddt.e-popup .e-selectall-parent {
   border-bottom: 1px solid;
   cursor: pointer;
@@ -319,7 +323,7 @@
 
 .e-ddt.e-popup .e-treeview > .e-ul {
   overflow: hidden;
-  padding: 0 8px;
+  padding: 6px 8px;
 }
 
 .e-ddt.e-popup .e-ddt-footer,
@@ -509,7 +513,7 @@
 
 .e-bigger .e-ddt.e-popup .e-treeview > .e-ul,
 .e-ddt.e-bigger.e-popup .e-treeview > .e-ul {
-  padding: 0 16px;
+  padding: 8px 16px;
 }
 
 .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,

package/styles/drop-down-tree/bootstrap5.css

@@ -234,6 +234,10 @@
   position: absolute;
 }
 
+.e-ddt.e-popup .e-checkbox-wrapper .e-frame {
+  background-color: transparent;
+}
+
 .e-ddt.e-popup .e-selectall-parent {
   border-bottom: 1px solid;
   cursor: pointer;
@@ -319,7 +323,7 @@
 
 .e-ddt.e-popup .e-treeview > .e-ul {
   overflow: hidden;
-  padding: 0 8px;
+  padding: 6px 8px;
 }
 
 .e-ddt.e-popup .e-ddt-footer,
@@ -509,7 +513,7 @@
 
 .e-bigger .e-ddt.e-popup .e-treeview > .e-ul,
 .e-ddt.e-bigger.e-popup .e-treeview > .e-ul {
-  padding: 0 16px;
+  padding: 8px 16px;
 }
 
 .e-bigger .e-ddt.e-rtl.e-show-dd-icon .e-chips-wrapper .e-chips:last-child,