@progress/kendo-theme-default 4.42.0 → 5.0.0-alpha.1

package/scss/maskedtextbox/_theme.scss

@@ -1,24 +1,6 @@
 @include exports("maskedtextbox/theme") {
 
-    .k-maskedtextbox {
+    // Masked textbox
+    .k-maskedtextbox {}
 
-        .k-i-warning {
-            color: $error;
-        }
-
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-textbox {
-                border-color: $invalid-border;
-            }
-
-            &:focus,
-            &.k-state-focused {
-                .k-textbox {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
 }

package/scss/menu/_layout.scss

@@ -86,7 +86,6 @@
             height: auto;
             border-width: 0 0 0 1px;
             border-style: solid;
-            flex-shrink: 0;
         }
     }
 

package/scss/multiselect/_layout.scss

@@ -2,15 +2,15 @@
 
     // Base
     .k-multiselect {
-        @include border-radius( $input-border-radius );
+        @include border-radius( $kendo-input-border-radius );
         width: $multiselect-width;
         border-width: 0;
         box-sizing: border-box;
         outline: 0;
         background: none;
-        font-family: $input-font-family;
-        font-size: $input-font-size;
-        line-height: $input-line-height;
+        font-family: $kendo-input-font-family;
+        font-size: $kendo-input-font-size;
+        line-height: $kendo-input-line-height;
         text-align: left;
         white-space: nowrap;
         display: inline-flex;
@@ -24,8 +24,8 @@
         }
 
         .k-multiselect-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0 $input-icon-width 0 0;
+            @include border-radius( $kendo-input-border-radius );
+            padding: 0 $kendo-input-icon-width 0 0;
             width: 100%;
             border-width: 1px;
             border-style: solid;
@@ -44,7 +44,7 @@
             &::before {
                 content: "";
                 width: 0;
-                height: $input-inner-calc-height;
+                height: $kendo-input-inner-calc-height;
                 float: left;
             }
 
@@ -64,8 +64,8 @@
 
             // Token
             .k-button {
-                min-height: calc( #{$form-line-height-em} + #{$button-padding-y-sm} + 2px );
-                padding: ($button-padding-y-sm / 2) ($button-padding-x / 2);
+                min-height: calc( #{$form-line-height-em} + #{$kendo-button-padding-y-sm} + 2px );
+                padding: ($kendo-button-padding-y-sm / 2) ($kendo-button-padding-x / 2);
                 margin: $padding-y-sm 0 0 $padding-y-sm;
                 cursor: default;
                 display: inline-flex;
@@ -98,8 +98,8 @@
             }
 
             .k-i-loading {
-                width: $input-icon-width;
-                height: $input-icon-height;
+                width: $kendo-input-icon-width;
+                height: $kendo-input-icon-height;
                 position: absolute;
                 top: 0;
                 right: 0;
@@ -107,26 +107,18 @@
 
             // Clear value
             .k-clear-value {
-                visibility: hidden;
                 position: absolute;
                 top: 0;
                 right: 0;
             }
-            &:hover,
-            &.k-state-hover,
-            &.k-state-focused {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
 
             // Select
             > .k-select {
                 position: absolute;
                 top: 0;
                 right: 0;
-                width: $input-icon-width;
-                height: $input-icon-height;
+                width: $kendo-input-icon-width;
+                height: $kendo-input-icon-height;
                 flex-shrink: 0;
                 display: inline-flex;
                 align-items: center;
@@ -140,23 +132,12 @@
             right: $multiselect-clear-right;
         }
 
-
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            > .k-multiselect-wrap {
-                .k-clear-value {
-                    visibility: visible;
-                }
-            }
-        }
-
         &[dir="rtl"],
         .k-rtl & {
             text-align: right;
 
             .k-multiselect-wrap {
-                padding-left: $input-icon-width;
+                padding-left: $kendo-input-icon-width;
                 padding-right: 0;
 
                 &::before,
@@ -170,7 +151,7 @@
 
                     .k-input {
                         padding-left: 0;
-                        padding-right: $input-padding-x;
+                        padding-right: $kendo-input-padding-x;
                     }
                 }
 

package/scss/multiselect/_variables.scss

@@ -15,23 +15,23 @@ $multiselect-remove-hover-bg: rgba( $base-text, .54 ) !default;
 $multiselect-remove-focused-text: rgba( $base-text, .54 ) !default;
 $multiselect-remove-focused-bg: rgba($base-bg, .93) !default;
 
-$multiselect-bg: $input-bg !default;
-$multiselect-text: $input-text !default;
-$multiselect-border: $input-border !default;
+$multiselect-bg: $kendo-input-bg !default;
+$multiselect-text: $kendo-input-text !default;
+$multiselect-border: $kendo-input-border !default;
 
-$multiselect-hovered-bg: $input-hovered-bg !default;
-$multiselect-hovered-text: $input-hovered-text !default;
-$multiselect-hovered-border: $input-hovered-border !default;
+$multiselect-hovered-bg: $kendo-input-hover-bg !default;
+$multiselect-hovered-text: $kendo-input-hover-text !default;
+$multiselect-hovered-border: $kendo-input-hover-border !default;
 
-$multiselect-focused-bg: $input-focused-bg !default;
-$multiselect-focused-text: $input-focused-text !default;
-$multiselect-focused-border: $input-focused-border !default;
-$multiselect-focused-shadow: $input-focused-shadow !default;
+$multiselect-focused-bg: $kendo-input-focus-bg !default;
+$multiselect-focused-text: $kendo-input-focus-text !default;
+$multiselect-focused-border: $kendo-input-focus-border !default;
+$multiselect-focused-shadow: $kendo-input-focus-shadow !default;
 
-$multiselect-button-focused-bg: $button-active-bg !default;
-$multiselect-button-focused-text: $button-active-text !default;
-$multiselect-button-focused-border: $button-active-border !default;
-$multiselect-button-focused-gradient: $button-active-gradient !default;
-$multiselect-button-focused-shadow: $button-active-shadow !default;
+$multiselect-button-focused-bg: $kendo-button-active-bg !default;
+$multiselect-button-focused-text: $kendo-button-active-text !default;
+$multiselect-button-focused-border: $kendo-button-active-border !default;
+$multiselect-button-focused-gradient: $kendo-button-active-gradient !default;
+$multiselect-button-focused-shadow: $kendo-button-active-shadow !default;
 
-$multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
+$multiselect-clear-right: calc( #{$icon-size} + #{$kendo-input-padding-y} ) !default;

package/scss/no-flexbox.scss

@@ -19,8 +19,6 @@
     }
 
     .k-dateinput-wrap,
-    .k-dropdown-wrap,
-    .k-numeric-wrap,
     .k-picker-wrap {
         $k-select-width: 2em;
         display: block;

package/scss/numerictextbox/_layout.scss

@@ -1,108 +1,6 @@
 @include exports("numerictextbox/layout") {
 
-    // Base
-    .k-numerictextbox {
-        width: $input-default-width;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        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-numeric-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $input-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            position: relative;
-            transition: all .1s ease; // sass-lint:disable-line no-transition-all
-            cursor: default;
-            outline: 0;
-            display: flex;
-            flex-flow: row nowrap;
-        }
-
-
-        // Input
-        .k-input {
-            text-overflow: clip;
-        }
-
-
-        // Select
-        .k-select {
-            @include border-right-radius-only( $input-border-radius );
-            padding: 0;
-            width: if( $use-picker-select-width, $spinner-width, null );
-            border-width: 0 0 0 $picker-select-border-width;
-            border-style: solid;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: center;
-            flex: 0 0 auto;
-            text-align: center;
-            cursor: pointer;
-        }
-
-        .k-link {
-            padding: 0 $picker-select-padding-x;
-            min-width: $spinner-min-width;
-            box-sizing: border-box;
-            flex: 1 1 auto;
-            display: block;
-            overflow: hidden;
-            position: relative;
-
-            .k-icon {
-                position: absolute;
-                right: 50%;
-                transform: translateX(50%);
-            }
-        }
-
-        .k-link-increase .k-icon {
-            bottom: -$spinner-icon-offset;
-        }
-
-        .k-link-decrease .k-icon {
-            top: -$spinner-icon-offset;
-        }
-
-        .k-i-warning {
-            align-self: center;
-            margin-right: $spacer-x / 2;
-        }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-
-            .k-numeric-wrap .k-i-warning {
-                align-self: center;
-                margin-right: 0;
-                margin-left: $spacer-x / 2;
-            }
-
-            .k-select {
-                @include border-left-radius-only( $input-border-radius );
-                border-width: 0 $picker-select-border-width 0 0;
-            }
-        }
-    }
+    // Numeric textbox
+    .k-numerictextbox {}
 
 }

package/scss/numerictextbox/_theme.scss

@@ -1,99 +1,6 @@
 @include exports( "numerictextbox/theme" ) {
 
-    // Numeric
-    .k-numerictextbox {
+    // Numeric textbox
+    .k-numerictextbox {}
 
-        .k-i-warning {
-            color: $error;
-        }
-
-        // Normal state
-        .k-numeric-wrap {
-            @include fill(
-                $numeric-text,
-                $numeric-bg,
-                $numeric-border
-            );
-
-
-            // Hover state
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $numeric-hovered-text,
-                    $numeric-hovered-bg,
-                    $numeric-hovered-border
-                );
-            }
-
-
-            // Focus state
-            &.k-state-focused {
-                @include fill(
-                    $numeric-focused-text,
-                    $numeric-focused-bg,
-                    $numeric-focused-border
-                );
-                @include box-shadow($numeric-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);
-                }
-            }
-        }
-
-
-        // Select buttons
-        .k-select {
-            @include fill(
-                $numeric-button-text,
-                $numeric-button-bg,
-                $numeric-button-border,
-                $numeric-button-gradient
-            );
-
-            .k-link:hover,
-            .k-link.k-state-hover {
-                @include fill(
-                    $numeric-button-hovered-text,
-                    $numeric-button-hovered-bg,
-                    $numeric-button-hovered-border,
-                    $numeric-button-hovered-gradient
-                );
-            }
-
-            .k-link:active,
-            .k-link.k-state-active,
-            .k-link.k-state-selected {
-                @include fill(
-                    $numeric-button-pressed-text,
-                    $numeric-button-pressed-bg,
-                    $numeric-button-pressed-border,
-                    $numeric-button-pressed-gradient
-                );
-            }
-        }
-
-
-        // Invalid state
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-numeric-wrap {
-                border-color: $invalid-border;
-
-                &.k-state-focused {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-        }
-    }
 }

package/scss/numerictextbox/_variables.scss

@@ -1,32 +1 @@
-// Numeric Textbox
-$numeric-bg: $input-bg !default;
-$numeric-text: $input-text !default;
-$numeric-border: $input-border !default;
-
-$numeric-hovered-bg: $input-hovered-bg !default;
-$numeric-hovered-text: $input-hovered-text !default;
-$numeric-hovered-border: $input-hovered-border !default;
-
-$numeric-focused-bg: $input-focused-bg !default;
-$numeric-focused-text: $input-focused-text !default;
-$numeric-focused-border: $input-focused-border !default;
-$numeric-focused-shadow: $input-focused-shadow !default;
-
-$numeric-invalid-bg: null !default;
-$numeric-invalid-text: $invalid-text !default;
-$numeric-invalid-border: $invalid-border !default;
-
-$numeric-button-bg: $button-bg !default;
-$numeric-button-text: $button-text !default;
-$numeric-button-border: $button-border !default;
-$numeric-button-gradient: $button-gradient !default;
-
-$numeric-button-hovered-bg: $button-hovered-bg !default;
-$numeric-button-hovered-text: $button-hovered-text !default;
-$numeric-button-hovered-border: $button-hovered-border !default;
-$numeric-button-hovered-gradient: $button-hovered-gradient !default;
-
-$numeric-button-pressed-bg: $button-active-bg !default;
-$numeric-button-pressed-text: $button-active-text !default;
-$numeric-button-pressed-border: $button-active-border !default;
-$numeric-button-pressed-gradient: $button-active-gradient !default;
+// Numeric textbox

package/scss/pager/_layout.scss

@@ -31,11 +31,6 @@
             }
         }
 
