@progress/kendo-theme-default 10.2.0-dev.0 → 10.2.0-dev.2

package/scss/time-marker/_variables.scss

@@ -4,3 +4,8 @@ $kendo-current-time-width: 1px !default;
 /// The color of the current time indicator.
 /// @group time-marker
 $kendo-current-time-color: #ff0000 !default;
+
+@forward "@progress/kendo-theme-core/scss/components/time-marker/_variables.scss" with (
+    $kendo-current-time-width: $kendo-current-time-width,
+    $kendo-current-time-color: $kendo-current-time-color
+);

package/scss/timedurationpicker/_layout.scss

@@ -1,15 +1,4 @@
-@mixin kendo-time-duration-picker--layout-base() {
-
-    // Time duration picker
-    .k-time-duration-picker {}
-
-
-    // Legacy aliases
-    .k-timedurationpicker {
-        @extend .k-time-duration-picker;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/timedurationpicker/_layout.scss" as *;
 
 
 @mixin kendo-time-duration-picker--layout() {

package/scss/timedurationpicker/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-time-duration-picker--theme-base() {
-
-    // Time duration picker
-    .k-time-duration-picker {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/timedurationpicker/_theme.scss" as *;
 
 
 @mixin kendo-time-duration-picker--theme() {

package/scss/timeline/_layout.scss

@@ -1,448 +1,4 @@
-@use "sass:math";
-@use "../core/_index.scss" as *;
-@use "../icons/_variables.scss" as *;
-@use "./variables.scss" as *;
-@use "../card/_variables.scss" as *;
-
-@mixin kendo-timeline--layout-base() {
-
-    .k-timeline {
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-timeline-font-family;
-        font-size: $kendo-timeline-font-size;
-        line-height: $kendo-timeline-line-height;
-        display: block;
-        background-color: transparent;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after,
-        &::before,
-        &::after {
-            box-sizing: border-box;
-        }
-
-        ul {
-            margin: 0;
-            padding: 0;
-
-            li {
-                list-style-type: none;
-            }
-        }
-
-        .k-timeline-flag {
-            display: inline-block;
-            text-align: center;
-            padding-block: $kendo-timeline-flag-padding-y;
-            padding-inline: $kendo-timeline-flag-padding-x;
-            border-radius: k-border-radius(md);
-            line-height: $kendo-timeline-flag-line-height;
-            min-width: $kendo-timeline-flag-min-width;
-            max-width: $kendo-timeline-flag-max-width;
-            position: relative;
-            z-index: 1;
-        }
-
-        .k-timeline-circle {
-            width: $kendo-timeline-circle-width;
-            height: $kendo-timeline-circle-height;
-            border-radius: 50%;
-            flex-shrink: 0;
-            position: relative;
-            z-index: 1;
-        }
-
-        &.k-timeline-dates-hidden {
-            .k-timeline-date {
-                display: none;
-            }
-        }
-
-        &.k-timeline-collapsible {
-            .k-card-header {
-                cursor: pointer;
-            }
-
-            .k-event-collapse {
-                display: flex;
-            }
-        }
-    }
-
-    .k-timeline-card {
-        .k-card {
-            position: relative;
-            overflow: visible;
-
-            .k-card-header {
-                overflow: visible;
-                border-bottom: 0;
-            }
-
-            .k-card-header + .k-card-body {
-                padding-top: 0;
-            }
-
-            .k-card-body {
-                overflow-y: auto;
-
-                // Scrollbar styles for Mozilla
-                scrollbar-width: thin;
-
-                // Scrollbar styles for Chrome, Safari and Opera
-                &::-webkit-scrollbar {
-                    width: 5px;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    border-radius: k-border-radius(md);
-                }
-            }
-        }
-
-        .k-timeline-card-callout {
-            &.k-callout-w,
-            &.k-callout-e {
-                top: $kendo-timeline-track-event-offset;
-            }
-        }
-    }
-
-    .k-timeline-vertical,
-    .k-timeline-horizontal {
-        padding-block: 0;
-        padding-inline: $kendo-timeline-spacing-x;
-        margin-block: $kendo-timeline-spacing-y;
-        margin-inline: 0;
-        width: 100%;
-        position: relative;
-        border: 0;
-    }
-
-    .k-timeline-vertical,
-    .k-timeline-horizontal .k-timeline-track-wrap {
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            border-width: $kendo-timeline-track-border-width;
-            border-style: solid;
-        }
-    }
-
-    .k-timeline-vertical {
-        padding-left: $kendo-timeline-vertical-padding-with-dates-calc;
-
-        &.k-timeline-dates-hidden {
-            padding-left: $kendo-timeline-vertical-padding-calc;
-        }
-
-        &::after {
-            height: 100%;
-            width: $kendo-timeline-track-size;
-            transform: translateX(-50%);
-            border-radius: k-border-radius(lg);
-        }
-
-        .k-timeline-flag-wrap {
-            display: flex;
-            align-items: center;
-
-            &:first-child {
-                padding-top: $kendo-timeline-spacing-y;
-            }
-        }
-
-        .k-timeline-flag {
-            transform: translateX(-50%);
-        }
-
-        .k-timeline-date-wrap {
-            position: absolute;
-            padding-right: $kendo-timeline-items-padding;
-            margin-top: $kendo-timeline-track-event-offset;
-            transform: translate(-100%, -50%);
-            text-align: end;
-        }
-
-        .k-timeline-event {
-            display: flex;
-            align-items: flex-start;
-            padding-block: $kendo-timeline-spacing-y;
-            padding-inline: 0;
-        }
-
-        .k-timeline-card {
-            padding-left: $kendo-timeline-items-padding;
-
-            .k-card {
-                margin-left: $kendo-timeline-items-padding;
-                min-height: $kendo-timeline-event-min-height-calc;
-                width: $kendo-timeline-event-width;
-                max-width: 100%;
-
-                .k-card-header {
-                    border-radius: $kendo-card-border-radius; // In vertical collapsed mode there shold be a bottom border radius
-                }
-
-                .k-card-title {
-                    display: flex;
-                    justify-content: space-between;
-
-                    .k-event-title {
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                    }
-
-                }
-            }
-
-            .k-event-collapse {
-                margin-block: calc( #{$kendo-icon-spacing} * -1 );
-                margin-inline: 0;
-                transform: rotate(90deg);
-                transition: transform .2s ease-in-out;
-            }
-
-            &.k-collapsed {
-                .k-card-body,
-                .k-card-actions {
-                    display: none;
-                }
-
-                .k-event-collapse {
-                    transform: rotate(0deg);
-                }
-            }
-
-        }
-
-        .k-timeline-circle {
-            margin-top: $kendo-timeline-track-event-offset;
-            transform: translate(-50%, -50%);
-            margin-right: - math.div( $kendo-timeline-circle-width, 2 );
-        }
-
-        &.k-timeline-alternating {
-            padding-left: $kendo-timeline-spacing-x;
-
-            &::after {
-                left: 50%;
-            }
-
-            .k-timeline-flag-wrap {
-                justify-content: center;
-            }
-
-            .k-timeline-flag {
-                transform: translateX(0);
-            }
-
-            .k-timeline-event {
-                justify-content: space-between;
-
-                &.k-reverse {
-                    flex-direction: row-reverse;
-
-                    .k-timeline-date-wrap {
-                        text-align: start;
-                        padding-right: 0;
-                        padding-left: $kendo-timeline-items-padding;
-                    }
-
-                    .k-timeline-card {
-                        padding-left: 0;
-                        padding-right: $kendo-timeline-items-padding;
-
-                        .k-card {
-                            margin-right: $kendo-timeline-items-padding;
-                            margin-left: auto;
-                        }
-                    }
-                }
-            }
-
-            .k-timeline-card,
-            .k-timeline-date-wrap {
-                flex-basis: 50%;
-                min-width: 0;
-            }
-
-            .k-timeline-date-wrap {
-                position: static;
-                transform: translateY(-50%);
-            }
-
-            .k-timeline-circle {
-                transform: translateY(-50%);
-                margin-right: 0;
-            }
-        }
-    }
-
-    .k-timeline-horizontal {
-
-        .k-timeline-track-item {
-            flex: 1 0 20%; // 20% are default, this will be calculated when rendered
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            position: relative;
-            flex-direction: column;
-
-            &:hover {
-                cursor: pointer;
-            }
-
-            &.k-timeline-flag-wrap:hover {
-                cursor: default;
-            }
-        }
-
-        .k-timeline-date-wrap {
-            margin-top: auto;
-            margin-bottom: $kendo-timeline-date-margin-bottom;
-        }
-
-        .k-timeline-card {
-            height: 100%;
-        }
-
-        .k-card {
-            max-height: 100%;
-        }
-
-        .k-timeline-events-list {
-            overflow-x: hidden;
-            padding-top: $kendo-timeline-track-margin-bottom;
-
-            .k-timeline-scrollable-wrap {
-                position: relative;
-                height: $kendo-timeline-event-height;
-
-                .k-timeline-event {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-
-        .k-timeline-track-wrap {
-            position: relative;
-            padding: calc( #{$kendo-timeline-track-arrow-height} / 2 ) 0;
-
-            &::after {
-                top: auto;
-                bottom: $kendo-timeline-track-bottom-calc;
-                left: $kendo-timeline-track-start-calc;
-                right: $kendo-timeline-track-end-calc;
-                transform: translateY(-50%);
-                height: $kendo-timeline-track-size;
-            }
-
-            .k-timeline-track {
-                overflow: hidden;
-                margin-block: 0;
-                margin-inline: $kendo-timeline-track-arrow-width;
-                position: relative;
-                z-index: 2;
-
-                .k-timeline-scrollable-wrap {
-                    transition: transform 1s ease-in-out;
-                }
-            }
-
-            .k-timeline-flag {
-                margin-bottom: $kendo-timeline-flag-margin-bottom-calc;
-                position: relative;
-                min-width: $kendo-timeline-horizontal-flag-min-width;
-
-                &::after {
-                    content: "";
-                    width: $kendo-timeline-flag-callout-width;
-                    height: $kendo-timeline-flag-callout-height;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 0;
-                    transform: translate(-50%, 50%) rotate(45deg);
-                }
-            }
-        }
-
-        .k-timeline-scrollable-wrap {
-            padding-bottom: $kendo-timeline-track-wrap-padding-bottom;
-            display: flex;
-            outline: 0;
-        }
-    }
-
-    .k-timeline-arrow {
-        width: $kendo-timeline-track-arrow-width;
-        height: $kendo-timeline-track-arrow-height;
-        border-radius: 50%;
-        position: absolute;
-        bottom: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width});
-        z-index: 3;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .k-timeline-arrow-left {
-        left: 0;
-    }
-
-    .k-timeline-arrow-right {
-        right: 0;
-    }
-
-    .k-timeline-mobile {
-        padding-block: 0;
-        padding-inline: $kendo-timeline-mobile-spacing-x;
-        margin-block: $kendo-timeline-mobile-spacing-y;
-        margin-inline: 0;
-
-        .k-timeline-flag {
-            max-width: $kendo-timeline-mobile-flag-max-width;
-        }
-
-        &.k-timeline-horizontal {
-            .k-timeline-flag-wrap {
-                display: none;
-            }
-        }
-
-        &.k-timeline-vertical {
-            padding-left: $kendo-timeline-mobile-vertical-padding-with-dates-calc;
-
-            &.k-timeline-dates-hidden {
-                padding-left: $kendo-timeline-mobile-vertical-padding-calc;
-            }
-
-            &.k-timeline-alternating {
-                padding-left: $kendo-timeline-mobile-spacing-x;
-            }
-
-            .k-timeline-card {
-                width: 100%;
-
-
-                .k-card {
-                    width: auto;
-                }
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/timeline/_layout.scss" as *;
 
 
 @mixin kendo-timeline--layout() {

package/scss/timeline/_theme.scss

@@ -1,75 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../card/_variables.scss" as *;
-
-@mixin kendo-timeline--theme-base() {
-
-    .k-timeline {
-        .k-timeline-flag {
-            color: $kendo-timeline-flag-text;
-            background-color: $kendo-timeline-flag-bg;
-        }
-
-        .k-timeline-circle {
-            background-color: $kendo-timeline-circle-bg;
-        }
-
-        .k-timeline-card {
-            .k-card-header {
-                background-color: $kendo-card-bg;
-                color: $kendo-card-text;
-            }
-
-            .k-card-body {
-
-                // Scrollbar styles for Mozilla
-                scrollbar-color: $kendo-card-border $kendo-card-bg;
-
-                // Scrollbar styles for Chrome, Safari and Opera
-                &::-webkit-scrollbar-track {
-                    background: $kendo-card-bg;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    background: $kendo-card-border;
-                }
-
-                &::-webkit-scrollbar-thumb:hover {
-                    background: $kendo-hover-border;
-                }
-            }
-        }
-
-        // TODO: remove
-        .k-timeline-date {
-            color: $kendo-body-text;
-        }
-
-        .k-timeline-arrow.k-disabled {
-            opacity: 1; // The arrow button in disabled mode should have a solid background
-            color: $kendo-timeline-track-arrow-disabled-text;
-            background-color: $kendo-timeline-track-arrow-disabled-bg;
-            border-color: $kendo-timeline-track-arrow-disabled-border;
-        }
-    }
-
-    .k-timeline-vertical,
-    .k-timeline-horizontal .k-timeline-track-wrap {
-        &::after {
-            background-color: $kendo-timeline-track-bg;
-            border-color: $kendo-timeline-track-border-color;
-        }
-    }
-
-    .k-timeline-horizontal .k-timeline-flag::after {
-        background-color: $kendo-timeline-flag-bg;
-    }
-
-    .k-timeline-track-item.k-focus .k-timeline-circle {
-        @include focus-indicator( $kendo-timeline-track-item-focus-shadow );
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/timeline/_theme.scss" as *;
 
 
 @mixin kendo-timeline--theme() {

package/scss/timeline/_variables.scss

@@ -170,3 +170,56 @@ $kendo-timeline-event-height: 600px !default;
 /// The minimum height of the Timeline event.
 /// @group timeline
 $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-offset} - #{$kendo-card-border-width})) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/timeline/_variables.scss" with (
+    $kendo-timeline-spacing-x: $kendo-timeline-spacing-x,
+    $kendo-timeline-spacing-y: $kendo-timeline-spacing-y,
+    $kendo-timeline-items-padding: $kendo-timeline-items-padding,
+    $kendo-timeline-font-family: $kendo-timeline-font-family,
+    $kendo-timeline-font-size: $kendo-timeline-font-size,
+    $kendo-timeline-line-height: $kendo-timeline-line-height,
+    $kendo-timeline-mobile-spacing-x: $kendo-timeline-mobile-spacing-x,
+    $kendo-timeline-mobile-spacing-y: $kendo-timeline-mobile-spacing-y,
+    $kendo-timeline-track-arrow-width: $kendo-timeline-track-arrow-width,
+    $kendo-timeline-track-arrow-height: $kendo-timeline-track-arrow-height,
+    $kendo-timeline-track-arrow-disabled-bg: $kendo-timeline-track-arrow-disabled-bg,
+    $kendo-timeline-track-arrow-disabled-text: $kendo-timeline-track-arrow-disabled-text,
+    $kendo-timeline-track-arrow-disabled-border: $kendo-timeline-track-arrow-disabled-border,
+    $kendo-timeline-track-size: $kendo-timeline-track-size,
+    $kendo-timeline-track-wrap-padding-bottom: $kendo-timeline-track-wrap-padding-bottom,
+    $kendo-timeline-track-border-width: $kendo-timeline-track-border-width,
+    $kendo-timeline-track-margin-bottom: $kendo-timeline-track-margin-bottom,
+    $kendo-timeline-track-bottom-calc: $kendo-timeline-track-bottom-calc,
+    $kendo-timeline-track-start-calc: $kendo-timeline-track-start-calc,
+    $kendo-timeline-track-end-calc: $kendo-timeline-track-end-calc,
+    $kendo-timeline-track-bg: $kendo-timeline-track-bg,
+    $kendo-timeline-track-border-color: $kendo-timeline-track-border-color,
+    $kendo-timeline-track-item-focus-shadow: $kendo-timeline-track-item-focus-shadow,
+    $kendo-timeline-track-event-offset: $kendo-timeline-track-event-offset,
+    $kendo-timeline-flag-padding-x: $kendo-timeline-flag-padding-x,
+    $kendo-timeline-flag-padding-y: $kendo-timeline-flag-padding-y,
+    $kendo-timeline-flag-line-height: $kendo-timeline-flag-line-height,
+    $kendo-timeline-flag-min-width: $kendo-timeline-flag-min-width,
+    $kendo-timeline-flag-max-width: $kendo-timeline-flag-max-width,
+    $kendo-timeline-mobile-flag-max-width: $kendo-timeline-mobile-flag-max-width,
+    $kendo-timeline-horizontal-flag-min-width: $kendo-timeline-horizontal-flag-min-width,
+    $kendo-timeline-flag-bg: $kendo-timeline-flag-bg,
+    $kendo-timeline-flag-text: $kendo-timeline-flag-text,
+    $kendo-timeline-flag-callout-width: $kendo-timeline-flag-callout-width,
+    $kendo-timeline-flag-callout-height: $kendo-timeline-flag-callout-height,
+    $kendo-timeline-flag-offset-bottom: $kendo-timeline-flag-offset-bottom,
+    $kendo-timeline-flag-margin-bottom-calc: $kendo-timeline-flag-margin-bottom-calc,
+    $kendo-timeline-date-width: $kendo-timeline-date-width,
+    $kendo-timeline-date-margin-bottom: $kendo-timeline-date-margin-bottom,
+    $kendo-timeline-vertical-padding-calc: $kendo-timeline-vertical-padding-calc,
+    $kendo-timeline-vertical-padding-with-dates-calc: $kendo-timeline-vertical-padding-with-dates-calc,
+    $kendo-timeline-mobile-vertical-padding-calc: $kendo-timeline-mobile-vertical-padding-calc,
+    $kendo-timeline-mobile-vertical-padding-with-dates-calc: $kendo-timeline-mobile-vertical-padding-with-dates-calc,
+    $kendo-timeline-circle-width: $kendo-timeline-circle-width,
+    $kendo-timeline-circle-height: $kendo-timeline-circle-height,
+    $kendo-timeline-circle-bg: $kendo-timeline-circle-bg,
+    $kendo-timeline-collapse-arrow-padding-x: $kendo-timeline-collapse-arrow-padding-x,
+    $kendo-timeline-event-width: $kendo-timeline-event-width,
+    $kendo-timeline-event-height: $kendo-timeline-event-height,
+    $kendo-timeline-event-min-height-calc: $kendo-timeline-event-min-height-calc
+);

package/scss/timepicker/_layout.scss

@@ -1,15 +1,4 @@
-@mixin kendo-time-picker--layout-base() {
-
-    // Time picker
-    .k-time-picker {}
-
-
-    // Legacy aliases
-    .k-timepicker {
-        @extend .k-time-picker !optional;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/timepicker/_layout.scss" as *;
 
 
 @mixin kendo-time-picker--layout() {

package/scss/timepicker/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-time-picker--theme-base() {
-
-    // Time picker
-    .k-time-picker {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/timepicker/_theme.scss" as *;
 
 
 @mixin kendo-time-picker--theme() {