@syncfusion/ej2-inputs 31.2.15 → 32.1.20

package/styles/input/fluent2.css

@@ -4,6 +4,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 property-no-vendor-prefix */
 @-webkit-keyframes e-input-ripple {
   100% {
@@ -184,6 +264,39 @@
   color: var(--color-sf-danger) !important;
 }
 
+.e-underline.e-input-group.e-control-wrapper,
+.e-underline.e-input-group,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-float-input,
+.e-underline.e-float-input.e-control-wrapper,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid var(--color-sf-border-alt);
+  border-width: 0 0 1px 0;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid;
+  border-width: 0 0 1px 0;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 .e-float-input .e-clear-icon::before,
 .e-float-input.e-control-wrapper .e-clear-icon::before {
   content: "\e7e7";
@@ -220,6 +333,7 @@ textarea.e-input,
   padding: 4px 12px 4px 12px;
   text-indent: 8px;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -228,7 +342,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper,
 .e-input-group.e-disabled,
 .e-input-group.e-control-wrapper.e-disabled {
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: normal;
 }
@@ -302,7 +416,7 @@ textarea.e-input,
 .e-float-input.e-input-group textarea,
 .e-float-input.e-control-wrapper textarea,
 .e-float-input.e-control-wrapper.e-input-group textarea {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 
 .e-input:focus {
@@ -360,7 +474,7 @@ textarea.e-input,
   min-width: 20px;
   padding: 5px 8px 5px 4px;
   text-align: center;
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
 }
 
 /* stylelint-disable property-no-vendor-prefix */
@@ -540,16 +654,16 @@ textarea.e-input,
 .e-input-group.e-corner .e-input-group-icon:first-child,
 .e-input-group.e-control-wrapper.e-corner .e-input:first-child,
 .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:first-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input-group.e-corner .e-input:last-child,
 .e-input-group.e-corner .e-input-group-icon:last-child,
 .e-input-group.e-control-wrapper.e-corner .e-input:last-child,
 .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:last-child {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input-group.e-rtl .e-input-group-icon:first-child,
@@ -611,7 +725,7 @@ textarea.e-input.e-small,
   min-height: 18px;
   min-width: 20px;
   padding: 3px 6px 3px 3px;
-  border-radius: 14px;
+  border-radius: calc(var(--e-radius) * 0.875);
 }
 
 label.e-float-text,
@@ -641,6 +755,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -821,7 +936,7 @@ label.e-float-text,
 .e-float-input.e-control-wrapper.e-disabled,
 .e-float-input.e-input-group.e-disabled,
 .e-float-input.e-input-group.e-control-wrapper.e-disabled {
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: normal;
 }
@@ -835,6 +950,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -1053,20 +1169,20 @@ label.e-float-text,
 .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.125);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0.125);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input-group.e-corner.e-rtl .e-input:last-child,
 .e-input-group.e-corner.e-rtl .e-input-group-icon:last-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child,
 .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0.125);
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0.125);
 }
 
 .e-input-group.e-warning::before,
@@ -1125,7 +1241,7 @@ label.e-float-text,
 .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
 .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
 .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before {
-  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.625);
 }
 
 .e-input-group.e-input-focus::after,
@@ -1138,7 +1254,7 @@ label.e-float-text,
 .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
 .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
 .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
-  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.625);
 }
 
 .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
@@ -1265,7 +1381,7 @@ label.e-float-text,
 .e-input-group.e-rtl.e-corner .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-rtl.e-corner .e-input-group-icon:hover {
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
 }
 
 .e-input.e-small,
@@ -1320,20 +1436,6 @@ label.e-float-text,
   border-bottom: 1px solid;
 }
 
-.e-underline.e-input-group:not(.e-float-icon-left),
-.e-underline.e-input-group.e-success:not(.e-float-icon-left),
-.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
-.e-underline.e-input-group.e-error:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-  border: 1px solid;
-  border-width: 0 0 1px 0;
-  padding-top: 1px;
-  border-radius: 0;
-}
-
 .e-input-group,
 .e-input-group.e-success,
 .e-input-group.e-warning,
