@syncfusion/ej2-inputs 25.2.6 → 26.1.35

package/styles/color-picker/_theme.scss

@@ -6,6 +6,9 @@
     @else {
       background-color: $cpicker-color;
     }
+    @if $skin-name == 'fluent2' {
+      border-color: $border-light;
+    }
 
     & .e-palette {
       & .e-tile {
@@ -37,7 +40,12 @@
     & .e-slider.e-opacity-slider {
       & .e-handle:not(.e-tab-handle) {
         background-color: $cpicker-slider-handler-color;
-        border-color: $cpicker-slider-handler-color;
+        @if $skin-name == 'fluent2' {
+          border: 2px solid $white;
+        }
+        @else {
+          border-color: $cpicker-slider-handler-color;
+        }
         @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
           border: 1px solid $white;
         }
@@ -152,9 +160,12 @@
       &.e-disabled {
         background-color: transparent;
         box-shadow: none;
-        @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {
+        @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'fluent2'{
           color: $btn-disabled-bgcolor;
         }
+        @if $skin-name == 'fluent2' {
+          color: $icon-color-disabled;
+        }
         @if $skin-name == 'tailwind' {
           border-color: $btn-disabled-border-color;
         }

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

@@ -9,6 +9,7 @@
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -45,7 +46,8 @@
 }
 .e-colorpicker-wrapper *,
 .e-colorpicker-container * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile,
 .e-colorpicker-container.e-disabled .e-palette .e-tile {
@@ -54,7 +56,8 @@
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile:hover,
 .e-colorpicker-container.e-disabled .e-palette .e-tile:hover {
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile.e-selected,
 .e-colorpicker-container.e-disabled .e-palette .e-tile.e-selected {
@@ -145,9 +148,11 @@ body.e-colorpicker-overflow {
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  box-shadow: 0 0 15px 0 rgba(26, 26, 26, 0.8);
+  -webkit-box-shadow: 0 0 15px 0 rgba(26, 26, 26, 0.8);
+          box-shadow: 0 0 15px 0 rgba(26, 26, 26, 0.8);
 }
 .e-container.e-color-picker {
   width: 270px;
@@ -177,6 +182,7 @@ body.e-colorpicker-overflow {
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -186,7 +192,8 @@ body.e-colorpicker-overflow {
 }
 .e-container .e-palette .e-tile {
   border: 0.5px solid transparent;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
   height: 27px;
@@ -199,7 +206,8 @@ body.e-colorpicker-overflow {
   position: relative;
 }
 .e-container .e-palette .e-tile:hover {
-  box-shadow: 2px 2px 7px 2px rgba(26, 26, 26, 0.3);
+  -webkit-box-shadow: 2px 2px 7px 2px rgba(26, 26, 26, 0.3);
+          box-shadow: 2px 2px 7px 2px rgba(26, 26, 26, 0.3);
   position: relative;
 }
 .e-container .e-palette .e-tile.e-nocolor-item {
@@ -213,13 +221,15 @@ body.e-colorpicker-overflow {
       touch-action: none;
 }
 .e-container .e-hsv-container .e-hsv-color {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000)), -webkit-gradient(linear, left top, right top, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%), linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
   height: 170px;
 }
 .e-container .e-hsv-container .e-handler {
   border: 1px solid #fff;
   border-radius: 6px;
-  box-shadow: 0 0 3px rgba(26, 26, 26, 0.7), inset 0 0 2px rgba(26, 26, 26, 0.7);
+  -webkit-box-shadow: 0 0 3px rgba(26, 26, 26, 0.7), inset 0 0 2px rgba(26, 26, 26, 0.7);
+          box-shadow: 0 0 3px rgba(26, 26, 26, 0.7), inset 0 0 2px rgba(26, 26, 26, 0.7);
   cursor: pointer;
   display: inline-block;
   height: 8px;
@@ -229,6 +239,7 @@ body.e-colorpicker-overflow {
   -ms-touch-action: none;
       touch-action: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 8px;
@@ -250,7 +261,7 @@ body.e-colorpicker-overflow {
   top: calc(50% - 9px);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
-  height: 6px;
+  height: 6px !important; /* stylelint-disable-line declaration-no-important */
   top: calc(50% - 3px);
   border-radius: 0;
 }
@@ -265,9 +276,11 @@ body.e-colorpicker-overflow {
   cursor: pointer;
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle.e-large-thumb-size {
-  transform: scale(1);
+  -webkit-transform: scale(1);
+          transform: scale(1);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-hue-slider .e-slider-track {
+  background: -webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(16%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#ff0004));
   background: linear-gradient(to right, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-opacity-slider .e-slider-track {
@@ -285,7 +298,8 @@ body.e-colorpicker-overflow {
   z-index: 1;
 }
 .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(26, 26, 26, 0.64);
+  -webkit-box-shadow: 0 1px 2px rgba(26, 26, 26, 0.64);
+          box-shadow: 0 1px 2px rgba(26, 26, 26, 0.64);
 }
 .e-container .e-slider-preview .e-preview-container {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -314,12 +328,15 @@ body.e-colorpicker-overflow {
   top: 16px;
 }
 .e-container .e-selected-value {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 0 15px 15px;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -394,7 +411,8 @@ body.e-colorpicker-overflow {
   white-space: nowrap;
 }
 .e-container .e-switch-ctrl-btn .e-mode-switch-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-container .e-value-switch-btn, .e-container .e-mode-switch-btn {
   background-color: transparent;
@@ -405,7 +423,8 @@ body.e-colorpicker-overflow {
 }
 .e-container.e-color-picker .e-value-switch-btn:focus, .e-container.e-color-picker .e-value-switch-btn:hover, .e-container.e-color-picker .e-value-switch-btn:active {
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline: none;
 }
 .e-container.e-color-picker .e-value-switch-btn:focus {
@@ -469,9 +488,11 @@ body.e-colorpicker-overflow {
 }
 
 .e-rtl .e-container .e-hsv-container .e-hsv-color {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000)), -webkit-gradient(linear, right top, left top, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%), linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 100%);
 }
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
+  background: -webkit-gradient(linear, right top, left top, color-stop(0, #f00), color-stop(16%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#ff0004));
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
 .e-rtl .e-container .e-slider-preview .e-preview-container {
@@ -486,7 +507,8 @@ body.e-colorpicker-overflow {
   padding-right: 0;
 }
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }
 .e-rtl .e-container .e-switch-ctrl-btn .e-mode-switch-btn {
   float: right;
@@ -507,6 +529,9 @@ body.e-colorpicker-overflow {
   margin-left: 0;
 }
 
+.e-bigger .e-container .e-switch-ctrl-btn .e-ctrl-btn {
+  margin: 2px 0;
+}
 .e-bigger .e-container.e-color-picker {
   width: 290px;
 }
@@ -648,11 +673,16 @@ 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(26, 26, 26, 0.64);
+  -webkit-box-shadow: 0 1px 2px rgba(26, 26, 26, 0.64);
+          box-shadow: 0 1px 2px rgba(26, 26, 26, 0.64);
   cursor: pointer;
   min-width: 26px;
-  transform: translateY(18px) rotate(45deg) scale(0.01);
+  -webkit-transform: translateY(18px) rotate(45deg) scale(0.01);
+          transform: translateY(18px) rotate(45deg) scale(0.01);
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 .e-popup.e-tooltip-wrap.e-color-picker-tooltip .e-tip-content {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -660,7 +690,8 @@ body.e-colorpicker-overflow {
   border-radius: 50%;
   height: 24px;
   position: relative;
-  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
   width: 24px;
 }
 
@@ -695,7 +726,8 @@ body.e-colorpicker-overflow {
 .e-container .e-handler.e-hide-handler, .e-container .e-handle.e-hide-handler {
   background-color: transparent;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .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) {
@@ -709,7 +741,8 @@ body.e-colorpicker-overflow {
 .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(26, 26, 26, 0.64);
+  -webkit-box-shadow: 0 1px 2px rgba(26, 26, 26, 0.64);
+          box-shadow: 0 1px 2px rgba(26, 26, 26, 0.64);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn, .e-colorpicker-wrapper.e-disabled .e-mode-switch-btn,
@@ -735,7 +768,8 @@ body.e-colorpicker-overflow {
 .e-colorpicker-container .e-icon-btn:disabled,
 .e-colorpicker-container .e-icon-btn.e-disabled {
   background-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(57, 57, 57, 0.4);
 }
 

package/styles/color-picker/bootstrap.css

@@ -9,6 +9,7 @@
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -45,7 +46,8 @@
 }
 .e-colorpicker-wrapper *,
 .e-colorpicker-container * {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile,
 .e-colorpicker-container.e-disabled .e-palette .e-tile {
@@ -54,7 +56,8 @@
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile:hover,
 .e-colorpicker-container.e-disabled .e-palette .e-tile:hover {
   border: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-colorpicker-wrapper.e-disabled .e-palette .e-tile.e-selected,
 .e-colorpicker-container.e-disabled .e-palette .e-tile.e-selected {
@@ -145,9 +148,11 @@ body.e-colorpicker-overflow {
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.175);
+          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.175);
 }
 .e-container.e-color-picker {
   width: 270px;
@@ -177,6 +182,7 @@ body.e-colorpicker-overflow {
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -186,7 +192,8 @@ body.e-colorpicker-overflow {
 }
 .e-container .e-palette .e-tile {
   border: 0.5px solid transparent;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
   height: 27px;
@@ -199,7 +206,8 @@ body.e-colorpicker-overflow {
   position: relative;
 }
 .e-container .e-palette .e-tile:hover {
-  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
   position: relative;
 }
 .e-container .e-palette .e-tile.e-nocolor-item {
@@ -213,13 +221,15 @@ body.e-colorpicker-overflow {
       touch-action: none;
 }
 .e-container .e-hsv-container .e-hsv-color {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000)), -webkit-gradient(linear, left top, right top, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%), linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
   height: 170px;
 }
 .e-container .e-hsv-container .e-handler {
   border: 1px solid #fff;
   border-radius: 6px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.7), inset 0 0 2px rgba(0, 0, 0, 0.7);
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7), inset 0 0 2px rgba(0, 0, 0, 0.7);
+          box-shadow: 0 0 3px rgba(0, 0, 0, 0.7), inset 0 0 2px rgba(0, 0, 0, 0.7);
   cursor: pointer;
   display: inline-block;
   height: 8px;
@@ -229,6 +239,7 @@ body.e-colorpicker-overflow {
   -ms-touch-action: none;
       touch-action: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 8px;
@@ -250,7 +261,7 @@ body.e-colorpicker-overflow {
   top: calc(50% - 9px);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
-  height: 6px;
+  height: 6px !important; /* stylelint-disable-line declaration-no-important */
   top: calc(50% - 3px);
   border-radius: 0;
 }
@@ -265,9 +276,11 @@ body.e-colorpicker-overflow {
   cursor: pointer;
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle.e-large-thumb-size {
-  transform: scale(1);
+  -webkit-transform: scale(1);
+          transform: scale(1);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-hue-slider .e-slider-track {
+  background: -webkit-gradient(linear, left top, right top, color-stop(0, #f00), color-stop(16%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#ff0004));
   background: linear-gradient(to right, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-opacity-slider .e-slider-track {
@@ -285,7 +298,8 @@ body.e-colorpicker-overflow {
   z-index: 1;
 }
 .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.64);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.64);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.64);
 }
 .e-container .e-slider-preview .e-preview-container {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -314,12 +328,15 @@ body.e-colorpicker-overflow {
   top: 16px;
 }
 .e-container .e-selected-value {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 0 15px 15px;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -394,7 +411,8 @@ body.e-colorpicker-overflow {
   white-space: nowrap;
 }
 .e-container .e-switch-ctrl-btn .e-mode-switch-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-container .e-value-switch-btn, .e-container .e-mode-switch-btn {
   background-color: transparent;
@@ -405,7 +423,8 @@ body.e-colorpicker-overflow {
 }
 .e-container.e-color-picker .e-value-switch-btn:focus, .e-container.e-color-picker .e-value-switch-btn:hover, .e-container.e-color-picker .e-value-switch-btn:active {
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline: none;
 }
 .e-container.e-color-picker .e-value-switch-btn:focus {
@@ -469,9 +488,11 @@ body.e-colorpicker-overflow {
 }
 
 .e-rtl .e-container .e-hsv-container .e-hsv-color {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000)), -webkit-gradient(linear, right top, left top, color-stop(0, #fff), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%), linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 100%);
 }
 .e-rtl .e-container .e-slider-preview .e-hue-slider .e-slider-track {
+  background: -webkit-gradient(linear, right top, left top, color-stop(0, #f00), color-stop(16%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(84%, #f0f), to(#ff0004));
   background: linear-gradient(to left, #f00 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);
 }
 .e-rtl .e-container .e-slider-preview .e-preview-container {
@@ -486,7 +507,8 @@ body.e-colorpicker-overflow {
   padding-right: 0;
 }
 .e-rtl .e-container .e-selected-value .e-value-switch-btn {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }
 .e-rtl .e-container .e-switch-ctrl-btn .e-mode-switch-btn {
   float: right;
@@ -507,6 +529,9 @@ body.e-colorpicker-overflow {
   margin-left: 0;
 }
 
+.e-bigger .e-container .e-switch-ctrl-btn .e-ctrl-btn {
+  margin: 2px 0;
+}
 .e-bigger .e-container.e-color-picker {
   width: 290px;
 }
@@ -648,11 +673,16 @@ 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.64);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.64);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.64);
   cursor: pointer;
   min-width: 26px;
-  transform: translateY(18px) rotate(45deg) scale(0.01);
+  -webkit-transform: translateY(18px) rotate(45deg) scale(0.01);
+          transform: translateY(18px) rotate(45deg) scale(0.01);
+  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 .e-popup.e-tooltip-wrap.e-color-picker-tooltip .e-tip-content {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -660,7 +690,8 @@ body.e-colorpicker-overflow {
   border-radius: 50%;
   height: 24px;
   position: relative;
-  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
   width: 24px;
 }
 
@@ -695,7 +726,8 @@ body.e-colorpicker-overflow {
 .e-container .e-handler.e-hide-handler, .e-container .e-handle.e-hide-handler {
   background-color: transparent;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .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) {
@@ -709,7 +741,8 @@ body.e-colorpicker-overflow {
 .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: #e6e6e6;
   border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn, .e-colorpicker-wrapper.e-disabled .e-mode-switch-btn,
@@ -735,7 +768,8 @@ body.e-colorpicker-overflow {
 .e-colorpicker-container .e-icon-btn:disabled,
 .e-colorpicker-container .e-icon-btn.e-disabled {
   background-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(255, 255, 255, 0.65);
 }