@progress/kendo-theme-default 5.0.0-next.2 → 5.0.0

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;
         }
     }
@@ -422,8 +406,7 @@
             }
             .k-value-fields {
                 max-height: 250px;
-                flex-direction: row;
-                flex-wrap: wrap;
+                flex-flow: row wrap;
                 overflow-x: hidden;
                 overflow-y: auto;
             }
@@ -456,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 {
@@ -477,6 +481,7 @@
         border-style: solid;
         align-items: flex-start;
         flex-wrap: wrap;
+        box-shadow: none;
 
         > * {
             max-width: 100%;
@@ -487,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;
@@ -536,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,
@@ -599,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;
+            }
         }
-
     }
 
 }

package/scss/pivotgrid/_theme.scss

@@ -125,7 +125,7 @@
         );
     }
 
-    .k-filter-menu .k-calculated-item  {
+    .k-filter-menu .k-calculated-item {
         @include fill( $border: $popup-border );
     }
 
@@ -159,103 +159,59 @@
 @include exports("pivotgrid/theme/legacy") {
 
     .k-pivot {
+        @include fill (
+            $pivotgrid-text,
+            $pivotgrid-bg,
+            $pivotgrid-border
+        );
+    }
+    .k-pivot-table {
         border-color: $pivotgrid-border;
     }
 
-    .k-alt,
-    .k-pivot-layout > tbody > tr:first-child > td:first-child {
-        background-color: $pivotgrid-alt-bg;
+    // Pivotgrid header
+    .k-pivot-rowheaders {
+        @include fill(
+            $pivotgrid-headers-text,
+            $pivotgrid-headers-bg,
+            $pivotgrid-headers-border
+        );
     }
 
-    .k-fieldselector {
-        color: $pivotgrid-configurator-text;
+
+    // Pivotgrid toolbar
+    .k-pivot-toolbar {
+        @include fill(
+            $pivotgrid-headers-text,
+            $pivotgrid-headers-bg,
+            $pivotgrid-headers-border
+        );
+
+        .k-empty {
+            color: $subtle-text;
+        }
     }
 
-    .k-fieldselector .k-list-container {
-        background-color: $pivotgrid-container-bg;
+    .k-alt {
+        background-color: $pivotgrid-alt-bg;
     }
 
     .k-pivot-toolbar,
     .k-pivot-table,
-    .k-fieldselector,
-    .k-fieldselector .k-list-container,
-    .k-fieldselector .k-columns > div,
     .k-pivot-rowheaders > .k-grid td:first-child,
     .k-pivot-table .k-grid-header .k-header.k-first {
         border-color: $pivotgrid-chrome-border;
     }
 
-    .k-pivot-rowheaders .k-alt .k-alt,
     .k-header.k-alt {
         background-color: $pivotgrid-row-headers-bg;
     }
 
-    .k-pivot-toolbar .k-button,
-    .k-fieldselector .k-list li.k-item {
-        @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
-        );
-
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
-            );
-        }
-
-        // Pressed state
-        &:active,
-        &.k-state-active {
-            @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
-            );
-        }
-
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $button-focused-shadow;
-        }
-
-        &.k-empty {
-            color: $subtle-text;
-        }
-    }
-
-    .k-pivot-toolbar {
-        .k-empty {
-            color: $subtle-text;
-        }
-    }
-
-    .k-pivot-layout .k-grid-footer,
-    .k-pivot-layout .k-grid.k-alt {
+    .k-pivot-layout .k-grid-footer {
         color: $pivotgrid-alt-text;
         background-color: $pivotgrid-alt-bg;
     }
 
-    // Loading indicator
-    .k-fieldselector {
-        .k-i-loading {
-            border-color: $header-bg;
-        }
-
-        .k-i-loading::before,
-        .k-i-loading::after {
-            background-color: $header-bg;
-        }
-    }
-
     // KPI icons
     .k-i-kpi-trend-increase,
     .k-i-kpi-trend-decrease,
@@ -274,4 +230,14 @@
     .k-i-kpi-status-open {
         color: $success;
     }
+
+
+    // Configurator
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+
+        .k-column-fields {
+            border-color: $component-border;
+        }
+
+    }
 }

package/scss/pivotgrid/_variables.scss

@@ -36,7 +36,7 @@ $pivotgrid-selected-bg: rgba($selected-bg, .25) !default;
 $pivotgrid-selected-text: null !default;
 $pivotgrid-selected-border: null !default;
 
-$pivotgrid-focus-shadow: $list-item-focused-shadow !default;
+$pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 // Pivotgrid Configurator
 $pivotgrid-configurator-padding-x: null !default;
@@ -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/scss/popover/_layout.scss

@@ -13,10 +13,15 @@
         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;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     // Header

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