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

package/scss/radio/_variables.scss

@@ -132,21 +132,15 @@ $kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
 
 // Radio list
 
-/// The list margin of radio button.
-/// @group radio
-$kendo-radio-list-margin: 0px !default;
-/// The list padding of radio button.
+/// The horizontal list item margin of radio button.
 /// @group radio
-$kendo-radio-list-padding: 0px !default;
+$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
 /// The horizontal list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
 /// The vertical list item padding of radio button.
 /// @group radio
-$kendo-radio-list-item-padding-y: $list-item-padding-y !default;
-/// The horizontal list item margin of radio button.
-/// @group radio
-$kendo-radio-list-horizontal-item-margin-x: 32px !default;
+$kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 
 // Radio ripple

package/scss/scheduler/_index.scss

@@ -6,7 +6,7 @@
 @import "../icons/_index.scss";
 @import "../adaptive/_index.scss";
 @import "../button/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../dialog/_index.scss";
 @import "../tooltip/_index.scss";

package/scss/scheduler/_layout.scss

@@ -937,7 +937,7 @@
         .k-widget.k-recur-month,
         .k-widget.k-recur-weekday,
         .k-widget.k-recur-weekday-offset {
-            width: 9em;
+            width: 10em;
         }
 
     }

package/scss/scrollview/_layout.scss

@@ -2,7 +2,7 @@
 
     kendo-scrollview.k-scrollview-wrap,
     kendo-scrollview.k-scrollview,
-    .k-widget.k-scrollview {
+    .k-scrollview {
         border-width: $scrollview-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -61,6 +61,11 @@
             width: calc( 100% / var(--kendo-scrollview-views, 1) );
             flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
         }
+
+        [dir="rtl"] &,
+        .k-rtl & {
+            transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+        }
     }
 
 

package/scss/slider/_layout.scss

@@ -16,11 +16,13 @@
         -webkit-tap-highlight-color: $rgba-transparent;
 
         .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";
@@ -17,6 +17,7 @@
 @import "../tabstrip/_index.scss";
 @import "../treeview/_index.scss";
 @import "../icons/_index.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/spreadsheet/_layout.scss

@@ -65,7 +65,8 @@
     .k-spreadsheet-tabstrip .k-loading {
         display: none;
     }
-    .k-spreadsheet-tabstrip .k-content {
+    .k-spreadsheet-tabstrip .k-content,
+    .k-spreadsheet-tabstrip .k-tabstrip-content {
         @include border-radius( 0 );
         padding: 0;
         border-width: 0;
@@ -88,14 +89,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-input,
+        .k-picker:not(.k-colorpicker) {
+            width: 5em;
         }
     }
 
@@ -180,7 +177,7 @@
         min-width: 100px;
 
         .k-item {
-            padding: $list-item-padding-y $list-item-padding-x;
+            padding: $kendo-list-item-padding-y-md $kendo-list-item-padding-x-md;
         }
     }
     .k-syntax-func,
@@ -257,6 +254,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 {
@@ -615,33 +613,45 @@
         }
 
         // 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: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            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-widget {
-                width: 100%;
-                margin-bottom: 3px;
-            }
+        .k-details-content,
+        .k-columnmenu-item-content {
+            padding: map-get( $spacing, 2 );
+            display: flex;
+            flex-flow: column nowrap;
+            gap: map-get( $spacing, 2 );
 
             .k-filter-and {
-                width: 75px;
-                margin: 8px 0;
+                width: min-content;
+                align-self: flex-start;
             }
         }
+
+        .k-actions {
+            margin: 0;
+            padding: 0;
+        }
     }
 
 }
@@ -668,9 +678,6 @@
         }
         .k-reset-color { border-bottom-width: 1px; }
         .k-custom-color { border-top-width: 1px; }
-        .k-spreadsheet-color-palette {
-            padding: $popup-padding-y;
-        }
         .k-spreadsheet-border-type-palette {
             width: 12.5rem;
             height: 5rem;

package/scss/spreadsheet/_theme.scss

@@ -161,8 +161,8 @@
 
             .k-item.k-state-hover {
                 @include fill(
-                    $list-item-hovered-text,
-                    $list-item-hovered-bg
+                    $kendo-list-item-hover-text,
+                    $kendo-list-item-hover-bg
                 );
             }
         }
@@ -191,16 +191,16 @@
         .k-button:hover,
         .k-button.k-state-hover {
             @include fill(
-                $list-item-hovered-text,
-                $list-item-hovered-bg
+                $kendo-list-item-hover-text,
+                $kendo-list-item-hover-bg
             );
         }
         .k-button:active,
         .k-button.k-state-active,
         .k-button.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/switch/_layout.scss

