@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/styles/input/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 property-no-vendor-prefix */
 @-webkit-keyframes e-input-ripple {
   100% {
@@ -73,6 +153,7 @@ textarea.e-input,
   padding: 4px 0 4px;
   text-indent: 0;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -81,7 +162,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: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: normal;
 }
@@ -155,7 +236,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: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input:focus {
@@ -213,7 +294,7 @@ textarea.e-input,
   min-width: 30px;
   padding: 0;
   text-align: center;
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
 }
 
 /* stylelint-disable property-no-vendor-prefix */
@@ -376,16 +457,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,
@@ -447,7 +528,7 @@ textarea.e-input.e-small,
   min-height: 22px;
   min-width: 22px;
   padding: 0;
-  border-radius: 14px;
+  border-radius: calc(var(--e-radius) * 0.875);
 }
 
 label.e-float-text,
@@ -477,6 +558,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -656,7 +738,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: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: normal;
 }
@@ -670,6 +752,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -897,20 +980,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,
@@ -1159,7 +1242,7 @@ label.e-float-text,
 .e-input-group:not(.e-filled) .e-input-group-icon::after,
 .e-input-group.e-control-wrapper:not(.e-filled) .e-input-group-icon::after {
   background: #bdbdbd;
-  border-radius: 100%;
+  border-radius: 999px;
   content: "";
   display: block;
   height: 40%;
@@ -1758,7 +1841,7 @@ textarea.e-input.e-small.e-rtl,
   min-width: 30px;
   padding: 0;
   margin: 0;
-  border-radius: 16px;
+  border-radius: calc(var(--e-radius) * 1);
 }
 
 .e-input-group.e-small .e-clear-icon,
@@ -1769,7 +1852,7 @@ textarea.e-input.e-small.e-rtl,
   min-width: 34px;
   padding: 0;
   margin: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-small .e-clear-icon,
@@ -2048,7 +2131,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: 13px;
   font-style: normal;
-  font-weight: normal;
+  font-weight: 1;
   left: 0;
   overflow: hidden;
   padding-left: 0;
@@ -2068,6 +2151,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,
@@ -2276,7 +2360,7 @@ textarea.e-outline.e-input,
 .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
 .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
   border: 1px solid rgba(var(--color-sf-outline));
-  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;
@@ -2941,7 +3025,7 @@ textarea.e-input.e-small.e-outline,
 .e-rtl.e-outline label.e-float-text::after,
 .e-rtl.e-outline.e-float-input label.e-float-text::after,
 .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-  border-radius: 5px 0;
+  border-radius: calc(var(--e-radius) * 0.3125) 0;
   border-right: 0;
   left: -6px;
 }
@@ -2949,7 +3033,7 @@ textarea.e-input.e-small.e-outline,
 .e-outline label.e-float-text::after,
 .e-outline.e-float-input label.e-float-text::after,
 .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
-  border-radius: 0 5px;
+  border-radius: 0 calc(var(--e-radius) * 0.3125);
   border-right: solid 1px transparent;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -3942,9 +4026,6 @@ textarea.e-outline,
 .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: 16px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 8px;
   padding: 0;
   margin: 9px 12px 9px 0;
 }
@@ -6486,7 +6567,7 @@ textarea.e-input.e-bigger,
 .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
   min-height: 38px;
   min-width: 38px;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-input-group.e-bigger .e-input-group-icon,
@@ -6611,7 +6692,7 @@ textarea.e-input.e-bigger,
   min-height: 34px;
   min-width: 34px;
   padding: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
   margin: 0;
 }
 
@@ -7758,7 +7839,7 @@ textarea.e-input.e-bigger.e-small,
   min-height: 38px;
   padding: 0;
   margin: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
 }
 
 .e-small.e-bigger .e-input-group .e-clear-icon,
@@ -7767,7 +7848,7 @@ textarea.e-input.e-bigger.e-small,
   min-width: 34px;
   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,
@@ -10198,9 +10279,6 @@ textarea.e-input.e-bigger.e-small.e-outline,
 .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: 16px;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 8px;
   padding: 0;
   margin: 9px 12px 9px 0;
 }

package/styles/input/material3.scss

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

package/styles/input/tailwind-dark.css

@@ -35,6 +35,7 @@ textarea.e-input,
   padding: 4px 0 4px 12px;
   text-indent: 12px;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -447,6 +448,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -618,6 +620,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -1784,7 +1787,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: 10px;
@@ -1804,6 +1807,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,
@@ -3972,7 +3976,7 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
   font-size: 12px;
-  top: 15px;
+  top: 16px;
 }
 
 .e-float-input.e-bigger textarea ~ label.e-float-text,

package/styles/input/tailwind-dark.scss

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

package/styles/input/tailwind.css

@@ -35,6 +35,7 @@ textarea.e-input,
   padding: 4px 0 4px 12px;
   text-indent: 12px;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -447,6 +448,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -618,6 +620,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -1784,7 +1787,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: 10px;
@@ -1804,6 +1807,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,
@@ -3972,7 +3976,7 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
 .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
   font-size: 12px;
-  top: 15px;
+  top: 16px;
 }
 
 .e-float-input.e-bigger textarea ~ label.e-float-text,

package/styles/input/tailwind.scss

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