@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/adaptive/_layout.scss

@@ -3,463 +3,8 @@
 @use "../toolbar/_variables.scss" as *;
 @use "../listgroup/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/adaptive/_layout.scss" as *;
 
 @mixin kendo-adaptive--layout() {
-
-    .k-pane-wrapper {
-        border-width: var( --kendo-adaptive-border-width, #{$kendo-adaptive-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-adaptive-font-family, #{$kendo-adaptive-font-family} );
-        font-size: var( --kendo-adaptive-font-size, #{$kendo-adaptive-font-size} );
-        line-height: var( --kendo-adaptive-line-height, #{$kendo-adaptive-line-height} );
-        display: block;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        .k-pane {
-            width: 100%;
-            height: 100%;
-            user-select: none;
-            box-sizing: border-box;
-            font-family: sans-serif;
-            overflow-x: hidden;
-        }
-
-        .k-view {
-            top: 0;
-            left: 0;
-            position: relative;
-            border: 0;
-            box-sizing: border-box;
-            outline: 0;
-            font-family: var( --kendo-adaptive-font-family, #{$kendo-adaptive-font-family} );
-            font-size: var( --kendo-adaptive-font-size, #{$kendo-adaptive-font-size} );
-            line-height: var( --kendo-adaptive-line-height, #{$kendo-adaptive-line-height} );
-            display: flex;
-            height: 100%;
-            width: 100%;
-            flex-direction: column;
-            align-items: stretch;
-            align-content: stretch;
-            vertical-align: top;
-            -webkit-touch-callout: none;
-            -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-        }
-
-        .k-content {
-            min-height: 1px;
-            flex: 1;
-            align-items: stretch;
-            display: block;
-            width: auto;
-            overflow: hidden;
-            position: relative;
-        }
-    }
-
-}
-
-@mixin kendo-adaptive-grid--layout() {
-
-    .k-pane-wrapper {
-
-        > div.k-pane {
-            box-shadow: none;
-            font-weight: normal;
-        }
-
-        .k-popup-edit-form,
-        .k-grid-edit-form,
-        .k-grid-header-menu,
-        .k-grid-filter-menu {
-
-            .k-content {
-                overflow-y: auto;
-
-                > .k-scroll-container {
-                    position: absolute;
-                    width: 100%;
-                    min-height: 100%;
-                    box-sizing: border-box;
-                }
-            }
-        }
-
-        .k-grid-edit-form {
-
-            .k-popup-edit-form,
-            .k-edit-form-container {
-                width: auto;
-                min-width: auto;
-            }
-        }
-    }
-
-    .k-grid.k-grid-mobile {
-        border-width: 0;
-    }
-
-    .k-grid-mobile {
-        .k-resize-handle-inner::before {
-            content: "\e01e";
-            position: absolute;
-            font: 16px/1 "WebComponentsIcons"; // stylelint-disable-line
-            // The Calc is needed due to the the negative margin
-            // that removes the double bottom border of the header
-            top: calc( 50% - 1px);
-            left: 50%;
-            transform: translate(-50%, -50%);
-            padding: .2em;
-        }
-
-        .k-header a {
-            user-select: none;
-        }
-    }
-
-}
-
-@mixin kendo-adaptive-scheduler--layout() {
-
-    .k-pane-wrapper {
-
-        .k-scheduler-edit-form {
-
-            .k-recur-view {
-                padding: 0;
-                flex-direction: column;
-                align-items: stretch;
-
-                > .k-listgroup-form-row {
-                    margin: 0;
-                }
-            }
-
-            .k-recur-items-wrap {
-                width: 100%;
-                margin-block: -1px;
-                margin-inline: 0;
-            }
-
-            .k-scheduler-recur-end-wrap {
-                white-space: nowrap;
-            }
-        }
-    }
-
-    .k-scheduler {
-        &.k-scheduler-mobile {
-            border-width: 0;
-        }
-    }
-
-    .k-scheduler-mobile {
-
-        th {
-            font-weight: normal;
-        }
-
-        .k-event:hover .k-resize-handle {
-            visibility: hidden;
-        }
-
-        .k-scheduler-toolbar {
-            padding-block: $kendo-toolbar-md-padding-y;
-            padding-inline: $kendo-toolbar-md-padding-x;
-
-            > * {
-                margin: 0;
-            }
-
-            &::before {
-                display: none;
-            }
-
-            .k-scheduler-navigation {
-                width: 100%;
-                display: flex;
-                flex-flow: row nowrap;
-                justify-content: space-between;
-                margin: 0;
-
-                .k-nav-current {
-                    line-height: 1;
-                    display: flex;
-                    flex-flow: column nowrap;
-                    align-items: center;
-                    justify-content: space-evenly;
-                    gap: 0;
-                }
-            }
-
-            .k-scheduler-views-wrapper {
-                .k-views-dropdown {
-                    display: inline-block;
-                }
-            }
-        }
-
-        .k-scheduler-footer {
-            padding-block: $kendo-toolbar-md-padding-y;
-            padding-inline: $kendo-toolbar-md-padding-x;
-            display: flex;
-            justify-content: space-between;
-
-            > * {
-                margin: 0;
-            }
-
-            &::before {
-                display: none;
-            }
-        }
-
-        .k-scheduler-monthview {
-
-            .k-hidden {
-                height: 40px;
-            }
-
-            .k-scheduler-table td {
-                height: 40px;
-                vertical-align: top;
-                text-align: center;
-            }
-
-            .k-events-container {
-                position: absolute;
-                text-align: center;
-                height: 6px;
-                line-height: 6px;
-            }
-
-            .k-event {
-                position: static;
-                padding: 4px;
-                border-radius: 50%;
-                display: inline-block;
-                width: 4px;
-                height: 4px;
-                min-height: 0;
-                margin: 1px;
-            }
-        }
-
-        // Removing the "Days" header from the Mobile Scheduler will break the Web Scheduler
-        // Thus, the below selector is needed
-        .k-scheduler-dayview .k-mobile-header {
-
-            &.k-mobile-horizontal-header .k-scheduler-times table tr:first-child {
-                display: none;
-            }
-
-            .k-scheduler-header .k-scheduler-date-group {
-                display: none;
-            }
-        }
-
-        .k-scheduler-header-wrap > div {
-            overflow: visible;
-        }
-
-        .k-scheduler-agendaview {
-            .k-mobile-header {
-                display: none;
-            }
-
-            .k-scheduler-table {
-                table-layout: auto;
-
-                .k-scheduler-groupcolumn {
-                    width: 1%;
-                }
-
-                td {
-                    white-space: normal;
-                }
-            }
-        }
-
-        .k-mobile-header {
-            .k-scheduler-table td,
-            .k-scheduler-table th {
-                height: 1.5em;
-            }
-        }
-
-        .k-time-text,
-        .k-time-period {
-            display: block;
-            line-height: 1;
-        }
-
-        .k-time-period {
-            font-size: .7em;
-        }
-
-        .k-scheduler-table td,
-        .k-scheduler-table th {
-            height: 2em;
-            vertical-align: middle;
-        }
-
-        .k-scheduler-datecolumn-wrap {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .k-task {
-            display: flex;
-            align-items: center;
-            gap: .5em;
-
-            .k-scheduler-mark {
-                border-radius: 50%;
-                margin: 0;
-            }
-
-            .k-scheduler-task-text {
-                flex: 1 1 0%;
-            }
-        }
-
-        .k-scheduler-times,
-        .k-scheduler-agenda {
-
-            .k-scheduler-group-cell,
-            .k-scheduler-groupcolumn {
-                vertical-align: top;
-
-                .k-scheduler-group-text {
-                    writing-mode: vertical-lr;
-                    transform: rotate(180deg);
-                    white-space: nowrap;
-                }
-            }
-        }
-
-        .k-scrollbar-h tr + tr .k-scheduler-times {
-            border-bottom-width: 0;
-        }
-    }
-
-}
-
-@mixin kendo-adaptive-common--layout() {
-
-    .k-pane-wrapper {
-
-        .k-appbar {
-            padding: k-spacing(1);
-        }
-
-        .k-list-title,
-        .k-filter-help-text {
-            padding-block: $kendo-listgroup-item-padding-y;
-            padding-inline: $kendo-listgroup-item-padding-x;
-            display: block;
-        }
-
-        .k-listgroup-title {
-            padding-block: $kendo-listgroup-item-padding-y;
-            padding-inline: $kendo-listgroup-item-padding-x;
-            font-weight: bold;
-            text-transform: uppercase;
-        }
-
-        .k-listgroup {
-
-            .k-listgroup-item {
-                border-color: inherit;
-            }
-        }
-        .k-listgroup + .k-listgroup {
-            margin-top: k-spacing(4);
-        }
-
-        // Column menu
-        .k-column-menu {
-            padding: k-spacing(2);
-            display: flex;
-            flex-flow: column nowrap;
-            gap: k-spacing(2);
-
-            .k-filter-item .k-filterable * {
-                pointer-events: none;
-            }
-
-            .k-list-title,
-            .k-listgroup-title {
-                padding: 0;
-            }
-
-            .k-listgroup {
-                margin-inline: calc( #{k-spacing(2)} * -1 );
-            }
-        }
-
-        // Filter menu
-        .k-filter-menu {
-            padding: k-spacing(2);
-            display: flex;
-            flex-flow: column nowrap;
-            gap: k-spacing(2);
-
-            .k-list-title {
-                padding: 0;
-            }
-
-            .k-list-filter {
-                padding: 0;
-                display: flex;
-                flex-flow: column nowrap;
-                gap: inherit;
-            }
-
-            .k-filter-tools {
-                display: flex;
-                flex-flow: row nowrap;
-                gap: inherit;
-            }
-
-            .k-listgroup {
-                margin-inline: calc( #{k-spacing(2)} * -1 );
-            }
-        }
-
-        .k-popup-edit-form {
-
-            .k-recur-editor-wrap {
-                display: flex;
-            }
-
-            .k-mobiletimezoneeditor {
-                display: flex;
-                align-items: center;
-                justify-content: flex-end;
-                position: relative;
-                flex: 1 1 auto;
-            }
-        }
-
-        .k-multicheck-wrap.k-listgroup {
-            overflow-y: auto;
-        }
-
-        // Pager
-        .k-pager-wrap.k-pager-sm,
-        .k-pager.k-pager-sm {
-            justify-content: center;
-
-            .k-pager-refresh {
-                display: none;
-            }
-
-        }
-    }
-
+    @include kendo-adaptive--layout-base();
 }

package/scss/adaptive/_theme.scss

@@ -1,23 +1,11 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/adaptive/_theme.scss" as *;
 
 @mixin kendo-adaptive--theme() {
-
-    .k-pane-wrapper,
-    .k-view {
-        @include fill(
-            var( --kendo-adaptive-text, #{$kendo-adaptive-text} ),
-            var( --kendo-adaptive-bg, #{$kendo-adaptive-bg} ),
-            var( --kendo-adaptive-border, #{$kendo-adaptive-border} )
-        );
-    }
+    @include kendo-adaptive--theme-base();
 
     .k-pane-wrapper .k-pane {
-        > .k-view > .k-content {
-            background-position: 50% 50%;
-            background-color: var( --kendo-adaptive-content-bg, #{$kendo-adaptive-content-bg} );
-        }
-
         .k-grid-mobile {
             .k-column-active + th.k-header {
                 border-left-color: k-color(surface-alt);
@@ -27,66 +15,5 @@
                 background-color: k-color(surface-alt);
             }
         }
-
-        .k-scheduler-mobile {
-            .k-nav-current {
-                color: var( --kendo-adaptive-scheduler-current-text, #{$kendo-adaptive-scheduler-current-text} );
-            }
-
-            .k-scheduler-times,
-            .k-scheduler-header,
-            .k-scheduler-groupcolumn,
-            .k-mobile-scheduler-agendadate {
-                color: var( --kendo-adaptive-scheduler-base-text, #{$kendo-adaptive-scheduler-base-text} );
-            }
-
-            .k-time-period,
-            .k-mobile-scheduler-agendaweekday {
-                color: var( --kendo-adaptive-scheduler-subtle-text, #{$kendo-adaptive-scheduler-subtle-text} );
-            }
-
-            .k-scheduler-times,
-            .k-scheduler-header,
-            .k-scheduler-header-wrap,
-            .k-scheduler-datecolumn,
-            .k-scheduler-groupcolumn,
-            .k-scheduler-group-cell,
-            .k-scheduler-header-all-day {
-                background-color: var( --kendo-adaptive-content-bg, #{$kendo-adaptive-content-bg} );
-            }
-
-            .k-scheduler-toolbar .k-scheduler-tools > li {
-                display: inline-block;
-                background-color: inherit;
-            }
-        }
-
-        .k-grid-edit-form,
-        .k-grid-header-menu,
-        .k-grid-filter-menu,
-        .k-scheduler-edit-form {
-            .k-item,
-            .k-link {
-                color: k-color(on-app-surface);
-            }
-
-            .k-clear,
-            .k-select-all,
-            .k-scheduler-delete,
-            .k-scheduler-resetSeries { // stylelint-disable-line
-                color: var( --kendo-adaptive-menu-clear-text, #{$kendo-adaptive-menu-clear-text} );
-            }
-        }
-
-        .k-column-menu {
-            .k-listgroup-item.k-selected {
-                color: var( --kendo-adaptive-grid-sort-text, #{$kendo-adaptive-grid-sort-text} );
-                background: none;
-            }
-            .k-listgroup-item.k-selected .k-link {
-                color: inherit;
-            }
-        }
     }
-
 }

package/scss/adaptive/_variables.scss

@@ -2,32 +2,53 @@
 
 
 // Adaptive
-$kendo-adaptive-bg: k-color(surface-alt) !default;
-$kendo-adaptive-text: k-color(on-app-surface) !default;
-$kendo-adaptive-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-adaptive-bg: var( --kendo-adaptive-bg, #{k-color(surface-alt)} ) !default;
+$kendo-adaptive-text: var( --kendo-adaptive-text, #{k-color(on-app-surface)} ) !default;
+$kendo-adaptive-border: var( --kendo-adaptive-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
-$kendo-adaptive-content-bg: k-color(surface-alt) !default;
-$kendo-adaptive-content-text: k-color(on-app-surface) !default;
+$kendo-adaptive-content-bg: var( --kendo-adaptive-content-bg, #{k-color(surface-alt)} ) !default;
+$kendo-adaptive-content-text: var( --kendo-adaptive-content-text, #{k-color(on-app-surface)} ) !default;
 
-$kendo-adaptive-menu-bg: k-color(primary) !default;
-$kendo-adaptive-menu-text: k-color(app-surface) !default;
+$kendo-adaptive-menu-bg: var( --kendo-adaptive-menu-bg, #{k-color(primary)} ) !default;
+$kendo-adaptive-menu-text: var( --kendo-adaptive-menu-text, #{k-color(app-surface)} ) !default;
 
-$kendo-adaptive-menu-clear-text: k-color(primary) !default;
+$kendo-adaptive-menu-clear-text: var( --kendo-adaptive-menu-clear-text, #{k-color(primary)} ) !default;
 
-$kendo-adaptive-menu-item-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
-$kendo-adaptive-menu-title-text: k-color(on-app-surface) !default;
+$kendo-adaptive-menu-item-border: var( --kendo-adaptive-menu-item-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-adaptive-menu-title-text: var( --kendo-adaptive-menu-title-text, #{k-color(on-app-surface)} ) !default;
 
-$kendo-adaptive-border-width: 1px !default;
-$kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
-$kendo-adaptive-font-size: var( --kendo-font-size, 1rem ) !default;
-$kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-adaptive-border-width: var( --kendo-adaptive-border-width, 1px ) !default;
+$kendo-adaptive-font-family: var( --kendo-adaptive-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-adaptive-font-size: var( --kendo-adaptive-font-size, var( --kendo-font-size, 1rem ) ) !default;
+$kendo-adaptive-line-height: var( --kendo-adaptive-line-height, var( --kendo-line-height, normal ) ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: k-color(primary) !default;
+$kendo-adaptive-grid-sort-text: var( --kendo-adaptive-grid-sort-text, #{k-color(primary)} ) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: k-color(primary) !default;
-$kendo-adaptive-scheduler-base-text: inherit !default;
-$kendo-adaptive-scheduler-subtle-text: k-color(subtle) !default;
+$kendo-adaptive-scheduler-current-text: var( --kendo-adaptive-scheduler-current-text, #{k-color(primary)} ) !default;
+$kendo-adaptive-scheduler-base-text: var( --kendo-adaptive-scheduler-base-text, inherit ) !default;
+$kendo-adaptive-scheduler-subtle-text: var( --kendo-adaptive-scheduler-subtle-text, #{k-color(subtle)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (
+    $kendo-adaptive-bg: $kendo-adaptive-bg,
+    $kendo-adaptive-text: $kendo-adaptive-text,
+    $kendo-adaptive-border: $kendo-adaptive-border,
+    $kendo-adaptive-content-bg: $kendo-adaptive-content-bg,
+    $kendo-adaptive-content-text: $kendo-adaptive-content-text,
+    $kendo-adaptive-menu-bg: $kendo-adaptive-menu-bg,
+    $kendo-adaptive-menu-text: $kendo-adaptive-menu-text,
+    $kendo-adaptive-menu-clear-text: $kendo-adaptive-menu-clear-text,
+    $kendo-adaptive-menu-item-border: $kendo-adaptive-menu-item-border,
+    $kendo-adaptive-menu-title-text: $kendo-adaptive-menu-title-text,
+    $kendo-adaptive-border-width: $kendo-adaptive-border-width,
+    $kendo-adaptive-font-family: $kendo-adaptive-font-family,
+    $kendo-adaptive-font-size: $kendo-adaptive-font-size,
+    $kendo-adaptive-line-height: $kendo-adaptive-line-height,
+    $kendo-adaptive-grid-sort-text: $kendo-adaptive-grid-sort-text,
+    $kendo-adaptive-scheduler-current-text: $kendo-adaptive-scheduler-current-text,
+    $kendo-adaptive-scheduler-base-text: $kendo-adaptive-scheduler-base-text,
+    $kendo-adaptive-scheduler-subtle-text: $kendo-adaptive-scheduler-subtle-text
+);