@syncfusion/ej2-inplace-editor 25.2.3 → 26.1.35

package/styles/fluent2.scss

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

package/styles/highcontrast-light.css

@@ -10,7 +10,8 @@
 
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
   margin-top: 1px;
 }
 .e-ddl.e-popup .e-content.e-nodata {
@@ -20,6 +21,7 @@
   color: #23726c;
 }
 .e-ddl.e-popup .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -130,6 +132,9 @@
   height: 100%;
   min-height: 28px;
 }
+.e-multi-select-wrapper .e-searcher input[type=text]::-moz-selection {
+  background-color: #400074;
+}
 .e-multi-select-wrapper .e-searcher input[type=text]::selection {
   background-color: #400074;
 }
@@ -178,19 +183,43 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -337,6 +366,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;
@@ -347,8 +377,10 @@
   width: 18px;
 }
 .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;
@@ -358,6 +390,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;
 }
@@ -390,6 +423,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;
@@ -400,8 +434,10 @@
   width: 18px;
 }
 .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;
@@ -411,6 +447,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;
 }
@@ -435,6 +472,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -500,7 +538,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 {
@@ -528,6 +567,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -564,7 +604,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,
@@ -616,19 +657,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: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 13px;
   font-weight: 600;
   height: 30px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 0 0 0 12px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 12px;
@@ -641,6 +687,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 12px;
@@ -739,7 +786,8 @@
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn .e-btn-icon.e-icons,
@@ -749,7 +797,8 @@
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #fff;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 0;

package/styles/highcontrast-light.scss

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

package/styles/highcontrast.css

@@ -1,5 +1,6 @@
 /* stylelint-disable property-no-vendor-prefix */
-/* stylelint-disable-line no-empty-source */ /*! calendar fabric theme variables */
+/* stylelint-disable-line no-empty-source */
+/*! calendar fabric theme variables */
 .e-bigger .e-ddl.e-popup .e-input-group .e-clear-icon {
   height: 36px;
 }
@@ -10,7 +11,8 @@
 
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
   margin-top: 1px;
 }
 .e-ddl.e-popup .e-content.e-nodata {
@@ -20,6 +22,7 @@
   color: #ffd939;
 }
 .e-ddl.e-popup .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -132,6 +135,9 @@
   height: 100%;
   min-height: 28px;
 }
+.e-multi-select-wrapper .e-searcher input[type=text]::-moz-selection {
+  background-color: #ffd939;
+}
 .e-multi-select-wrapper .e-searcher input[type=text]::selection {
   background-color: #ffd939;
 }
@@ -185,19 +191,43 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0);
     transform: rotate(0);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -344,6 +374,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;
@@ -354,8 +385,10 @@
   width: 18px;
 }
 .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;
@@ -365,6 +398,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;
 }
@@ -397,6 +431,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;
@@ -407,8 +442,10 @@
   width: 18px;
 }
 .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;
@@ -418,6 +455,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;
 }
