@progress/kendo-theme-default 5.0.0-alpha.2 → 5.0.0-beta.2

package/scss/multiselect/_theme.scss

@@ -1,142 +1,3 @@
 @include exports("multiselect/theme") {
 
-    .k-multiselect {
-
-        &.k-state-focused {
-            > .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-focused-text,
-                    $multiselect-focused-bg,
-                    $multiselect-focused-border
-                );
-                @include box-shadow($multiselect-focused-shadow);
-
-                // Invalid + focused
-                &.k-invalid,
-                &.k-invalid:hover,
-                &.k-state-invalid {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-            // Invalid + focused
-            &.k-state-invalid,
-            &.ng-invalid.ng-touched,
-            &.ng-invalid.ng-dirty {
-                .k-multiselect-wrap {
-                    @include box-shadow($invalid-shadow);
-                }
-            }
-
-        }
-
-        .k-multiselect-wrap {
-            @include fill(
-                $multiselect-text,
-                $multiselect-bg,
-                $multiselect-border
-            );
-
-            > .k-readonly {
-                opacity: .6;
-            }
-
-
-            .k-button {
-                .k-icon {
-                    opacity: .6;
-                }
-
-                .k-icon:hover,
-                .k-icon.k-state-hover {
-                    opacity: 1;
-                }
-
-                &:active,
-                &.k-state-active {
-                    @include fill(
-                        $multiselect-button-focused-text,
-                        $multiselect-button-focused-bg,
-                        $multiselect-button-focused-border,
-                        $multiselect-button-focused-gradient
-                    );
-                    @include box-shadow( $multiselect-button-focused-shadow );
-                }
-
-                // Focused state
-                &:focus,
-                &.k-state-focused {
-                    .k-icon {
-                        opacity: 1;
-                    }
-                }
-            }
-
-            .k-i-loading {
-                background-color: $multiselect-bg;
-            }
-
-
-            &:hover,
-            &.k-state-hover {
-                @include fill(
-                    $multiselect-hovered-text,
-                    $multiselect-hovered-bg,
-                    $multiselect-hovered-border
-                );
-            }
-
-            // Invalid state
-            &.k-invalid,
-            &.k-invalid:hover,
-            &.k-state-invalid {
-                border-color: $invalid-border;
-            }
-        }
-
-        // Invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            .k-multiselect-wrap {
-                border-color: $invalid-border;
-            }
-        }
-    }
-
-    // Universal rendering
-    .k-multiselect {
-        &.k-state-hover {
-            .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-hovered-text,
-                    $multiselect-hovered-bg,
-                    $multiselect-hovered-border
-                );
-            }
-        }
-
-        &.k-state-focus {
-            .k-multiselect-wrap {
-                @include fill(
-                    $multiselect-focused-text,
-                    $multiselect-focused-bg,
-                    $multiselect-focused-border
-                );
-                @include box-shadow($multiselect-focused-shadow);
-            }
-        }
-
-        &.k-invalid {
-            .k-multiselect-wrap {
-                border-color: $invalid-border;
-            }
-        }
-
-        &.k-invalid.k-state-focus {
-            .k-multiselect-wrap {
-                @include box-shadow($invalid-shadow);
-            }
-        }
-    }
-
 }

package/scss/multiselect/_variables.scss

@@ -1,37 +1 @@
 // Multiselect
-$multiselect-width: 100% !default;
-
-$multiselect-token-opacity: .07 !default;
-$multiselect-token-focused-opacity: .46 !default;
-$multiselect-token-focused-text: $base-bg !default;
-$multiselect-token-focused-bg: $base-text !default;
-$multiselect-token-disabled-text: rgba( $base-text, .42 ) !default;
-$multiselect-token-hover-text: $base-bg !default;
-$multiselect-token-hover-bg: rgba( $base-text, .54 ) !default;
-$multiselect-remove-text: $base-bg !default;
-$multiselect-remove-bg: rgba( $base-text, .4 ) !default;
-$multiselect-remove-hover-text: $multiselect-remove-text !default;
-$multiselect-remove-hover-bg: rgba( $base-text, .54 ) !default;
-$multiselect-remove-focused-text: rgba( $base-text, .54 ) !default;
-$multiselect-remove-focused-bg: rgba($base-bg, .93) !default;
-
-$multiselect-bg: $kendo-input-bg !default;
-$multiselect-text: $kendo-input-text !default;
-$multiselect-border: $kendo-input-border !default;
-
-$multiselect-hovered-bg: $kendo-input-hover-bg !default;
-$multiselect-hovered-text: $kendo-input-hover-text !default;
-$multiselect-hovered-border: $kendo-input-hover-border !default;
-
-$multiselect-focused-bg: $kendo-input-focus-bg !default;
-$multiselect-focused-text: $kendo-input-focus-text !default;
-$multiselect-focused-border: $kendo-input-focus-border !default;
-$multiselect-focused-shadow: $kendo-input-focus-shadow !default;
-
-$multiselect-button-focused-bg: $kendo-button-active-bg !default;
-$multiselect-button-focused-text: $kendo-button-active-text !default;
-$multiselect-button-focused-border: $kendo-button-active-border !default;
-$multiselect-button-focused-gradient: $kendo-button-active-gradient !default;
-$multiselect-button-focused-shadow: $kendo-button-active-shadow !default;
-
-$multiselect-clear-right: calc( #{$icon-size} + #{$kendo-input-padding-y} ) !default;

package/scss/notification/_layout.scss

@@ -76,25 +76,3 @@
     }
 
 }
-
-
-
-
-@include exports("notification/layout/ie9") {
-
-
-    .k-ie9 .k-notification-wrap {
-        white-space: nowrap;
-
-        > .k-icon {
-            vertical-align: top;
-        }
-
-        > .k-notification-content {
-            display: inline-block;
-            vertical-align: middle;
-            white-space: normal;
-        }
-    }
-
-}

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

@@ -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;

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

@@ -134,59 +134,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/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

@@ -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 {
@@ -507,8 +491,7 @@
         }
     }
 
-    .k-pivot-toolbar .k-button,
-    .k-fieldselector .k-list li.k-item {
+    .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} );
@@ -671,33 +654,6 @@
             width: 77%;
         }
 
-        .k-edit-buttons {
-            > input,
-            > label {
-                float: left;
-                margin-top: .4em;
-            }
-        }
-
-
-        // List container
-        .k-list-container {
-            margin-bottom: $spacer;
-            padding: $padding-y-sm;
-            border-width: 1px;
-            border-style: solid;
-        }
-        .k-list {
-            padding-bottom: $spacer;
-        }
-        .k-list .k-item {
-            border-width: 1px;
-            border-style: solid;
-        }
-        .k-list .k-item + .k-item {
-            margin-top: ($spacer / 2);
-        }
-
     }
 
 }

package/scss/pivotgrid/_theme.scss

@@ -190,8 +190,7 @@
         background-color: $pivotgrid-row-headers-bg;
     }
 
-    .k-pivot-toolbar .k-button,
-    .k-fieldselector .k-list li.k-item {
+    .k-pivot-toolbar .k-button {
         @include fill(
             $kendo-button-text,
             $kendo-button-bg,

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