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

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

@@ -3,7 +3,7 @@
     .k-listview {
         margin: 0;
         padding: 0;
-        border-width: $listview-border-width;
+        border-width: 0;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
@@ -23,7 +23,6 @@
     // Header
     .k-listview-header {
         border-width: 0;
-        border-bottom-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -32,7 +31,7 @@
     }
 
 
-    // Listview contnet
+    // Listview content
     .k-listview-content {
         margin: 0;
         padding: 0;
@@ -87,7 +86,6 @@
     // Listview footer
     .k-listview-footer {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-style: solid;
         border-color: inherit;
     }
@@ -99,14 +97,9 @@
     // Listview pager
     .k-listview-pager {
         border-width: 0;
-        border-top-width: $listview-border-width;
         border-color: inherit;
         font: inherit;
     }
-    .k-listview-pager-top {
-        border-top-width: 0;
-        border-bottom-width: $listview-border-width;
-    }
     .k-listview-bordered > .k-listview-pager-top {
         border-bottom-width: $listview-border-width;
     }

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

@@ -3,12 +3,19 @@
     // Layout
     .k-map {
         height: 600px;
+        box-sizing: border-box;
         border-width: $map-border-width;
         border-style: solid;
         font-size: $map-font-size;
         line-height: $map-line-height;
         font-family: $map-font-family;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Scroll
         .km-scroll-wrapper {
@@ -79,6 +86,11 @@
             line-height: 1;
             box-shadow: none;
             position: absolute;
+
+            .k-icon {
+                min-width: 0;
+                min-height: 0;
+            }
         }
         .k-navigator-n,
         .k-navigator-up {

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

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}

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

@@ -14,6 +14,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > iframe {
             width: 100%;
             height: 100%;
@@ -62,6 +68,9 @@
         padding: 0 (14px / 2);
         align-items: center;
     }
+    .k-mediaplayer-volume {
+        width: 100px;
+    }
 
 
     // Seekbar
@@ -69,8 +78,9 @@
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: -17px;
+        top: 0;
         left: 0;
+        transform: translateY( -50% );
     }
     .k-mediaplayer-seekbar .k-slider-track {
         // sass-lint:disable no-important
@@ -78,6 +88,9 @@
         // sass-lint:enable no-important
         border-radius: 0;
     }
+    .k-mediaplayer-seekbar .k-slider-selection {
+        border-radius: 0;
+    }
 
     .k-mediaplayer-fullscreen {
         z-index: 10000;

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

@@ -21,10 +21,12 @@
 
     // Menu item
     .k-menu-item {
+        box-sizing: border-box;
         border-width: 0;
         outline: 0;
         display: flex;
-        flex: 0 0 auto;
+        flex-flow: column nowrap;
+        flex: none;
         position: relative;
         user-select: none;
     }
@@ -36,7 +38,7 @@
         outline: 0;
         color: inherit;
         display: flex;
-        flex-direction: row;
+        flex-flow: row nowrap;
         flex: 1 1 auto;
         align-items: center;
         position: relative;
@@ -51,10 +53,22 @@
     }
 
 
+    // Menu item text
+    .k-menu-link-text {
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+
     // Expand arrow
     .k-menu-expand-arrow {
         margin-left: $icon-spacing;
         margin-right: -$icon-spacing;
+        display: inline-flex;
+        flex-flow: row wrap;
+        align-items: center;
+        flex: none;
         position: relative;
     }
     .k-menu-expand-arrow.k-i-arrow-60-left,
@@ -101,6 +115,14 @@
         > .k-menu-item > .k-menu-link {
             padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
             padding-right: $menu-popup-item-padding-end;
+
+            .k-menu-expand-arrow {
+                margin: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: $icon-spacing;
+            }
         }
 
         > .k-separator {
@@ -153,6 +175,14 @@
         .k-menu-link {
             padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
             padding-right: $menu-popup-item-padding-end;
+
+            .k-menu-expand-arrow {
+                margin: 0;
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: $icon-spacing;
+            }
         }
 
         .k-separator {
@@ -160,7 +190,7 @@
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
-            border-color: $panel-border;
+            border-color: $component-border;
             display: block;
         }
     }
@@ -188,11 +218,14 @@
     .k-context-menu-popup {
         z-index: 12000;
 
-        > .k-popup:not(.k-menu-popup),
         .k-context-menu {
-            border: 0;
+            border-width: 0;
         }
     }
+    .k-popup .k-context-menu,
+    .k-context-menu-popup .k-context-menu {
+        border-width: 0;
+    }
 
 
     // Scrolling
@@ -282,6 +315,11 @@
             > .k-menu-item > .k-menu-link {
                 padding-right: $menu-popup-item-padding-x;
                 padding-left: $menu-popup-item-padding-end;
+
+                .k-menu-expand-arrow {
+                    right: auto;
+                    left: $icon-spacing;
+                }
             }
         }
 
@@ -292,6 +330,11 @@
             .k-menu-link {
                 padding-right: $menu-popup-item-padding-x;
                 padding-left: $menu-popup-item-padding-end;
+
+                .k-menu-expand-arrow {
+                    right: auto;
+                    left: $icon-spacing;
+                }
             }
 
         }

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

@@ -26,7 +26,8 @@
                 );
             }
 
