@progress/kendo-theme-default 5.0.0-beta.5 → 5.0.0-beta.6

package/scss/input/_variables.scss

@@ -5,24 +5,24 @@ $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
 $kendo-input-border-radius: null !default;
 
-$kendo-input-padding-x: $padding-x !default;
-$kendo-input-padding-y: $padding-y !default;
+$kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-input-font-family: $font-family !default;
-$kendo-input-font-size: $font-size !default;
-$kendo-input-line-height: $line-height !default;
+$kendo-input-font-size: $font-size-md !default;
+$kendo-input-line-height: $line-height-md !default;
 
-$kendo-input-padding-x-sm: ($kendo-input-padding-x / 2) !default;
-$kendo-input-padding-y-sm: ($kendo-input-padding-y / 2) !default;
+$kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-input-font-size-sm: $font-size-md !default;
 $kendo-input-line-height-sm: $line-height-md !default;
 
-$kendo-input-padding-x-md: $kendo-input-padding-x !default;
-$kendo-input-padding-y-md: $kendo-input-padding-y !default;
+$kendo-input-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: ($kendo-input-padding-x * 1.5) !default;
-$kendo-input-padding-y-lg: ($kendo-input-padding-y * 1.5) !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 $kendo-input-font-size-lg: $font-size-md !default;
 $kendo-input-line-height-lg: $line-height-md !default;
 
@@ -32,21 +32,27 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-padding-y-sm,
         font-size: $kendo-input-font-size-sm,
         line-height: $kendo-input-line-height-sm,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-sm * 2} ),
+        button-padding-x: $kendo-input-padding-y-sm,
+        button-padding-y: $kendo-input-padding-y-sm
     ),
     md: (
         padding-x: $kendo-input-padding-x-md,
         padding-y: $kendo-input-padding-y-md,
         font-size: $kendo-input-font-size-md,
         line-height: $kendo-input-line-height-md,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-md * 2} ),
+        button-padding-x: $kendo-input-padding-y-md,
+        button-padding-y: $kendo-input-padding-y-md
     ),
     lg: (
         padding-x: $kendo-input-padding-x-lg,
         padding-y: $kendo-input-padding-y-lg,
         font-size: $kendo-input-font-size-lg,
         line-height: $kendo-input-line-height-lg,
-        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} )
+        icon-size: calc( #{$icon-size} + #{$kendo-input-padding-y-lg * 2} ),
+        button-padding-x: $kendo-input-padding-y-lg,
+        button-padding-y: $kendo-input-padding-y-lg
     )
 ) !default;
 
@@ -65,6 +71,24 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 $kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
 
+$kendo-picker-bg: $kendo-button-bg !default;
+$kendo-picker-text: $kendo-button-text !default;
+$kendo-picker-border: $kendo-button-border !default;
+$kendo-picker-gradient: $kendo-button-gradient !default;
+$kendo-picker-shadow: $kendo-button-shadow !default;
+
+$kendo-picker-hover-bg: $kendo-button-hover-bg !default;
+$kendo-picker-hover-text: $kendo-button-hover-text !default;
+$kendo-picker-hover-border: $kendo-button-hover-border !default;
+$kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
+$kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
+
+$kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+$kendo-picker-focus-text: $kendo-button-focus-text !default;
+$kendo-picker-focus-border: $kendo-button-focus-border !default;
+$kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
+$kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

package/scss/list/_layout.scss

@@ -40,9 +40,6 @@
         text-overflow: ellipsis;
         cursor: pointer;
     }
-    .k-list-optionlabel {
-        @extend .k-list-group-sticky-header;
-    }
 
 
     // List content
@@ -95,6 +92,9 @@
             right: 0;
         }
     }
+    .k-list-optionlabel {
+        @extend .k-list-item;
+    }
 
 
     // List group item
