@syncfusion/ej2-angular-inputs 19.3.57 → 19.4.38

package/styles/bootstrap4.scss

@@ -1,3 +1,4 @@
+@import 'signature/bootstrap4.scss';
 @import 'input/bootstrap4.scss';
 @import 'numerictextbox/bootstrap4.scss';
 @import 'maskedtextbox/bootstrap4.scss';

package/styles/bootstrap5-dark.css

@@ -1,3 +1,13 @@
+.e-signature {
+  border: 1px solid;
+}
+
+.e-signature {
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #444c54;
+}
+
 .e-float-input .e-clear-icon::before,
 .e-float-input.e-control-wrapper .e-clear-icon::before {
   content: '\e7e7';
@@ -560,6 +570,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+.e-small .e-bigger.e-input-group .e-input-group-icon,
+.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -1530,6 +1542,8 @@ label.e-float-text,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+.e-small .e-bigger.e-input-group .e-input-group-icon,
+.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   margin-bottom: 0;
@@ -3563,7 +3577,12 @@ textarea.e-input,
 .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
 .e-bigger .e-input-group.e-input-focus textarea,
 .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
+.e-input-group.e-control-wrapper textarea.e-bigger:focus,
+.e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
+.e-bigger .e-input-group.e-control-wrapper textarea:focus,
+.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
+.e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus {
   font: inherit;
   line-height: 1.5;
   min-height: 36px;
@@ -3576,13 +3595,8 @@ textarea.e-input,
 .e-input-group textarea.e-input.e-small,
 .e-input-group.e-control-wrapper.e-small textarea,
 .e-input-group.e-control-wrapper.e-small textarea.e-input,
-.e-input-group.e-control-wrapper textarea.e-bigger,
-.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
 .e-small .e-input-group textarea,
 .e-small .e-input-group textarea.e-input,
-.e-bigger .e-input-group.e-control-wrapper textarea,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
-.e-bigger .e-input-group.e-control-wrapper textarea.e-input,
 .e-float-input.e-small textarea,
 .e-float-input textarea.e-small,
 .e-float-input.e-control-wrapper.e-small textarea,
@@ -3601,11 +3615,8 @@ textarea.e-input,
 .e-input-group.e-input-focus textarea.e-input.e-small,
 .e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
 .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
-.e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
-.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
 .e-small .e-input-group.e-input-focus textarea,
-.e-small .e-input-group.e-input-focus textarea.e-input,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-small .e-input-group.e-input-focus textarea.e-input {
   font: inherit;
   min-height: 26px;
   padding: 4px 8px 4px 8px;
@@ -3617,13 +3628,8 @@ textarea.e-input,
 .e-input-group textarea.e-input.e-small:focus,
 .e-input-group.e-control-wrapper.e-small textarea:focus,
 .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
-.e-input-group.e-control-wrapper textarea.e-bigger:focus,
-.e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
 .e-small .e-input-group textarea:focus,
 .e-small .e-input-group textarea.e-input:focus,
-.e-bigger .e-input-group.e-control-wrapper textarea:focus,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
-.e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
 .e-float-input.e-small textarea:focus,
 .e-float-input textarea.e-small:focus,
 .e-float-input.e-control-wrapper.e-small textarea:focus,
@@ -3679,7 +3685,8 @@ textarea.e-input,
 .e-bigger.e-small .e-input-group.e-input-focus textarea.e-input,
 .e-bigger .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
 .e-bigger.e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
-.e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
+.e-small .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input {
   font: inherit;
   line-height: 1.5;
   min-height: 32px;
@@ -5356,7 +5363,7 @@ input.e-input::-webkit-input-placeholder {
 }
 
 .e-control-wrapper.e-slider-container .e-scale .e-tick {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXO1Nq/Gb1BAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==");
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AbHV9/wUNAl7Qm4m+AAAAAElFTkSuQmCC");
   cursor: pointer;
   outline: none;
   position: relative;
@@ -5366,10 +5373,6 @@ input.e-input::-webkit-input-placeholder {
   background-position: center center;
 }
 
-.e-control-wrapper.e-slider-container .e-scale .e-tick.e-large {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEWttb1auGYlAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==");
-}
-
 .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
   color: #e9ecef;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -6640,7 +6643,7 @@ input.e-input::-webkit-input-placeholder {
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-btn.e-icon-btn {
   background-color: #fff;
   border: 1px solid #6c757d;
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
@@ -6650,7 +6653,7 @@ input.e-input::-webkit-input-placeholder {
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn {
-  background-color: transparent;
+  background-color: #fff;
   border: 1px solid #6c757d;
   color: #adb5bd;
 }
@@ -6951,7 +6954,6 @@ body.e-colorpicker-overflow {
   position: relative;
   top: 0;
   width: 13.45%;
-  height: 38px;
 }
 
 .e-container .e-slider-preview .e-preview-container .e-preview {
@@ -7212,14 +7214,6 @@ body.e-colorpicker-overflow {
   width: 462px;
 }
 
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
-  height: 38px;
-}
-
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-mode-switch-btn {
-  height: 38px;
-}
-
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -7506,15 +7500,6 @@ body.e-colorpicker-overflow {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:active,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:focus,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:hover,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
-  background-color: transparent;
-  box-shadow: none;
-  color: #adb5bd;
-}
-
 .e-colorpicker-wrapper .e-btn.e-icon-btn,
 .e-colorpicker-container .e-btn.e-icon-btn {
   background-color: transparent;
@@ -7532,7 +7517,7 @@ body.e-colorpicker-overflow {
   background-color: #5c636a;
   border-color: #6c757d;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-colorpicker-wrapper .e-icon-btn:active,

package/styles/bootstrap5-dark.scss

@@ -1,3 +1,4 @@
+@import 'signature/bootstrap5-dark.scss';
 @import 'input/bootstrap5-dark.scss';
 @import 'numerictextbox/bootstrap5-dark.scss';
 @import 'maskedtextbox/bootstrap5-dark.scss';

package/styles/bootstrap5.css

@@ -1,3 +1,13 @@
+.e-signature {
+  border: 1px solid;
+}
+
+.e-signature {
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #dee2e6;
+}
+
 .e-float-input .e-clear-icon::before,
 .e-float-input.e-control-wrapper .e-clear-icon::before {
   content: '\e7e7';
@@ -560,6 +570,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+.e-small .e-bigger.e-input-group .e-input-group-icon,
+.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -1530,6 +1542,8 @@ label.e-float-text,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+.e-small .e-bigger.e-input-group .e-input-group-icon,
+.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   margin-bottom: 0;
@@ -3563,7 +3577,12 @@ textarea.e-input,
 .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
 .e-bigger .e-input-group.e-input-focus textarea,
 .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
+.e-input-group.e-control-wrapper textarea.e-bigger:focus,
+.e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
+.e-bigger .e-input-group.e-control-wrapper textarea:focus,
+.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
+.e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus {
   font: inherit;
   line-height: 1.5;
   min-height: 36px;
@@ -3576,13 +3595,8 @@ textarea.e-input,
 .e-input-group textarea.e-input.e-small,
 .e-input-group.e-control-wrapper.e-small textarea,
 .e-input-group.e-control-wrapper.e-small textarea.e-input,
-.e-input-group.e-control-wrapper textarea.e-bigger,
-.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
 .e-small .e-input-group textarea,
 .e-small .e-input-group textarea.e-input,
-.e-bigger .e-input-group.e-control-wrapper textarea,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
-.e-bigger .e-input-group.e-control-wrapper textarea.e-input,
 .e-float-input.e-small textarea,
 .e-float-input textarea.e-small,
 .e-float-input.e-control-wrapper.e-small textarea,
@@ -3601,11 +3615,8 @@ textarea.e-input,
 .e-input-group.e-input-focus textarea.e-input.e-small,
 .e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
 .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
-.e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
-.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
 .e-small .e-input-group.e-input-focus textarea,
-.e-small .e-input-group.e-input-focus textarea.e-input,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-small .e-input-group.e-input-focus textarea.e-input {
   font: inherit;
   min-height: 26px;
   padding: 4px 8px 4px 8px;
@@ -3617,13 +3628,8 @@ textarea.e-input,
 .e-input-group textarea.e-input.e-small:focus,
 .e-input-group.e-control-wrapper.e-small textarea:focus,
 .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
-.e-input-group.e-control-wrapper textarea.e-bigger:focus,
-.e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
 .e-small .e-input-group textarea:focus,
 .e-small .e-input-group textarea.e-input:focus,
-.e-bigger .e-input-group.e-control-wrapper textarea:focus,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
-.e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
 .e-float-input.e-small textarea:focus,
 .e-float-input textarea.e-small:focus,
 .e-float-input.e-control-wrapper.e-small textarea:focus,
@@ -3679,7 +3685,8 @@ textarea.e-input,
 .e-bigger.e-small .e-input-group.e-input-focus textarea.e-input,
 .e-bigger .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
 .e-bigger.e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
-.e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
+.e-small .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input {
   font: inherit;
   line-height: 1.5;
   min-height: 32px;
@@ -5356,7 +5363,7 @@ input.e-input::-webkit-input-placeholder {
 }
 
 .e-control-wrapper.e-slider-container .e-scale .e-tick {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXO1Nq/Gb1BAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==");
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AztTa/whsA3yqMpmsAAAAAElFTkSuQmCC");
   cursor: pointer;
   outline: none;
   position: relative;
@@ -5366,10 +5373,6 @@ input.e-input::-webkit-input-placeholder {
   background-position: center center;
 }
 
-.e-control-wrapper.e-slider-container .e-scale .e-tick.e-large {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEWttb1auGYlAAAACklEQVR4nGNiAAAABgADNjd8qAAAAABJRU5ErkJggg==");
-}
-
 .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
   color: #343a40;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -6640,7 +6643,7 @@ input.e-input::-webkit-input-placeholder {
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-btn.e-icon-btn {
   background-color: #fff;
   border: 1px solid #ced4da;
-  color: #fff;
+  color: #6c757d;
 }
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
@@ -6650,7 +6653,7 @@ input.e-input::-webkit-input-placeholder {
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn {
-  background-color: transparent;
+  background-color: #fff;
   border: 1px solid #ced4da;
   color: #6c757d;
 }
@@ -6951,7 +6954,6 @@ body.e-colorpicker-overflow {
   position: relative;
   top: 0;
   width: 13.45%;
-  height: 38px;
 }
 
 .e-container .e-slider-preview .e-preview-container .e-preview {
@@ -7212,14 +7214,6 @@ body.e-colorpicker-overflow {
   width: 462px;
 }
 
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
-  height: 38px;
-}
-
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-mode-switch-btn {
-  height: 38px;
-}
-
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -7506,15 +7500,6 @@ body.e-colorpicker-overflow {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:active,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:focus,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:hover,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
-  background-color: transparent;
-  box-shadow: none;
-  color: #6c757d;
-}
-
 .e-colorpicker-wrapper .e-btn.e-icon-btn,
 .e-colorpicker-container .e-btn.e-icon-btn {
   background-color: transparent;
@@ -7532,7 +7517,7 @@ body.e-colorpicker-overflow {
   background-color: #5c636a;
   border-color: #6c757d;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
-  color: #fff;
+  color: #6c757d;
 }
 
 .e-colorpicker-wrapper .e-icon-btn:active,

package/styles/bootstrap5.scss

@@ -1,3 +1,4 @@
+@import 'signature/bootstrap5.scss';
 @import 'input/bootstrap5.scss';
 @import 'numerictextbox/bootstrap5.scss';
 @import 'maskedtextbox/bootstrap5.scss';

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

@@ -56,7 +56,7 @@
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-btn.e-icon-btn {
   background-color: #fff;
   border: 1px solid #6c757d;
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
@@ -66,7 +66,7 @@
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn {
-  background-color: transparent;
+  background-color: #fff;
   border: 1px solid #6c757d;
   color: #adb5bd;
 }
@@ -367,7 +367,6 @@ body.e-colorpicker-overflow {
   position: relative;
   top: 0;
   width: 13.45%;
-  height: 38px;
 }
 
 .e-container .e-slider-preview .e-preview-container .e-preview {
@@ -628,14 +627,6 @@ body.e-colorpicker-overflow {
   width: 462px;
 }
 
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
-  height: 38px;
-}
-
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-mode-switch-btn {
-  height: 38px;
-}
-
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -922,15 +913,6 @@ body.e-colorpicker-overflow {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:active,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:focus,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:hover,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
-  background-color: transparent;
-  box-shadow: none;
-  color: #adb5bd;
-}
-
 .e-colorpicker-wrapper .e-btn.e-icon-btn,
 .e-colorpicker-container .e-btn.e-icon-btn {
   background-color: transparent;
@@ -948,7 +930,7 @@ body.e-colorpicker-overflow {
   background-color: #5c636a;
   border-color: #6c757d;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
-  color: #fff;
+  color: #adb5bd;
 }
 
 .e-colorpicker-wrapper .e-icon-btn:active,

package/styles/color-picker/bootstrap5.css

@@ -56,7 +56,7 @@
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-btn.e-icon-btn {
   background-color: #fff;
   border: 1px solid #ced4da;
-  color: #fff;
+  color: #6c757d;
 }
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
@@ -66,7 +66,7 @@
 
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn {
-  background-color: transparent;
+  background-color: #fff;
   border: 1px solid #ced4da;
   color: #6c757d;
 }
@@ -367,7 +367,6 @@ body.e-colorpicker-overflow {
   position: relative;
   top: 0;
   width: 13.45%;
-  height: 38px;
 }
 
 .e-container .e-slider-preview .e-preview-container .e-preview {
@@ -628,14 +627,6 @@ body.e-colorpicker-overflow {
   width: 462px;
 }
 
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
-  height: 38px;
-}
-
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-mode-switch-btn {
-  height: 38px;
-}
-
 .e-bigger .e-container .e-palette .e-tile {
   height: 29px;
   width: 29px;
@@ -922,15 +913,6 @@ body.e-colorpicker-overflow {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-colorpicker-wrapper .e-split-btn-wrapper .e-dropdown-btn:disabled:active,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:focus,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:hover,
-.e-colorpicker-container .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
-  background-color: transparent;
-  box-shadow: none;
-  color: #6c757d;
-}
-
 .e-colorpicker-wrapper .e-btn.e-icon-btn,
 .e-colorpicker-container .e-btn.e-icon-btn {
   background-color: transparent;
@@ -948,7 +930,7 @@ body.e-colorpicker-overflow {
   background-color: #5c636a;
   border-color: #6c757d;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
-  color: #fff;
+  color: #6c757d;
 }
 
 .e-colorpicker-wrapper .e-icon-btn:active,

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

@@ -151,7 +151,7 @@ body.e-colorpicker-overflow {
 }
 
 .e-container {
-  border: 1px solid #414040;
+  border: 0;
   border-radius: 0;
   display: inline-block;
   line-height: 0;
@@ -192,7 +192,7 @@ body.e-colorpicker-overflow {
 }
 
 .e-container .e-palette {
-  border-bottom: 1px solid #414040;
+  border-bottom: 0;
   display: table;
   line-height: 0;
   outline: none;
@@ -233,7 +233,7 @@ body.e-colorpicker-overflow {
 }
 
 .e-container .e-hsv-container {
-  border-bottom: 1px solid #414040;
+  border-bottom: 0;
   position: relative;
   -ms-touch-action: none;
       touch-action: none;

package/styles/fabric-dark.css

@@ -1,3 +1,13 @@
+.e-signature {
+  border: 1px solid;
+}
+
+.e-signature {
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #414040;
+}
+
 .e-float-input .e-clear-icon::before,
 .e-float-input.e-control-wrapper .e-clear-icon::before {
   content: '\e953';
@@ -488,6 +498,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+.e-small .e-bigger.e-input-group .e-input-group-icon,
+.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -1460,6 +1472,8 @@ label.e-float-text,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
+.e-small .e-bigger.e-input-group .e-input-group-icon,
+.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   margin-bottom: 0;
@@ -3494,7 +3508,12 @@ textarea.e-input,
 .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
 .e-bigger .e-input-group.e-input-focus textarea,
 .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
+.e-input-group.e-control-wrapper textarea.e-bigger:focus,
+.e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
+.e-bigger .e-input-group.e-control-wrapper textarea:focus,
+.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
+.e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus {
   font: inherit;
   line-height: 1.5;
   min-height: 36px;
@@ -3507,13 +3526,8 @@ textarea.e-input,
 .e-input-group textarea.e-input.e-small,
 .e-input-group.e-control-wrapper.e-small textarea,
 .e-input-group.e-control-wrapper.e-small textarea.e-input,
-.e-input-group.e-control-wrapper textarea.e-bigger,
-.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
 .e-small .e-input-group textarea,
 .e-small .e-input-group textarea.e-input,
-.e-bigger .e-input-group.e-control-wrapper textarea,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
-.e-bigger .e-input-group.e-control-wrapper textarea.e-input,
 .e-float-input.e-small textarea,
 .e-float-input textarea.e-small,
 .e-float-input.e-control-wrapper.e-small textarea,
@@ -3532,11 +3546,8 @@ textarea.e-input,
 .e-input-group.e-input-focus textarea.e-input.e-small,
 .e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
 .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
-.e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
-.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
 .e-small .e-input-group.e-input-focus textarea,
-.e-small .e-input-group.e-input-focus textarea.e-input,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-small .e-input-group.e-input-focus textarea.e-input {
   font: inherit;
   min-height: 26px;
   padding: 4px 10px 0 10px;
@@ -3548,13 +3559,8 @@ textarea.e-input,
 .e-input-group textarea.e-input.e-small:focus,
 .e-input-group.e-control-wrapper.e-small textarea:focus,
 .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
-.e-input-group.e-control-wrapper textarea.e-bigger:focus,
-.e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
 .e-small .e-input-group textarea:focus,
 .e-small .e-input-group textarea.e-input:focus,
-.e-bigger .e-input-group.e-control-wrapper textarea:focus,
-.e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
-.e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
 .e-float-input.e-small textarea:focus,
 .e-float-input textarea.e-small:focus,
 .e-float-input.e-control-wrapper.e-small textarea:focus,
@@ -3610,7 +3616,8 @@ textarea.e-input,
 .e-bigger.e-small .e-input-group.e-input-focus textarea.e-input,
 .e-bigger .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
 .e-bigger.e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
-.e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
+.e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
+.e-small .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input {
   font: inherit;
   line-height: 1.5;
   min-height: 32px;
@@ -6457,7 +6464,7 @@ body.e-colorpicker-overflow {
 }
 
 .e-container {
-  border: 1px solid #414040;
+  border: 0;
   border-radius: 0;
   display: inline-block;
   line-height: 0;
@@ -6498,7 +6505,7 @@ body.e-colorpicker-overflow {
 }
 
 .e-container .e-palette {
-  border-bottom: 1px solid #414040;
+  border-bottom: 0;
   display: table;
   line-height: 0;
   outline: none;
@@ -6539,7 +6546,7 @@ body.e-colorpicker-overflow {
 }
 
 .e-container .e-hsv-container {
-  border-bottom: 1px solid #414040;
+  border-bottom: 0;
   position: relative;
   -ms-touch-action: none;
       touch-action: none;

package/styles/fabric-dark.scss

@@ -1,3 +1,4 @@
+@import 'signature/fabric-dark.scss';
 @import 'input/fabric-dark.scss';
 @import 'numerictextbox/fabric-dark.scss';
 @import 'maskedtextbox/fabric-dark.scss';