@syncfusion/ej2-inputs 25.2.6 → 26.1.35

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

@@ -1,8 +1,16 @@
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
-    transform: scale(4);
+    -webkit-transform: scale(4);
+            transform: scale(4);
   }
 }
 .e-container .e-value-switch-btn::before {
@@ -15,6 +23,7 @@
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -51,7 +60,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 {
@@ -60,7 +70,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 {
@@ -151,9 +162,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 3px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
 }
 .e-container.e-color-picker {
   width: 270px;
@@ -183,6 +196,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;
 }
@@ -192,7 +206,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;
@@ -205,7 +220,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 {
@@ -219,13 +235,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;
@@ -235,6 +253,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;
@@ -256,7 +275,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;
 }
@@ -271,9 +290,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 {
@@ -291,7 +312,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.3);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 .e-container .e-slider-preview .e-preview-container {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -320,12 +342,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 16px 16px;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -400,7 +425,8 @@ body.e-colorpicker-overflow {
   white-space: nowrap;
 }
 .e-container .e-switch-ctrl-btn .e-mode-switch-btn:focus {
-  box-shadow: 0 1px 2px 3px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 2px 3px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 1px 2px 3px rgba(0, 0, 0, 0.2);
 }
 .e-container .e-value-switch-btn, .e-container .e-mode-switch-btn {
   background-color: transparent;
@@ -411,7 +437,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 {
@@ -475,9 +502,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 {
@@ -492,7 +521,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;
@@ -513,6 +543,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;
 }
@@ -654,11 +687,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.3);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   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+");
@@ -666,7 +704,8 @@ body.e-colorpicker-overflow {
   border-radius: 50%;
   height: 24px;
   position: relative;
-  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
   width: 24px;
 }
 
@@ -701,7 +740,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) {
@@ -715,7 +755,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(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn, .e-colorpicker-wrapper.e-disabled .e-mode-switch-btn,
@@ -741,7 +782,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.1);
 }
 

package/styles/color-picker/material.css

@@ -1,16 +1,36 @@
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
-    transform: scale(4);
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@-webkit-keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes slideTopUp {
   from {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
   to {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 .e-container .e-value-switch-btn::before {
@@ -23,6 +43,7 @@
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -59,7 +80,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 {
@@ -68,7 +90,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 {
@@ -159,9 +182,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 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+          box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 .e-container.e-color-picker {
   width: 270px;
@@ -191,6 +216,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;
 }
@@ -200,7 +226,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;
@@ -213,7 +240,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 {
@@ -227,13 +255,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;
@@ -243,6 +273,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;
@@ -264,7 +295,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;
 }
@@ -279,9 +310,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 {
@@ -299,7 +332,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.3);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 .e-container .e-slider-preview .e-preview-container {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -328,12 +362,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 16px 16px;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -408,7 +445,8 @@ body.e-colorpicker-overflow {
   white-space: nowrap;
 }
 .e-container .e-switch-ctrl-btn .e-mode-switch-btn:focus {
-  box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.2);
 }
 .e-container .e-value-switch-btn, .e-container .e-mode-switch-btn {
   background-color: transparent;
@@ -419,7 +457,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 {
@@ -483,9 +522,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 {
@@ -500,7 +541,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;
@@ -521,6 +563,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;
 }
@@ -675,11 +720,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.3);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   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+");
@@ -687,7 +737,8 @@ body.e-colorpicker-overflow {
   border-radius: 50%;
   height: 24px;
   position: relative;
-  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
   width: 24px;
 }
 
@@ -722,7 +773,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) {
@@ -736,7 +788,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(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn, .e-colorpicker-wrapper.e-disabled .e-mode-switch-btn,
@@ -762,7 +815,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(0, 0, 0, 0.12);
 }