@syncfusion/ej2-inputs 25.2.5 → 26.1.35

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

@@ -44,7 +44,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -55,18 +55,38 @@
 
 /* stylelint-disable-line no-empty-source */
 /* 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 {
@@ -79,6 +99,7 @@
   line-height: 0;
   outline: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -91,27 +112,32 @@
 }
 .e-colorpicker-wrapper .e-dropdown-btn.e-icon-btn,
 .e-colorpicker-container .e-dropdown-btn.e-icon-btn {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-radius: 4px;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper,
 .e-colorpicker-container .e-split-btn-wrapper {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
   font-family: initial;
   line-height: 14px;
   padding: 5px 8px;
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-radius: 4px;
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   border-right-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color,
 .e-colorpicker-container .e-split-btn-wrapper .e-split-colorpicker.e-split-btn .e-selected-color {
@@ -140,13 +166,15 @@
 }
 .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn,
 .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-btn.e-icon-btn {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-radius: 4px;
   border-left-color: transparent;
 }
 .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 {
@@ -155,7 +183,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 {
@@ -216,7 +245,8 @@ body.e-colorpicker-overflow {
 .e-bigger.e-colorpicker-wrapper .e-split-btn-wrapper,
 .e-bigger .e-colorpicker-container .e-split-btn-wrapper,
 .e-bigger.e-colorpicker-container .e-split-btn-wrapper {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-bigger .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
 .e-bigger.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
@@ -252,9 +282,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 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-container.e-color-picker {
   height: 454px;
@@ -285,6 +317,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;
 }
@@ -294,7 +327,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: 30px;
@@ -307,7 +341,8 @@ body.e-colorpicker-overflow {
   position: relative;
 }
 .e-container .e-palette .e-tile:hover {
-  box-shadow: 2px 2px 7px 2px rgba(var(--color-sf-outline-variant), 0.3);
+  -webkit-box-shadow: 2px 2px 7px 2px rgba(var(--color-sf-outline-variant), 0.3);
+          box-shadow: 2px 2px 7px 2px rgba(var(--color-sf-outline-variant), 0.3);
   position: relative;
 }
 .e-container .e-palette .e-tile.e-nocolor-item {
@@ -321,13 +356,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(rgba(var(--color-sf-black)))), -webkit-gradient(linear, left top, right top, color-stop(0, rgba(var(--color-sf-white))), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(var(--color-sf-black)) 100%), linear-gradient(to right, rgba(var(--color-sf-white)) 0, rgba(255, 255, 255, 0) 100%);
   height: 266px;
 }
 .e-container .e-hsv-container .e-handler {
   border: 2px solid rgba(var(--color-sf-white));
   border-radius: 50%;
-  box-shadow: 0 0 0 2px rgba(var(--color-sf-black));
+  -webkit-box-shadow: 0 0 0 2px rgba(var(--color-sf-black));
+          box-shadow: 0 0 0 2px rgba(var(--color-sf-black));
   cursor: pointer;
   display: inline-block;
   height: 12px;
@@ -337,6 +374,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: 12px;
@@ -358,7 +396,7 @@ body.e-colorpicker-overflow {
   top: calc(50% - 9px);
 }
 .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider-track {
-  height: 8px;
+  height: 8px !important; /* stylelint-disable-line declaration-no-important */
   top: calc(50% - 4px);
   border-radius: 12px;
 }
@@ -373,9 +411,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 {
@@ -393,7 +433,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: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-container .e-slider-preview .e-preview-container {
   background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+");
@@ -422,12 +463,15 @@ body.e-colorpicker-overflow {
   top: 20px;
 }
 .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: 12px 8px 12px 9px;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -508,7 +552,8 @@ body.e-colorpicker-overflow {
   border-radius: 2px;
 }
 .e-container .e-switch-ctrl-btn .e-mode-switch-btn:focus {
-  box-shadow: 0 0 2px 3px rgba(var(--color-sf-black), 0.2);
+  -webkit-box-shadow: 0 0 2px 3px rgba(var(--color-sf-black), 0.2);
+          box-shadow: 0 0 2px 3px rgba(var(--color-sf-black), 0.2);
 }
 .e-container .e-value-switch-btn, .e-container .e-mode-switch-btn {
   background-color: transparent;
@@ -520,7 +565,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 {
@@ -588,9 +634,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(rgba(var(--color-sf-black)))), -webkit-gradient(linear, right top, left top, color-stop(0, rgba(var(--color-sf-white))), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(var(--color-sf-black)) 100%), linear-gradient(to left, rgba(var(--color-sf-white)) 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 {
@@ -605,7 +653,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;
@@ -628,7 +677,11 @@ body.e-colorpicker-overflow {
 
 .e-bigger .e-container {
   border-radius: 16px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+.e-bigger .e-container .e-switch-ctrl-btn .e-ctrl-btn {
+  margin: 2px 0;
 }
 .e-bigger .e-container.e-color-picker {
   height: 506px;
@@ -799,11 +852,16 @@ body.e-colorpicker-overflow {
   border-bottom-right-radius: 0%;
   border-top-left-radius: 50%;
   border-top-right-radius: 50%;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   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+");
@@ -811,7 +869,8 @@ body.e-colorpicker-overflow {
   border-radius: 50%;
   height: 24px;
   position: relative;
-  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
   width: 24px;
 }
 
@@ -835,6 +894,7 @@ body.e-colorpicker-overflow {
 }
 
 .e-container {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-container .e-palette .e-tile:hover {
@@ -846,7 +906,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) {
@@ -860,7 +921,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: rgba(var(--color-sf-primary));
   border-color: rgba(var(--color-sf-primary));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-colorpicker-wrapper.e-disabled .e-value-switch-btn, .e-colorpicker-wrapper.e-disabled .e-mode-switch-btn,
@@ -886,7 +948,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(var(--color-sf-secondary), 0.12);
   border: none;
 }