@progress/kendo-theme-default 5.0.0-next.5 → 5.1.0

package/scss/adaptive/_layout.scss

@@ -83,14 +83,6 @@
             }
         }
 
-        .k-grid-filter-menu {
-
-            .k-filter-selected-items {
-                margin: 1em;
-                font-weight: normal;
-            }
-        }
-
         .k-grid-edit-form {
 
             .k-popup-edit-form,
@@ -99,10 +91,6 @@
                 min-width: auto;
             }
         }
-
-        .k-grid .k-grid-search {
-            width: 100%;
-        }
     }
 
     .k-grid.k-grid-mobile {
@@ -159,10 +147,6 @@
             .k-scheduler-recur-end-wrap {
                 white-space: nowrap;
             }
-
-            .k-edit-buttons {
-                border-width: 0;
-            }
         }
     }
 
@@ -213,6 +197,12 @@
                     font-size: 12px;
                 }
             }
+
+            .k-scheduler-views-wrapper {
+                .k-views-dropdown {
+                    display: inline-block;
+                }
+            }
         }
 
         .k-scheduler-footer {
@@ -367,39 +357,18 @@
 
     .k-pane-wrapper {
 
-        .k-grid-edit-form,
-        .k-grid-column-menu,
-        .k-grid-filter-menu,
-        .k-scheduler-edit-form {
-
-            > .k-header {
-                display: flex;
-                justify-content: space-between;
-                padding: .3em .6em;
-                width: auto;
-                line-height: 2em;
-
-                .k-header-done,
-                .k-header-cancel {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-
-                    .k-icon {
-                        font-size: 1.5em;
-                    }
-                }
-            }
+        .k-appbar {
+            padding: map-get( $spacing, 1 );
         }
 
         .k-list-title,
-        .k-filter-help-text,
-        .k-list-group-header {
+        .k-filter-help-text {
             padding: $listgroup-item-padding-y $listgroup-item-padding-x;
             display: block;
         }
 
-        .k-list-group-header {
+        .k-listgroup-title {
+            padding: $listgroup-item-padding-y $listgroup-item-padding-x;
             font-weight: bold;
             text-transform: uppercase;
         }
@@ -411,23 +380,56 @@
             }
         }
         .k-listgroup + .k-listgroup {
-            margin-top: 2em;
+            margin-top: map-get( $spacing, 4 );
         }
 
         // Column menu
         .k-column-menu {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-item .k-filterable * {
                 pointer-events: none;
             }
+
+            .k-list-title,
+            .k-listgroup-title {
+                padding: 0;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $spacing, 2 )};
+            }
         }
 
         // Filter menu
         .k-filter-menu {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
+
+            .k-list-title {
+                padding: 0;
+            }
+
+            .k-list-filter {
+                padding: 0;
+                display: flex;
+                flex-flow: column nowrap;
+                gap: inherit;
+            }
+
             .k-filter-tools {
-                margin: 1em;
                 display: flex;
-                justify-content: space-between;
+                flex-flow: row nowrap;
+                gap: inherit;
+            }
+
+            .k-listgroup {
+                margin-inline: -#{map-get( $spacing, 2 )};
             }
         }
 
@@ -450,16 +452,7 @@
             overflow-y: auto;
         }
 
-        .k-state-disabled {
-            opacity: 1;
-
-            > * {
-                opacity: .7;
-            }
-        }
-
         // Pager
-
         .k-pager-wrap.k-pager-sm {
             justify-content: center;
 
@@ -469,39 +462,14 @@
 
         }
 
-        // IE
-
-        .k-ie & {
-
-            .k-scheduler {
-                .k-scheduler-toolbar,
-                .k-scheduler-footer {
-                    line-height: 2em;
-                }
-            }
-
-            .k-grid {
-
-                .k-icon {
-                    text-indent: 0;
-                }
-            }
-        }
-
         // RTL
-
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
 
