@syncfusion/ej2-inputs 20.4.54 → 21.1.37

package/styles/slider/_layout.scss

@@ -827,7 +827,7 @@
                 left: 0;
               }
 
-              @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+              @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
                 background-position: right center;
                 left: 0;
               }
@@ -1038,7 +1038,7 @@
           margin-top: $slider-btn-center-align;
           top: 50%;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
             .e-button-icon {
               background-image: $slider-button-hleft-bg-image;
               background-repeat: no-repeat;
@@ -1050,19 +1050,21 @@
               width: 8px;
             }
           }
-          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
             .e-button-icon {
               font-family: 'e-icons';
             }
 
             .e-button-icon::before {
               color: $slider-button-icon-bg-color;
+              content: '\e738';
               @if ($skin-name == 'FluentUI') {
-                content: '\e738';
                 font-size: 14px;
               }
+              @else if ($skin-name == 'Material3') {
+                font-size: 16px;
+              }
               @else {
-                content: '\e738';
                 font-size: 17px;
               }
             }
@@ -1086,7 +1088,7 @@
           right: 0;
           top: 50%;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5'  and $skin-name != 'FluentUI') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5'  and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
             .e-button-icon {
               background-image: $slider-button-hright-bg-image;
               background-repeat: no-repeat;
@@ -1098,19 +1100,21 @@
               width: 8px;
             }
           }
-          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
             .e-button-icon {
               font-family: 'e-icons';
             }
 
             .e-button-icon::before {
               color: $slider-button-icon-bg-color;
+              content: '\e75c';
               @if ($skin-name == 'FluentUI') {
-                content: '\e75c';
                 font-size: 14px;
               }
+              @else if ($skin-name == 'Material3') {
+                font-size: 16px;
+              }
               @else {
-                content: '\e75c';
                 font-size: 17px;
                 margin-left: 1px;
               }
@@ -1201,7 +1205,7 @@
             border-radius: 2px;
           }
         }
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
           background: $slider-track-color;
           border-radius: 4px;
           overflow: hidden;
@@ -1233,6 +1237,10 @@
           margin-left: -7px;
           top: calc(50% - 7px);
         }
+        @else if($skin-name == 'Material3') {
+          margin-left: -10px;
+          top: calc(50% - 12px);
+        }
         @else {
           @if ($skin-name == 'tailwind') {
             margin-left: -6px;
@@ -1271,7 +1279,7 @@
         @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
           top: calc(50% - 3px);
         }
-        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind') {
+        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'Material3') {
           top: calc(50% - 4px);
         }
       }
@@ -1323,16 +1331,16 @@
       }
 
       .e-slider-track {
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
           background: $slider-track-color;
         }
-        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI') {
+        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
           background: $slider-handle-start-border-color;
         }
         bottom: 0;
         height: 100%;
         position: absolute;
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
           @if ($skin-name == 'tailwind') {
             left: calc(50%);
           }
@@ -1430,7 +1438,7 @@
           margin-right: $slider-btn-center-align;
           right: 50%;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
             .e-button-icon {
               background-image: $slider-button-vdown-bg-image;
               background-repeat: no-repeat;
@@ -1443,7 +1451,7 @@
               width: 8px;
             }
           }
-          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
             .e-button-icon {
               font-family: 'e-icons';
             }
@@ -1479,7 +1487,7 @@
           right: 50%;
           top: 0;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
             .e-button-icon {
               background-image: $slider-button-vup-bg-image;
               background-repeat: no-repeat;
@@ -1492,7 +1500,7 @@
               width: 8px;
             }
           }
-          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
             .e-button-icon {
               font-family: 'e-icons';
             }
@@ -1590,6 +1598,9 @@
           @else if($skin-name == 'tailwind') {
             left: calc(50% - 4px);
           }
+          @else if($skin-name == 'Material3') {
+            left: calc(50% - 10px);
+          }
           @else {
             left: calc(50% - 8px);
           }
