@syncfusion/ej2-angular-inputs 19.4.52 → 20.1.55

package/styles/bootstrap5.css

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