@progress/kendo-theme-classic 4.43.1-dev.0 → 4.43.1-dev.4

package/modules/@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss

@@ -1,51 +1,37 @@
-@include exports("maskedtextbox/layout") {
+@include exports( "maskedtextbox/layout" ) {
 
     // Masked textbox
     .k-maskedtextbox {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
+        border-width: $input-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
         font-family: $input-font-family;
         font-size: $input-font-size;
         line-height: $input-line-height;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        background: none;
-        text-align: left;
+        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;
 
-        > .k-textbox {
-            flex: 1 0 0%;
-            min-width: 0;
-
-            &.k-state-invalid {
-                transition: none;
-            }
-        }
 
-        .k-i-warning {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: $padding-x;
-        }
+        // Input
+        .k-input {}
 
-        &[dir="rtl"],
-        .k-rtl & {
-            text-align: right;
 
-            .k-i-warning {
-                right: auto;
-                left: $padding-x;
-            }
-        }
-
-        ::-ms-clear {
-            display: none;
+        // Loading icon
+        .k-i-loading {
+            width: $input-icon-width;
+            height: $input-icon-height;
         }
     }
+
 }

package/modules/@progress/kendo-theme-default/scss/maskedtextbox/_theme.scss

@@ -1,28 +1,58 @@
-@include exports("maskedtextbox/theme") {
+@include exports( "maskedtextbox/theme" ) {
 
+    // Masked textbox
     .k-maskedtextbox {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
 
-        .k-i-warning {
-            color: $error;
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
         }
 
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-textbox {
-                border-color: $invalid-border;
-            }
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+        &:focus-within {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+
+
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
 
             .k-input-validation-icon {
                 color: $invalid-text;
             }
 
-            &:focus,
-            &.k-state-focused {
-                .k-textbox {
-                    @include box-shadow($invalid-shadow);
-                }
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
             }
         }
     }
+
 }

package/modules/@progress/kendo-theme-default/scss/mediaplayer/_layout.scss

@@ -48,6 +48,11 @@
         width: 100% !important;
         // sass-lint:enable no-important
         box-shadow: none;
+
+
+        .k-dropdown {
+            width: auto;
+        }
     }
     .k-mediaplayer-time-wrap {
         flex: 1;

package/modules/@progress/kendo-theme-default/scss/menu/_index.scss

@@ -5,6 +5,7 @@
 @import "../common/_index.scss";
 @import "../popup/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/modules/@progress/kendo-theme-default/scss/menu/_layout.scss

@@ -126,7 +126,8 @@
     // Sub menu
     .k-menu-group {
         margin: 0;
-        padding: $menu-popup-padding-y $menu-popup-padding-x;
+        padding: 0;
+        // padding: $menu-popup-padding-y $menu-popup-padding-x;
         font-size: $menu-popup-font-size;
         line-height: $menu-popup-line-height;
         list-style: none;
@@ -174,13 +175,10 @@
     }
     .k-context-menu {
         margin: 0;
-        padding: $menu-popup-padding-y $menu-popup-padding-x;
+        padding: 0;
+        // padding: $menu-popup-padding-y $menu-popup-padding-x;
         border-width: $menu-popup-border-width;
         border-style: solid;
-
-        &.k-menu-horizontal {
-            padding: $menu-popup-padding-x $menu-popup-padding-y;
-        }
     }
     .k-animation-container .k-context-menu.k-menu-horizontal {
         // kendo-jquery adds `display: block` via js and we need to override it.

package/modules/@progress/kendo-theme-default/scss/menu/_variables.scss

@@ -47,8 +47,8 @@ $menu-scroll-button-hover-gradient: null !default;
 
 
 // Menu popup
-$menu-popup-padding-x: $popup-padding-x !default;
-$menu-popup-padding-y: $popup-padding-y !default;
+$menu-popup-padding-x: null !default;
+$menu-popup-padding-y: null !default;
 $menu-popup-border-width: $popup-border-width !default;
 $menu-popup-font-size: $font-size !default;
 $menu-popup-line-height: $line-height !default;

package/modules/@progress/kendo-theme-default/scss/multiselect/_index.scss

@@ -3,12 +3,14 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../forms/_variables.scss";
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../chip/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/modules/@progress/kendo-theme-default/scss/pager/_index.scss

@@ -6,6 +6,7 @@
 @import "../dropdownlist/_index.scss";
 @import "../icons/_index.scss";
 @import "../toolbar/_variables.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/modules/@progress/kendo-theme-default/scss/panelbar/_index.scss

@@ -4,6 +4,7 @@
 // Dependencies
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/modules/@progress/kendo-theme-default/scss/panelbar/_theme.scss

@@ -12,6 +12,15 @@
         > .k-item,
         > .k-panelbar-header {
 
+            &.k-state-expanded.k-level-0 > .k-link {
+                @include fill(
+                    $panelbar-header-expanded-text,
+                    $panelbar-header-expanded-bg,
+                    $panelbar-header-expanded-border,
+                    $panelbar-header-expanded-gradient
+                );
+            }
+
             // Normal
             > .k-link {
                 @include fill(
@@ -48,7 +57,6 @@
                     $panelbar-header-focused-border,
                     $panelbar-header-focused-gradient
                 );
-
                 box-shadow: $panelbar-header-focused-shadow;
             }
 
@@ -145,7 +153,6 @@
                     $panelbar-item-focused-border,
                     $panelbar-item-focused-gradient
                 );
-
                 box-shadow: $panelbar-item-focused-shadow;
             }
 

package/modules/@progress/kendo-theme-default/scss/panelbar/_variables.scss

@@ -95,3 +95,7 @@ $panelbar-item-selected-hovered-focused-text: null !default;
 $panelbar-item-selected-hovered-focused-border: null !default;
 $panelbar-item-selected-hovered-focused-gradient: null !default;
 
+$panelbar-header-expanded-bg: null !default;
+$panelbar-header-expanded-text: null !default;
+$panelbar-header-expanded-border: null !default;
+$panelbar-header-expanded-gradient: null !default;

package/modules/@progress/kendo-theme-default/scss/pivotgrid/_index.scss

@@ -11,6 +11,7 @@
 @import "../utils/_flex.scss";
 @import "../utils/_grid.scss";
 @import "../utils/_position.scss";
+@import "../list/_index.scss";
 
 // Component
 @import "_variables.scss";

package/modules/@progress/kendo-theme-default/scss/pivotgrid/_layout.scss

@@ -261,14 +261,6 @@
         .k-filter-fields {
             margin-top: $pivotgrid-configurator-fields-margin-y;
             flex-wrap: wrap;
-
-            > * {
-                margin-bottom: $pivotgrid-configurator-fields-margin-y;
-            }
-
-            > *:last-child {
-                margin-bottom: 0;
-            }
         }
 
         // Values
@@ -297,20 +289,12 @@
             text-align: center;
         }
 
-        .k-chip-content {
-            padding-inline-end: map-get($spacing, 1);
-        }
-
         .k-treeview {
             padding: $pivotgrid-treeview-padding-y $pivotgrid-treeview-padding-x;
             overflow: auto;
         }
     }
 
-    .k-pivotgrid-configurator-actions {
-        padding: $pivotgrid-configurator-actions-padding-y $pivotgrid-configurator-actions-padding-x;
-    }
-
 
     // Calculated field
     .k-calculated-field {

package/modules/@progress/kendo-theme-default/scss/pivotgrid/_variables.scss

@@ -54,9 +54,6 @@ $pivotgrid-configurator-content-padding-y: 2px !default;
 $pivotgrid-configurator-fields-margin-x: 0px !default;
 $pivotgrid-configurator-fields-margin-y: ( $pivotgrid-spacer / 2 ) !default;
 
-$pivotgrid-configurator-actions-padding-x: ( $pivotgrid-spacer / 2 ) !default;
-$pivotgrid-configurator-actions-padding-y: ( $pivotgrid-spacer * .75 ) !default;
-
 $pivotgrid-configurator-vertical-width: 320px !default;
 $pivotgrid-configurator-horizontal-height: 420px !default;
 

package/modules/@progress/kendo-theme-default/scss/popover/_layout.scss

@@ -13,7 +13,6 @@
         line-height: $popover-line-height;
         display: flex;
         flex-flow: column nowrap;
-        position: absolute;
         z-index: 12000;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;

package/modules/@progress/kendo-theme-default/scss/popup/_index.scss

@@ -3,10 +3,6 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../icons/_index.scss";
-@import "../button/_index.scss";
-@import "../input/_index.scss";
-@import "../forms/_variables.scss";
 
 
 // Component

package/modules/@progress/kendo-theme-default/scss/popup/_layout.scss

@@ -3,7 +3,8 @@
     .k-popup {
         @include border-radius( $popup-border-radius );
         margin: 0;
-        padding: $popup-padding-y $popup-padding-x;
+        padding: 0;
+        // padding: $popup-padding-y $popup-padding-x;
         border-width: $popup-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -20,13 +21,6 @@
         .k-item {
             outline: none;
         }
-
-        .k-rtl,
-        [dir="rtl"] & {
-            .k-list-optionlabel {
-                text-align: right;
-            }
-        }
     }
     .k-animation-container {
         @include border-bottom-radius-only( $border-radius );
@@ -38,92 +32,10 @@
         overflow: visible;
     }
 
-    .k-popup > kendo-list > .k-first {
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-    }
-
-    // Virtual list -> K1 - virtuallist.less
-    .k-popup .k-item.k-first {
-        position: relative;
-    }
-
-    .k-popup > .k-group-header,
-    .k-popup > .k-virtual-wrap > .k-group-header {
-        padding: $popup-header-padding;
-        min-height: $line-height-em;
-        font-size: $popup-header-font-size;
-        white-space: normal;
-        transition: $transition;
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-    }
-    .k-popup > .k-group-header {
-        margin-top: -$popup-padding-y;
-    }
-
-    .k-popup .k-outer-group-header {
-        padding: $popup-header-padding;
-        min-height: $line-height-em;
-        font-size: $popup-header-font-size;
-        white-space: normal;
-
-        &.k-virtual-item {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    }
-
     .k-popup > .k-colorpalette {
         padding: $popup-content-padding-y $popup-content-padding-x;
     }
 
-    .k-popup .k-list .k-item > .k-group {
-        padding: 0 .5em;
-        font-size: ($font-size * .714);
-        line-height: $font-size;
-        text-transform: uppercase;
-        position: absolute;
-        top: 0;
-        right: 0;
-    }
-    .k-popup .k-list .k-item > .k-group::before {
-        content: "";
-        width: $font-size;
-        height: $font-size;
-        border-width: ($font-size / 2);
-        border-style: solid;
-        box-sizing: border-box;
-        display: block;
-        position: absolute;
-        left: -$font-size;
-        bottom: 0;
-    }
-    .k-rtl.k-popup .k-list .k-item > .k-group,
-    [dir="rtl"] .k-popup .k-list .k-item > .k-group {
-        right: auto;
-        left: 0;
-
-        &::before {
-            right: -14px;
-            left: auto;
-        }
-    }
-    .k-group-header + div > .k-list > .k-item.k-first::before {
-        content: " ";
-        display: block;
-        border-top-width: 1px;
-        border-top-style: solid;
-        position: absolute;
-        top: -1px;
-        left: 0;
-        right: 0;
-    }
-
-    .k-popup .k-list > .k-outer-group-header {
-        border-top-width: 1px;
-        border-top-style: solid;
-    }
     // Transparent popup
     .k-popup.k-popup-transparent {
         border-width: 0;
@@ -137,187 +49,6 @@
 }
 
 
-@include exports( "list/layout" ) {
-
-    // Layout
-    .k-list-scroller {
-        position: relative;
-        overflow: auto;
-    }
-    .k-list {
-        height: auto;
-
-        > .k-item {
-            display: flex;
-            align-items: center;
-            align-content: center;
-            cursor: pointer;
-
-            > .k-icon {
-                align-self: center;
-                margin-right: $padding-x;
-            }
-        }
-
-        > .k-custom-item {
-            font-style: italic;
-
-            > .k-i-plus {
-                margin-left: auto;
-                margin-right: 0;
-            }
-        }
-
-        [dir="rtl"] & {
-            > .k-item {
-                > .k-icon {
-                    margin-right: 0;
-                    margin-left: $padding-x;
-                }
-            }
-        }
-    }
-
-    .k-list .k-item,
-    .k-list-optionlabel {
-        padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $line-height-em;
-        line-height: $line-height-em;
-        white-space: normal;
-        transition-property: color, background-color, outline-color, box-shadow;
-        transition-duration: 200ms;
-        transition-timing-function: ease;
-    }
-    .k-list-optionlabel {
-        cursor: pointer;
-        outline: none;
-    }
-
-
-    // Filter
-    .k-list-filter {
-        display: block;
-        position: relative;
-        padding: $padding-x;
-        box-sizing: border-box;
-        flex: 0 0 auto;
-
-        > .k-textbox {
-            // remove the !important declaration when https://github.com/telerik/kendo-ui-core/issues/2617 is fixed
-            width: 100% !important; // sass-lint:disable-block no-important
-            box-sizing: border-box;
-            padding-left: $popup-filter-padding-x;
-            padding-right: calc( #{$icon-size} + #{$padding-x} );
-        }
-
-        > .k-icon {
-            position: absolute;
-            right: calc( #{$input-padding-x} + #{$padding-x} );
-            top: 50%;
-            transform: translateY(-50%);
-        }
-
-
-        .k-rtl &,
-        [dir="rtl"] & {
-
-            > .k-textbox {
-                padding-right: $popup-filter-padding-x;
-                padding-left: calc( #{$icon-size} + #{$padding-x} );
-            }
-            > .k-icon {
-                left: calc( #{$input-padding-x} + #{$padding-x} );
-                right: auto;
-            }
-
-        }
-    }
-
-    .k-dropdown-button .k-popup {
-        .k-item {
-            cursor: pointer;
-        }
-    }
-
-    // SplitButton
-    // TODO: Wait for final design + revise
-    .k-split-button,
-    .k-dropdown-button {
-        .k-list .k-item:focus {
-            outline: none;
-        }
-    }
-
-}
-
-
-
-
-@include exports( "listcontainer/layout" ) {
-
-    .k-list-container {
-
-        .k-button {
-            @include border-radius( 0 );
-            padding: $list-item-padding-y $list-item-padding-x;
-            border-width: 0;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-            line-height: inherit;
-            display: flex;
-            justify-content: flex-start;
-
-            .k-ie11 & {
-                display: flex;
-
-                .k-icon {
-                    margin: 0 $icon-spacing 0 0;
-                }
-            }
-        }
-
-        // Button disabled state
-        .k-button.k-state-disabled {
-            pointer-events: none;
-        }
-
-        .k-nodata {
-            min-height: 138px;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-transform: uppercase;
-            font-weight: lighter;
-            text-align: center;
-            white-space: normal;
-
-            .k-button {
-                display: inline-flex;
-                border-width: 1px;
-            }
-        }
-    }
-
-    .k-virtual-content {
-        overflow-y: scroll;
-        -webkit-overflow-scrolling: touch;
-        position: relative;
-
-        > .k-virtual-list > .k-virtual-item {
-            position: absolute;
-            width: 100%;
-            box-sizing: border-box;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: block;
-            white-space: nowrap;
-        }
-    }
-
-}
-
 
 
 @include exports( "common/decoration/shadow/legacy" ) {