@@ -1947,7 +2049,7 @@ textarea.e-input.e-small.e-rtl,
   min-width: 28px;
   padding: 0;
   margin: 0;
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
 }
 
 .e-input-group.e-small .e-clear-icon,
@@ -1958,7 +2060,7 @@ textarea.e-input.e-small.e-rtl,
   min-width: 32px;
   padding: 0;
   margin: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-small .e-clear-icon,
@@ -1971,7 +2073,7 @@ textarea.e-input.e-small.e-rtl,
   min-width: 24px;
   padding: 0;
   margin: 0;
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
 }
 
 .e-input:not(:valid),
@@ -2004,7 +2106,7 @@ textarea.e-input.e-small.e-rtl,
   border-top-color: var(--color-sf-border);
   border-left-color: var(--color-sf-border);
   border-right-color: var(--color-sf-border);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   height: 30px;
 }
 
@@ -2223,7 +2325,7 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
   font-size: 14px;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 1;
   left: 0;
   overflow: hidden;
   padding-left: 8px;
@@ -2243,6 +2345,7 @@ textarea.e-input.e-small.e-rtl,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
@@ -2409,7 +2512,7 @@ textarea.e-input {
 .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
 .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
   border: 1px solid var(--color-sf-border);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-width: 1px;
   fill: transparent;
   -webkit-transition: border 0.2s, -webkit-box-shadow 0.2s;
@@ -2418,25 +2521,6 @@ textarea.e-input {
   transition: border 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
 }
 
-.e-underline.e-input-group.e-control-wrapper,
-.e-underline.e-input-group,
-.e-underline.e-input-group:not(.e-float-icon-left),
-.e-underline.e-float-input,
-.e-underline.e-float-input.e-control-wrapper,
-.e-underline.e-input-group:not(.e-float-icon-left),
-.e-underline.e-input-group.e-success:not(.e-float-icon-left),
-.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
-.e-underline.e-input-group.e-error:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
-.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
-  border: 1px solid var(--color-sf-border-alt);
-  border-width: 0 0 1px 0;
-  padding-top: 1px;
-  border-radius: 0;
-}
-
 .e-filled.e-input-group,
 .e-filled.e-input-group.e-control-wrapper,
 .e-filled.e-float-input,
