@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/styles/input/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 property-no-vendor-prefix */
 /* stylelint-disable */
 .e-filled.e-float-input.e-error label.e-float-text,
@@ -15,6 +85,54 @@
   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);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  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;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  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: 1px;
+  margin-top: 0;
+  padding: 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: 1px;
+  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";
@@ -51,6 +169,7 @@ textarea.e-input,
   padding: 0;
   text-indent: 8px;
   width: 100%;
+  letter-spacing: 0;
 }
 
 input.e-input,
@@ -59,7 +178,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: "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: 14px;
   font-weight: normal;
   -webkit-font-feature-settings: "calt" 0;
@@ -135,7 +254,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: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 
 .e-input.e-small,
@@ -163,7 +282,7 @@ textarea.e-input,
 .e-small .e-float-input.e-control-wrapper.e-input-group input,
 .e-small .e-float-input,
 .e-small .e-float-input.e-control-wrapper {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 
 .e-input:focus {
@@ -223,24 +342,24 @@ textarea.e-input,
 
 .e-input-group .e-input-group-icon:last-child,
 .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.1875);
+  border-top-right-radius: calc(var(--e-radius) * 0.1875);
 }
 
 .e-input-group .e-input-group-icon:first-child,
 .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.1875);
+  border-top-left-radius: calc(var(--e-radius) * 0.1875);
 }
 
 .e-input-group.e-rtl .e-input-group-icon:last-child,
 .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
 .e-rtl .e-input-group .e-input-group-icon:last-child,
 .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.1875);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0.1875);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input[disabled],
@@ -374,16 +493,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: 6px;
-  border-top-left-radius: 6px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.375);
+  border-top-left-radius: calc(var(--e-radius) * 0.375);
 }
 
 .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: 6px;
-  border-top-right-radius: 6px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.375);
+  border-top-right-radius: calc(var(--e-radius) * 0.375);
 }
 
 .e-input-group.e-rtl .e-input-group-icon:first-child,
@@ -463,6 +582,7 @@ label.e-float-text,
           user-select: none;
   white-space: nowrap;
   width: 100%;
+  letter-spacing: 0;
 }
 
 label.e-float-text,
@@ -525,10 +645,11 @@ label.e-float-text,
   font-size: 12px;
   font-weight: 500;
   padding-right: 0;
-  -webkit-transform: translate3d(-10px, -35px, 0) scale(1);
-          transform: translate3d(-10px, -35px, 0) scale(1);
+  -webkit-transform: translate3d(0, -6px, 0) scale(1);
+          transform: translate3d(0, -6px, 0) scale(1);
   padding-left: 0;
-  left: 12px;
+  left: 2px;
+  top: -15px;
 }
 
 .e-float-input.e-small input:focus ~ label.e-float-text,
@@ -580,7 +701,7 @@ label.e-float-text,
   padding-right: 0;
   top: 17px;
   padding-left: 0;
-  left: 12px;
+  left: 2px;
 }
 
 .e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
@@ -639,7 +760,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: "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: 14px;
   font-weight: normal;
 }
@@ -653,6 +774,7 @@ label.e-float-text,
   display: block;
   font: inherit;
   width: 100%;
+  letter-spacing: 0;
 }
 
 .e-float-input input,
@@ -870,20 +992,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: 6px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 6px;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0.375);
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0.375);
 }
 
 .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: 6px;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0.375);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
+  border-top-left-radius: calc(var(--e-radius) * 0.375);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input-group.e-warning::before,
@@ -966,7 +1088,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: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 
 .e-input.e-small,
@@ -1022,20 +1144,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: 1px;
-  padding-top: 1px;
-  border-radius: 0;
-}
-
 .e-input-group,
 .e-input-group.e-success,
 .e-input-group.e-warning,
@@ -1820,7 +1928,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;
@@ -1840,6 +1948,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,
@@ -1978,25 +2087,6 @@ textarea.e-input,
   padding: 4px 8px 4px 8px;
 }
 