-            > .k-state-active {
+            > .k-state-active,
+            &.k-state-selected {
                 @include fill(
                     $menu-item-expanded-text,
                     $menu-item-expanded-bg,
@@ -36,6 +37,7 @@
             }
 
             &:focus,
+            &.k-state-focus,
             &.k-state-focused {
                 @include box-shadow( $menu-item-focus-shadow );
             }
@@ -69,7 +71,8 @@
                 );
             }
 
-            > .k-state-active {
+            > .k-state-active,
+            &.k-state-selected {
                 @include fill(
                     $menu-popup-item-expanded-text,
                     $menu-popup-item-expanded-bg,
@@ -79,6 +82,7 @@
             }
 
             &:focus,
+            &.k-state-focus,
             &.k-state-focused {
                 @include box-shadow( $menu-popup-item-focus-shadow );
             }

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

@@ -33,7 +33,7 @@ $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: $list-item-focused-shadow !default;
 
-$menu-separator-spacing: 2px !default;
+$menu-separator-spacing: map-get( $spacing, 1 ) !default;
 
 $menu-scroll-button-bg: $component-bg !default;
 $menu-scroll-button-text: $link-text !default;

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

@@ -19,6 +19,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-loading-hidden {
             visibility: hidden;
         }
@@ -64,8 +70,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} + #{$button-padding-y /2} + 2px );
+                padding: ($button-padding-y / 4) ($button-padding-x / 2);
                 margin: $padding-y-sm 0 0 $padding-y-sm;
                 cursor: default;
                 display: inline-flex;

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

@@ -33,6 +33,12 @@
         display: block;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-notification-wrap {

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

@@ -1,37 +1,31 @@
-@include exports("numerictextbox/layout") {
+@include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
     .k-numerictextbox {
+        @include border-radius( $input-border-radius );
         width: $input-default-width;
-        border-width: 0;
+        border-width: $input-border-width;
+        border-style: solid;
         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;
+        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-numeric-wrap {
-            @include border-radius( $input-border-radius );
-            padding: 0;
-            width: 100%;
-            border-width: $input-border-width;
-            border-style: solid;
+        *,
+        *::before,
+        *::after {
             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;
-            overflow: hidden;
         }
 
 
@@ -48,7 +42,7 @@
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
+            outline: 0;
             display: flex;
             flex-direction: column;
             align-items: stretch;
@@ -61,7 +55,6 @@
         .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;
@@ -81,13 +74,6 @@
         .k-link-decrease .k-icon {
             top: -$spinner-icon-offset;
         }
-
-
-        // RTL
-        .k-rtl &,
-        &[dir="rtl"] {
-            text-align: right;
-        }
     }
 
 }

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

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

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

@@ -1,28 +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-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;

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

@@ -9,6 +9,12 @@
         font-family: $orgchart-font-family;
         line-height: $orgchart-line-height;
         overflow: auto;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-orgchart-container {

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

@@ -40,10 +40,10 @@ $orgchart-card-shadow: $card-shadow !default;
 $orgchart-card-focus-shadow: $card-focus-shadow !default;
 
 $orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: $font-size-lg !default;
+$orgchart-card-title-font-size: null !default;
 
 $orgchart-card-subtitle-margin-bottom: 0px !default;
-$orgchart-card-subtitle-font-size: $font-size !default;
+$orgchart-card-subtitle-font-size: null !default;
 
 $orgchart-card-body-border-width: 2px 0 0 !default;
 $orgchart-card-body-border-color: transparent !default;

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

@@ -18,6 +18,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-link {
             text-decoration: none;
             outline: 0;
@@ -70,7 +76,6 @@
     %base-pager-item {
         min-width: $button-calc-size;
         height: $button-calc-size;
-        box-sizing: border-box;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -230,7 +235,6 @@
             }
 
             height: $button-calc-size;
-            box-sizing: border-box;
             border-color: inherit;
         }
 

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

@@ -62,5 +62,5 @@ $pager-number-focus-opacity: .12 !default;
 $pager-number-focus-bg: transparent !default;
 $pager-number-focus-shadow: inset 0 0 0 2px rgba($pager-number-selected-bg, $pager-number-focus-opacity) !default;
 
-$pager-input-width: 3em !default;
+$pager-input-width: 5em !default;
 $pager-dropdown-width: 5em !default;