-            .k-grid-edit-form,
-            .k-grid-column-menu,
-            .k-grid-filter-menu,
-            .k-scheduler-edit-form {
-
-                > .k-header {
-                    flex-direction: row-reverse;
-                }
+            .k-header-cancel .k-i-arrow-chevron-left,
+            .k-listgroup-item .k-select .k-i-arrow-chevron-right {
+                transform: scaleX( -1 );
             }
 
             .k-scheduler-mobile {
@@ -523,10 +491,6 @@
                     margin-right: 0;
                 }
             }
-
-            .k-scheduler-edit-form .k-item .k-i-arrow-chevron-right {
-                transform: scaleX(-1);
-            }
         }
     }
 }

package/scss/adaptive/_theme.scss

@@ -66,15 +66,6 @@
         .k-grid-filter-menu,
         .k-scheduler-edit-form {
 
-            .k-header {
-                color: $adaptive-menu-text;
-                background-color: $adaptive-menu-bg;
-
-                .k-link {
-                    color: inherit;
-                }
-            }
-
             .k-item,
             .k-link {
                 color: $base-text;

package/scss/all.scss

@@ -1,154 +1 @@
-@import "core/functions/_index.scss";
-@import "core/mixins/_index.scss";
-@import "_variables.scss";
-
-
-// Core
-// @import "core/_index.scss";
-
-
-// Dependencies
-@import "common/_index.scss";
-
-
-// Generic content
-@import "styling/_index.scss";
-@import "utils/_index.scss";
-@import "icons/_index.scss";
-@import "typography/_index.scss";
-@import "avatar/_index.scss";
-@import "badge/_index.scss";
-@import "loader/_index.scss";
-@import "chip/_index.scss";
-@import "cursor/_index.scss";
-// @import "list/_index.scss";
-@import "forms/_index.scss";
-@import "listgroup/_index.scss";
-@import "adaptive/_index.scss";
-// @import "loading/_index.scss";
-@import "progressbar/_index.scss";
-@import "ripple/_index.scss";
-// @import "table/_index.scss";
-@import "messagebox/_index.scss";
-@import "overlay/_index.scss";
-
-
-// Basic forms
-@import "button/_index.scss";
-@import "action-buttons/_index.scss";
-@import "input/_index.scss";
-@import "floating-label/_index.scss";
-@import "textbox/_index.scss";
-@import "textarea/_index.scss";
-@import "checkbox/_index.scss";
-@import "radio/_index.scss";
-@import "validator/_index.scss";
-@import "fab/_index.scss";
-@import "captcha/_index.scss";
-
-
-// Inputs
-@import "autocomplete/_index.scss";
-@import "color-preview/_index.scss";
-@import "colorpalette/_index.scss";
-@import "colorgradient/_index.scss";
-@import "coloreditor/_index.scss";
-@import "colorpicker/_index.scss";
-@import "combobox/_index.scss";
-@import "datetime/_index.scss";
-@import "dropdowngrid/_index.scss";
-@import "dropdownlist/_index.scss";
-@import "dropdowntree/_index.scss";
-@import "maskedtextbox/_index.scss";
-@import "multiselect/_index.scss";
-@import "numerictextbox/_index.scss";
-@import "searchbox/_index.scss";
-@import "upload/_index.scss";
-@import "dropzone/_index.scss";
-
-
-// Other forms
-@import "listbox/_index.scss";
-@import "slider/_index.scss";
-@import "switch/_index.scss";
-@import "rating/_index.scss";
-
-
-// Date time
-@import "calendar/_index.scss";
-
-
-// Command interfaces
-@import "appbar/_index.scss";
-@import "menu/_index.scss";
-@import "toolbar/_index.scss";
-
-
-// Popups and modals
-@import "dialog/_index.scss";
-@import "drawer/_index.scss";
-@import "notification/_index.scss";
-@import "popup/_index.scss";
-@import "responsivepanel/_index.scss";
-@import "tooltip/_index.scss";
-@import "window/_index.scss";
-@import "action-sheet/_index.scss";
-@import "popover/_index.scss";
-
-
-// Navigation
-@import "breadcrumb/_index.scss";
-@import "pager/_index.scss";
-@import "panelbar/_index.scss";
-@import "stepper/_index.scss";
-@import "wizard/_index.scss";
-@import "tabstrip/_index.scss";
-@import "treeview/_index.scss";
-@import "expansion-panel/_index.scss";
-@import "bottom-navigation/_index.scss";
-
-
-// Layout & containers
-@import "card/_index.scss";
-@import "splitter/_index.scss";
-@import "tilelayout/_index.scss";
-
-
-// Data management
-@import "grid/_index.scss";
-@import "listview/_index.scss";
-@import "spreadsheet/_index.scss";
-@import "pivotgrid/_index.scss";
-@import "treelist/_index.scss";
-@import "filter/_index.scss";
-@import "filemanager/_index.scss";
-@import "taskboard/_index.scss";
-
-
-// Editor
-@import "editor/_index.scss";
-
-
-// Image Editor
-@import "imageeditor/_index.scss";
-
-
-// Scheduling
-@import "gantt/_index.scss";
-@import "scheduler/_index.scss";
-
-
-// Misc
-@import "chat/_index.scss";
-@import "mediaplayer/_index.scss";
-@import "timeline/_index.scss";
-@import "pdf-viewer/_index.scss";
-@import "scroller/_index.scss";
-@import "scrollview/_index.scss";
-@import "skeleton/_index.scss";
-
-
-// Dataviz
-@import "dataviz/_index.scss";
-@import "map/_index.scss";
-@import "orgchart/_index.scss";
+@import "index.scss";

package/scss/appbar/_layout.scss

@@ -20,9 +20,14 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > * {
             flex-shrink: 0;
-
         }
 
         // Appbar section
@@ -32,15 +37,16 @@
             align-items: center;
         }
 
+
         // Appbar Spacer
         .k-appbar-spacer {
             flex: 1 0 auto;
         }
-
         .k-appbar-spacer-sized {
             flex-grow: 0;
         }
 
+
         // Separator
         .k-appbar-separator {
             margin: 0;
@@ -50,12 +56,27 @@
             border-width: 0 0 0 1px;
             display: inline-block;
         }
+
+
+        // Input
+        .k-input,
+        .k-picker {
+            width: 10em;
+        }
+        .k-color-picker {
+            width: min-content;
+        }
+
     }
 
