@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-dev.0

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

package/scss/pager/_theme.scss

@@ -133,15 +133,15 @@
                     &:hover,
                     &.k-state-hover {
                         @include fill(
-                            $list-item-hovered-text,
-                            $list-item-hovered-bg
+                            $kendo-list-item-hover-text,
+                            $kendo-list-item-hover-bg
                         );
                     }
 
                     &.k-state-selected {
                         @include fill(
-                            $list-item-selected-text,
-                            $list-item-selected-bg
+                            $kendo-list-item-selected-text,
+                            $kendo-list-item-selected-bg
                         );
                     }
 

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;
@@ -26,17 +26,17 @@ $pager-item-bg: null !default;
 $pager-item-text: null !default;
 $pager-item-border: null !default;
 
-$pager-item-hover-bg: $list-item-hovered-bg !default;
-$pager-item-hover-text: $list-item-hovered-text !default;
+$pager-item-hover-bg: $kendo-list-item-hover-bg !default;
+$pager-item-hover-text: $kendo-list-item-hover-text !default;
 $pager-item-hover-border: null !default;
 
-$pager-item-selected-bg: $list-item-selected-bg !default;
-$pager-item-selected-text: $list-item-selected-text !default;
+$pager-item-selected-bg: $kendo-list-item-selected-bg !default;
+$pager-item-selected-text: $kendo-list-item-selected-text !default;
 $pager-item-selected-border: null !default;
 
 $pager-item-focus-opacity: null !default;
 $pager-item-focus-bg: transparent !default;
-$pager-item-focus-shadow: $list-item-focused-shadow !default;
+$pager-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 $pager-number-padding-x: $pager-item-padding-x !default;
 $pager-number-padding-y: $pager-item-padding-y !default;
@@ -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;

package/scss/panelbar/_index.scss

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

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,
@@ -91,7 +97,6 @@
 
 
         // Panelbar content
-        .k-content,
         .k-panelbar-content {
             display: flow-root;
         }
@@ -134,59 +139,6 @@
 
 
 