@@ -1600,11 +1611,11 @@
             left: calc(50% - 4px);
             width: 8px;
           }
-          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
             left: calc(50% - 3px);
             width: 6px;
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
             @if ($skin-name == 'tailwind') {
               left: calc(50%);
             }
@@ -1757,7 +1768,7 @@
             border-color: $slider-tab-border-color;
             box-shadow: $slider-tab-active-box-shadow;
           }
-          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
             background-color: $slider-tab-background;
             border: $slider-tab-border;
             box-shadow: $slider-tab-active-box-shadow;
@@ -1901,6 +1912,10 @@
               height: 18px;
               top: -11px;
             }
+            @if ($skin-name == 'Material3') {
+              height: 18px;
+              top: -13px;
+            }
             @if ($skin-name == 'tailwind') {
               height: 16px;
               top: -16px;
@@ -1945,6 +1960,10 @@
               height: 38px;
               top: -13px;
             }
+            @if ($skin-name == 'Material3') {
+              height: 26px;
+              top: -10px;
+            }
             @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               height: calc(100% + 3px);
               top: -9px;
@@ -1967,7 +1986,7 @@
               left: 6px;
               width: calc(100% - 12px);
             }
-            @if ($skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
               background-position: center;
               left: 5px;
               width: 18px;
@@ -1998,7 +2017,7 @@
               left: 3px;
               width: calc(100% - 6px);
             }
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
               left: 1px;
               width: 26px;
             }
@@ -2061,7 +2080,7 @@
           background-position: center center;
         }
 
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -2080,7 +2099,7 @@
           position: absolute;
           user-select: none;
           white-space: nowrap;
-          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
             line-height: 1.5;
           }
           @if ($skin-name == 'tailwind') {

package/styles/slider/_theme.scss

@@ -29,6 +29,11 @@
           height: 16px;
           width: 16px;
         }
+        @else if ($skin-name == 'Material3') {
+          height: 24px;
+          width: 24px;
+          padding: 4px;
+        }
         @else {
           height: 18px;
           width: 18px;
@@ -183,7 +188,7 @@
       }
 
       .e-range {
-        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5') {
+        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'Material3') {
           background-color: $slider-range-bar-hover-color;
         }
       }

package/styles/tailwind-dark.css

@@ -5971,7 +5971,7 @@ input.e-input::-webkit-input-placeholder {
   padding: 12px 0 12px 12px;
 }
 .e-small .e-upload .e-file-select-wrap .e-file-drop {
-  font-size: 13px;
+  font-size: 12px;
   margin-left: 10px;
 }
 .e-small .e-upload .e-upload-files .e-upload-file-list {
@@ -6275,6 +6275,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 7px 12px;
 }
+.e-bigger .e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger .e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
+  line-height: 0;
+}
 
 .e-container {
   border: 0;
@@ -6945,6 +6951,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 3px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -7040,6 +7048,8 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 10px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -7055,10 +7065,12 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 18px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
-  font-size: 14px;
+  font-size: 24px;
   line-height: 22px;
 }
 .e-bigger.e-rating-container .e-reset,
@@ -7072,6 +7084,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 22px;
   line-height: 15px;
+  min-width: 30px;
+  min-height: 30px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/tailwind.css

@@ -5971,7 +5971,7 @@ input.e-input::-webkit-input-placeholder {
   padding: 12px 0 12px 12px;
 }
 .e-small .e-upload .e-file-select-wrap .e-file-drop {
-  font-size: 13px;
+  font-size: 12px;
   margin-left: 10px;
 }
 .e-small .e-upload .e-upload-files .e-upload-file-list {
@@ -6275,6 +6275,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 7px 12px;
 }
+.e-bigger .e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-wrapper .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger .e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn),
+.e-bigger.e-colorpicker-container .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
+  line-height: 0;
+}
 
 .e-container {
   border: 0;
@@ -6945,6 +6951,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 3px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -7040,6 +7048,8 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 10px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -7055,10 +7065,12 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 18px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
-  font-size: 14px;
+  font-size: 24px;
   line-height: 22px;
 }
 .e-bigger.e-rating-container .e-reset,
