@syncfusion/ej2-vue-inputs 20.1.47 → 20.1.48

package/styles/bootstrap5.css

@@ -123,29 +123,7 @@ input.e-input,
 
 .e-input.e-small,
 .e-input-group.e-small,
-.e-input-group.e-control-wrapper.e-small,
-.e-input-group.e-small .e-input,
-.e-input-group.e-small input,
-.e-input-group.e-control-wrapper.e-small .e-input,
-.e-input-group.e-control-wrapper.e-small input,
-.e-float-input.e-small input,
-.e-float-input.e-input-group.e-small input,
-.e-float-input.e-control-wrapper.e-small input,
-.e-float-input.e-control-wrapper.e-input-group.e-small input,
-.e-float-input.e-small,
-.e-float-input.e-control-wrapper.e-small,
-.e-small .e-input-group,
-.e-small .e-input-group.e-control-wrapper,
-.e-small .e-input-group .e-input,
-.e-small .e-input-group input,
-.e-small .e-input-group.e-control-wrapper .e-input,
-.e-small .e-input-group.e-control-wrapper input,
-.e-small .e-float-input input,
-.e-small .e-float-input.e-input-group input,
-.e-small .e-float-input.e-control-wrapper input,
-.e-small .e-float-input.e-control-wrapper.e-input-group input,
-.e-small .e-float-input,
-.e-small .e-float-input.e-control-wrapper {
+.e-input-group.e-control-wrapper.e-small {
   border-radius: 2px;
 }
 
@@ -190,64 +168,27 @@ textarea.e-input.e-bigger,
 .e-input-group.e-bigger,
 .e-bigger .e-input-group,
 .e-input-group.e-control-wrapper.e-bigger,
-.e-bigger .e-input-group.e-control-wrapper {
+.e-bigger .e-input-group.e-control-wrapper,
+.e-input-group.e-bigger.e-disabled,
+.e-bigger .e-input-group.e-disabled,
+.e-input-group.e-control-wrapper.e-bigger.e-disabled,
+.e-bigger .e-input-group.e-control-wrapper.e-disabled {
   border-radius: 4px;
   font-size: 16px;
 }
 
-.e-input-group.e-bigger .e-input,
-.e-input-group.e-bigger input,
-.e-input-group.e-control-wrapper.e-bigger .e-input,
-.e-input-group.e-control-wrapper.e-bigger input,
-.e-float-input.e-bigger input,
-.e-float-input.e-input-group.e-bigger input,
-.e-float-input.e-control-wrapper.e-bigger input,
-.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
-.e-float-input.e-bigger,
-.e-float-input.e-control-wrapper.e-bigger,
-.e-bigger .e-input-group .e-input,
-.e-bigger .e-input-group input,
-.e-bigger .e-input-group.e-control-wrapper .e-input,
-.e-bigger .e-input-group.e-control-wrapper input,
-.e-bigger .e-float-input input,
-.e-bigger .e-float-input.e-input-group input,
-.e-bigger .e-float-input.e-control-wrapper input,
-.e-bigger .e-float-input.e-control-wrapper.e-input-group input,
-.e-bigger .e-float-input,
-.e-bigger .e-float-input.e-control-wrapper {
-  border-radius: 4px;
-}
-
 input.e-input.e-bigger.e-small,
 textarea.e-input.e-bigger.e-small,
 .e-bigger.e-small input.e-input,
 .e-bigger.e-small textarea.e-input,
 .e-input-group.e-bigger.e-small,
 .e-bigger.e-small .e-input-group,
-.e-bigger.e-small .e-input-group.e-control-wrapper {
-  border-radius: 4px;
-}
-
-.e-input-group.e-bigger.e-small .e-input,
-.e-input-group.e-bigger.e-small input,
-.e-input-group.e-control-wrapper.e-bigger.e-small .e-input,
-.e-input-group.e-control-wrapper.e-bigger.e-small input,
-.e-float-input.e-bigger.e-small input,
-.e-float-input.e-input-group.e-bigger.e-small input,
-.e-float-input.e-control-wrapper.e-bigger.e-small input,
-.e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
-.e-float-input.e-bigger.e-small,
-.e-float-input.e-control-wrapper.e-bigger.e-small,
-.e-bigger.e-small .e-input-group .e-input,
-.e-bigger.e-small .e-input-group input,
-.e-bigger.e-small .e-input-group.e-control-wrapper .e-input,
-.e-bigger.e-small .e-input-group.e-control-wrapper input,
-.e-bigger.e-small .e-float-input input,
-.e-bigger.e-small .e-float-input.e-input-group input,
-.e-bigger.e-small .e-float-input.e-control-wrapper input,
-.e-bigger.e-small .e-float-input.e-control-wrapper.e-input-group input,
-.e-bigger.e-small .e-float-input,
-.e-bigger.e-small .e-float-input.e-control-wrapper {
+.e-input-group.e-control-wrapper.e-biggere-small,
+.e-bigger.e-small .e-input-group.e-control-wrapper,
+.e-input-group.e-bigger.e-small.e-disabled,
+.e-bigger.e-small .e-input-group.e-disabled,
+.e-input-group.e-control-wrapper.e-bigger.e-small.e-disabled,
+.e-bigger.e-small .e-input-group.e-control-wrapper.e-disabled {
   border-radius: 4px;
 }
 
@@ -296,7 +237,7 @@ textarea.e-input.e-bigger,
   -ms-flex-pack: center;
       justify-content: center;
   line-height: 1;
-  min-height: 30px;
+  min-height: 29px;
   min-width: 30px;
   padding: 0;
   text-align: center;
@@ -342,7 +283,7 @@ textarea.e-input.e-bigger,
 .e-rtl .e-input-group input ~ .e-input-group-icon,
 .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
   border-left-width: 0;
-  border-right: 1px solid #ced4da;
+  border-right-width: 1px;
 }
 
 .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
@@ -620,7 +561,7 @@ textarea.e-input.e-small,
 .e-small .e-input-group .e-input-group-icon,
 .e-small .e-input-group.e-control-wrapper .e-input-group-icon {
   font-size: 12px;
-  min-height: 24px;
+  min-height: 22px;
   min-width: 24px;
   padding: 0;
 }
@@ -629,8 +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-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;
@@ -2822,7 +2763,7 @@ textarea.e-input.e-bigger.e-small,
 .e-float-input.e-control-wrapper .e-clear-icon::before,
 .e-input-group .e-clear-icon::before,
 .e-input-group.e-control-wrapper .e-clear-icon::before {
-  font-size: 14px;
+  font-size: 10px;
   padding: 0;
   text-align: center;
   vertical-align: middle;
@@ -2862,7 +2803,7 @@ textarea.e-input.e-bigger.e-small,
 .e-small .e-float-input .e-clear-icon::before,
 .e-small .e-input-group .e-clear-icon::before,
 .e-small .e-input-group.e-control-wrapper .e-clear-icon::before {
-  font-size: 12px;
+  font-size: 8px;
 }
 
 .e-float-input.e-bigger .e-clear-icon::before,
@@ -2875,17 +2816,13 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input .e-clear-icon::before,
 .e-bigger .e-input-group .e-clear-icon::before,
 .e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
-  font-size: 16px;
+  font-size: 12px;
 }
 
 .e-float-input.e-small.e-bigger .e-clear-icon::before,
 .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
-.e-small.e-bigger .e-float-input .e-clear-icon::before,
-.e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
-.e-small.e-bigger .e-input-group .e-clear-icon::before,
-.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
 .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
@@ -2894,7 +2831,7 @@ textarea.e-input.e-bigger.e-small,
 .e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon::before {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .e-input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
@@ -3868,8 +3805,7 @@ textarea.e-input,
 .e-input-group .e-input[readonly] ~ span.e-input-group-icon,
 .e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon,
 .e-float-input input[readonly] ~ span.e-input-group-icon,
-.e-float-input.e-control-wrapper input[readonly] ~ span.e-input-group-icon,
-.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+.e-float-input.e-control-wrapper input[readonly] ~ span.e-input-group-icon {
   background: #e9ecef;
   color: #6c757d;
 }
@@ -4296,6 +4232,13 @@ textarea.e-input::-webkit-input-placeholder {
   border-color: #ced4da;
 }
 
+.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
+.e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon,
+.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
+.e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon {
+  border-color: transparent;
+}
+
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
 .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
   border-color: #ced4da;
@@ -4887,12 +4830,14 @@ input.e-input::-webkit-input-placeholder {
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-limits {
   height: 8px;
   top: calc(50% - 4px);
+  border-radius: 4px;
 }
 
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-limits,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-limits {
   left: calc(50% - 4px);
   width: 8px;
+  border-radius: 4px;
 }
 
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider-button.e-first-button,
@@ -5015,6 +4960,8 @@ input.e-input::-webkit-input-placeholder {
 
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-handle {
+  margin-left: -9px;
+  top: calc(50% - 9px);
   margin-left: -8px;
   top: calc(50% - 8px);
 }
@@ -5426,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,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AbHV9/wUNAl7Qm4m+AAAAAElFTkSuQmCC");
-}
-
 .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";
@@ -5537,7 +5480,6 @@ input.e-input::-webkit-input-placeholder {
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #0d6efd;
   border: 1px solid #0d6efd;
-  border-color: #0d6efd;
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-material-tooltip {
@@ -6550,7 +6492,6 @@ input.e-input::-webkit-input-placeholder {
 
 .e-upload .e-file-drop {
   color: #495057;
-  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -6640,6 +6581,10 @@ input.e-input::-webkit-input-placeholder {
   box-shadow: 0 0 0 transparent;
 }
 
+.e-upload-drag-hover {
+  outline: 1px dashed #0d6efd;
+}
+
 .e-container .e-value-switch-btn::before {
   content: '\e748';
 }
@@ -6951,16 +6896,16 @@ body.e-colorpicker-overflow {
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
   height: 8px;
-  top: calc(50% - 4px);
-  border-radius: 4px;
+  top: calc(50% - 3px);
+  border-radius: 0;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
   border-radius: 6px;
   cursor: pointer;
-  height: 14px;
-  top: calc(68% - 10px);
-  width: 14px;
+  height: 9px;
+  top: calc(68% - 7px);
+  width: 9px;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle.e-handle-active {
@@ -6986,17 +6931,16 @@ body.e-colorpicker-overflow {
   border: 0;
   height: 8px;
   position: absolute;
-  top: calc(50% - 4px);
+  top: calc(50% - 3px);
   width: 100%;
   z-index: 1;
-  border-radius: 6px;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle-start,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle-start {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 
 .e-container .e-slider-preview .e-preview-container {
@@ -7034,7 +6978,7 @@ body.e-colorpicker-overflow {
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  padding: 12px 8px 12px 9px;
+  padding: 0 8px 12px 9px;
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
@@ -7052,7 +6996,7 @@ body.e-colorpicker-overflow {
 
 .e-container .e-selected-value .e-value-switch-btn {
   font-family: 'e-icons';
-  margin-top: 6px;
+  margin-top: 0;
   padding: 2px 3px;
   font-size: 16px;
   line-height: 16px;
@@ -7067,7 +7011,6 @@ body.e-colorpicker-overflow {
   display: inline-block;
   margin-right: 2.75%;
   vertical-align: baseline;
-  margin-top: 8px;
 }
 
 .e-container .e-input-container .e-float-input:first-child {
@@ -7303,15 +7246,11 @@ body.e-colorpicker-overflow {
   height: 21px;
 }
 
-.e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
-  border-radius: 6px;
-}
-
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
   border-radius: 10px;
-  height: 16px;
-  top: calc(76% - 13px);
-  width: 16px;
+  height: 13px;
+  top: calc(76% - 8px);
+  width: 13px;
 }
 
 .e-bigger .e-container .e-slider-preview .e-switch-ctrl-btn .e-ctrl-btn {
@@ -7461,7 +7400,7 @@ body.e-colorpicker-overflow {
   border-bottom-right-radius: 0%;
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
   cursor: pointer;
   min-width: 26px;
   transform: translateY(18px) rotate(45deg) scale(0.01);
@@ -7519,21 +7458,21 @@ body.e-colorpicker-overflow {
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle:not(.e-tab-handle),
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle) {
-  background-color: #fff;
-  border-color: #fff;
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle:not(.e-tab-handle).e-handle-start:not(.e-tab-handle),
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle).e-handle-start:not(.e-tab-handle) {
-  background-color: #fff;
-  border-color: #fff;
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle.e-tab-handle,
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle.e-tab-handle {
-  background-color: #fff;
-  border-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  background-color: transparent;
+  border-color: #0dcaf0;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn,

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

@@ -309,16 +309,16 @@ body.e-colorpicker-overflow {
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
   height: 8px;
-  top: calc(50% - 4px);
-  border-radius: 4px;
+  top: calc(50% - 3px);
+  border-radius: 0;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
   border-radius: 6px;
   cursor: pointer;
-  height: 14px;
-  top: calc(68% - 10px);
-  width: 14px;
+  height: 9px;
+  top: calc(68% - 7px);
+  width: 9px;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle.e-handle-active {
@@ -344,17 +344,16 @@ body.e-colorpicker-overflow {
   border: 0;
   height: 8px;
   position: absolute;
-  top: calc(50% - 4px);
+  top: calc(50% - 3px);
   width: 100%;
   z-index: 1;
-  border-radius: 6px;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle-start,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle-start {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 
 .e-container .e-slider-preview .e-preview-container {
@@ -392,7 +391,7 @@ body.e-colorpicker-overflow {
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  padding: 12px 8px 12px 9px;
+  padding: 0 8px 12px 9px;
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
@@ -410,7 +409,7 @@ body.e-colorpicker-overflow {
 
 .e-container .e-selected-value .e-value-switch-btn {
   font-family: 'e-icons';
-  margin-top: 6px;
+  margin-top: 0;
   padding: 2px 3px;
   font-size: 16px;
   line-height: 16px;
@@ -425,7 +424,6 @@ body.e-colorpicker-overflow {
   display: inline-block;
   margin-right: 2.75%;
   vertical-align: baseline;
-  margin-top: 8px;
 }
 
 .e-container .e-input-container .e-float-input:first-child {
@@ -661,15 +659,11 @@ body.e-colorpicker-overflow {
   height: 21px;
 }
 
-.e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
-  border-radius: 6px;
-}
-
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
   border-radius: 10px;
-  height: 16px;
-  top: calc(76% - 13px);
-  width: 16px;
+  height: 13px;
+  top: calc(76% - 8px);
+  width: 13px;
 }
 
 .e-bigger .e-container .e-slider-preview .e-switch-ctrl-btn .e-ctrl-btn {
@@ -819,7 +813,7 @@ body.e-colorpicker-overflow {
   border-bottom-right-radius: 0%;
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
   cursor: pointer;
   min-width: 26px;
   transform: translateY(18px) rotate(45deg) scale(0.01);
@@ -877,21 +871,21 @@ body.e-colorpicker-overflow {
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle:not(.e-tab-handle),
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle) {
-  background-color: #fff;
-  border-color: #fff;
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle:not(.e-tab-handle).e-handle-start:not(.e-tab-handle),
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle).e-handle-start:not(.e-tab-handle) {
-  background-color: #fff;
-  border-color: #fff;
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle.e-tab-handle,
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle.e-tab-handle {
-  background-color: #fff;
-  border-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  background-color: transparent;
+  border-color: #0dcaf0;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn,

package/styles/color-picker/bootstrap5.css

@@ -309,16 +309,16 @@ body.e-colorpicker-overflow {
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
   height: 8px;
-  top: calc(50% - 4px);
-  border-radius: 4px;
+  top: calc(50% - 3px);
+  border-radius: 0;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
   border-radius: 6px;
   cursor: pointer;
-  height: 14px;
-  top: calc(68% - 10px);
-  width: 14px;
+  height: 9px;
+  top: calc(68% - 7px);
+  width: 9px;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle.e-handle-active {
@@ -344,17 +344,16 @@ body.e-colorpicker-overflow {
   border: 0;
   height: 8px;
   position: absolute;
-  top: calc(50% - 4px);
+  top: calc(50% - 3px);
   width: 100%;
   z-index: 1;
-  border-radius: 6px;
 }
 
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-hue-slider .e-handle-start,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle,
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider.e-opacity-slider .e-handle-start {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 
 .e-container .e-slider-preview .e-preview-container {
@@ -392,7 +391,7 @@ body.e-colorpicker-overflow {
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  padding: 12px 8px 12px 9px;
+  padding: 0 8px 12px 9px;
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
@@ -410,7 +409,7 @@ body.e-colorpicker-overflow {
 
 .e-container .e-selected-value .e-value-switch-btn {
   font-family: 'e-icons';
-  margin-top: 6px;
+  margin-top: 0;
   padding: 2px 3px;
   font-size: 16px;
   line-height: 16px;
@@ -425,7 +424,6 @@ body.e-colorpicker-overflow {
   display: inline-block;
   margin-right: 2.75%;
   vertical-align: baseline;
-  margin-top: 8px;
 }
 
 .e-container .e-input-container .e-float-input:first-child {
@@ -661,15 +659,11 @@ body.e-colorpicker-overflow {
   height: 21px;
 }
 
-.e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
-  border-radius: 6px;
-}
-
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
   border-radius: 10px;
-  height: 16px;
-  top: calc(76% - 13px);
-  width: 16px;
+  height: 13px;
+  top: calc(76% - 8px);
+  width: 13px;
 }
 
 .e-bigger .e-container .e-slider-preview .e-switch-ctrl-btn .e-ctrl-btn {
@@ -819,7 +813,7 @@ body.e-colorpicker-overflow {
   border-bottom-right-radius: 0%;
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
   cursor: pointer;
   min-width: 26px;
   transform: translateY(18px) rotate(45deg) scale(0.01);
@@ -877,21 +871,21 @@ body.e-colorpicker-overflow {
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle:not(.e-tab-handle),
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle) {
-  background-color: #fff;
-  border-color: #fff;
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle:not(.e-tab-handle).e-handle-start:not(.e-tab-handle),
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle:not(.e-tab-handle).e-handle-start:not(.e-tab-handle) {
-  background-color: #fff;
-  border-color: #fff;
+  background-color: transparent;
+  border-color: transparent;
 }
 
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-hue-slider .e-handle.e-tab-handle,
 .e-container .e-control-wrapper.e-slider-container .e-slider.e-opacity-slider .e-handle.e-tab-handle {
-  background-color: #fff;
-  border-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  background-color: transparent;
+  border-color: #0dcaf0;
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.95);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn,

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

@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 .e-container .e-value-switch-btn::before {
-  content: '\e748';
+  content: '\e7b7';
 }
 
 .e-colorpicker-wrapper,
@@ -344,7 +344,7 @@ body.e-colorpicker-overflow {
   position: relative;
   top: 0;
   width: 13.45%;
-  height: 36px;
+  height: 38px;
 }
 
 .e-container .e-slider-preview .e-preview-container .e-preview {
@@ -369,7 +369,7 @@ body.e-colorpicker-overflow {
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  padding: 0 8px 12px 8px;
+  padding: 0 8px 12px 9px;
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
@@ -616,10 +616,6 @@ body.e-colorpicker-overflow {
   height: 38px;
 }
 
-.e-bigger .e-container.e-color-picker .e-switch-ctrl-btn {
-  padding: 12px 16px;
-}
-
 .e-bigger .e-container.e-color-picker .e-switch-ctrl-btn .e-mode-switch-btn {
   height: 38px;
 }
@@ -666,9 +662,9 @@ body.e-colorpicker-overflow {
 
 .e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
   border-radius: 10px;
-  height: 16px;
-  top: calc(77% - 10px);
-  width: 16px;
+  height: 13px;
+  top: calc(76% - 8px);
+  width: 13px;
 }
 
 .e-bigger .e-container .e-slider-preview .e-switch-ctrl-btn .e-ctrl-btn {