@progress/kendo-theme-default 4.42.1-dev.2 → 5.0.0-alpha.2

package/scss/dropdownlist/_layout.scss

@@ -1,105 +1,10 @@
 @include exports("dropdownlist/layout") {
 
-    .k-dropdown {
-        width: $input-default-width;
-        border-width: 0;
-        outline: 0;
-        background: none;
-        box-sizing: border-box;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
-        text-align: left;
-        white-space: nowrap;
-        display: inline-flex;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        .k-dropdown-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            display: flex;
-            flex-flow: row nowrap;
-            border-width: 1px;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: pointer;
-            outline: 0;
-
-
-            // Input
-            .k-input {}
-
-
-            // Select
-            .k-select {
-                @include border-right-radius-only( $input-border-radius );
-                padding: $picker-select-padding-y $picker-select-padding-x;
-                width: if( $use-picker-select-width, $button-inner-calc-size, null );
-                border-width: 0;
-                box-sizing: border-box;
-                border-style: solid;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex: 0 0 auto;
-                text-align: center;
-                cursor: pointer;
-            }
-        }
-
-    }
-
-
-    // RTL
-
-    .k-dropdown.k-rtl,
-    .k-dropdown[dir="rtl"],
-    .k-rtl .k-dropdown,
-    [dir="rtl"] .k-dropdown {
-        text-align: right;
-
-        .k-select {
-            @include border-left-radius-only( $input-border-radius );
-        }
-    }
-
-
-
-    // Dropdown operator
-    .k-dropdown-operator {
-        width: auto;
-
-        .k-dropdown-wrap {
-            .k-input {
-                display: none;
-            }
-            .k-select {
-                width: $button-inner-calc-size;
-                height: $button-inner-calc-size;
-            }
-        }
-
-    }
+    // Dropdown list
+    .k-dropdown-list {}
 
 
     // Native select
-    select.k-dropdown {
-        @include border-radius( $input-border-radius );
-        padding: $input-padding-y $input-padding-x;
-        border-width: 1px;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        transition: all .1s ease; // sass-lint:disable-block no-transition-all
-        cursor: pointer;
-    }
+    select.k-dropdown-list {}
 
 }

package/scss/dropdownlist/_theme.scss

@@ -1,97 +1,9 @@
 @include exports( "dropdownlist/theme" ) {
 
-    .k-dropdown {
-
-        .k-dropdown-wrap {
-            @include fill(
-                $dropdownlist-text,
-                $dropdownlist-bg,
-                $dropdownlist-border,
-                $dropdownlist-gradient
-            );
-
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $dropdownlist-hovered-text,
-                    $dropdownlist-hovered-bg,
-                    $dropdownlist-hovered-border,
-                    $dropdownlist-hovered-gradient
-                );
-            }
-
-            &.k-state-active {}
-
-            // Focused state
-            &.k-state-focused {
-                @include fill(
-                    $dropdownlist-focused-text,
-                    $dropdownlist-focused-bg,
-                    $dropdownlist-focused-border,
-                    $dropdownlist-focused-gradient
-                );
-                @include box-shadow($dropdownlist-focused-shadow);
-            }
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-        // Invalid
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            > .k-dropdown-wrap {
-                border-color: $invalid-border;
-
-                &:focus,
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-
-    }
+    // Dropdown list
+    .k-dropdown-list {}
 
     // Native select
-    select.k-dropdown {
-        @include fill(
-            $dropdownlist-text,
-            $dropdownlist-bg,
-            $dropdownlist-border,
-            $dropdownlist-gradient
-        );
-
-        // Hover state
-        &:hover {
-            @include fill(
-                $dropdownlist-hovered-text,
-                $dropdownlist-hovered-bg,
-                $dropdownlist-hovered-border,
-                $dropdownlist-hovered-gradient
-            );
-        }
-
-        // Focused state
-        &:focus {
-            @include fill(
-                $dropdownlist-focused-text,
-                $dropdownlist-focused-bg,
-                $dropdownlist-focused-border,
-                $dropdownlist-focused-gradient
-            );
-            @include box-shadow($dropdownlist-focused-shadow);
-        }
-    }
+    select.k-dropdown-list {}
 
 }

package/scss/dropdownlist/_variables.scss

@@ -1,16 +1,16 @@
 // Dropdownlist
-$dropdownlist-bg: $button-bg !default;
-$dropdownlist-text: $button-text !default;
-$dropdownlist-border: $button-border !default;
-$dropdownlist-gradient: $button-gradient !default;
+$dropdownlist-bg: $kendo-button-bg !default;
+$dropdownlist-text: $kendo-button-text !default;
+$dropdownlist-border: $kendo-button-border !default;
+$dropdownlist-gradient: $kendo-button-gradient !default;
 