-.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);
-  border-width: 1px;
-  padding-top: 1px;
-  border-radius: 0;
-}
-
 textarea.e-outline.e-input,
 .e-outline.e-input-group textarea.e-input,
 .e-outline.e-input-group textarea,
@@ -2188,12 +2278,6 @@ textarea.e-outline.e-input,
   border-width: 0;
 }
 
-.e-filled.e-input-group,
-.e-filled.e-input-group.e-control-wrapper {
-  border-radius: 4px 4px 0 0;
-  padding: 0 10px 0 12px;
-}
-
 .e-filled.e-input-group.e-small,
 .e-filled.e-input-group.e-control-wrapper.e-small,
 .e-small .e-filled.e-input-group.e-control-wrapper {
@@ -2201,15 +2285,6 @@ textarea.e-outline.e-input,
   padding: 0 6px 0 8px;
 }
 
-.e-filled.e-float-input,
-.e-filled.e-float-input.e-control-wrapper {
-  border: 1px solid;
-  border-radius: 4px 4px 0 0;
-  border-width: 1px;
-  margin-top: 0;
-  padding: 0;
-}
-
 .e-filled.e-float-input.e-small,
 .e-filled.e-float-input.e-control-wrapper.e-small,
 .e-small .e-filled.e-float-input.e-control-wrapper {
@@ -2795,9 +2870,6 @@ textarea.e-outline.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;
 }
@@ -3759,7 +3831,7 @@ textarea.e-input::selection,
 .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
 .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
   border-color: var(--color-sf-primary);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary);
           box-shadow: 0 0 0 1px var(--color-sf-primary);
 }
@@ -3787,7 +3859,7 @@ textarea.e-input::selection,
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
   border-color: var(--color-sf-primary);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary);
           box-shadow: 0 0 0 1px var(--color-sf-primary);
 }
@@ -5002,7 +5074,7 @@ textarea.e-input.e-bigger,
   min-height: 32px;
   min-width: 32px;
   padding: 0;
-  border-radius: 20px;
+  border-radius: calc(var(--e-radius) * 1.25);
   margin: 0;
 }
 
@@ -7584,9 +7656,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/tailwind3.scss

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

package/styles/maskedtextbox/_all.scss

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

package/styles/maskedtextbox/_bds-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $mask-font-family: $font-family !default;
 $mask-font-size: $text-sm !default;
 $mask-bigger-font-size: $text-base !default;
@@ -5,3 +7,18 @@ $mask-bigger-font-size: $text-base !default;
 // color
 
 $mask-error-color: $danger !default;
+$mask-bigger-min-height: 40px !default;
+$mask-min-height: 33px !default;
+
+$mask-prepend-label-bottom-top: 20px !default;
+$mask-prepend-label-top-top: 18px !default;
+$mask-prepend-outline-label-bottom-top: 20px !default;
+$mask-prepend-outline-label-top-top: 17px !default;
+$mask-prepend-filled-label-bottom-top: 20px !default;
+$mask-prepend-filled-label-top-top: 20px !default;
+$mask-bigger-prepend-label-bottom-top: 22px !default;
+$mask-bigger-prepend-label-top-top: 18px !default;
+$mask-bigger-prepend-outline-label-bottom-top: 22px !default;
+$mask-bigger-prepend-outline-label-top-top: 17px !default;
+$mask-bigger-prepend-filled-label-bottom-top: 23px !default;
+$mask-bigger-prepend-filled-label-top-top: 18px !default;

