@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/styles/slider/material3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
@@ -42,7 +122,7 @@
   position: relative;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
-  border-radius: 50%;
+  border-radius: 999px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   cursor: pointer;
@@ -152,12 +232,12 @@
   position: absolute;
   overflow: hidden;
   background: rgba(var(--color-sf-surface-variant));
-  border-radius: 4px;
-  top: calc(50% - 4px);
+  border-radius: calc(var(--e-radius) * 0.25);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-handle {
   margin-left: -10px;
-  top: calc(50% - 12px);
+  top: calc(50% - 10px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal.e-scale-both .e-range {
   height: 4px;
@@ -165,13 +245,13 @@
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 4px;
   top: calc(50% - 2px);
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
   background-color: rgba(var(--color-sf-scrim), 0.5);
   position: absolute;
   height: 4px;
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-vertical {
   height: inherit;
@@ -192,7 +272,6 @@
   overflow: hidden;
   left: calc(50% - 2px);
   width: 4px;
-  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -266,7 +345,7 @@
   left: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container .e-range {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
   -webkit-transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
   transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
@@ -332,7 +411,7 @@
 .e-control-wrapper.e-slider-container .e-scale {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   height: 28px;
   width: 100%;
   line-height: normal;
@@ -341,7 +420,7 @@
   outline: 0 none;
   padding: 0;
   position: absolute;
-  top: 16px;
+  top: 18px;
   z-index: 1;
   font-size: 12px;
   margin-top: -5px;
@@ -362,7 +441,7 @@
 }
 .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
   color: rgba(var(--color-sf-on-secondary-container));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 12px;
   outline: none;
   position: absolute;
@@ -423,7 +502,7 @@
 .e-slider-tooltip.e-tooltip-wrap.e-popup {
   background-color: rgba(var(--color-sf-primary));
   border: 0;
-  border-radius: 8px;
+  border-radius: calc(var(--e-radius) * 0.5);
   /* stylelint-disable */
   cursor: -webkit-grab;
   cursor: grab;
@@ -492,10 +571,10 @@
 .e-slider-tooltip.e-tooltip-wrap.e-popup.e-tooltip-wrap.e-popup.e-material-default {
   background-color: rgba(var(--color-sf-primary));
   border: 0;
-  border-bottom-left-radius: 50%;
-  border-bottom-right-radius: 0%;
-  border-top-left-radius: 50%;
-  border-top-right-radius: 50%;
+  border-bottom-left-radius: 999px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: 999px;
+  border-top-right-radius: 999px;
   /* stylelint-disable */
   cursor: -webkit-grab;
   cursor: grab;
@@ -592,7 +671,7 @@
   position: absolute;
   height: 24px;
   width: 24px;
-  border-radius: 50%;
+  border-radius: 999px;
   padding: 4px;
   border: none;
 }
@@ -664,7 +743,7 @@
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider-button.e-second-button,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-button.e-first-button,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-button.e-second-button {
-  border-radius: 12px;
+  border-radius: calc(var(--e-radius) * 0.75);
   height: 24px;
   width: 24px;
   padding: 0;

package/styles/slider/material3.scss

@@ -1,7 +1,6 @@
-
-
-@import 'ej2-popups/styles/popup/material3-definition.scss';
-@import 'ej2-popups/styles/tooltip/material3-definition.scss';
-@import 'material3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/material3' as *;
+@use 'ej2-popups/styles/popup/material3-definition' as *;
+@use 'ej2-popups/styles/tooltip/material3-definition' as *;
+@use 'material3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/tailwind-dark.css

@@ -138,11 +138,11 @@
   overflow: hidden;
   background: #4b5563;
   border-radius: 4px;
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-handle {
   margin-left: -6px;
-  top: calc(50% - 8px);
+  top: calc(50% - 6px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal.e-scale-both .e-range {
   height: 4px;
@@ -150,13 +150,13 @@
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 4px;
   top: calc(50% - 2px);
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
   background-color: rgba(107, 114, 128, 0.75);
   position: absolute;
   height: 4px;
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-vertical {
   height: inherit;
@@ -349,10 +349,10 @@
   margin-top: 3px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-after {
-  top: 3px;
+  top: 8px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-before {
-  top: 15px;
+  top: 20px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick {
   display: inline-block;
@@ -544,7 +544,7 @@
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical.e-scale-both .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track {
@@ -598,13 +598,13 @@
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-track,
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-rtl.e-horizontal .e-slider .e-handle {

package/styles/slider/tailwind-dark.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/tailwind-dark.scss';
-@import 'ej2-popups/styles/popup/tailwind-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/tailwind-dark-definition.scss';
-@import 'tailwind-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind-dark' as *;
+@use 'ej2-popups/styles/popup/tailwind-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/tailwind-dark-definition' as *;
+@use 'tailwind-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/tailwind.css

@@ -138,11 +138,11 @@
   overflow: hidden;
   background: #e5e7eb;
   border-radius: 4px;
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-handle {
   margin-left: -6px;
-  top: calc(50% - 8px);
+  top: calc(50% - 6px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal.e-scale-both .e-range {
   height: 4px;
@@ -150,13 +150,13 @@
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 4px;
   top: calc(50% - 2px);
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
   background-color: rgba(107, 114, 128, 0.75);
   position: absolute;
   height: 4px;
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-vertical {
   height: inherit;
@@ -349,10 +349,10 @@
   margin-top: 3px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-after {
-  top: 3px;
+  top: 8px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-before {
-  top: 15px;
+  top: 20px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick {
   display: inline-block;
@@ -544,7 +544,7 @@
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical.e-scale-both .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track {
@@ -598,13 +598,13 @@
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-track,
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-rtl.e-horizontal .e-slider .e-handle {

package/styles/slider/tailwind.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/tailwind.scss';
-@import 'ej2-popups/styles/popup/tailwind-definition.scss';
-@import 'ej2-popups/styles/tooltip/tailwind-definition.scss';
-@import 'tailwind-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind' as *;
+@use 'ej2-popups/styles/popup/tailwind-definition' as *;
+@use 'ej2-popups/styles/tooltip/tailwind-definition' as *;
+@use 'tailwind-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
@@ -42,7 +112,7 @@
   position: relative;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
   -webkit-box-shadow: 0 1px 2px -1px rgba(var(--color-sf-black), 0.1), 0 1px 3px 0 rgba(var(--color-sf-black), 0.1);
           box-shadow: 0 1px 2px -1px rgba(var(--color-sf-black), 0.1), 0 1px 3px 0 rgba(var(--color-sf-black), 0.1);
   -webkit-box-sizing: border-box;
@@ -131,12 +201,12 @@
   position: absolute;
   overflow: hidden;
   background: var(--color-sf-content-bg-color-alt3);
-  border-radius: 4px;
-  top: calc(50% - 4px);
+  border-radius: calc(var(--e-radius) * 0.25);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-handle {
   margin-left: -8px;
-  top: calc(50% - 8px);
+  top: calc(50% - 6px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal.e-scale-both .e-range {
   height: 4px;
@@ -144,13 +214,13 @@
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 4px;
   top: calc(50% - 2px);
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
   background-color: var(--color-sf-content-bg-color-alt5);
   position: absolute;
   height: 4px;
-  top: calc(50% - 4px);
+  top: calc(50% - 2px);
 }
 .e-control-wrapper.e-slider-container.e-vertical {
   height: inherit;
@@ -169,9 +239,9 @@
   height: 100%;
   position: absolute;
   overflow: hidden;
-  left: calc(50% - 4px);
+  left: calc(50% - 2px);
   width: 4px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -219,7 +289,7 @@
   left: calc(50% - 4px);
 }
 .e-control-wrapper.e-slider-container .e-range {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
   -webkit-transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
   transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
@@ -276,7 +346,7 @@
 .e-control-wrapper.e-slider-container .e-scale {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   height: 28px;
   width: 100%;
   line-height: normal;
@@ -285,7 +355,7 @@
   outline: 0 none;
   padding: 0;
   position: absolute;
-  top: 16px;
+  top: 18px;
   z-index: 1;
   font-size: 12px;
   margin-top: -5px;
@@ -303,7 +373,7 @@
 }
 .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
   color: var(--color-sf-content-text-color-alt1);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 12px;
   outline: none;
   position: absolute;
@@ -329,6 +399,12 @@
   background-position-y: bottom;
   margin-top: 2px;
 }
+.e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-after {
+  top: 18px;
+}
+.e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-before {
+  top: 22px;
+}
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick {
   display: inline-block;
   background-repeat: repeat-y;
@@ -388,7 +464,7 @@
   position: absolute;
   height: 18px;
   width: 18px;
-  border-radius: 50%;
+  border-radius: 999px;
   padding: 0;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-range {
@@ -428,8 +504,8 @@
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-handle {
-  margin-left: -9px;
-  top: calc(50% - 9px);
+  margin-left: -8px;
+  top: calc(50% - 8px);
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-handle {

package/styles/slider/tailwind3.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-popups/styles/popup/tailwind3-definition.scss';
-@import 'ej2-popups/styles/tooltip/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
+@use 'ej2-popups/styles/tooltip/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/smart-textarea/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/smart-textarea/_bds-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $sta-background-color: #{#ffffff} !default;
 $sta-color: #{#000000} !default;
 $sta-box-shadow: rgba(0, 0, 0, .4) !default;

package/styles/smart-textarea/_bootstrap-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 $sta-background-color: $gray-base !default;
 $sta-color: $grey-dark-font !default;
 $sta-box-shadow: rgba(0, 0, 0, .5) !default;

package/styles/smart-textarea/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $sta-background-color: $brand-primary-font !default;
 $sta-color: $gray-dark !default;
 $sta-box-shadow: rgba(0, 0, 0, .5) !default;

package/styles/smart-textarea/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 $sta-background-color: $white !default;
 $sta-color: $gray-900 !default;
 $sta-box-shadow: rgba(0, 0, 0, .5) !default;

package/styles/smart-textarea/_bootstrap5-dark-definition.scss

@@ -1 +1,5 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+$sta-background-color: $content-bg-color !default;
+$sta-color: $content-text-color !default;
+$sta-box-shadow: $shadow-lg !default;

package/styles/smart-textarea/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 $sta-background-color: $content-bg-color !default;
 $sta-color: $content-text-color !default;
 $sta-box-shadow: $shadow-lg !default;

package/styles/smart-textarea/_bootstrap5.3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $sta-background-color: $white !default;
 $sta-color: $black !default;
 $sta-box-shadow: rgba(0, 0, 0, .4) !default;

package/styles/smart-textarea/_fabric-dark-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
 $sta-background-color: $neutral-white !default;
 $sta-color: $neutral-secondary !default;
 $sta-box-shadow: rgba(0, 0, 0, .3) !default;

package/styles/smart-textarea/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $sta-background-color: $neutral-white !default;
 $sta-color: $neutral-primary !default;
 $sta-box-shadow: rgba(0, 0, 0, .4) !default;

package/styles/smart-textarea/_fluent-dark-definition.scss

@@ -1 +1,5 @@
-@import './fluent-definition.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@forward 'ej2-base/styles/definition/fluent-dark';
+$sta-background-color: $content-bg-color !default;
+$sta-color: $content-text-color !default;
+$sta-box-shadow: $shadow-xl !default;