-        .k-widget,
-        select.k-dropdown {
-            font-size: inherit;
-        }
-
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
@@ -68,8 +63,8 @@
 
     // Base pager item
     %base-pager-item {
-        min-width: $button-calc-size;
-        height: $button-calc-size;
+        min-width: $kendo-button-calc-size;
+        height: $kendo-button-calc-size;
         box-sizing: border-box;
         color: inherit;
         text-align: center;
@@ -103,7 +98,7 @@
         flex-direction: row;
         position: relative;
 
-        select.k-dropdown {
+        select.k-dropdown-list {
             cursor: pointer;
             display: none;
         }
@@ -171,7 +166,7 @@
     .k-pager-sizes {
         @extend %base-pager-section;
 
-        .k-dropdown,
+        .k-dropdown-list,
         > select {
             margin-right: 1ex;
             width: $pager-dropdown-width;
@@ -179,7 +174,7 @@
 
         .k-rtl &,
         [dir="rtl"] & {
-            .k-dropdown,
+            .k-dropdown-list,
             > select {
                 margin-left: 1ex;
                 margin-right: 0;
@@ -217,7 +212,7 @@
 
         // Show native select
         .k-pager-numbers-wrap {
-            select.k-dropdown {
+            select.k-dropdown-list {
                 width: $pager-dropdown-width;
                 display: flex;
             }
@@ -229,7 +224,7 @@
                 margin-right: $pager-section-spacing;
             }
 
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             border-color: inherit;
         }

package/scss/pager/_variables.scss

@@ -16,7 +16,7 @@ $pager-focus-shadow: $focused-shadow !default;
 
 $pager-section-spacing: $spacer-x !default;
 
-$pager-item-padding-x: $button-padding-y !default;
+$pager-item-padding-x: $kendo-button-padding-y !default;
 $pager-item-padding-y: $pager-item-padding-x !default;
 $pager-item-border-width: 0px !default;
 $pager-item-border-radius: null !default;

package/scss/pdf-viewer/_layout.scss

@@ -94,22 +94,6 @@
             justify-content: flex-start;
             align-items: center;
 
-            .k-textbox {
-                display: inline-flex;
-                padding-right: $pdf-viewer-search-dialog-textbox-padding-x;
-                margin: 0 $pdf-viewer-search-dialog-spacing;
-                align-items: center;
-                background: none;
-            }
-            .k-textbox .k-icon {
-                position: absolute;
-                font-size: inherit;
-
-                .k-ie & {
-                    position: relative;
-                }
-            }
-
             .k-match-case-button {
                 display: inline-flex;
                 height: $pdf-viewer-search-dialog-input-button-height;

package/scss/pdf-viewer/_variables.scss

@@ -26,7 +26,7 @@ $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-bor
 
 $pdf-viewer-search-dialog-spacing: $toolbar-padding-x !default;
 $pdf-viewer-search-dialog-button-spacing: $pdf-viewer-search-dialog-spacing !default;
-$pdf-viewer-search-dialog-textbox-padding-x: $input-padding-y !default;
+$pdf-viewer-search-dialog-textbox-padding-x: $kendo-input-padding-y !default;
 $pdf-viewer-search-dialog-input-button-height: $line-height-em !default;
 $pdf-viewer-search-dialog-matches-width: 4.5em !default;
 

package/scss/pivotgrid/_layout.scss

@@ -247,7 +247,7 @@
                 font-weight: 500;
                 align-items: flex-start;
             }
-            .k-dropdown {
+            .k-dropdown-list {
                 max-width: 90px;
             }
             .k-textbox {
@@ -356,7 +356,7 @@
         .k-icon {
             margin-right: map-get( $spacing, 2 );
         }
-        .k-dropdown {
+        .k-dropdown-list {
             max-width: 100px;
         }
     }
@@ -455,6 +455,27 @@
 }
 
 
+@include exports( "pivotgrid/layout/export" ) {
+
+    .k-pdf-export-shadow {
+
+        .k-pivotgrid {
+            height: auto !important; // sass-lint:disable-line no-important
+        }
+
+        .k-pivotgrid-values  {
+            height: auto;
+            overflow: visible;
+        }
+
+        .k-pivotgrid-column-headers .k-pivotgrid-table {
+            padding-inline-end: 0;
+        }
+
+    }
+}
+
+
 @include exports("pivotgrid/layout/legacy") {
 
     .k-pivot {
@@ -489,11 +510,11 @@
     .k-pivot-toolbar .k-button,
     .k-fieldselector .k-list li.k-item {
         @include border-radius( $border-radius );
-        padding: $button-padding-y $button-padding-x;
-        padding-right: calc( #{$button-padding-x} + #{$icon-size * 3} );
+        padding: $kendo-button-padding-y $kendo-button-padding-x;
+        padding-right: calc( #{$kendo-button-padding-x} + #{$icon-size * 3} );
         min-height: auto;
         font-size: $font-size;
-        line-height: $button-line-height;
+        line-height: $kendo-button-line-height;
         text-align: left;
         white-space: normal;
         word-break: break-word;
@@ -507,8 +528,8 @@
 
     .k-field-actions {
         position: absolute;
-        right: $button-padding-y;
-        top: $button-padding-y;
+        right: $kendo-button-padding-y;
+        top: $kendo-button-padding-y;
         line-height: 1;
         cursor: pointer;
     }

package/scss/pivotgrid/_theme.scss

@@ -193,19 +193,19 @@
     .k-pivot-toolbar .k-button,
     .k-fieldselector .k-list li.k-item {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
 
         &:hover,
         &.k-state-hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
 
@@ -213,10 +213,10 @@
         &:active,
         &.k-state-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
         }
 
@@ -224,7 +224,7 @@
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $button-focused-shadow;
+            box-shadow: $kendo-button-focus-shadow;
         }
 
         &.k-empty {