package/styles/maskedtextbox/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('maskedtextbox-bigger') {
 
   .e-bigger .e-control-wrapper.e-mask #{&}.e-maskedtextbox {
@@ -15,6 +17,46 @@
   .e-bigger .e-content-placeholder.e-mask.e-placeholder-mask,
   .e-bigger.e-content-placeholder.e-mask.e-placeholder-mask {
     background-size: 300px 40px;
-    min-height: 40px;
+    min-height: $mask-bigger-min-height;
+  }
+
+  div.e-bigger.e-mask.e-input-group,
+  .e-bigger div.e-mask.e-input-group,
+  span.e-bigger.e-mask.e-input-group,
+  .e-bigger span.e-mask.e-input-group {
+    &.e-prepend-wrapper,
+    &.e-append-wrapper {
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+        top: $mask-bigger-prepend-label-bottom-top;
+      }
+
+      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+        top: $mask-bigger-prepend-label-top-top;
+      }
+
+      &.e-outline {
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+          top: $mask-bigger-prepend-outline-label-bottom-top;
+        }
+
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+          top: $mask-bigger-prepend-outline-label-top-top;
+        }
+      }
+
+      &.e-filled {
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
+          top: $mask-bigger-prepend-filled-label-bottom-top;
+        }
+
+        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
+          top: $mask-bigger-prepend-filled-label-top-top;
+        }
+      }
+
+      & input {
+        height: auto;
+      }
+    }
   }
 }

package/styles/maskedtextbox/_bootstrap-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 //default
 $mask-error-color: $brand-danger-dark !default;
 $mask-font-family: Arial, $font-family !default;
@@ -5,3 +8,18 @@ $mask-font-size: 13px !default;
 $mask-bigger-font-size: 14px !default;
 
 //enddefault
+$mask-bigger-min-height: 40px !default;
+$mask-min-height: 33px !default;
+
+$mask-prepend-label-bottom-top: 20px !default;
+$mask-prepend-label-top-top: 18px !default;
+$mask-prepend-outline-label-bottom-top: 20px !default;
+$mask-prepend-outline-label-top-top: 17px !default;
+$mask-prepend-filled-label-bottom-top: 20px !default;
+$mask-prepend-filled-label-top-top: 20px !default;
+$mask-bigger-prepend-label-bottom-top: 22px !default;
+$mask-bigger-prepend-label-top-top: 18px !default;
+$mask-bigger-prepend-outline-label-bottom-top: 22px !default;
+$mask-bigger-prepend-outline-label-top-top: 17px !default;
+$mask-bigger-prepend-filled-label-bottom-top: 23px !default;
+$mask-bigger-prepend-filled-label-top-top: 18px !default;

package/styles/maskedtextbox/_bootstrap-definition.scss

@@ -1,4 +1,21 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $mask-error-color: $error-font-color !default;
 $mask-font-family: Arial, $font-family !default;
 $mask-font-size: 13px !default;
 $mask-bigger-font-size: 14px !default;
+$mask-bigger-min-height: 40px !default;
+$mask-min-height: 33px !default;
+
+$mask-prepend-label-bottom-top: 20px !default;
+$mask-prepend-label-top-top: 18px !default;
+$mask-prepend-outline-label-bottom-top: 20px !default;
+$mask-prepend-outline-label-top-top: 17px !default;
+$mask-prepend-filled-label-bottom-top: 20px !default;
+$mask-prepend-filled-label-top-top: 20px !default;
+$mask-bigger-prepend-label-bottom-top: 22px !default;
+$mask-bigger-prepend-label-top-top: 18px !default;
+$mask-bigger-prepend-outline-label-bottom-top: 22px !default;
+$mask-bigger-prepend-outline-label-top-top: 17px !default;
+$mask-bigger-prepend-filled-label-bottom-top: 23px !default;
+$mask-bigger-prepend-filled-label-top-top: 18px !default;

package/styles/maskedtextbox/_bootstrap4-definition.scss

@@ -1,4 +1,21 @@
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 $mask-error-color: $danger !default;
 $mask-font-family: Arial, $font-family !default;
 $mask-font-size: 14px !default;
 $mask-bigger-font-size: 16px !default;
+$mask-bigger-min-height: 40px !default;
+$mask-min-height: 33px !default;
+
+$mask-prepend-label-bottom-top: 20px !default;
+$mask-prepend-label-top-top: 15px !default;
+$mask-prepend-outline-label-bottom-top: 20px !default;
+$mask-prepend-outline-label-top-top: 15px !default;
+$mask-prepend-filled-label-bottom-top: 20px !default;
+$mask-prepend-filled-label-top-top: 20px !default;
+$mask-bigger-prepend-label-bottom-top: 22px !default;
+$mask-bigger-prepend-label-top-top: 15px !default;
+$mask-bigger-prepend-outline-label-bottom-top: 22px !default;
+$mask-bigger-prepend-outline-label-top-top: 15px !default;
+$mask-bigger-prepend-filled-label-bottom-top: 22px !default;
+$mask-bigger-prepend-filled-label-top-top: 16px !default;