+
+    // Static appbar
     .k-appbar-static {
         position: static;
     }
 
+
+    // Sticky appbar
     .k-appbar-sticky {
         width: 100%;
         position: sticky;
@@ -63,17 +84,20 @@
         z-index: $appbar-zindex;
     }
 
+
+    // Fixed appbar
     .k-appbar-fixed {
         width: 100%;
         position: fixed;
         z-index: 1;
     }
 
+
+    // Appbar position
     .k-appbar-top {
         top: 0;
         bottom: auto;
     }
-
     .k-appbar-bottom {
         top: auto;
         bottom: 0;
@@ -82,4 +106,5 @@
             bottom: 0;
         }
     }
+
 }

package/scss/appbar/_variables.scss

@@ -2,7 +2,7 @@
 $appbar-margin-y: null !default;
 $appbar-margin-x: null !default;
 $appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 4 ) !default;
+$appbar-padding-x: map-get( $spacing, 2 ) !default;
 $appbar-border-width: 0px !default;
 
 $appbar-zindex: 1000 !default;

package/scss/autocomplete/_index.scss

@@ -6,6 +6,7 @@
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../popup/_index.scss";
+@import "../list/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/autocomplete/_layout.scss

@@ -1,58 +1,6 @@
 @include exports( "autocomplete/layout" ) {
 
     // Autocomplete
-    .k-autocomplete {
-        @include border-radius( $kendo-input-border-radius );
-        border-width: $kendo-input-border-width;
-        border-style: solid;
-        outline: 0;
-        box-sizing: border-box;
-        font-family: $kendo-input-font-family;
-        font-size: $kendo-input-font-size;
-        line-height: $kendo-input-line-height;
-        white-space: nowrap;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        vertical-align: middle;
-        transition: all .1s ease; // sass-lint:disable-block no-transition-all
-        position: relative;
-        cursor: default;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-
-        // Input
-        .k-input {}
-
-
-        // Loading icon
-        .k-i-loading {
-            width: $kendo-input-icon-width;
-            height: $kendo-input-icon-height;
-        }
-
-
-        // Clear value
-        .k-clear-value {
-            visibility: hidden;
-        }
-        &:hover,
-        // &:focus-within,
-        &.k-state-hover,
-        &.k-state-focused,
-        &.k-state-focus {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-        &:focus-within {
-            .k-clear-value {
-                visibility: visible;
-            }
-        }
-
-    }
-
+    .k-autocomplete {}
 
 }

package/scss/autocomplete/_theme.scss

@@ -1,78 +1,6 @@
-@include exports("autocomplete/theme") {
+@include exports( "autocomplete/theme" ) {
 
-    // Remove first selector when https://github.com/telerik/kendo-angular-dropdowns/issues/656 is done.
-    .k-autocomplete.k-header,
-    .k-autocomplete {
-        @include fill(
-            $autocomplete-text,
-            $autocomplete-bg,
-            $autocomplete-border
-        );
-        @include box-shadow( $autocomplete-shadow );
-
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $autocomplete-hovered-text,
-                $autocomplete-hovered-bg,
-                $autocomplete-hovered-border
-            );
-            @include box-shadow( $autocomplete-hovered-shadow );
-        }
-
-        // Focus state
-        // &:focus-within,
-        &.k-state-open,
-        &.k-state-focused,
-        &.k-state-focus {
-            @include fill(
-                $autocomplete-focused-text,
-                $autocomplete-focused-bg,
-                $autocomplete-focused-border
-            );
-            @include box-shadow( $autocomplete-focused-shadow );
-        }
-        &:focus-within {
-            @include fill(
-                $autocomplete-focused-text,
-                $autocomplete-focused-bg,
-                $autocomplete-focused-border
-            );
-            @include box-shadow( $autocomplete-focused-shadow );
-        }
-
-        // Disabled state
-        &:disabled,
-        &.k-state-disabled {
-            @include fill(
-                $autocomplete-disabled-text,
-                $autocomplete-disabled-bg,
-                $autocomplete-disabled-border
-            );
-            @include box-shadow( $autocomplete-disabled-shadow );
-        }
-
-        // Invalid state
-        &.k-invalid,
-        &.k-state-invalid,
-        &.ng-invalid.ng-touched,
-        &.ng-invalid.ng-dirty {
-            @include fill(
-                $autocomplete-invalid-text,
-                $autocomplete-invalid-bg,
-                $autocomplete-invalid-border
-            );
-
-            // &:focus-within,
-            &.k-state-focused,
-            &.k-state-focus {
-                @include box-shadow( $autocomplete-invalid-shadow );
-            }
-            &:focus-within {
-                @include box-shadow( $autocomplete-invalid-shadow );
-            }
-        }
-    }
+    // Autocomplete
+    .k-autocomplete {}
 
 }