@@ -7072,6 +7084,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 22px;
   line-height: 15px;
+  min-width: 30px;
+  min-height: 30px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/uploader/_bootstrap5-definition.scss

@@ -77,13 +77,13 @@ $ie-abort-icon-position-value: 12px !default;
 
 $upload-font-family: inherit !default;
 $drop-area-font-size-smaller: $text-sm !default;
-$drop-area-font-size: 15px !default;
+$drop-area-font-size: $text-base !default;
 $drop-zone-margin: 3px !default;
 $header-padding: 12px 0 12px 12px !default;
 $drop-area-padding-left: 16px !default;
 $drop-area-padding-left-smaller: 12px !default;
 $file-name-font-size-smaller: $text-sm !default;
-$file-name-font-size: 15px !default;
+$file-name-font-size: $text-base !default;
 $list-item-status-font-size-smaller: $text-xs !default;
 $list-item-status-font-size: $text-xs !default;
 $list-item-status-bigger-font-size: $text-sm !default;
@@ -135,12 +135,12 @@ $rtl-progress-top: -32px !default;
 $remove-icon-rtl-top-smaller: 50% !default;
 $file-name-font-family: inherit !default;
 $remove-icon-top: 50% !default;
-$remove-icon-font-size-smaller: 18px !default;
-$remove-icon-font-size: 22px !default;
-$delete-icon-font-size: 22px !default;
-$abort-icon-font-size: 22px !default;
-$delete-icon-font-size-smaller: 18px !default;
-$abort-icon-font-size-smaller: 18px !default;
+$remove-icon-font-size-smaller: $font-icon-18 !default;
+$remove-icon-font-size: $font-icon-22 !default;
+$delete-icon-font-size: $font-icon-22 !default;
+$abort-icon-font-size: $font-icon-22 !default;
+$delete-icon-font-size-smaller: $font-icon-18 !default;
+$abort-icon-font-size-smaller: $font-icon-18 !default;
 $upload-border-radius: 6px !default;
 $remove-icon-padding-smaller: 10px !default;
 $remove-icon-margin-top-smaller: -9px !default;
@@ -148,12 +148,12 @@ $uploader-icons-hover-radius: 50% !default;
 
 // mouse small
 $header-padding-small: 12px 0 12px 12px !default;
-$drop-area-small-font-size: 13px !default;
-$file-small-name-font-size: 12px !default;
+$drop-area-small-font-size: $text-xs !default;
+$file-small-name-font-size: $text-xs !default;
 $file-small-name-padding-top: 12px !default;
-$list-small-item-status-font-size: 12px !default;
+$list-small-item-status-font-size: $text-xs !default;
 $file-small-size-padding: 6px 0 !default;
-$remove-small-icon-font-size: 10px !default;
+$remove-small-icon-font-size: $text-xxs !default;
 $remove-small-icon-height: 24px !default;
 $delete-small-icon-padding: 12px !default;
 $remove-small-icon-width: 24px !default;

package/styles/uploader/_fluent-definition.scss

@@ -145,12 +145,12 @@ $rtl-progress-top: -32px !default;
 $remove-icon-rtl-top-smaller: 50% !default;
 $file-name-font-family: inherit !default;
 $remove-icon-top: 50% !default;
-$remove-icon-font-size-smaller: 14px !default;
-$remove-icon-font-size: 16px !default;
-$delete-icon-font-size: 16px !default;
-$abort-icon-font-size: 16px !default;
-$delete-icon-font-size-smaller: 14px !default;
-$abort-icon-font-size-smaller: 14px !default;
+$remove-icon-font-size-smaller: $font-icon-14 !default;
+$remove-icon-font-size: $font-icon-16 !default;
+$delete-icon-font-size: $font-icon-16 !default;
+$abort-icon-font-size: $font-icon-16 !default;
+$delete-icon-font-size-smaller: $font-icon-14 !default;
+$abort-icon-font-size-smaller: $font-icon-14 !default;
 $upload-border-radius: 4px !default;
 $upload-border-radius-bigger: 6px;
 $remove-icon-padding-smaller: 5px !default;
