@syncfusion/ej2-inputs 20.4.54 → 21.1.37

package/styles/bootstrap4.css

@@ -6225,6 +6225,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 10px;
 }
+.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;
@@ -6938,6 +6944,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 11px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -7033,6 +7041,8 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 4px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -7048,6 +7058,8 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 13px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -7065,6 +7077,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 9px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/bootstrap5-dark.css

@@ -5517,7 +5517,7 @@ input.e-input::-webkit-input-placeholder {
   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 {
@@ -5530,7 +5530,7 @@ input.e-input::-webkit-input-placeholder {
   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 {
@@ -5538,7 +5538,7 @@ input.e-input::-webkit-input-placeholder {
   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;
 }
@@ -6114,7 +6114,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 {
@@ -6417,6 +6417,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;
@@ -7088,6 +7094,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 30px;
+  min-height: 30px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -7183,6 +7191,8 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 6px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -7198,6 +7208,8 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 13px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -7215,6 +7227,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 13px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/bootstrap5.css

@@ -5517,7 +5517,7 @@ input.e-input::-webkit-input-placeholder {
   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 {
@@ -5530,7 +5530,7 @@ input.e-input::-webkit-input-placeholder {
   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 {
@@ -5538,7 +5538,7 @@ input.e-input::-webkit-input-placeholder {
   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;
 }
@@ -6114,7 +6114,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 {
@@ -6417,6 +6417,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;
@@ -7088,6 +7094,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 30px;
+  min-height: 30px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -7183,6 +7191,8 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
   line-height: 6px;
+  min-height: 24px;
+  min-width: 24px;
 }
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
@@ -7198,6 +7208,8 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
   line-height: 13px;
+  min-width: 40px;
+  min-height: 40px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -7215,6 +7227,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
   line-height: 13px;
+  min-width: 34px;
+  min-height: 34px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,

package/styles/color-picker/_layout.scss

@@ -13,6 +13,13 @@
       width: 1px;
     }
 
+    & .e-dropdown-btn.e-icon-btn {
+      @if $skin-name == 'Material3' {
+        background: $cpicker-split-btn-background-color;
+        border-radius: $cpicker-split-btn-border-radius;
+      }
+    }
+
     & .e-btn.e-icon-btn {
       @if $skin-name == 'bootstrap4' {
         padding: $cpicker-split-btn-padding;
@@ -32,6 +39,10 @@
         @if $skin-name == 'bootstrap4' {
           box-shadow: none;
         }
+        @else if $skin-name == 'Material3' {
+          background: $cpicker-split-btn-background-color;
+          border-radius: $cpicker-split-btn-border-radius;
+        }
         @else if $skin-name == 'bootstrap5' {
           background-color: transparent;
           border: $cpicker-split-btn-border;
@@ -72,6 +83,10 @@
           @if $skin-name == 'bootstrap4' {
             padding: $cpicker-split-btn-padding;
           }
+          @else if $skin-name == 'Material3' {
+            background: $cpicker-split-btn-background-color;
+            border-radius: $cpicker-split-btn-border-radius;
+          }
           @else if $skin-name == 'bootstrap5' {
             background-color: $cpicker-tile-active-border-color;
             border: $cpicker-split-btn-border;
@@ -190,6 +205,10 @@
         }
       }
     }
+
+    .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
+      line-height: 0;
+    }
   }
 
   .e-container {
@@ -209,7 +228,13 @@
     }
 
     &.e-color-picker {
-      width: $cpicker-container-width;
+      @if $skin-name == 'Material3' {
+        height: $cpicker-popup-container-height;
+        width: $cpicker-popup-container-width;
+      }
+      @else {
+        width: $cpicker-container-width;
+      }
       @if $skin-name == 'bootstrap4' {
         background-color: $content-bg;
         border: 1px solid $cpicker-shadow;
@@ -217,6 +242,9 @@
 
       & .e-mode-switch-btn {
         background: $cpicker-mode-palette-icon;
+        @if $theme-name == 'Matrial3' {
+          border-radius: 2px;
+        }
       }
     }
 
@@ -342,6 +370,9 @@
             @else if $skin-name == 'bootstrap5' {
               border-radius: 4px;
             }
+            @else if $skin-name == 'Material3' {
+              border-radius: $cpicker-handler-height;
+            }
             @else {
               border-radius: 0;
             }
@@ -469,7 +500,9 @@
         font-family: 'e-icons';
         margin-top: $cpicker-value-switch-btn-margin;
         padding: $cpicker-switch-btn-padding;
-
+        @if $skin-name == 'Material3' {
+          border: none;
+        }
         @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
           font-size: 22px;
           line-height: 22px;
@@ -478,6 +511,12 @@
           font-size: 16px;
           line-height: 16px;
         }
+
+        &::before {
+          @if $skin-name == 'Material3' {
+            margin-left: 2px;
+          }
+        }
       }
     }
 
@@ -529,7 +568,7 @@
         float: right;
         text-align: right;
         white-space: nowrap;
-        @if $skin-name == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
           width: 86.913%;
         }
         @else {
@@ -571,6 +610,9 @@
         margin-top: $cpicker-type-switch-margin;
         overflow: hidden;
         white-space: nowrap;
+        @if $skin-name == 'Material3' {
+          border-radius: 2px;
+        }
 
         &:hover {
           @if $skin-name == 'bootstrap4' {
@@ -624,8 +666,11 @@
         +.e-switch-ctrl-btn {
           padding: $cpicker-palette-ctrl-btn-padding;
 
-          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+          @if $skin-name == 'tailwind' or $skin-name == 'Material3' {
             & .e-mode-switch-btn {
+              @if $skin-name == 'Material3' {
+                height: 26px;
+              }
               width: $cpicker-palette-switch-btn-width;
             }
           }
@@ -816,8 +861,18 @@
 
   .e-bigger {
     & .e-container {
+      @if $skin-name == 'Material3' {
+        border-radius: $cpicker-bigger-popup-border-radius;
+        box-shadow: $cpicker-bigger-box-shadow;
+      }
       &.e-color-picker {
-        width: $cpicker-bigger-container-width;
+        @if $skin-name == 'Material3' {
+          height: $cpicker-bigger-popup-container-height;
+          width: $cpicker-bigger-popup-container-width;
+        }
+        @else {
+          width: $cpicker-bigger-container-width;
+        }
 
         & .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
           @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
@@ -835,12 +890,20 @@
           @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
             height: 38px;
           }
+          @else if $skin-name == 'Material3' {
+            height: $cpicker-bigger-switch-btn-height;
+          }
         }
       }
 
       & .e-palette {
         & .e-tile {
-          height: $cpicker-bigger-tile-size;
+          @if $skin-name == 'Material3' {
+            height: $cpicker-tiles-height;
+          }
+          @else {
+            height: $cpicker-bigger-tile-size;
+          }
           width: $cpicker-bigger-tile-size;
         }
       }
@@ -943,6 +1006,12 @@
           +.e-switch-ctrl-btn {
             padding: $cpicker-bigger-palette-ctrl-btn-padding;
 
+            & .e-mode-switch-btn {
+              @if $skin-name == 'Material3' {
+                height: $cpicker-switch-btn-height;
+              }
+            }
+
             & .e-ctrl-btn .e-btn {
               @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
                 line-height: 0;
@@ -981,6 +1050,9 @@
       & .e-mode-switch-btn {
         padding: $cpicker-bigger-switch-btn-padding;
         width: $cpicker-bigger-switch-btn-width;
+        @if $skin-name == 'Material3' {
+          border: none;
+        }
         @if $skin-name == 'bootstrap4' {
           height: $cpicker-bigger-switch-btn-width;
         }

package/styles/color-picker/_theme.scss

@@ -153,6 +153,9 @@
         @if $skin-name == 'tailwind' {
           border-color: $btn-disabled-border-color;
         }
+        @if $skin-name == 'Material3' {
+          border: none;
+        }
       }
     }
   }

package/styles/color-picker/bootstrap-dark.css

@@ -131,6 +131,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 6px;
 }
+.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;

package/styles/color-picker/bootstrap.css

@@ -131,6 +131,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 6px;
 }
+.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;

package/styles/color-picker/bootstrap4.css

@@ -144,6 +144,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 10px;
 }
+.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;

package/styles/color-picker/bootstrap5-dark.css

@@ -154,6 +154,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;

package/styles/color-picker/bootstrap5.css

@@ -154,6 +154,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;

package/styles/color-picker/fabric-dark.css

@@ -131,6 +131,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 7px;
 }
+.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;

package/styles/color-picker/fabric.css

@@ -131,6 +131,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 7px;
 }
+.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;

package/styles/color-picker/fluent-dark.css

@@ -132,6 +132,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;

package/styles/color-picker/fluent.css

@@ -132,6 +132,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;

package/styles/color-picker/highcontrast-light.css

@@ -131,6 +131,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 7px;
 }
+.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: 1px inset #757575;

package/styles/color-picker/highcontrast.css

@@ -131,6 +131,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 7px;
 }
+.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: 1px inset #969696;

package/styles/color-picker/material-dark.css

@@ -138,6 +138,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 6px;
 }
+.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;

package/styles/color-picker/material.css

@@ -146,6 +146,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 6px;
 }
+.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;

package/styles/color-picker/tailwind-dark.css

@@ -133,6 +133,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;

package/styles/color-picker/tailwind.css

@@ -133,6 +133,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;

package/styles/fabric-dark.css

@@ -6091,6 +6091,12 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
   padding: 0 7px;
 }
+.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;
@@ -6734,6 +6740,8 @@ body.e-colorpicker-overflow {
   padding: 4px;
   line-height: 13px;
   display: block;
+  min-width: 28px;
+  min-height: 28px;
   position: relative;
 }
 .e-rating-container .e-rating-item-container .e-rating-item {
@@ -6829,6 +6837,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 {
@@ -6844,6 +6854,8 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 28px;
   line-height: 21px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
@@ -6861,6 +6873,8 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 24px;
   line-height: 19px;
+  min-width: 32px;
+  min-height: 32px;
 }
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,