@syncfusion/ej2-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-definition.scss

@@ -26,7 +26,7 @@ $cpicker-handler-height: 8px !default;
 $cpicker-handler-width: 8px !default;
 $cpicker-handler-margin: -4px !default;
 $cpicker-slider-top: calc(50% - 9px) !default;
-$cpicker-slider-track-top: calc(50% - 3px) !default;
+$cpicker-slider-track-top: calc(50% - 4px) !default;
 $cpicker-slider-wrapper-padding: 12px 8px 12px 9px !default;
 $cpicker-bigger-slider-wrapper-padding: 16px 16px !default;
 $cpicker-slider-container-height: 18px !default;
@@ -36,13 +36,13 @@ $cpicker-bigger-slider-container-height: 21px !default;
 $cpicker-bigger-slider-handle-radius: 10px !default;
 $cpicker-slider-element-height: 8px !default;
 $cpicker-slider-height: 8px !default;
-$cpicker-slider-handler-box-shadow: 0 0 0 2px rgba($black, .95) !default;
-$cpicker-slider-handle-size: 9px !default;
-$cpicker-slider-handle-top: calc(68% - 7px) !default;
+$cpicker-slider-handler-box-shadow: 0 1px 2px rgba($black, .3) !default;
+$cpicker-slider-handle-size: 14px !default;
+$cpicker-slider-handle-top: calc(68% - 10px) !default;
 $cpicker-bigger-slider-height: 12px;
-$cpicker-bigger-slider-handle-size: 13px !default;
-$cpicker-bigger-slider-handle-top: calc(76% - 8px) !default;
-$cpicker-input-picker-padding: 0 8px 12px 9px !default;
+$cpicker-bigger-slider-handle-size: 16px !default;
+$cpicker-bigger-slider-handle-top: calc(76% - 13px) !default;
+$cpicker-input-picker-padding: 12px 8px 12px 9px !default;
 $cpicker-input-palette-padding: 16px 16px !default;
 $cpicker-input-container: 89.8% !default;
 $cpicker-bigger-input-container: 90.7% !default;
@@ -64,7 +64,7 @@ $cpicker-bigger-value-hidden-label-width: 13.2% !default;
 $cpicker-label-margin: 2.75% !default;
 $cpicker-bigger-label-margin: 3.425% !default;
 $cpicker-switch-btn-padding: 2px 3px !default;
-$cpicker-value-switch-btn-margin: 0 !default;
+$cpicker-value-switch-btn-margin: 6px !default;
 $cpicker-bigger-switch-btn-padding: $cpicker-switch-btn-padding !default;
 $cpicker-focus-shadow: 0 0 2px 3px rgba($black, .2) !default;
 $cpicker-switcher-outline: none !default;
@@ -105,8 +105,8 @@ $cpicker-bigger-value-opacity-hide-label-width: 17.9% !default;
 $cpicker-type-switch-margin: 0 !default;
 $cpicker-blazor-input-margin: calc(2.75% - 2.28px) !default;
 $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.68px) !default;
-$cpicker-slider-handler-focus-color: $info !default;
-$cpicker-slider-handler-color: $transparent !default;
+$cpicker-slider-handler-focus-color: $white !default;
+$cpicker-slider-handler-color: $white !default;
 $cpicker-slider-tab-handler-color: $cpicker-slider-handler-color !default;
 $cpicker-slider-tab-shadow: $cpicker-slider-handler-box-shadow !default;
 $cpicker-tile-active-border-color: $white !default;

package/styles/color-picker/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/color-picker/_fluent-definition.scss

@@ -21,27 +21,27 @@ $cpicker-bigger-container-height: 301px !default;
 $cpicker-container-width: 351px !default;
 $cpicker-bigger-tile-size: 29px !default;
 $cpicker-bigger-container-width: 376px !default;
-$cpicker-handler-radius: 6px !default;
+$cpicker-handler-radius: 12px !default;
 $cpicker-handler-height: 8px !default;
 $cpicker-handler-width: 8px !default;
 $cpicker-handler-margin: -4px !default;