@@ -159,12 +159,12 @@ $uploader-icons-hover-radius: 50% !default;
 
 // mouse small
 $header-padding-small: 12px 0 12px 12px !default;
-$drop-area-small-font-size: 12px !default;
-$file-small-name-font-size: 12px !default;
+$drop-area-small-font-size: $text-xs !default;
+$file-small-name-font-size: $text-xs !default;
 $file-small-name-padding-top: 12px !default;
-$list-small-item-status-font-size: 12px !default;
+$list-small-item-status-font-size: $text-xs !default;
 $file-small-size-padding: 0 !default;
-$remove-small-icon-font-size: 10px !default;
+$remove-small-icon-font-size: $font-icon-10 !default;
 $remove-small-icon-height: 24px !default;
 $delete-small-icon-padding: 12px !default;
 $remove-small-icon-width: 24px !default;

package/styles/uploader/_layout.scss

@@ -427,7 +427,7 @@
       padding: $select-file-padding;
 
       .e-icons:focus {
-        @if ($skin-name == 'material') {
+        @if ($skin-name == 'material' or $skin-name == 'Material3') {
           outline: none;
         }
       }
@@ -593,7 +593,12 @@
       #{if(&, '&', '*')} .e-file-reload-btn.e-icons:hover,
       #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):hover,
       #{if(&, '&', '*')} .e-clear-icon-focus {
-        background-color: $clear-icon-focus-color;
+        @if $skin-name == 'Material3' {
+          background: $clear-icon-focus-color;
+        }
+        @if $skin-name != 'Material3' {
+          background-color: $clear-icon-focus-color;
+        }
         border-color: transparent;
         border-radius: $uploader-icons-hover-radius;
         box-shadow: 0 0 0 transparent;

package/styles/uploader/_tailwind-definition.scss

@@ -138,12 +138,12 @@ $rtl-progress-top: -32px !default;
 $remove-icon-rtl-top-smaller: 50% !default;
 $file-name-font-family: inherit !default;
 $remove-icon-top: 50% !default;
-$remove-icon-font-size-smaller: 18px !default;
-$remove-icon-font-size: 22px !default;
-$delete-icon-font-size: 22px !default;
-$abort-icon-font-size: 22px !default;
-$delete-icon-font-size-smaller: 18px !default;
-$abort-icon-font-size-smaller: 18px !default;
+$remove-icon-font-size-smaller: $font-icon-18 !default;
+$remove-icon-font-size: $font-icon-22 !default;
+$delete-icon-font-size: $font-icon-22 !default;
+$abort-icon-font-size: $font-icon-22 !default;
+$delete-icon-font-size-smaller: $font-icon-18 !default;
+$abort-icon-font-size-smaller: $font-icon-18 !default;
 $upload-border-radius: 6px !default;
 $remove-icon-padding-smaller: 10px !default;
 $remove-icon-margin-top-smaller: -9px !default;
@@ -151,12 +151,12 @@ $uploader-icons-hover-radius: 50% !default;
 
 // mouse small
 $header-padding-small: 12px 0 12px 12px !default;
-$drop-area-small-font-size: 13px !default;
-$file-small-name-font-size: 12px !default;
+$drop-area-small-font-size: $text-xs !default;
+$file-small-name-font-size: $text-xs !default;
 $file-small-name-padding-top: 12px !default;
-$list-small-item-status-font-size: 12px !default;
+$list-small-item-status-font-size: $text-xs !default;
 $file-small-size-padding: 6px 0 !default;
-$remove-small-icon-font-size: 10px !default;
+$remove-small-icon-font-size: $font-icon-10 !default;
 $remove-small-icon-height: 24px !default;
 $delete-small-icon-padding: 12px !default;
 $remove-small-icon-width: 24px !default;

package/styles/uploader/_theme.scss

@@ -4,7 +4,7 @@
 
   .e-upload {
     border: $upload-border;
-    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
+    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
       border-radius: $upload-border-radius;
     }
 
@@ -54,7 +54,12 @@
           }
 
           #{if(&, '&', '*')} .e-progress-inner-wrap {