-@include exports( "panelbar/layout/legacy" ) {
-
-    .k-no-flexbox .k-panelbar {
-
-        // Item
-        > .k-item > .k-link,
-        .k-group > .k-link {
-            display: block;
-        }
-
-        // Icons
-        .k-link > .k-image,
-        .k-link > .k-sprite,
-        .k-link > .k-icon {
-            margin-right: $icon-spacing;
-        }
-
-        // Expand collapse
-        .k-panelbar-expand,
-        .k-panelbar-collapse {
-            margin: 0 !important; // sass-lint:disable-line no-important
-            transform: translateY( -50% );
-            position: absolute;
-            top: 50%;
-            right: $panelbar-header-padding-x;
-        }
-
-    }
-
-
-    .k-no-flexbox .k-panelbar[dir="rtl"],
-    .k-no-flexbox .k-rtl .k-panelbar {
-
-        .k-link > .k-image,
-        .k-link > .k-sprite,
-        .k-link > .k-icon {
-            margin-left: $icon-spacing;
-            margin-right: 0;
-        }
-
-        .k-panelbar-expand,
-        .k-panelbar-collapse {
-            right: auto;
-            left: $panelbar-header-padding-x;
-        }
-
-    }
-
-}
-
-
-
-
 @include exports( "panelbar/layout/compatibility" ) {
 
     .k-ie {

package/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/scss/panelbar/_variables.scss

@@ -32,7 +32,7 @@ $panelbar-header-focused-bg: null !default;
 $panelbar-header-focused-text: null !default;
 $panelbar-header-focused-border: null !default;
 $panelbar-header-focused-gradient: null !default;
-$panelbar-header-focused-shadow: $list-item-focused-shadow !default;
+$panelbar-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $panelbar-header-hovered-focused-bg: null !default;
 $panelbar-header-hovered-focused-text: null !default;
@@ -68,7 +68,7 @@ $panelbar-item-focused-bg: null !default;
 $panelbar-item-focused-text: null !default;
 $panelbar-item-focused-border: null !default;
 $panelbar-item-focused-gradient: null !default;
-$panelbar-item-focused-shadow: $list-item-focused-shadow !default;
+$panelbar-item-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $panelbar-item-hovered-focused-bg: null !default;
 $panelbar-item-hovered-focused-text: null !default;
@@ -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/scss/pdf-viewer/_layout.scss

@@ -86,51 +86,42 @@
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-spacing;
+        padding: $pdf-viewer-search-dialog-padding;
 
         .k-search-container {
             display: flex;
+            gap: $pdf-viewer-search-dialog-spacing;
+            flex-flow: row nowrap;
             flex: 0 0 auto;
             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-search-dialog-draghandle {
+                cursor: move;
+                margin-left: 0;
             }
-            .k-textbox .k-icon {
-                position: absolute;
-                font-size: inherit;
 
-                .k-ie & {
-                    position: relative;
-                }
-            }
+            .k-textbox {
+                width: 10em;
+                flex: none;
 
-            .k-match-case-button {
-                display: inline-flex;
-                height: $pdf-viewer-search-dialog-input-button-height;
-                justify-content: center;
+                .k-button {
+                    border-width: 0;
+                }
             }
 
             .k-search-matches {
-                display: inline-block;
-                min-width: $pdf-viewer-search-dialog-matches-width;
-                margin: 0 $pdf-viewer-search-dialog-spacing 0 $pdf-viewer-search-dialog-button-spacing;
-                vertical-align: middle;
+                flex: 1 1 auto;
             }
+        }
+    }
 
-            > .k-button {
-                margin-left: $pdf-viewer-search-dialog-button-spacing;
-            }
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
-            }
+    // IE
+    .k-ie .k-pdf-viewer-search-dialog {
+
+        .k-search-container > * + * {
+            margin-left: $pdf-viewer-search-dialog-spacing;
         }
     }
 

package/scss/pdf-viewer/_variables.scss

@@ -24,11 +24,8 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$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-input-button-height: $line-height-em !default;
-$pdf-viewer-search-dialog-matches-width: 4.5em !default;
+$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 

package/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/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 {
@@ -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 {
@@ -356,7 +340,7 @@
         .k-icon {
             margin-right: map-get( $spacing, 2 );
         }
-        .k-dropdown {
+        .k-dropdown-list {
             max-width: 100px;
         }
     }
@@ -455,6 +439,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 {
@@ -476,6 +481,7 @@
         border-style: solid;
         align-items: flex-start;
         flex-wrap: wrap;
+        box-shadow: none;
 
         > * {
             max-width: 100%;
@@ -486,33 +492,6 @@
         }
     }
 
-    .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} );
-        min-height: auto;
-        font-size: $font-size;
-        line-height: $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: $button-padding-y;
-        top: $button-padding-y;
-        line-height: 1;
-        cursor: pointer;
-    }
-
     .k-pivot-layout {
         border-spacing: 0;
         table-layout: auto;
@@ -535,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,
@@ -598,85 +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;
-
-        .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;
-            }
-        }
-
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: map-get( $spacing, 2 );
 
-        p {
-            margin: 0 0 $padding-y-sm;
-            text-transform: uppercase;
+        > .k-pivotgrid-configurator-panel {
+            max-width: 320px;
+            flex: none;
         }
-        p .k-icon {
-            margin: 0 $icon-spacing 0 0;
+        > .k-pivot {
+            flex: 1;
         }
+    }
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+        box-sizing: border-box;
+        display: inline-flex;
 
-
-        // Treeview
-        .k-treeview {
-            border-width: 0;
-            overflow: visible;
+        .k-pivotgrid-configurator {
+            height: 100%;
         }
 
-        .k-edit-label {
-            width: 16%;
-        }
-        .k-edit-field {
-            width: 77%;
+        .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-edit-buttons {
-            > input,
-            > label {
-                float: left;
-                margin-top: .4em;
-            }
+        .k-pivotgrid-targets {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 4 );
         }
 
-
-        // List container
-        .k-list-container {
-            margin-bottom: $spacer;
-            padding: $padding-y-sm;
-            border-width: 1px;
-            border-style: solid;
-        }
-        .k-list {
-            padding-bottom: $spacer;
+        .k-pivotgrid-configurator-section {
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
         }
-        .k-list .k-item {
+
+        .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-list .k-item + .k-item {
-            margin-top: ($spacer / 2);
+        .k-ie & .k-column-fields {
+            > * {
+                margin: 2px;
+            }
         }
-
     }
 
 }