@@ -212,7 +212,7 @@
 
     // No data
     .k-no-data {
-        min-height: 138px;
+        min-height: 140px;
         display: flex;
         align-items: center;
         justify-content: center;

package/scss/listbox/_layout.scss

@@ -83,6 +83,7 @@
 
             .k-list {
                 height: inherit;
+                background: transparent;
             }
         }
 

package/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 {

package/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%;

package/scss/menu/_layout.scss

@@ -1,7 +1,7 @@
 @include exports("menu/layout") {
 
-    // Base
-    .k-menu {
+    // Menu bar
+    .k-menu-bar {
         border-width: $menu-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -10,18 +10,24 @@
         font-size: $menu-font-size;
         line-height: $menu-line-height;
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         align-items: stretch;
         position: relative;
         cursor: default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
+    .k-menu { @extend .k-menu-bar !optional; }
 
 
     // Menu item
     .k-menu-item {
-        box-sizing: border-box;
         border-width: 0;
         outline: 0;
         display: flex;
@@ -30,7 +36,6 @@
         position: relative;
         user-select: none;
     }
-
     .k-menu-item-content {
         display: block;
         height: auto;
@@ -110,14 +115,6 @@
             padding-right: $kendo-menu-popup-item-padding-end;
         }
 
-        .k-menu-expand-arrow {
-            margin: 0;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: $icon-spacing;
-        }
-
         > .k-separator {
             margin: $menu-separator-spacing 0;
             height: 0;
@@ -131,39 +128,34 @@
 
     // Menu popup
     .k-menu-popup {
+        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        box-sizing: border-box;
         border-width: $kendo-menu-popup-border-width;
         border-style: solid;
         overflow: auto;
         max-height: 80vh;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 
     // Sub menu
     .k-menu-group {
         margin: 0;
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        padding: 0;
         list-style: none;
-        display: none;
+        display: flex;
+        flex-flow: column nowrap;
         position: absolute;
 
-        .k-menu-popup & {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-        }
-
         .k-menu-item + .k-menu-item {
             margin-top: $kendo-menu-popup-item-spacing;
         }
 
-        .k-menu-expand-arrow {
-            margin: 0;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: $icon-spacing;
-        }
-
         .k-separator {
             margin: $menu-separator-spacing 0;
             height: 0;
@@ -173,6 +165,10 @@
             display: block;
         }
     }
+    .k-menu-popup .k-menu-group {
+        position: relative;
+    }
+
 
     // Sizes
     .k-menu-group-sm {

package/scss/menu/_theme.scss

@@ -81,11 +81,16 @@
                 );
             }
 
-            &:focus,
             &.k-focus {
                 @include box-shadow( $kendo-menu-popup-item-focus-shadow );
             }
         }
+
+        .k-item {
+            &:focus {
+                @include box-shadow( $kendo-menu-popup-item-focus-shadow );
+            }
+        }
     }
 
 

package/scss/menu/_variables.scss

@@ -65,7 +65,7 @@ $kendo-menu-popup-border-width: $popup-border-width !default;
 $kendo-menu-popup-font-size: $font-size-md !default;
 $kendo-menu-popup-font-size-sm: $font-size-md !default;
 $kendo-menu-popup-font-size-md: $font-size-md !default;
-$kendo-menu-popup-font-size-lg: $font-size-lg !default;
+$kendo-menu-popup-font-size-lg: $font-size-md !default;
 
 /// Line heights used along with $font-size.
 /// @group menu

package/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/scss/numerictextbox/_layout.scss

@@ -1,16 +1,10 @@
 @include exports( "numerictextbox/layout" ) {
 
     // Numeric textbox
-    .k-numeric-textbox {
-
-        .k-input-inner {
-            text-overflow: clip;
-        }
-
-    }
+    .k-numeric-textbox {}
 
 
     // Alias
-    .k-numerictextbox { @extend .k-numeric-textbox; }
+    .k-numerictextbox { @extend .k-numeric-textbox !optional; }
 
 }

package/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/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;
@@ -65,7 +71,6 @@
     %base-pager-item {
         min-width: $kendo-button-calc-size;
         height: $kendo-button-calc-size;
-        box-sizing: border-box;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -225,7 +230,6 @@
             }
 
             height: $kendo-button-calc-size;
-            box-sizing: border-box;
             border-color: inherit;
         }
 

package/scss/panelbar/_layout.scss

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

package/scss/pivotgrid/_layout.scss

@@ -481,6 +481,7 @@
         border-style: solid;
         align-items: flex-start;
         flex-wrap: wrap;
+        box-shadow: none;
 
         > * {
             max-width: 100%;
@@ -491,32 +492,6 @@
         }
     }
 
-    .k-pivot-toolbar .k-button {
-        @include border-radius( $border-radius );
-        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: $kendo-button-line-height;
-        text-align: left;
-        white-space: normal;
-        word-break: break-word;
-        position: relative;
-        cursor: move;
-
-        .k-field-actions .k-setting-delete {
-            box-sizing: content-box;
-        }
-    }
-
-    .k-field-actions {
-        position: absolute;
-        right: $kendo-button-padding-y;
-        top: $kendo-button-padding-y;
-        line-height: 1;
-        cursor: pointer;
-    }
-
     .k-pivot-layout {
         border-spacing: 0;
         table-layout: auto;
@@ -539,6 +514,8 @@
     .k-pivot-rowheaders > .k-grid,
     .k-pivot-table > .k-grid {
         border-width: 0;
+        color: inherit;
+        background: none;
     }
 
     .k-pivot-rowheaders > .k-grid td:first-child,
@@ -602,58 +579,73 @@
 @include exports("pivotgrid/configurator/layout/legacy") {
 
 
-    .k-fieldselector {
-        border-width: 1px;
-        border-style: solid;
+    // jquery specific -- old pivot
+    .k-pivotgrid-wrapper {
         box-sizing: border-box;
-        outline: 0;
-        font-family: $pivotgrid-font-family;
-        font-size: $pivotgrid-font-size;
-        line-height: $pivotgrid-line-height;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
 
-        .k-columns {
-            display: flex;
-            align-items: stretch;
-
-            > div {
-                padding: $table-cell-padding-y;
-                width: 50%;
-                box-sizing: border-box;
-                border-width: 0;
-                border-style: solid;
-                float: left;
-                overflow: auto;
-            }
-            > div + div {
-                border-left-width: 1px;
-            }
+        > .k-pivotgrid-configurator-panel {
+            max-width: 320px;
+            flex: none;
         }
+        > .k-pivot {
+            flex: 1;
+        }
+    }
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+        box-sizing: border-box;
+        display: inline-flex;
 
-
-        p {
-            margin: 0 0 $padding-y-sm;
-            text-transform: uppercase;
+        .k-pivotgrid-configurator {
+            height: 100%;
         }
-        p .k-icon {
-            margin: 0 $icon-spacing 0 0;
+
+        .k-pivotgrid-configurator-content {
+            padding: map-get( $spacing, 4 );
+            max-height: 100%;
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 4 );
+            overflow-x: hidden;
+            overflow-y: auto;
         }
 
+        .k-pivotgrid-targets {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 4 );
+        }
 
-        // Treeview
-        .k-treeview {
-            border-width: 0;
-            overflow: visible;
+        .k-pivotgrid-configurator-section {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
         }
 
-        .k-edit-label {
-            width: 16%;
+        .k-column-fields {
+            margin: 0;
+            padding: map-get( $spacing, 1 );
+            max-height: 200px;
+            border-width: 1px;
+            border-style: solid;
+            display: flex;
+            flex-flow: row wrap;
+            gap: map-get( $spacing, 1 );
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            > * {
+                margin: 0;
+            }
         }
-        .k-edit-field {
-            width: 77%;
+        .k-ie & .k-column-fields {
+            > * {
+                margin: 2px;
+            }
         }
-
     }
 
 }