package/styles/maskedtextbox/_bootstrap5-dark-definition.scss

@@ -1 +1,24 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+$mask-font-family: $font-family !default;
+$mask-font-size: $text-sm !default;
+$mask-bigger-font-size: $text-base !default;
+
+// color
+
+$mask-error-color: $danger !default;
+$mask-bigger-min-height: 40px !default;
+$mask-min-height: 33px !default;
+
+$mask-prepend-label-bottom-top: 18px !default;
+$mask-prepend-label-top-top: 15px !default;
+$mask-prepend-outline-label-bottom-top: 18px !default;
+$mask-prepend-outline-label-top-top: 15px !default;
+$mask-prepend-filled-label-bottom-top: 19px !default;
+$mask-prepend-filled-label-top-top: 17px !default;
+$mask-bigger-prepend-label-bottom-top: 21px !default;
+$mask-bigger-prepend-label-top-top: 15px !default;
+$mask-bigger-prepend-outline-label-bottom-top: 21px !default;
+$mask-bigger-prepend-outline-label-top-top: 15px !default;
+$mask-bigger-prepend-filled-label-bottom-top: 21px !default;
+$mask-bigger-prepend-filled-label-top-top: 15px !default;

package/styles/maskedtextbox/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 $mask-font-family: $font-family !default;
 $mask-font-size: $text-sm !default;
 $mask-bigger-font-size: $text-base !default;
@@ -5,3 +7,18 @@ $mask-bigger-font-size: $text-base !default;
 // color
 
 $mask-error-color: $danger !default;
+$mask-bigger-min-height: 40px !default;
+$mask-min-height: 33px !default;
+
+$mask-prepend-label-bottom-top: 18px !default;
+$mask-prepend-label-top-top: 15px !default;
+$mask-prepend-outline-label-bottom-top: 18px !default;
+$mask-prepend-outline-label-top-top: 15px !default;
+$mask-prepend-filled-label-bottom-top: 19px !default;
+$mask-prepend-filled-label-top-top: 17px !default;
+$mask-bigger-prepend-label-bottom-top: 21px !default;
+$mask-bigger-prepend-label-top-top: 15px !default;
+$mask-bigger-prepend-outline-label-bottom-top: 21px !default;
+$mask-bigger-prepend-outline-label-top-top: 15px !default;
+$mask-bigger-prepend-filled-label-bottom-top: 21px !default;
+$mask-bigger-prepend-filled-label-top-top: 15px !default;

package/styles/maskedtextbox/_bootstrap5.3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $mask-font-family: $font-family !default;
 $mask-font-size: $text-sm !default;
 $mask-bigger-font-size: $text-base !default;
@@ -5,3 +7,18 @@ $mask-bigger-font-size: $text-base !default;
 // color
 
 $mask-error-color: $danger !default;
+$mask-bigger-min-height: 40px !default;
+$mask-min-height: 33px !default;
+
+$mask-prepend-label-bottom-top: 18px !default;
+$mask-prepend-label-top-top: 15px !default;
+$mask-prepend-outline-label-bottom-top: 18px !default;
+$mask-prepend-outline-label-top-top: 15px !default;
+$mask-prepend-filled-label-bottom-top: 19px !default;
+$mask-prepend-filled-label-top-top: 17px !default;
+$mask-bigger-prepend-label-bottom-top: 18px !default;
+$mask-bigger-prepend-label-top-top: 15px !default;
+$mask-bigger-prepend-outline-label-bottom-top: 21px !default;
+$mask-bigger-prepend-outline-label-top-top: 15px !default;
+$mask-bigger-prepend-filled-label-bottom-top: 21px !default;
+$mask-bigger-prepend-filled-label-top-top: 15px !default;