-$cpicker-slider-top: calc(50% - 9px) !default;
-$cpicker-slider-track-top: calc(50% - 3px) !default;
-$cpicker-slider-wrapper-padding: 12px 8px 12px 9px !default;
-$cpicker-bigger-slider-wrapper-padding: 16px 16px !default;
-$cpicker-slider-container-height: 18px !default;
+$cpicker-slider-top: calc(50% - 22px) !default;
+$cpicker-slider-track-top: calc(50% - 5px) !default;
+$cpicker-slider-wrapper-padding: 8px !default;
+$cpicker-bigger-slider-wrapper-padding: 12px !default;
+$cpicker-slider-container-height: 26px !default;
 $cpicker-slider-container-width: 82.34% !default;
 $cpicker-bigger-slider-container-width: 82.944% !default;
-$cpicker-bigger-slider-container-height: 21px !default;
-$cpicker-bigger-slider-handle-radius: 10px !default;
+$cpicker-bigger-slider-container-height: 30px !default;
+$cpicker-bigger-slider-handle-radius: 12px !default;
 $cpicker-slider-element-height: 8px !default;
-$cpicker-slider-height: 8px !default;
+$cpicker-slider-height: 20px !default;
 $cpicker-slider-handler-box-shadow: 0 0 0 2px rgba($black, .95) !default;
-$cpicker-slider-handle-size: 9px !default;
-$cpicker-slider-handle-top: calc(68% - 7px) !default;
-$cpicker-bigger-slider-height: 12px;
-$cpicker-bigger-slider-handle-size: 13px !default;
-$cpicker-bigger-slider-handle-top: calc(76% - 8px) !default;
+$cpicker-slider-handle-size: 20px !default;
+$cpicker-slider-handle-top: calc(66% - 10px) !default;
+$cpicker-bigger-slider-height: 20px;
+$cpicker-bigger-slider-handle-size: 20px !default;
+$cpicker-bigger-slider-handle-top: calc(76% - 12px) !default;
 $cpicker-input-picker-padding: 0 8px 12px 9px !default;
 $cpicker-input-palette-padding: 16px 16px !default;
 $cpicker-input-container: 89.8% !default;
@@ -68,15 +68,15 @@ $cpicker-value-switch-btn-margin: 0 !default;
 $cpicker-bigger-switch-btn-padding: $cpicker-switch-btn-padding !default;
 $cpicker-focus-shadow: 0 0 2px 3px rgba($black, .2) !default;
 $cpicker-switcher-outline: none !default;
-$cpicker-preview-height: 18px !default;
+$cpicker-preview-height: 24px !default;
 $cpicker-preview-size: 13.45% !default;
 $cpicker-preview-margin-left: 4.205% !default;
 $cpicker-bigger-preview-margin-left: 4.657% !default;
 $cpicker-bigger-preview-size: 12.405% !default;
 $cpicker-preview-border: 1px solid $border-light !default;
 $cpicker-preview-container-border: $cpicker-preview-border !default;
-$cpicker-preview-container-top: 0 !default;
-$cpicker-previous-height: 18px !default;
+$cpicker-preview-container-top: -4px !default;
+$cpicker-previous-height: 24px !default;
 $cpicker-right-icon-content: '\e7c2' !default;
 $cpicker-type-switch-btn-margin: 0 !default;
 $cpicker-bigger-type-switch-btn-margin: 0 !default;
@@ -105,7 +105,7 @@ $cpicker-bigger-value-opacity-hide-label-width: 17.9% !default;
 $cpicker-type-switch-margin: 0 !default;
 $cpicker-blazor-input-margin: calc(2.75% - 2.28px) !default;
 $cpicker-blazor-bigger-input-margin: calc(3.425% - 2.68px) !default;
-$cpicker-slider-handler-focus-color: $info !default;
+$cpicker-slider-handler-focus-color: $white !default;
 $cpicker-slider-handler-color: $transparent !default;
 $cpicker-slider-tab-handler-color: $cpicker-slider-handler-color !default;
 $cpicker-slider-tab-shadow: $cpicker-slider-handler-box-shadow !default;

package/styles/color-picker/_layout.scss

@@ -339,6 +339,9 @@
             @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
               border-radius: 6px;
             }
+            @else if $skin-name == 'bootstrap5' {
+              border-radius: 4px;
+            }
             @else {
               border-radius: 0;
             }