-$dropdownlist-hovered-bg: $button-hovered-bg !default;
-$dropdownlist-hovered-text: $button-hovered-text !default;
-$dropdownlist-hovered-border: $button-hovered-border !default;
-$dropdownlist-hovered-gradient: $button-hovered-gradient !default;
+$dropdownlist-hovered-bg: $kendo-button-hover-bg !default;
+$dropdownlist-hovered-text: $kendo-button-hover-text !default;
+$dropdownlist-hovered-border: $kendo-button-hover-border !default;
+$dropdownlist-hovered-gradient: $kendo-button-hover-gradient !default;
 
 $dropdownlist-focused-bg: null !default;
 $dropdownlist-focused-text: null !default;
 $dropdownlist-focused-border: null !default;
 $dropdownlist-focused-gradient: null !default;
-$dropdownlist-focused-shadow: $input-focused-shadow !default;
+$dropdownlist-focused-shadow: $kendo-input-focus-shadow !default;

package/scss/dropdowntree/_layout.scss

@@ -1,29 +1,6 @@
 @include exports("dropdowntree/layout") {
 
-    .k-dropdowntree {
-        @extend .k-multiselect;
-        @extend .k-dropdown;
-        width: $input-default-width;
-    }
+    // Dropdown tree
+    .k-dropdown-tree {}
 
-    // Dropdowntree popup
-    .k-popup-dropdowntree {
-        padding: 0;
-
-        .k-list-filter {
-            box-shadow: $dropdowntree-filter-shadow;
-            margin: 0 0 $dropdowntree-filter-spacer;
-        }
-
-        .k-check-all {
-            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x 0;
-        }
-        .k-list-filter .k-check-all {
-            padding-top: 0;
-        }
-
-        .k-treeview {
-            padding: $dropdowntree-popup-spacer-y $dropdowntree-popup-spacer-x;
-        }
-    }
 }

package/scss/dropdowntree/_theme.scss

@@ -1,5 +1,6 @@
 @include exports("dropdowntree/theme") {
 
-    // Dropdown tree doesn't need any theme, because it extends dropdown list and multiselects
+    // Dropdown tree
+    .k-dropdown-tree {}
 
 }

package/scss/editor/_layout.scss

@@ -171,9 +171,9 @@
 
         // Tool
         .k-tool {
-            padding: $button-padding-y;
-            width: $button-calc-size;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            width: $kendo-button-calc-size;
+            height: $kendo-button-calc-size;
         }
         .k-tool-text {
             display: none;
@@ -249,7 +249,7 @@
 
     // Editable area
     .k-editable-area {
-        padding: $input-padding-y;
+        padding: $kendo-input-padding-y;
         width: 100%;
         height: 100%;
         border-width: 0;
@@ -266,7 +266,7 @@
         }
 
         .k-resizable & {
-            padding: $input-padding-y $input-padding-y 16px;
+            padding: $kendo-input-padding-y $kendo-input-padding-y 16px;
         }
     }
 
@@ -323,16 +323,6 @@
         }
     }
 
