@progress/kendo-theme-classic 4.43.1-dev.0 → 4.43.1-dev.4

package/modules/@progress/kendo-theme-default/scss/popup/_theme.scss

@@ -1,4 +1,4 @@
-@include exports("popup/theme") {
+@include exports( "popup/theme" ) {
 
     .k-popup {
         @include fill(
@@ -8,82 +8,6 @@
         );
     }
 
-    .k-popup > kendo-list > .k-first {
-        border-bottom-color: $component-border;
-    }
-
-    .k-popup > .k-group-header,
-    .k-popup > .k-virtual-wrap > .k-group-header {
-        color: $popup-header-text;
-    }
-
-    .k-popup > .k-group-header,
-    .k-popup .k-outer-group-header.k-first,
-    .k-popup > .k-virtual-wrap > .k-group-header {
-        border-bottom-color: $component-border;
-        box-shadow: $list-container-shadow;
-    }
-    .k-popup .k-outer-group-header {
-        color: $popup-header-text;
-        border-bottom-color: $component-border;
-    }
-    .k-popup .k-list .k-item > .k-group {
-        color: $grouping-header-text;
-        background: $grouping-header-bg;
-    }
-    .k-popup .k-list .k-item > .k-group::before {
-        border-color: $grouping-header-bg $grouping-header-bg transparent transparent;
-    }
-    .k-rtl.k-popup .k-list .k-item > .k-group::before,
-    [dir="rtl"] .k-popup .k-list .k-item > .k-group::before {
-        border-color: $grouping-header-bg transparent transparent $grouping-header-bg;
-    }
-    .k-group-header + div > .k-list > .k-item.k-first::before {
-        border-color: $grouping-header-border;
-    }
-    .k-list > .k-outer-group-header {
-        border-color: $grouping-header-border;
-    }
-    .k-popup > .k-colorpalette,
-    .k-popup > .k-flatcolorpicker {
-        background: transparent;
-    }
-}
-
-@include exports( "list/theme" ) {
-
-    .k-list {}
-
-    .k-list .k-item:hover,
-    .k-list .k-item.k-state-hover,
-    .k-list-optionlabel:hover,
-    .k-list-optionlabel.k-state-hover {
-        @include fill(
-            $list-item-hovered-text,
-            $list-item-hovered-bg
-        );
-
-        &.k-state-selected {
-            color: $list-item-selected-text;
-            background-color: shade( $list-item-selected-bg );
-        }
-    }
-
-    .k-list .k-item:focus,
-    .k-list .k-item.k-state-focused,
-    .k-list-optionlabel:focus,
-    .k-list-optionlabel.k-state-focused {
-        @include box-shadow( $list-item-focused-shadow );
-    }
-
-    .k-list .k-item.k-state-selected,
-    .k-list-optionlabel.k-state-selected {
-        @include fill(
-            $list-item-selected-text,
-            $list-item-selected-bg
-        );
-    }
-
     .k-animation-container {
         @include border-bottom-radius-only( $border-radius );
     }
@@ -96,78 +20,10 @@
     .k-animation-container-fixed > .k-popup {
         @include box-shadow( none );
     }
-}
-
-
-
-
-@include exports( "listcontainer/theme" ) {
-
-
-    .k-list-container {
-
-        // Button normal state
-        .k-button {
-            @include box-shadow( none );
-        }
-
-
-        // Button hover state
-        .k-button:hover,
-        .k-button.k-state-hover {
-            @include fill(
-                $list-item-hovered-text,
-                $list-item-hovered-bg
-            );
-        }
-
-
-        // Button active state
-        .k-button:active,
-        .k-button.k-state-active {
-            @include fill(
-                inherit,
-                inherit
-            );
-        }
-
-
-        // Button selected state
-        .k-button.k-state-selected {
-            @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
-            );
-        }
-
-
-        // Button focus state
-        .k-button:focus,
-        .k-button.k-state-focus,
-        .k-button.k-state-focused {
-            box-shadow: $list-item-focused-shadow;
-        }
-
-
-        // Button disabled state
-        .k-button.k-state-disabled {
-            background: transparent;
-        }
-
-
-        .k-nodata {
-            color: $list-container-no-data-text;
-
-            .k-button {
-                @include fill(
-                    $button-text,
-                    $button-bg,
-                    $button-border,
-                    $button-gradient
-                );
-            }
-        }
 
+    .k-popup > .k-colorpalette,
+    .k-popup > .k-flatcolorpicker {
+        background: transparent;
     }
 
 }

package/modules/@progress/kendo-theme-default/scss/popup/_variables.scss

@@ -1,17 +1,12 @@
 // Popup
-$popup-padding-x: 0px !default;
-$popup-padding-y: 0px !default;
+$popup-padding-x: null !default;
+$popup-padding-y: null !default;
 $popup-border-width: 1px !default;
 $popup-border-radius: null !default;
 
 $popup-font-size: $font-size !default;
 $popup-line-height: $line-height !default;
 
-$popup-header-padding: $list-item-padding-y $list-item-padding-x !default;
-$popup-header-font-size: null !default;
-$popup-header-text: null !default;
-$popup-filter-padding-x: $input-padding-x !default;
-
 $popup-content-padding-x: map-get( $spacing, 2 ) !default;
 $popup-content-padding-y: map-get( $spacing, 2 ) !default;
 

package/modules/@progress/kendo-theme-default/scss/radio/_index.scss

@@ -2,6 +2,8 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
+@import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";
 
 

package/modules/@progress/kendo-theme-default/scss/radio/_layout.scss

@@ -16,6 +16,7 @@
         background-repeat: no-repeat;
         background-size: contain;
         display: inline-block;
+        flex: none;
         vertical-align: middle;
         position: relative;
         cursor: pointer;
@@ -101,7 +102,7 @@
 
         // Hide empty label
         &:empty {
-            display: none;
+            display: none !important; // sass-lint:disable-line no-important
         }
 
         .k-ripple {

package/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/scss/scheduler/_layout.scss

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

package/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/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/modules/@progress/kendo-theme-default/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;
         }
     }
 