@@ -2566,7 +2650,7 @@ textarea.e-input {
 
 .e-filled.e-input-group,
 .e-filled.e-input-group.e-control-wrapper {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   padding: 0 10px 0 12px;
 }
 
@@ -2580,7 +2664,7 @@ textarea.e-input {
 .e-filled.e-float-input,
 .e-filled.e-float-input.e-control-wrapper {
   border: 1px solid;
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   border-width: 0 0 1px 0;
   margin-top: 0;
   padding: 0;
@@ -3049,7 +3133,7 @@ textarea.e-input {
 
 .e-filled.e-float-input .e-float-line,
 .e-float-input.e-filled.e-control-wrapper .e-float-line {
-  bottom: -1px;
+  bottom: -0.1px;
   position: absolute;
 }
 
@@ -3171,9 +3255,6 @@ textarea.e-input {
 .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
 .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
   font-size: 14px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 8px;
   padding: 0;
   margin: 9px 12px 9px 0;
 }
@@ -3643,7 +3724,7 @@ textarea.e-input {
   -webkit-transition: 0.2s cubic-bezier(0.4, 0, 0.4, 1);
   transition: 0.2s cubic-bezier(0.4, 0, 0.4, 1);
   width: 0;
-  bottom: -1px;
+  bottom: -0.1px;
 }
 
 .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus::before,
@@ -3651,7 +3732,7 @@ textarea.e-input {
 .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::before,
 .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::after {
   width: 50%;
-  bottom: -1px;
+  bottom: -0.1px;
 }
 
 .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
@@ -4198,13 +4279,13 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
   border-bottom-color: var(--color-sf-primary);
   padding-bottom: 2px;
-  border-bottom-width: 2px;
+  border-bottom-width: calc(var(--e-border) * 0.125);
 }
 
 textarea.e-input:focus:not(.e-success):not(.e-warning):not(.e-error) {
   border-bottom-color: var(--color-sf-primary);
   padding-bottom: 4px;
-  border-bottom-width: 0;
+  border-bottom-width: calc(var(--e-border) * 0);
 }
 
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error) input.e-input:focus,
@@ -5314,7 +5395,7 @@ textarea.e-input.e-bigger,
 .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
 .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-bigger .e-input-group-icon,
@@ -5439,7 +5520,7 @@ textarea.e-input.e-bigger,
   min-height: 18px;
   min-width: 20px;
   padding: 6px;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
   margin: 0;
 }
 
@@ -6570,7 +6651,7 @@ textarea.e-input.e-bigger.e-small,
   min-width: 32px;
   padding: 0;
   margin: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-small.e-bigger .e-clear-icon,
@@ -7972,9 +8053,6 @@ input.e-input.e-bigger.e-small,
 .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
   font-size: 14px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 8px;
   padding: 0;
   margin: 9px 12px 9px 0;
 }

package/styles/input/fluent2.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'fluent2-definition.scss';
-@import 'icons/fluent2.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'fluent2-definition' as *;
+@use 'icons/fluent2' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/input/highcontrast-light.css

@@ -35,6 +35,7 @@ textarea.e-input,
   padding: 0;
   text-indent: 10px;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -469,6 +470,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -636,6 +638,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -1829,7 +1832,7 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
   font-size: 14px;
   font-style: italic;
-  font-weight: normal;
+  font-weight: 1;
   left: 0;
   overflow: hidden;
   padding-left: 10px;
@@ -1849,6 +1852,7 @@ textarea.e-input.e-small.e-rtl,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input textarea:-webkit-autofill ~ label.e-float-text,

package/styles/input/highcontrast-light.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'icons/highcontrast-light' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/input/highcontrast.css

@@ -35,6 +35,7 @@ textarea.e-input,
   padding: 0;
   text-indent: 10px;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -469,6 +470,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -636,6 +638,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -1829,7 +1832,7 @@ textarea.e-input.e-small.e-rtl,
 .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
   font-size: 14px;
   font-style: italic;
-  font-weight: normal;
+  font-weight: 1;
   left: 0;
   overflow: hidden;
   padding-left: 10px;
@@ -1849,6 +1852,7 @@ textarea.e-input.e-small.e-rtl,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input textarea:-webkit-autofill ~ label.e-float-text,

package/styles/input/highcontrast.scss

@@ -1,5 +1,5 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'highcontrast-definition' as *;
+@use 'icons/highcontrast' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/input/icons/_bds.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-bds-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_bootstrap-dark.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-bootstrap-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_bootstrap.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-bootstrap-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_bootstrap4.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-bootstrap4-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_bootstrap5-dark.scss

@@ -1 +1 @@
-@import './bootstrap5.scss';
+@use './bootstrap5' as *;

package/styles/input/icons/_bootstrap5.3.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-bootstrap5-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_bootstrap5.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-bootstrap5-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_fabric-dark.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-fabric-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_fabric.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-fabric-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_fluent-dark.scss

@@ -1 +1 @@
-@import './fluent.scss';
+@use './fluent' as *;

package/styles/input/icons/_fluent.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-fluent-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_fluent2.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-fluent2-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_fusionnew.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-fusionnew-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_highcontrast-light.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-highcontrast-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {

package/styles/input/icons/_highcontrast.scss

@@ -1,3 +1,4 @@
+@use 'ej2-base/styles/common/mixin' as *;
 @include export-module('input-highcontrast-icons') {
   .e-float-input,
   .e-float-input.e-control-wrapper {