@@ -102,7 +102,8 @@
         }
 
         .k-switch-#{$size}[dir="rtl"],
-        [dir="rtl"] .k-switch-#{$size} {
+        [dir="rtl"] .k-switch-#{$size},
+        .k-rtl .k-switch-#{$size} {
 
             .k-switch-label-on {
                 left: auto;
@@ -125,7 +126,8 @@
 
     // RTL
     .k-switch[dir="rtl"],
-    [dir="rtl"] .k-switch {
+    [dir="rtl"] .k-switch,
+    .k-rtl .k-switch {
 
         .k-switch-thumb {
             transform: translate( 50%, -50% );

package/scss/{datetime → table}/_index.scss

@@ -3,14 +3,17 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../action-buttons/_index.scss";
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
-@import "../calendar/_index.scss";
+@import "../combobox/_index.scss";
 @import "../popup/_index.scss";
+@import "../toolbar/_variables.scss";
+@import "../menu/_variables.scss";
+@import "../grid/_variables.scss";
 
 
 // Component
 @import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
+

package/scss/table/_layout.scss

@@ -0,0 +1,275 @@
+@include exports( "table/layout" ) {
+
+    // Table
+    .k-table {
+        width: 100%;
+        max-width: none;
+        border-width: $kendo-table-border-width;
+        border-style: solid;
+        font-size: $kendo-table-font-size;
+        line-height: $kendo-table-line-height;
+        text-align: left;
+        border-collapse: collapse;
+        border-spacing: 0;
+        empty-cells: show;
+        outline: none;
+    }
+
+
+    // Data table
+    .k-data-table {
+        border-width: $kendo-table-border-width;
+        border-style: solid;
+
+        .k-table {
+            table-layout: fixed;
+        }
+    }
+
+
+    // Table native parts
+    .k-table-thead,
+    .k-table-tbody,
+    .k-table-tfoot,
+    .k-table-row,
+    .k-table-alt-row {
+        border-color: inherit;
+        text-align: inherit;
+    }
+    .k-table-th,
+    .k-table-td {
+        padding: $kendo-table-cell-padding-y $kendo-table-cell-padding-x;
+        border-width: 0 0 $grid-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
+        border-style: solid;
+        border-color: inherit;
+        box-sizing: border-box;
+        font-weight: normal;
+        text-align: inherit;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: table-cell;
+        overflow: hidden;
+        position: relative;
+
+        &:first-child {
+            border-left-width: 0;
+        }
+    }
+    .k-table-th {
+        border-bottom-width: 1px;
+    }
+
+
+    // Table header
+    .k-table-header {
+        padding-inline-end: var(--kendo-scrollbar-width);
+        border-width: 0 0 1px 0;
+        border-style: solid;
+        box-sizing: border-box;
+
+        .k-table {
+            border-width: 0;
+        }
+    }
+    .k-table-header-wrap {
+        margin-right: -1px;
+        width: 100%;
+        border-width: 0 $kendo-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 {
+        flex: none;
+
+        .k-table-th {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            align-content: center;
+        }
+    }
+
+
+    // Table list
+    .k-table-list {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        max-width: none;
+        border-width: 0;
+        display: table;
+        border-collapse: collapse;
+        border-spacing: 0;
+        table-layout: fixed;
+        empty-cells: show;
+        list-style: none;
+        outline: none;
+
+        .k-table-row,
+        .k-table-group-row {
+            width: 100%;
+            box-sizing: border-box;
+            display: table-row;
+            position: relative;
+        }
+        .k-table-row.k-first {
+            border-top: 1px solid currentColor;
+        }
+
+        .k-table-th,
+        .k-table-td {
+            vertical-align: middle;
+        }
+
+        .k-table-group-row {
+
+            &::before {
+                content: ".";
+                padding: $kendo-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
+            border-left-width: 0 !important; // sass-lint:disable-line no-important
+            border-right-width: 0 !important; // sass-lint:disable-line no-important
+        }
+        .k-table-group-td {
+            padding: 0 !important; // sass-lint:disable-line no-important
+            width: 0 !important; // sass-lint:disable-line no-important
+            border-left-width: 0 !important; // sass-lint:disable-line no-important
+            border-right-width: 0 !important; // sass-lint:disable-line no-important
+            overflow: visible; // sass-lint:disable-line no-important
+
+            > span {
+                font-size: .75em;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+        }
+    }
+
+
+    // 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;
+        overflow: auto;
+
+        > .k-table {
+            border-width: 0;
+        }
+    }
+
+
+    // Table footer
+    .k-table-footer {
+        padding-inline-end: var(--kendo-scrollbar-width);
+        border-width: 1px 0 0 0;
+        border-style: solid;
+        box-sizing: border-box;
+
+        .k-table {
+            border-width: 0;
+        }
+    }
+    .k-table-footer-wrap {
+        margin-right: -1px;
+        width: 100%;
+        border-width: 0 $kendo-table-cell-vertical-border-width 0 0;
+        border-style: solid;
+        border-color: inherit;
+        overflow: hidden;
+    }
+
+
+    // Sizes
+    @each $size, $size-props in $kendo-table-sizes {
+        $_font-size: map-get( $size-props, font-size);
+        $_line-height: map-get( $size-props, line-height);
+        $_cell-padding-x: map-get( $size-props, cell-padding-x);
+        $_cell-padding-y: map-get( $size-props, cell-padding-y);
+
+        .k-table-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+        }
+
+        .k-table-#{$size} .k-table-th,
+        .k-table-#{$size} .k-table-td {
+            padding: $_cell-padding-y $_cell-padding-x;
+        }
+
+        .k-table-#{$size} .k-table-list .k-table-group-td > span {
+            padding: 0 ( $_cell-padding-x / 2 );
+        }
+
+        .k-table-#{$size} .k-table-list .k-table-group-row::before {
+            padding: $_cell-padding-y 0;
+        }
+    }
+
+
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        &.k-table,
+        .k-table {
+            text-align: right;
+
+            .k-table-th,
+            .k-table-td {
+                border-left-width: 0;
+                border-right-width: $kendo-table-cell-vertical-border-width;
+
+                &:first-child {
+                    border-right-width: 0;
+                }
+            }
+
+            .k-table-header-wrap,
+            .k-table-footer-wrap {
+                margin-right: 0;
+                margin-left: -1px;
+                border-left-width: $kendo-table-cell-vertical-border-width;
+                border-right-width: 0;
+            }
+        }
+
+        .k-table-list {
+            .k-table-group-td > span {
+                left: 0;
+                right: auto;
+            }
+        }
+    }
+
+}

package/scss/table/_theme.scss

@@ -0,0 +1,82 @@
+@include exports( "table/theme" ) {
+
+    // Table
+    .k-table,
+    .k-data-table {
+        border-color: $kendo-table-border;
+        color: $kendo-table-text;
+        background-color: $kendo-table-bg;
+    }
+
+
+    // Table header
+    .k-table-thead,
+    .k-table-header,
+    .k-table-group-sticky-header {
+        border-color: $kendo-table-header-border;
+        color: $kendo-table-header-text;
+        background-color: $kendo-table-header-bg;
+    }
+
+
+    // Table footer
+    .k-table-tfoot,
+    .k-table-footer {
+        border-color: $kendo-table-footer-border;
+        color: $kendo-table-footer-text;
+        background-color: $kendo-table-footer-bg;
+    }
+
+
+    // Group row
+    .k-table-group-row {
+        border-color: $kendo-table-group-row-border;
+        color: $kendo-table-group-row-text;
+        background-color: $kendo-table-group-row-bg;
+    }
+    .k-table-group-td > span {
+        color: $kendo-table-bg;
+        background-color: $kendo-table-text;
+    }
+
+
+    // Alternating row
+    .k-table-alt-row {
+        border-color: $kendo-table-alt-row-border;
+        color: $kendo-table-alt-row-text;
+        background-color: $kendo-table-alt-row-bg;
+    }
+
+
+    // Hover state
+    .k-table-tbody .k-table-row:hover,
+    .k-table-list .k-table-row:hover,
+    .k-table-tbody .k-table-row.k-hover,
+    .k-table-list .k-table-row.k-hover {
+        border-color: $kendo-table-hover-border;
+        color: $kendo-table-hover-text;
+        background-color: $kendo-table-hover-bg;
+    }
+
+
+    // Focus state
+    .k-table-tbody .k-table-row.k-focus,
+    .k-table-list .k-table-row.k-focus,
+    .k-table-tbody .k-table-td.k-focus,
+    .k-table-list .k-table-td.k-focus {
+        border-color: $kendo-table-focus-border;
+        color: $kendo-table-focus-text;
+        background-color: $kendo-table-focus-bg;
+        box-shadow: $kendo-table-focus-shadow;
+    }
+
+
+    // Selected state
+    .k-table-tbody .k-table-row.k-selected,
+    .k-table-list .k-table-row.k-selected {
+        border-color: $kendo-table-selected-border;
+        color: $kendo-table-selected-text;
+        background-color: $kendo-table-selected-bg;
+    }
+
+}