@@ -701,9 +697,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/modules/@progress/kendo-theme-default/scss/table/_index.scss

@@ -0,0 +1,19 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../input/_index.scss";
+@import "../floating-label/_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/modules/@progress/kendo-theme-default/scss/table/_layout.scss

@@ -0,0 +1,228 @@
+@include exports("table/layout") {
+
+    // Table
+    .k-table {
+        width: 100%;
+        max-width: none;
+        border-width: $table-border-width;
+        border-style: solid;
+        border-collapse: collapse;
+        border-spacing: 0;
+        empty-cells: show;
+        outline: none;
+        font-size: $table-font-size;
+        line-height: $line-height;
+        text-align: left;
+    }
+
+
+    // Data table
+    .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-row,
+    .k-table-alt-row {
+        border-color: inherit;
+    }
+    .k-table-th,
+    .k-table-td {
+        padding: $table-cell-padding-y $table-cell-padding-x;
+        border-width: 0 0 $grid-cell-horizontal-border-width $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;
+        }
+    }
+
+
+    // 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 $table-cell-vertical-border-width 0 0;
+        border-style: solid;
+        overflow: hidden;
+    }
+
+
+    // 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: $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 {
+                padding: 0 ( $table-cell-padding-x / 2 );
+                font-size: .75em;
+                position: absolute;
+                top: 0;
+                right: 0;
+            }
+        }
+    }
+
+
+    // Virtualization
+    .k-virtual-table .k-table-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 $table-cell-vertical-border-width 0 0;
+        border-style: solid;
+        overflow: hidden;
+    }
+
+
+    // 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: $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: $table-cell-vertical-border-width;
+                border-right-width: 0;
+            }
+        }
+
+        .k-table-list {
+            .k-table-group-td > span {
+                left: 0;
+                right: auto;
+            }
+        }
+    }
+
+}

package/modules/@progress/kendo-theme-default/scss/table/_theme.scss

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