@@ -383,7 +386,7 @@
             width: 100%;
             z-index: 1;
 
-            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+            @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
               border-radius: 6px;
             }
           }
@@ -404,13 +407,18 @@
         border: $cpicker-preview-container-border;
         cursor: pointer;
         display: inline-block;
-        height: 32px;
+        @if $skin-name == 'FluentUI' {
+          height: 50px;
+        }
+        @else {
+          height: 32px;
+        }
         margin-left: $cpicker-preview-margin-left;
         position: relative;
         top: $cpicker-preview-container-top;
         width: $cpicker-preview-size;
         @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
-          height: 38px;
+          height: 36px;
         }
 
         & .e-preview {
@@ -426,7 +434,12 @@
 
           &.e-previous {
             height: $cpicker-previous-height;
-            top: $cpicker-preview-height;
+            @if $skin-name == 'FluentUI' {
+              top: 25px;
+            }
+            @else {
+              top: $cpicker-preview-height;
+            }
           }
         }
       }
@@ -476,6 +489,9 @@
         display: inline-block;
         margin-right: $cpicker-label-margin;
         vertical-align: baseline;
+        @if $skin-name == 'bootstrap5' {
+          margin-top: 8px;
+        }
 
         &:first-child {
           width: $cpicker-hex-label-width;
@@ -496,7 +512,7 @@
 
         & .e-float-text {
           text-align: center;
-          @if $skin-name == 'bootstrap4' {
+          @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
             text-align: left;
           }
         }
@@ -793,6 +809,12 @@
           }
         }
 
+        & .e-switch-ctrl-btn {
+          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
+            padding: $cpicker-bigger-ctrl-btn-padding;
+          }
+        }
+
         & .e-switch-ctrl-btn .e-mode-switch-btn {
           @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
             height: 38px;
@@ -837,6 +859,9 @@
           @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
             top: 5px;
           }
+          @else if $skin-name == 'FluentUI' {
+            top: $cpicker-preview-container-top;
+          }
           @else {
             top: 0;
           }
@@ -855,6 +880,9 @@
               @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
                 height: $cpicker-bigger-slider-height;
               }
+              @else if $skin-name == 'bootstrap5' {
+                border-radius: 6px;
+              }
             }
 
             & .e-opacity-slider {

package/styles/color-picker/_tailwind-definition.scss

@@ -40,9 +40,9 @@ $cpicker-slider-handler-box-shadow: 0 0 0 2px rgba($black, .95) !default;
 $cpicker-slider-handle-size: 9px !default;
 $cpicker-slider-handle-top: calc(68% - 7px) !default;
 $cpicker-bigger-slider-height: 12px;
-$cpicker-bigger-slider-handle-size: 13px !default;
-$cpicker-bigger-slider-handle-top: calc(76% - 8px) !default;
-$cpicker-input-picker-padding: 0 8px 12px 9px !default;
+$cpicker-bigger-slider-handle-size: 16px !default;
+$cpicker-bigger-slider-handle-top: calc(77% - 10px) !default;
+$cpicker-input-picker-padding: 0 8px 12px 8px !default;
 $cpicker-input-palette-padding: 16px 16px !default;
 $cpicker-input-container: 89.8% !default;
 $cpicker-bigger-input-container: 90.7% !default;
@@ -85,6 +85,7 @@ $cpicker-switch-btn-height: 30px;
 $cpicker-palette-switch-btn-width: 12.28%;
 $cpicker-bigger-switch-btn-width: 9.306% !default;
 $cpicker-ctrl-btn-padding: 8px !default;
+$cpicker-bigger-ctrl-btn-padding: 12px 16px !default;
 $cpicker-palette-ctrl-btn-padding: 23px 8px 8px !default;
 $cpicker-bigger-palette-ctrl-btn-padding: 25px 12px 12px !default;
 $cpicker-ctrl-btn-width: 50% !default;

package/styles/color-picker/_theme.scss

@@ -147,7 +147,7 @@
       &.e-disabled {
         background-color: transparent;
         box-shadow: none;
-        @if $skin-name != 'tailwind' {
+        @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {
           color: $btn-disabled-bgcolor;
         }
         @if $skin-name == 'tailwind' {