@@ -442,6 +480,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -507,7 +546,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 {
@@ -535,6 +575,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -571,7 +612,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,
@@ -623,19 +665,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: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif, "-apple-system", "BlinkMacSystemFont";
   font-size: 13px;
   font-weight: 600;
   height: 30px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 0 0 0 12px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 12px;
@@ -648,6 +695,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 12px;
@@ -746,7 +794,8 @@
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn .e-btn-icon.e-icons,
@@ -756,7 +805,8 @@
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #000;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 0;

package/styles/highcontrast.scss

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

package/styles/inplace-editor/_bootstrap5.3-definition.scss

@@ -0,0 +1,69 @@
+//Layout Variable Start
+$editor-big-value-text-font-size: $text-base !default;
+$editor-nrml-value-text-font-size: $text-sm !default;
+$editor-big-value-container-padding: 7px 12px 7px 12px !default;
+$editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
+$editor-big-value-container-spin-padding: 8px !default;
+$editor-nrml-value-container-spin-padding: 8px !default;
+$editor-big-value-margin: 0 30px 0 0 !default;
+$editor-nrml-value-margin: 0 28px 0 0 !default;
+$editor-rtl-big-value-margin: 0 0 0  30px !default;
+$editor-rtl-nrml-value-margin: 0 0 0 28px !default;
+$editor-big-overlay-icon-size: $text-base !default;
+$editor-nrml-overlay-icon-size: $text-sm !default;
+$editor-big-overlay-icon-container-size: 20px !default;
+$editor-nrml-overlay-icon-container-size: 20px !default;
+$editor-big-overlay-icon-left-right: 8px !default;
+$editor-nrml-overlay-icon-left-right: 8px !default;
+$editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 4px !default;
+$editor-tip-title-font-weight: $font-weight-medium !default;
+$editor-big-tip-title-font-size: $text-sm !default;
+$editor-nrml-tip-title-font-size: $text-xs !default;
+$editor-big-tip-title-padding: 12px 16px 12px 16px !default;
+$editor-nrml-tip-title-padding: 9px 12px 9px 12px !default;
+$editor-rtl-big-tip-title-padding: 12px 16px 12px 16px !default;
+$editor-rtl-nrml-tip-title-padding: 9px 12px 9px 12px !default;
+$editor-big-tip-title-container-size: 46px !default;
+$editor-nrml-tip-title-container-size: 36px !default;
+$editor-big-tip-wrapper-padding: 16px !default;
+$editor-nrml-tip-wrapper-padding: 12px !default;
+$editor-big-wrapper-title-with-padding: 16px !default;
+$editor-nrml-wrapper-title-with-padding: 12px !default;
+$editor-component-bottom-margin: 4px !default;
+$editor-buttons-top-margin: 4px !default;
+$editor-btn-save-icon-size: 16px !default;
+$editor-btn-cancel-icon-size: 16px !default;
+$editor-big-btn-save-margin: 0 4px 0 0 !default;
+$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
+$editor-big-btn-cancel-margin: 0 0 0 4px !default;
+$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
+$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
+
+//Layout Variable End
+
+//Theme Variable Start
+$editor-value-hover-bg: $content-bg-color-alt2 !default;
+$editor-value-text-color: $content-text-color !default;
+$editor-overlay-icon-color: $icon-color !default;
+$editor-value-text-border: 1px dashed $content-text-color !default;
+$editor-background-color: $transparent !default;
+$wrapper-background-color: $flyout-bg-color !default;
+$editor-tip-border: 1px solid $border !default;
+$editor-tip-bg: $content-bg-color !default;
+$editor-tip-arrow-icon-color: $content-bg-color-alt1 !default;
+$editor-tip-title-arrow-icon-color: $content-bg-color-alt1 !default;
+$editor-tip-arrow-bdr-color: $content-bg-color-alt1 !default;
+$editor-tip-title-arrow-bdr-color: $border !default;
+$editor-tip-box-shadow: $shadow-lg !default;
+$editor-tip-title-bg: $content-bg-color-alt1 !default;
+$editor-tio-title-border-bottom: 0 !default;
+$editor-tip-title-color: $content-text-color !default;
+$editable-overlay-icon-height: inherit !default;
+$editable-overlay-icon: 0 !default;
+$editor-btn-icon-color: $icon-color !default;
+
+//Theme Variable End

package/styles/inplace-editor/_fluent2-definition.scss

@@ -0,0 +1,71 @@
+//Layout Variable Start
+$skin-name: 'fluent2' !default;
+$editor-big-value-text-font-size: $text-base !default;
+$editor-nrml-value-text-font-size: $text-sm !default;
+$editor-big-value-container-padding: 7px 12px 7px 12px !default;
+$editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
+$editor-big-value-container-spin-padding: 8px !default;
+$editor-nrml-value-container-spin-padding: 8px !default;
+$editor-big-value-margin: 0 30px 0 0 !default;
+$editor-nrml-value-margin: 0 28px 0 0 !default;
+$editor-rtl-big-value-margin: 0 0 0  30px !default;
+$editor-rtl-nrml-value-margin: 0 0 0 28px !default;
+$editor-big-overlay-icon-size: $text-base !default;
+$editor-nrml-overlay-icon-size: $text-sm !default;
+$editor-big-overlay-icon-container-size: 20px !default;
+$editor-nrml-overlay-icon-container-size: 20px !default;
+$editor-big-overlay-icon-left-right: 8px !default;
+$editor-nrml-overlay-icon-left-right: 8px !default;
+$editor-tip-content-bdr-radius: 4px !default;
+$editor-popup-tip-content-bdr-radius: 4px !default;
+$editor-tip-title-font-weight: 500 !default;
+$editor-big-tip-title-font-size: $text-sm !default;
+$editor-nrml-tip-title-font-size: $text-xs !default;
+$editor-big-tip-title-padding: 7px 16px 7px 16px !default;
+$editor-nrml-tip-title-padding: 6px 12px 6px 12px !default;
+$editor-rtl-big-tip-title-padding: 7px 16px 7px 16px !default;
+$editor-rtl-nrml-tip-title-padding: 6px 12px 6px 12px !default;
+$editor-big-tip-title-container-size: 36px !default;
+$editor-nrml-tip-title-container-size: 30px !default;
+$editor-big-tip-wrapper-padding: 16px !default;
+$editor-nrml-tip-wrapper-padding: 12px !default;
+$editor-big-wrapper-title-with-padding: 16px !default;
+$editor-nrml-wrapper-title-with-padding: 12px !default;
+$editor-component-bottom-margin: 4px !default;
+$editor-buttons-top-margin: 4px !default;
+$editor-btn-save-icon-size: 16px !default;
+$editor-btn-cancel-icon-size: 16px !default;
+$editor-big-btn-save-margin: 0 4px 0 0 !default;
+$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
+$editor-big-btn-cancel-margin: 0 0 0 4px !default;
+$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
+$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
+
+//Layout Variable End
+
+//Theme Variable Start
+$editor-value-hover-bg: $content-bg-color-alt2 !default;
+$content-text-color: $content-text-color !default;
+$editor-value-text-color: $content-text-color !default;
+$editor-overlay-icon-color: $icon-color !default;
+$editor-value-text-border: 1px dashed $content-text-color !default;
+$editor-background-color: $transparent !default;
+$wrapper-background-color: $flyout-bg-color !default;
+$editor-tip-border: 1px solid $border-light !default;
+$editor-tip-bg: $flyout-bg-color !default;
+$editor-tip-arrow-icon-color: $flyout-bg-color !default;
+$editor-tip-title-arrow-icon-color:  $content-bg-color-alt2 !default;
+$editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
+$editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
+$editor-tip-box-shadow: $shadow-lg !default;
+$editor-tip-title-bg: transparent !default;
+$editor-tio-title-border-bottom: 0 !default;
+$editor-tip-title-color: $content-text-color !default;
+$editable-overlay-icon-height: inherit !default;
+$editable-overlay-icon: 0 !default;
+$editor-btn-icon-color: $icon-color !default;
+
+//Theme Variable End

package/styles/inplace-editor/_theme.scss

@@ -248,9 +248,14 @@
       }
 
       .e-editable-title {
-        background: $editor-tip-title-bg;
-        border-bottom: $editor-tio-title-border-bottom;
-        color: $editor-tip-title-color;
+        @if $skin-name != 'fluent2' {
+          background: $editor-tip-title-bg;
+          border-bottom: $editor-tio-title-border-bottom;
+          color: $editor-tip-title-color;
+        }
+        @else {
+          color: $editor-tip-title-color;
+        }
       }
     }