-    .k-editor-widget .k-colorpicker {}
-
-    .k-rtl .k-editor .k-editor-widget .k-dropdown-wrap {
-        padding-left: 0;
-
-        .k-select {
-            border-width: 0;
-        }
-    }
-
     // Find and replace dialog
     .k-editor-find-replace {
         .k-content {
@@ -387,7 +377,7 @@
 
         .k-edit-label {
             width: 30%;
-            padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
+            padding: calc( #{$padding-y} + #{$kendo-input-border-width} ) 0;
         }
 
         .k-edit-field {
@@ -552,8 +542,8 @@
 
         .k-breadcrumbs-wrap {
             position: absolute;
-            left: $input-padding-x;
-            top: $input-padding-y;
+            left: $kendo-input-padding-x;
+            top: $kendo-input-padding-y;
 
             .k-icon {
                 position: static;
@@ -591,37 +581,9 @@
             }
         }
 
-        // Generic widgets
-        .k-numerictextbox {
-            width: 10em;
-
-            & + .k-dropdown {
-                width: 4em;
-            }
-
-            & + .k-colorpicker,
-            & + .k-dropdown {
-                margin-left: $padding-x-sm;
-            }
-        }
-
-        .k-colorpicker {
-            vertical-align: middle;
-        }
-
         .k-edit-field > .k-checkbox {
             position: relative; // fix scrolling
         }
-
-        // Align
-        .k-dropdown.k-align {
-            width: auto;
-        }
-
-        // Summary textarea
-        .k-textbox.k-editor-accessibility-summary {
-            height: auto;
-        }
     }
 
 
@@ -632,8 +594,8 @@
             flex-flow: row wrap;
         }
         .k-list .k-item {
-            padding: $button-padding-y;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             justify-content: center;
             flex: 1 0 33%;

package/scss/editor/_variables.scss

@@ -4,8 +4,8 @@ $editor-font-family: $font-family !default;
 $editor-font-size: $font-size !default;
 $editor-line-height: $line-height !default;
 
-$editor-placeholder-text: $input-placeholder-text !default;
-$editor-placeholder-opacity: $input-placeholder-opacity !default;
+$editor-placeholder-text: $kendo-input-placeholder-text !default;
+$editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
 $editor-selected-text: $primary-contrast !default;
 $editor-selected-bg: $primary !default;

package/scss/fab/_variables.scss

@@ -53,9 +53,9 @@ $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: $button-text !default;
-$fab-item-icon-bg: $button-bg !default;
-$fab-item-icon-border: $button-border !default;
+$fab-item-icon-text: $kendo-button-text !default;
+$fab-item-icon-bg: $kendo-button-bg !default;
+$fab-item-icon-border: $kendo-button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;

package/scss/filter/_layout.scss

@@ -39,10 +39,6 @@
             .k-toolbar {
                 border-style: solid;
             }
-
-            .k-filter-operator .k-dropdown {
-                width: $filter-operator-dropdown-width;
-            }
         }
 
         .k-filter-item {

package/scss/floating-label/_layout.scss

@@ -2,10 +2,8 @@
 
 
     // Floating label
-    .k-textbox-container,
     .k-floating-label-container {
         padding-top: $floating-label-height;
-        width: $input-default-width;
         display: inline-flex;
         vertical-align: middle;
         position: relative;
@@ -28,7 +26,6 @@
             pointer-events: none;
         }
 
-        > .k-textbox,
         > .k-widget {
             flex: 1 1 auto;
             width: auto;

package/scss/floating-label/_theme.scss

@@ -1,8 +1,6 @@
 @include exports( "floating-label/theme" ) {
 
     // Floating label
-    .k-textbox-container,
-    .k-textarea-container,
     .k-floating-label-container {
 
         > .k-label {

package/scss/floating-label/_variables.scss

@@ -1,10 +1,10 @@
 // Floating label
 $floating-label-scale: 1 !default;
-$floating-label-font-size: $input-font-size !default;
-$floating-label-line-height: $input-line-height !default;
+$floating-label-font-size: $kendo-input-font-size !default;
+$floating-label-line-height: $kendo-input-line-height !default;
 $floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
-$floating-label-offset-x: calc( #{$input-padding-x} + #{$input-border-width} ) !default;
-$floating-label-offset-y: calc( #{$floating-label-height} + #{$input-border-width} + #{$input-padding-y} ) !default;
+$floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
+$floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
 $floating-label-focus-scale: 1 !default;
 $floating-label-focus-offset-x: 0 !default;

package/scss/forms/_layout.scss

@@ -106,16 +106,12 @@
         }
 
         .k-form-field,
-        .k-form-buttons,
-        .k-daterangepicker .k-textbox-container {
+        .k-form-buttons {
             margin-top: $form-field-margin-top;
         }
 
-        > *,
-        .k-daterangepicker .k-textbox-container {
-            &:first-child {
-                margin-top: 0;
-            }
+        > &:first-child {
+            margin-top: 0;
         }
 
 
@@ -144,28 +140,12 @@
             margin: 0 $padding-x;
         }
 
-        .k-textbox,
-        .k-textarea,
-        .k-autocomplete,
-        .k-combobox,
-        .k-dropdown,
+
         .k-multiselect,
-        .k-dateinput,
-        .k-datepicker,
-        .k-datetimepicker,
-        .k-daterangepicker-wrap,
-        .k-timepicker,
-        .k-numerictextbox,
-        .k-maskedtextbox,
-        .k-textbox-container,
         .k-floating-label-container {
             display: inline-flex;
             width: 100%;
         }
-
-        .k-editor .k-dropdown {
-            width: $input-default-width;
-        }
     }
 
     // Form Buttons Container
@@ -320,7 +300,7 @@
                 width: $inline-form-element-width;
                 text-align: right;
                 line-height: $line-height;
-                padding: calc( #{$padding-y} + #{$input-border-width} ) 0;
+                padding: calc( #{$padding-y} + #{$kendo-input-border-width} ) 0;
                 padding-right: $padding-x-lg;
                 align-self: center;
             }
@@ -407,7 +387,7 @@
 
     .k-edit-label {
         margin: 0 0 $spacer-y 0;
-        padding: calc( #{$input-padding-y} + #{$input-border-width} ) 0;
+        padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
         line-height: $form-line-height;
         text-align: right;
@@ -422,21 +402,16 @@
         position: relative;
 
         &.k-no-editor {
-            padding: calc( #{$input-padding-y} + #{$input-border-width} ) 0;
+            padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         }
     }
 
     .k-edit-field {
 
-        > .k-widget,
-        > .k-textbox,
-        > .k-textarea {
+        > .k-widget {
             width: 100%;
             box-sizing: border-box;
         }
-        > .k-colorpicker {
-            width: auto;
-        }
 
         input[type="radio"]:not(.k-radio),
         input[type="checkbox"]:not(.k-checkbox) {

package/scss/gantt/_layout.scss

@@ -218,9 +218,9 @@
             }
             .k-gantt-pdf,
             .k-gantt-create {
-                padding: $button-padding-y;
-                width: $button-calc-size;
-                height: $button-calc-size;
+                padding: $kendo-button-padding-y;
+                width: $kendo-button-calc-size;
+                height: $kendo-button-calc-size;
 
                 .k-button-icon {}
                 .k-button-text {