From 995dc3f9694f2bab387096e8ec4192515f4566ad Mon Sep 17 00:00:00 2001
From: joneff <joneff@gmail.com>
Date: Mon, 18 Oct 2021 16:10:09 +0300
Subject: [PATCH] feat(masked-textbox): add size, rounded and fill
 customization to masked textbox

BREAKING CHANGE: Use high-level input for masked textbox base

Masked textbox reuses the input base component size, rounded and fill
component options.
---
 packages/default/scss/forms/_layout.scss      |  1 -
 .../default/scss/maskedtextbox/_layout.scss   | 39 +-------------
 .../default/scss/maskedtextbox/_theme.scss    | 54 +------------------
 .../material/scss/maskedtextbox/_layout.scss  | 11 ----
 .../scss/maskedtextbox/_variables.scss        |  1 +
 5 files changed, 3 insertions(+), 103 deletions(-)

diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss
index ec30ec5cf4f..7458d7cf237 100644
--- a/packages/default/scss/forms/_layout.scss
+++ b/packages/default/scss/forms/_layout.scss
@@ -148,7 +148,6 @@
         .k-datepicker,
         .k-datetimepicker,
         .k-timepicker,
-        .k-maskedtextbox,
         .k-floating-label-container {
             display: inline-flex;
             width: 100%;
diff --git a/packages/default/scss/maskedtextbox/_layout.scss b/packages/default/scss/maskedtextbox/_layout.scss
index c2675215a1a..b97736bb56b 100644
--- a/packages/default/scss/maskedtextbox/_layout.scss
+++ b/packages/default/scss/maskedtextbox/_layout.scss
@@ -1,43 +1,6 @@
 @include exports( "maskedtextbox/layout" ) {
 
     // Masked textbox
-    .k-maskedtextbox {
-        @include border-radius( $kendo-input-border-radius );
-        width: $kendo-input-default-width;
-        border-width: $kendo-input-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        text-align: start;
-        white-space: nowrap;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
-        position: relative;
-        overflow: hidden;
-        transition: all .1s ease; // sass-lint:disable-line no-transition-all
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // Input
-        .k-input {}
-
-
-        // Loading icon
-        .k-i-loading {
-            // width: $kendo-input-icon-width;
-            // height: $kendo-input-icon-height;
-        }
-    }
+    .k-maskedtextbox {}
 
 }
diff --git a/packages/default/scss/maskedtextbox/_theme.scss b/packages/default/scss/maskedtextbox/_theme.scss
index c1a4b1e519c..8e9f5da9116 100644
--- a/packages/default/scss/maskedtextbox/_theme.scss
+++ b/packages/default/scss/maskedtextbox/_theme.scss
@@ -1,58 +1,6 @@
 @include exports( "maskedtextbox/theme" ) {
 
     // Masked textbox
-    .k-maskedtextbox {
-        @include fill(
-            $kendo-input-text,
-            $kendo-input-bg,
-            $kendo-input-border
-        );
-
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $kendo-input-hover-text,
-                $kendo-input-hover-bg,
-                $kendo-input-hover-border
-            );
-        }
-
-        // Focus state
-        &:focus,
-        &.k-state-focus {
-            @include fill(
-                $kendo-input-focus-text,
-                $kendo-input-focus-bg,
-                $kendo-input-focus-border
-            );
-            @include box-shadow( $kendo-input-focus-shadow );
-        }
-        &:focus-within {
-            @include fill(
-                $kendo-input-focus-text,
-                $kendo-input-focus-bg,
-                $kendo-input-focus-border
-            );
-            @include box-shadow( $kendo-input-focus-shadow );
-        }
-
-
-        // Invalid state
-        &.k-invalid,
-        &.ng-invalid,
-        &.k-state-invalid {
-            border-color: $invalid-border;
-
-            .k-input-validation-icon {
-                color: $invalid-text;
-            }
-
-            &:focus-within,
-            &.k-state-focus {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
+    .k-maskedtextbox {}
 
 }
diff --git a/packages/material/scss/maskedtextbox/_layout.scss b/packages/material/scss/maskedtextbox/_layout.scss
index d0249350704..4bcc1834ca9 100644
--- a/packages/material/scss/maskedtextbox/_layout.scss
+++ b/packages/material/scss/maskedtextbox/_layout.scss
@@ -1,12 +1 @@
 @import "~@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss";
-
-@include exports( "maskedtextbox/layout/material" ) {
-
-    // Masked textbox
-    .k-maskedtextbox {
-        @include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
-        border-width: $kendo-input-border-width 0;
-        border-top-color: transparent !important; // sass-lint:disable-line no-important
-    }
-
-}
diff --git a/packages/nouvelle/scss/maskedtextbox/_variables.scss b/packages/nouvelle/scss/maskedtextbox/_variables.scss
index e69de29bb2d..68580fbd566 100644
--- a/packages/nouvelle/scss/maskedtextbox/_variables.scss
+++ b/packages/nouvelle/scss/maskedtextbox/_variables.scss
@@ -0,0 +1 @@
+// Masked textbox