package/scss/autocomplete/_variables.scss

@@ -1,25 +1 @@
 // Autocomplete
-$autocomplete-bg: $kendo-input-bg !default;
-$autocomplete-text: $kendo-input-text !default;
-$autocomplete-border: $kendo-input-border !default;
-$autocomplete-shadow: $kendo-input-shadow !default;
-
-$autocomplete-hovered-bg: $kendo-input-hover-bg !default;
-$autocomplete-hovered-text: $kendo-input-hover-text !default;
-$autocomplete-hovered-border: $kendo-input-hover-border !default;
-$autocomplete-hovered-shadow: $kendo-input-hover-shadow !default;
-
-$autocomplete-focused-bg: $kendo-input-focus-bg !default;
-$autocomplete-focused-text: $kendo-input-focus-text !default;
-$autocomplete-focused-border: $kendo-input-focus-border !default;
-$autocomplete-focused-shadow: $kendo-input-focus-shadow !default;
-
-$autocomplete-disabled-bg: null !default;
-$autocomplete-disabled-text: null !default;
-$autocomplete-disabled-border: null !default;
-$autocomplete-disabled-shadow: null !default;
-
-$autocomplete-invalid-bg: null !default;
-$autocomplete-invalid-text: null !default;
-$autocomplete-invalid-border: $invalid-border !default;
-$autocomplete-invalid-shadow: $invalid-shadow !default;