@syncfusion/ej2-inplace-editor 20.4.48 → 21.1.35

package/styles/inplace-editor/_layout.scss

@@ -137,7 +137,7 @@
         font-size: $editor-nrml-value-text-font-size;
         margin: $editor-nrml-value-margin;
 
-        @if $inplace-skin == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' {
           line-height: 24px;
         }
       }
@@ -205,7 +205,7 @@
         font-size: $editor-nrml-value-text-font-size;
         margin: $editor-nrml-value-margin;
 
-        @if $inplace-skin == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' {
           line-height: 24px;
         }
       }
@@ -330,7 +330,7 @@
 
     .e-input-group + .e-editable-loading {
 
-      @if $inplace-skin == 'material' {
+      @if $skin-name == 'material' {
         .e-spinner-inner {
           top: 45%;
         }
@@ -344,7 +344,7 @@
 
         .e-btn-icon.e-icons {
 
-          @if $inplace-skin == 'bootstrap4' {
+          @if $skin-name == 'bootstrap4' {
             font-size: 16px;
           }
         }
@@ -357,7 +357,7 @@
 
     .e-input-group + .e-editable-loading {
 
-      @if $inplace-skin == 'material' {
+      @if $skin-name == 'material' {
         .e-spinner-inner {
           top: 35%;
         }
@@ -373,7 +373,7 @@
 
     .e-input-group + .e-editable-loading {
 
-      @if $inplace-skin == 'material' {
+      @if $skin-name == 'material' {
         .e-spinner-inner {
           top: 35%;
         }
@@ -485,7 +485,7 @@
     &.e-tooltip-wrap {
 
       .e-tip-content {
-        @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' $inplace-skin == 'FluentUI' {
+        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' $skin-name == 'FluentUI' {
           padding: 0;
         }
 
@@ -628,7 +628,7 @@
     min-height: 70px;
   }
 
-  @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
+  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
     .e-control .e-inplaceeditor,
     .e-tooltip-wrap.e-popup.e-inplaceeditor-tip.e-popup-open,
     .e-inplaceeditor .e-input-group.e-control-wrapper.e-editable-elements {
@@ -636,7 +636,7 @@
     }
   }
 
-  @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
+  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
     .e-control.e-inplaceeditor .e-editable-value-wrapper {
       min-height: 30px;
     }

package/styles/inplace-editor/_material-dark-definition.scss

@@ -1,7 +1,6 @@
 /*! Material dark theme definitions and variables */
 
 /*! Value element styles */
-$inplace-skin: 'material-dark' !default;
 $editor-big-value-text-font-size: 14px !default;
 $editor-nrml-value-text-font-size: 13px !default;
 $editor-big-value-container-padding: 8px !default;

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

@@ -1,7 +1,6 @@
 /*! Material theme definitions and variables */
 
 /*! Value element styles */
-$inplace-skin: 'material' !default;
 $editor-big-value-text-font-size: 14px !default;
 $editor-nrml-value-text-font-size: 13px !default;
 $editor-big-value-container-padding: 8px !default;

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

@@ -1,5 +1,3 @@
-$inplace-skin: 'tailwind' !default;
-
 //Layout Variable Start
 $editor-big-value-text-font-size: $text-base !default;
 $editor-nrml-value-text-font-size: $text-sm !default;

package/styles/inplace-editor/_theme.scss

@@ -105,22 +105,22 @@
       .e-btn-save.e-icon-btn,
       .e-btn-cancel.e-icon-btn {
 
-        @if $inplace-skin == 'fabric-dark' or $inplace-skin == 'bootstrap-dark' or $inplace-skin == 'highcontrast' or $inplace-skin == 'highcontrast-light' {
+        @if $skin-name == 'fabric-dark' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
           box-shadow: none;
         }
-        @else if $inplace-skin == 'fabric' {
+        @else if $skin-name == 'fabric' {
           box-shadow: 0 1px 4px 0 $black-color;
         }
-        @else if $inplace-skin == 'bootstrap' {
+        @else if $skin-name == 'bootstrap' {
           box-shadow: 0 1px 4px 0 $black-color;
         }
-        @else if $inplace-skin == 'bootstrap4' {
+        @else if $skin-name == 'bootstrap4' {
           background-color: $content-bg;
           border: 1px solid $gray-400;
           box-shadow: 0 1px 4px 0 $black-color;
         }
 
-        @else if $inplace-skin == 'bootstrap5' {
+        @else if $skin-name == 'bootstrap5' {
           background-color: $content-bg-color;
           border: 1px solid $border-light;
           border-radius: 4px;
@@ -130,14 +130,14 @@
           color: $editor-btn-icon-color;
         }
 
-        @if $inplace-skin == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' {
 
           &:hover {
             background-color: darken($gray-600, 7.5%);
             border: 1px solid darken($gray-600, 10%);
           }
         }
-        @else if $inplace-skin == 'bootstrap5' {
+        @else if $skin-name == 'bootstrap5' {
 
           &:hover {
             background-color: darken($gray-600, 7.5%);
@@ -145,7 +145,7 @@
           }
         }
 
-        @if $inplace-skin == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' {
 
           &:focus {
             background-color: $gray-600;
@@ -153,7 +153,7 @@
           }
         }
 
-        @if $inplace-skin == 'bootstrap4' {
+        @if $skin-name == 'bootstrap4' {
 
           &:active {
             background-color: darken($gray-600, 10%);
@@ -167,7 +167,7 @@
 
           .e-btn-icon.e-icons {
 
-            @if $inplace-skin == 'bootstrap4' or $inplace-skin =='bootstrap5' {
+            @if $skin-name == 'bootstrap4' or $skin-name =='bootstrap5' {
               color: $white;
             }
           }
@@ -176,7 +176,7 @@
     }
   }
 
-  @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
+  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
     .e-inplaceeditor .e-editable-value-wrapper {
       background-color: $editor-background-color;
       border-radius: 4px;
@@ -192,7 +192,7 @@
     &.e-tooltip-wrap.e-popup {
       background: $editor-tip-bg;
       box-shadow: $editor-tip-box-shadow;
-      @if $inplace-skin == 'FluentUI' {
+      @if $skin-name == 'FluentUI' {
         border-radius: $editor-popup-tip-wrapper-bdr-radius;
       }
 

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

@@ -1,71 +0,0 @@
-$inplace-skin: 'bootstrap5' !default;
-
-//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