-            background-color: $progress-background-color;
+            @if $skin-name != 'Material3' {
+              background-color: $progress-background-color;
+            }
+            @if $skin-name == 'Material3' {
+              background: $progress-background-color;
+            }
 
             #{if(&, '&', '*')} .e-upload-progress-bar {
 
@@ -101,7 +106,12 @@
       #{if(&, '&', '*')} .e-file-reload-btn.e-icons:focus,
       #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):focus,
       #{if(&, '&', '*')} .e-clear-icon-focus {
-        background-color: $clear-icon-focus-color;
+        @if $skin-name != 'Material3' {
+          background-color: $clear-icon-focus-color;
+        }
+        @if $skin-name == 'Material3' {
+          background: $clear-icon-focus-color;
+        }
         border-color: transparent;
         box-shadow: 0 0 0 transparent;
       }

package/styles/uploader/bootstrap5-dark.css

@@ -61,7 +61,7 @@
   padding: 16px 0 16px 16px;
 }
 .e-bigger .e-upload .e-file-select-wrap .e-file-drop {
-  font-size: 15px;
+  font-size: 16px;
   margin-left: 16px;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list {
@@ -74,7 +74,7 @@
   top: 0;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name {
-  font-size: 15px;
+  font-size: 16px;
   padding-top: 15px;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-size {
@@ -82,7 +82,7 @@
   padding: 10px 0;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type {
-  font-size: 15px;
+  font-size: 16px;
   padding-top: 15px;
   top: initial;
 }
@@ -658,7 +658,7 @@
   padding: 12px 0 12px 12px;
 }
 .e-small .e-upload .e-file-select-wrap .e-file-drop {
-  font-size: 13px;
+  font-size: 12px;
   margin-left: 10px;
 }
 .e-small .e-upload .e-upload-files .e-upload-file-list {

package/styles/uploader/bootstrap5.css

@@ -61,7 +61,7 @@
   padding: 16px 0 16px 16px;
 }
 .e-bigger .e-upload .e-file-select-wrap .e-file-drop {
-  font-size: 15px;
+  font-size: 16px;
   margin-left: 16px;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list {
@@ -74,7 +74,7 @@
   top: 0;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-name {
-  font-size: 15px;
+  font-size: 16px;
   padding-top: 15px;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-size {
@@ -82,7 +82,7 @@
   padding: 10px 0;
 }
 .e-bigger .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-file-type {
-  font-size: 15px;
+  font-size: 16px;
   padding-top: 15px;
   top: initial;
 }
@@ -658,7 +658,7 @@
   padding: 12px 0 12px 12px;
 }
 .e-small .e-upload .e-file-select-wrap .e-file-drop {
-  font-size: 13px;
+  font-size: 12px;
   margin-left: 10px;
 }
 .e-small .e-upload .e-upload-files .e-upload-file-list {

package/styles/uploader/material-dark.css

@@ -333,10 +333,6 @@
   margin: 0;
   padding: 0;
 }
-.e-upload .e-upload-files .e-icons:focus,
-.e-bigger.e-small .e-upload .e-upload-files .e-icons:focus {
-  outline: none;
-}
 .e-upload .e-upload-files .e-upload-file-list,
 .e-bigger.e-small .e-upload .e-upload-files .e-upload-file-list {
   font-family: inherit;

package/styles/uploader/tailwind-dark.css

@@ -664,7 +664,7 @@
   padding: 12px 0 12px 12px;
 }
 .e-small .e-upload .e-file-select-wrap .e-file-drop {
-  font-size: 13px;
+  font-size: 12px;
   margin-left: 10px;
 }
 .e-small .e-upload .e-upload-files .e-upload-file-list {