@progress/kendo-theme-default 4.43.1-dev.1 → 4.43.1-dev.5

package/scss/searchbox/_theme.scss

@@ -3,53 +3,44 @@
     // Searchbox
     .k-searchbox {
         @include fill(
-            $searchbox-text,
-            $searchbox-bg,
-            $searchbox-border
+            $input-text,
+            $input-bg,
+            $input-border
         );
 
-
         // Hover state
         &:hover,
         &.k-state-hover {
             @include fill(
-                $searchbox-hover-text,
-                $searchbox-hover-bg,
-                $searchbox-hover-border
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
             );
         }
 
-
         // Focus state
         &:focus,
-        // &:focus-within,
         &.k-state-focus {
             @include fill(
-                $searchbox-focus-text,
-                $searchbox-focus-bg,
-                $searchbox-focus-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
             @include box-shadow( $input-focused-shadow );
         }
         &:focus-within {
             @include fill(
-                $searchbox-focus-text,
-                $searchbox-focus-bg,
-                $searchbox-focus-border
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
             );
             @include box-shadow( $input-focused-shadow );
         }
 
 
-        // Disabled
-        &:disabled,
-        &.k-state-disabled {
-            @include disabled( $disabled-styling );
-        }
-
-
-        // Invalid
+        // Invalid state
         &.k-invalid,
+        &.ng-invalid,
         &.k-state-invalid {
             border-color: $invalid-border;
 
@@ -57,11 +48,11 @@
                 color: $invalid-text;
             }
 
-            &:focus,
+            &:focus-within,
             &.k-state-focus {
                 @include box-shadow($invalid-shadow);
             }
         }
-
     }
+
 }

package/scss/searchbox/_variables.scss

@@ -1,21 +1 @@
 // Searchbox
-$searchbox-padding-x: $input-padding-x !default;
-$searchbox-padding-y: $input-padding-y !default;
-$searchbox-border-width: $input-border-width !default;
-$searchbox-border-radius: $input-border-radius !default;
-
-$searchbox-font-family: $input-font-family !default;
-$searchbox-font-size: $input-font-size !default;
-$searchbox-line-height: $input-line-height !default;
-
-$searchbox-bg: $input-bg !default;
-$searchbox-text: $input-text !default;
-$searchbox-border: $input-border !default;
-
-$searchbox-hover-bg: $input-hovered-bg !default;
-$searchbox-hover-text: $input-hovered-text !default;
-$searchbox-hover-border: $input-hovered-border !default;
-
-$searchbox-focus-bg: $input-focused-bg !default;
-$searchbox-focus-text: $input-focused-text !default;
-$searchbox-focus-border: $input-focused-border !default;

package/scss/skeleton/_layout.scss

@@ -9,7 +9,7 @@
         transform: $skeleton-text-transform;
 
         &:empty::before {
-            content: "\00a0";
+            content: "\200b";
         }
     }
 

package/scss/slider/_layout.scss

@@ -35,11 +35,13 @@
         }
 
         .k-button-increase {
+            position: absolute;
             right: 0;
             top: 0;
         }
 
         .k-button-decrease {
+            position: absolute;
             left: 0;
             top: 0;
         }

package/scss/spreadsheet/_index.scss

@@ -8,7 +8,7 @@
 @import "../radio/_index.scss";
 @import "../colorpicker/_index.scss";
 @import "../combobox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../upload/_index.scss";

package/scss/spreadsheet/_layout.scss

@@ -97,14 +97,10 @@
             width: auto;
             min-width: $form-line-height * 1em;
         }
-        [data-tool="fontSize"] {
-            width: 5 * $spacer;
-        }
-        [data-tool="fontFamily"] {
-            width: 6 * $spacer;
-        }
-        [data-tool="format"] {
-            width: 4 * $spacer;
+
+        .k-combobox,
+        .k-dropdown {
+            width: 5em;
         }
     }
 
@@ -278,6 +274,7 @@
         font-family: Arial, Verdana, Sans-serif;
         flex: 1;
         position: relative;
+        overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
         .k-state-disabled {
@@ -636,37 +633,48 @@
         }
 
         // Details
