@syncfusion/ej2-inplace-editor 25.2.3 → 26.2.4

package/styles/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;
@@ -54,29 +54,57 @@
 }
 
 /* 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);
   }
 }
-/* stylelint-disable-line no-empty-source */ /*! calendar material3 theme variables */
+/* stylelint-disable-line no-empty-source */
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
-  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -93,12 +121,14 @@
 }
 
 .e-input-group .e-ddl-icon:not(:active)::after {
-  animation: none;
+  -webkit-animation: none;
+          animation: none;
 }
 
 .e-ddl.e-popup {
   border: 0;
-  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);
   margin-top: 2px;
 }
 
@@ -119,7 +149,8 @@
 .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
   background: rgba(0, 0, 0, 0.0001);
   border-width: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-bottom: 0;
 }
 
@@ -212,19 +243,43 @@
 
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -242,7 +297,6 @@
   content: "\e730";
 }
 
-/*! inplaceeditor layout */
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
   padding: 8px 36px 8px 16px;
@@ -363,6 +417,7 @@
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -373,8 +428,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before {
-  -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;
   font-size: 14px;
@@ -384,6 +441,7 @@
 }
 .e-inplaceeditor .e-editable-value-wrapper.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -416,6 +474,7 @@
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -426,8 +485,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before {
-  -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;
   font-size: 14px;
@@ -437,6 +498,7 @@
 }
 .e-inplaceeditor .e-editable-value-container.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -461,6 +523,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -526,7 +589,8 @@
 .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: auto;
   right: 5px;
-  transform: translateX(-30%) translateY(-50%);
+  -webkit-transform: translateX(-30%) translateY(-50%);
+          transform: translateX(-30%) translateY(-50%);
 }
 .e-inplaceeditor .e-editable-form,
 .e-inplaceeditor-tip .e-editable-form {
@@ -554,6 +618,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -590,7 +655,8 @@
 .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: 5px;
   right: auto;
-  transform: translateX(30%) translateY(-50%);
+  -webkit-transform: translateX(30%) translateY(-50%);
+          transform: translateX(30%) translateY(-50%);
 }
 
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
@@ -642,19 +708,24 @@
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title {
   -ms-flex-line-pack: center;
       align-content: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 24px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 20px 20px 12px 20px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -667,6 +738,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -708,7 +780,6 @@
   min-height: 70px;
 }
 
-/*! inplaceeditor theme */
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
   border-bottom: 1px solid rgba(var(--color-sf-on-surface));
   color: rgba(var(--color-sf-on-surface));
@@ -720,6 +791,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-wrapper:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -737,6 +809,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-container:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -768,13 +841,16 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
+  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));
-  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);
   border-radius: 0;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 20px;
   color: rgba(var(--color-sf-on-surface));
+  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-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
@@ -791,6 +867,7 @@
   border-radius: 8px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
+  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));
   border-bottom: 0;
   color: rgba(var(--color-sf-on-surface));

package/styles/material3-dark.scss

@@ -1,3 +1,28 @@
 
 
-@import 'inplace-editor/material3-dark.scss';
+
+@import 'ej2-inputs/styles/input/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/maskedtextbox/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/numerictextbox/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/slider/material3-dark-definition.scss';
+@import 'ej2-inputs/styles/textbox/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/calendar/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/datepicker/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/daterangepicker/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/datetimepicker/material3-dark-definition.scss';
+@import 'ej2-calendars/styles/timepicker/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/auto-complete/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/combo-box/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/drop-down-list/material3-dark-definition.scss';
+@import 'ej2-dropdowns/styles/multi-select/material3-dark-definition.scss';
+@import 'ej2-popups/styles/popup/material3-dark-definition.scss';
+@import 'ej2-popups/styles/spinner/material3-dark-definition.scss';
+@import 'ej2-popups/styles/tooltip/material3-dark-definition.scss';
+@import 'ej2-richtexteditor/styles/rich-text-editor/material3-dark-definition.scss';
+@import 'inplace-editor/material3-dark-definition.scss';
+@import 'inplace-editor/icons/material3-dark.scss';
+@import 'inplace-editor/all.scss';

package/styles/material3.css

@@ -100,7 +100,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;
@@ -110,29 +110,57 @@
 }
 
 /* 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);
   }
 }
-/* stylelint-disable-line no-empty-source */ /*! calendar material3 theme variables */
+/* stylelint-disable-line no-empty-source */
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
-  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -149,12 +177,14 @@
 }
 
 .e-input-group .e-ddl-icon:not(:active)::after {
-  animation: none;
+  -webkit-animation: none;
+          animation: none;
 }
 
 .e-ddl.e-popup {
   border: 0;
-  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);
   margin-top: 2px;
 }
 
@@ -175,7 +205,8 @@
 .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
   background: rgba(0, 0, 0, 0.0001);
   border-width: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-bottom: 0;
 }
 
@@ -268,19 +299,43 @@
 
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -298,7 +353,6 @@
   content: "\e730";
 }
 
-/*! inplaceeditor layout */
 .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
 .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
   padding: 8px 36px 8px 16px;
@@ -419,6 +473,7 @@
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -429,8 +484,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before {
-  -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;
   font-size: 14px;
@@ -440,6 +497,7 @@
 }
 .e-inplaceeditor .e-editable-value-wrapper.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -472,6 +530,7 @@
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -482,8 +541,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before {
-  -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;
   font-size: 14px;
@@ -493,6 +554,7 @@
 }
 .e-inplaceeditor .e-editable-value-container.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -517,6 +579,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -582,7 +645,8 @@
 .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: auto;
   right: 5px;
-  transform: translateX(-30%) translateY(-50%);
+  -webkit-transform: translateX(-30%) translateY(-50%);
+          transform: translateX(-30%) translateY(-50%);
 }
 .e-inplaceeditor .e-editable-form,
 .e-inplaceeditor-tip .e-editable-form {
@@ -610,6 +674,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -646,7 +711,8 @@
 .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: 5px;
   right: auto;
-  transform: translateX(30%) translateY(-50%);
+  -webkit-transform: translateX(30%) translateY(-50%);
+          transform: translateX(30%) translateY(-50%);
 }
 
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
@@ -698,19 +764,24 @@
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title {
   -ms-flex-line-pack: center;
       align-content: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 24px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 20px 20px 12px 20px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -723,6 +794,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -764,7 +836,6 @@
   min-height: 70px;
 }
 
-/*! inplaceeditor theme */
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
   border-bottom: 1px solid rgba(var(--color-sf-on-surface));
   color: rgba(var(--color-sf-on-surface));
@@ -776,6 +847,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-wrapper:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -793,6 +865,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-container:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -824,13 +897,16 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
-  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);
   border-radius: 0;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 20px;
   color: rgba(var(--color-sf-on-surface));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
@@ -847,6 +923,7 @@
   border-radius: 8px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   color: rgba(var(--color-sf-on-surface));