feat(combobox): add size, shape and color customization to combobox

BREAKING CHANGE: Use high-level input for combobox base

Combobox reuses the input base component size, rounded and fill
component options.

packages/bootstrap/scss/combobox/_layout.scss

@@ -1,13 +1 @@
 @import "~@progress/kendo-theme-default/scss/combobox/_layout.scss";
-
-@include exports( "combobox/layout/bootstrap" ) {
-
-    .k-combobox {
-        transition: $transition;
-
-        .k-select {
-            transition: $transition;
-        }
-    }
-
-}

packages/default/scss/combobox/_layout.scss

@@ -1,60 +1,6 @@
 @include exports( "combobox/layout" ) {
 
     // Combobox
-    .k-combobox {
-        @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;
-        }
-
-
-        // Select
-        .k-select {
-            // padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $kendo-input-spinner-width, null );
-            border-width: 0;
-            border-inline-start-width: $kendo-input-button-width;
-            border-style: solid;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            justify-content: center;
-            flex: 0 0 auto;
-            cursor: pointer;
-        }
-    }
+    .k-combobox {}
 
 }

packages/default/scss/combobox/_theme.scss

@@ -1,86 +1,6 @@
 @include exports( "combobox/theme" ) {
 
-    .k-combobox {
-        @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);
-            }
-        }
-
-
-        // Select
-        .k-select {
-            @include fill(
-                $kendo-button-text,
-                $kendo-button-bg,
-                $kendo-button-border,
-                $kendo-button-gradient
-            );
-        }
-        .k-select:hover,
-        .k-select.k-state-hover {
-            @include fill(
-                $kendo-button-hover-text,
-                $kendo-button-hover-bg,
-                $kendo-button-hover-border,
-                $kendo-button-hover-gradient
-            );
-        }
-        .k-select:active,
-        .k-select.k-state-active {
-            @include fill(
-                $kendo-button-active-text,
-                $kendo-button-active-bg,
-                $kendo-button-active-border,
-                $kendo-button-active-gradient
-            );
-        }
-    }
+    // Combobox
+    .k-combobox {}
 
 }

packages/default/scss/forms/_layout.scss

@@ -140,7 +140,6 @@
         }
 
 
-        .k-combobox,
         .k-dropdown,
         .k-multiselect,
         .k-dateinput,

packages/default/scss/spreadsheet/_layout.scss

@@ -117,18 +117,6 @@
         border-width: 0 1px 0 0;
         border-style: solid;
         border-color: inherit;
-
-        .k-combobox {
-            width: 100%;
-            font-size: inherit;
-        }
-        .k-combobox .k-dropdown-wrap {
-            @include border-radius( 0 );
-            border-width: 0;
-        }
-        .k-combobox .k-select {
-            @include border-radius( 0 );
-        }
     }
     .k-spreadsheet-formula-bar {
         border-color: inherit;

packages/material/scss/combobox/_layout.scss

@@ -1,12 +1 @@
 @import "~@progress/kendo-theme-default/scss/combobox/_layout.scss";
-
-@include exports( "combobox/layout/material" ) {
-
-    // Combobox
-    .k-combobox {
-        @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
-    }
-
-}