-        .k-details {
+        .k-details,
+        .k-expander {
             padding: 0;
             border-width: 1px 0 0;
             border-style: solid;
             border-color: inherit;
         }
-        .k-details-summary {
-            padding: $padding-y;
+        .k-expander {
+            border: 0;
+            background: inherit;
+        }
+        .k-details-summary,
+        .k-columnmenu-item {
+            padding: $menu-popup-item-padding-y $menu-popup-item-padding-x;
+            display: flex;
+            align-items: center;
             cursor: pointer;
 
             > .k-icon {
                 margin-right: $padding-y;
             }
         }
-        .k-details-content {
-            padding: $padding-y $padding-x $padding-y $filter-menu-padding-left;
+        .k-details-content,
+        .k-columnmenu-item-content {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
-            > .k-textbox,
-            > .k-widget {
-                width: 100%;
-                margin-bottom: 3px;
+            .k-filter-and {
+                width: min-content;
+                align-self: flex-start;
             }
 
-            .k-space-right {
-                background-image: none;
+            .k-searchbox {
+                width: 100%;
             }
+        }
 
-            .k-filter-and {
-                width: 75px;
-                margin: 8px 0;
-            }
+        .k-actions {
+            margin: 0;
+            padding: 0;
         }
     }
 

package/scss/table/_layout.scss

@@ -1,4 +1,4 @@
-@include exports("table/layout") {
+@include exports( "table/layout" ) {
 
     // Table
     .k-table {
@@ -20,18 +20,21 @@
     .k-data-table {
         border-width: $table-border-width;
         border-style: solid;
+
+        .k-table {
+            table-layout: fixed;
+        }
     }
 
 
     // Table native parts
     .k-table-thead,
     .k-table-tbody,
-    .k-table-tfoot {
-        text-align: inherit;
-    }
+    .k-table-tfoot,
     .k-table-row,
     .k-table-alt-row {
         border-color: inherit;
+        text-align: inherit;
     }
     .k-table-th,
     .k-table-td {
@@ -52,6 +55,9 @@
             border-left-width: 0;
         }
     }
+    .k-table-th {
+        border-bottom-width: 1px;
+    }
 
 
     // Table header
@@ -70,8 +76,27 @@
         width: 100%;
         border-width: 0 $table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
+    .k-table-header,
+    .k-table-header-wrap {
+        > .k-table {
+            margin-bottom: -1px;
+        }
+    }
+    .k-table-group-sticky-header {
+        font-size: $table-font-size;
+        line-height: $line-height;
+        flex: none;
+
+        .k-table-th {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            align-content: center;
+        }
+    }
 
 
     // Table list
@@ -81,7 +106,7 @@
         width: 100%;
         max-width: none;
         border-width: 0;
-        display: table-row-group;
+        display: table;
         border-collapse: collapse;
         border-spacing: 0;
         table-layout: fixed;
@@ -89,10 +114,11 @@
         list-style: none;
         outline: none;
 
-        .k-table-row {
+        .k-table-row,
+        .k-table-group-row {
             width: 100%;
             box-sizing: border-box;
-            display: flex;
+            display: table-row;
             position: relative;
         }
         .k-table-row.k-first {
@@ -104,6 +130,26 @@
             vertical-align: middle;
         }
 
+        .k-table-group-row {
+
+            &::before {
+                content: "\200b";
+                padding: $table-cell-padding-y 0;
+                width: 0;
+                display: block;
+                overflow: hidden;
+            }
+
+            .k-table-th {
+                width: 100%;
+                border-color: inherit;
+                color: inherit;
+                background-color: inherit;
+                position: absolute;
+                top: 0;
+            }
+        }
+
         .k-table-spacer-td {
             padding: 0 !important; // sass-lint:disable-line no-important
             width: 0 !important; // sass-lint:disable-line no-important
@@ -128,6 +174,14 @@
     }
 
 
+    // Virtualization
+    .k-virtual-table .k-table-row,
+    .k-virtual-table .k-table-group-row {
+        position: absolute;
+        width: 100%;
+    }
+
+
     // Table scroller
     .k-table-scroller {
         position: relative;
@@ -155,6 +209,7 @@
         width: 100%;
         border-width: 0 $table-cell-vertical-border-width 0 0;
         border-style: solid;
+        border-color: inherit;
         overflow: hidden;
     }
 

package/scss/table/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("table/theme") {
+@include exports( "table/theme" ) {
 
     // Table
     .k-table,
@@ -11,7 +11,8 @@
 
     // Table header
     .k-table-thead,
-    .k-table-header {
+    .k-table-header,
+    .k-table-group-sticky-header {
         border-color: $table-header-border;
         color: $table-header-text;
         background-color: $table-header-bg;

package/scss/table/_variables.scss

@@ -58,13 +58,13 @@ $table-footer-border: $grid-footer-border !default;
 
 /// Background color of group rows in table.
 /// @group table
-$table-group-row-bg: $grid-grouping-row-bg !default;
+$table-group-row-bg: $table-header-bg !default;
 /// Text color of group rows in table.
 /// @group table
-$table-group-row-text: $grid-grouping-row-text !default;
+$table-group-row-text: $table-header-text !default;
 /// Border color of group rows in table.
 /// @group table
-$table-group-row-border: null !default;
+$table-group-row-border: $table-header-border !default;
 
 
 /// Background color of alternating rows in table.

package/scss/tabstrip/_layout.scss

@@ -39,7 +39,7 @@
     .k-tabstrip-items {
         outline: 0;
         display: flex;
-        flex-direction: row;
+        flex-flow: row wrap;
         flex: 0 0 auto;
 
         .k-item {

package/scss/timepicker/_index.scss

@@ -0,0 +1,15 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../input/_index.scss";
+@import "../button/_index.scss";
+@import "../popup/_index.scss";
+@import "../list/_index.scss";
+@import "../timeselector/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/timepicker/_layout.scss

@@ -0,0 +1,48 @@
+@include exports( "timepicker/layout" ) {
+
+    // Time picker
+    .k-timepicker {
+        @include border-radius( $input-border-radius );
+        width: $input-default-width;
+        border-width: $input-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $input-font-family;
+        font-size: $input-font-size;
+        line-height: $input-line-height;
+        text-align: start;
+        white-space: nowrap;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        vertical-align: middle;
+        position: relative;
+        overflow: hidden;
+        transition: all .1s ease; // sass-lint:disable-line no-transition-all
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+
+        // Input
+        .k-input {}
+
+
+        // Select
+        .k-select {
+            padding: $picker-select-padding-y $picker-select-padding-x;
+            width: if( $use-picker-select-width, $spinner-width, null );
+            border-width: 0;
+            border-inline-start-width: $picker-select-border-width;
+            border-style: solid;
+            box-sizing: border-box;
+            outline: 0;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: center;
+            flex: 0 0 auto;
+            cursor: pointer;
+        }
+    }
+
+}

package/scss/timepicker/_theme.scss

@@ -0,0 +1,87 @@
+@include exports( "timepicker/theme" ) {
+
+    // Time picker
+    .k-timepicker {
+        @include fill(
+            $input-text,
+            $input-bg,
+            $input-border
+        );
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            @include fill(
+                $input-hovered-text,
+                $input-hovered-bg,
+                $input-hovered-border
+            );
+        }
+
+        // Focus state
+        &:focus,
+        &.k-state-focus {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+        &:focus-within {
+            @include fill(
+                $input-focused-text,
+                $input-focused-bg,
+                $input-focused-border
+            );
+            @include box-shadow( $input-focused-shadow );
+        }
+
+
+        // Invalid state
+        &.k-invalid,
+        &.ng-invalid,
+        &.k-state-invalid {
+            border-color: $invalid-border;
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus-within,
+            &.k-state-focus {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+
+        // Spinner
+        .k-select {
+            @include fill(
+                $picker-select-text,
+                $picker-select-bg,
+                $picker-select-border,
+                $picker-select-gradient
+            );
+        }
+        .k-select:hover,
+        .k-select.k-state-hover {
+            @include fill(
+                $picker-select-hovered-text,
+                $picker-select-hovered-bg,
+                $picker-select-hovered-border,
+                $picker-select-hovered-gradient
+            );
+        }
+        .k-select:active,
+        .k-select.k-state-active {
+            @include fill(
+                $picker-select-pressed-text,
+                $picker-select-pressed-bg,
+                $picker-select-pressed-border,
+                $picker-select-pressed-gradient
+            );
+        }
+    }
+
+}

package/scss/timepicker/_variables.scss

@@ -0,0 +1 @@
+// Time picker

package/scss/timeselector/_index.scss

@@ -0,0 +1,13 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../list/_index.scss";
+@import "../action-buttons/_index.scss";
+@import "../button/_index.scss";
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";