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

package/scss/timeline/_layout.scss

@@ -1,443 +1,28 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/timeline/_layout.scss" as *;
 
 @mixin kendo-timeline--layout() {
+    @include kendo-timeline--layout-base();
 
     .k-timeline {
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-timeline-font-family, #{ $kendo-timeline-font-family } );
-        font-size: var( --kendo-timeline-font-size, #{ $kendo-timeline-font-size } );
-        line-height: var( --kendo-timeline-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 0 1px;
-            padding: 0;
-
-            li {
-                list-style-type: none;
-            }
-        }
-
         .k-timeline-flag {
-            display: inline-block;
-            text-align: center;
-            padding-block: var( --kendo-timeline-flag-padding-y, #{ $kendo-timeline-flag-padding-y} );
-            padding-inline: var( --kendo-timeline-flag-padding-x, #{ $kendo-timeline-flag-padding-x } );
-            border-radius: var( --kendo-timeline-flag-border-radius, #{ $kendo-timeline-flag-border-radius } );
-            line-height: var( --kendo-timeline-flag-line-height, #{ $kendo-timeline-flag-line-height } );
-            min-width: var( --kendo-timeline-flag-min-width, #{ $kendo-timeline-flag-min-width } );
-            max-width: var( --kendo-timeline-flag-max-width, #{ $kendo-timeline-flag-max-width } );
-            position: relative;
-            z-index: 1;
-        }
-
-        .k-timeline-circle {
-            width: var( --kendo-timeline-circle-width, #{ $kendo-timeline-circle-width } );
-            height: var( --kendo-timeline-circle-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;
-            }
+            border-radius: $kendo-timeline-flag-border-radius;
         }
     }
 
-    .k-timeline-card {
-        .k-card {
-            position: relative;
-            overflow: visible;
-
-            .k-card-header {
-                overflow: visible;
-                border-bottom: 0;
-            }
-
-            .k-card-header + .k-card-body {
-                padding-block-start: 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: var( --kendo-timeline-flag-border-radius, #{ $kendo-timeline-flag-border-radius } );
-                }
-            }
-        }
-
-        .k-timeline-card-callout {
-            &.k-callout-w,
-            &.k-callout-e {
-                top: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
-            }
-        }
-    }
-
-    .k-timeline-vertical,
-    .k-timeline-horizontal {
-        padding-block: 0;
-        padding-inline: var( --kendo-timeline-spacing-x, #{ $kendo-timeline-spacing-x } );
-        margin-block: var( --kendo-timeline-spacing-y, #{ $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: var( --kendo-timeline-track-border-width, #{ $kendo-timeline-track-border-width } );
-            border-style: solid;
-        }
+    .k-timeline-arrow {
+        inset-block-end: $kendo-timeline-arrow-inset-block-end;
     }
 
     .k-timeline-vertical {
-        padding-inline-start: var( --kendo-timeline-vertical-padding-with-dates-calc, #{ $kendo-timeline-vertical-padding-with-dates-calc } );
-
-        &.k-timeline-dates-hidden {
-            padding-inline-start: var( --kendo-timeline-vertical-padding-calc, #{ $kendo-timeline-vertical-padding-calc } );
-        }
 
         &::after {
-            height: 100%;
-            width: var( --kendo-timeline-track-size, #{ $kendo-timeline-track-size } );
-            transform: translateX(-50%);
-            border-radius: var( --kendo-timeline-vertical-border-radius, #{ $kendo-timeline-vertical-border-radius } );
-        }
-
-        .k-timeline-flag-wrap {
-            display: flex;
-            align-items: center;
-
-            &:first-child {
-                padding-block-start: var( --kendo-timeline-spacing-y, #{ $kendo-timeline-spacing-y} );
-            }
-        }
-
-        .k-timeline-flag {
-            transform: translateX(-50%);
-        }
-
-        .k-timeline-date-wrap {
-            position: absolute;
-            padding-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );
-            margin-block-start: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
-            transform: translate(-100%, -50%);
-            text-align: end;
-        }
-
-        .k-timeline-event {
-            display: flex;
-            align-items: flex-start;
-            padding-inline: 0;
-            padding-block: var( --kendo-timeline-spacing-y, #{ $kendo-timeline-spacing-y} );
-        }
-
-        .k-timeline-card {
-            padding-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );
-
-            .k-card {
-                margin-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );
-                min-height: var( --kendo-timeline-event-min-height-calc, #{ $kendo-timeline-event-min-height-calc} );
-                width: var( --kendo-timeline-event-width, #{ $kendo-timeline-event-width } );
-                max-width: 100%;
-
-                .k-card-header {
-                    border-radius: 0; // 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( var( --kendo-timeline-icon-spacing, #{ $kendo-timeline-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-block-start: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
-            margin-inline-end: calc( -1 * var( --kendo-timeline-circle-width, #{ $kendo-timeline-circle-width} ) / 2);
-            transform: translate(-50%, -50%);
-        }
-
-        &.k-timeline-alternating {
-            padding-inline-start: var( --kendo-timeline-spacing-x, #{ $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-inline-end: 0;
-                        padding-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );
-                    }
-
-                    .k-timeline-card {
-                        padding-inline-start: 0;
-                        padding-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );
-
-                        .k-card {
-                            margin-inline-start: auto;
-                            margin-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );
-                        }
-                    }
-                }
-            }
-
-            .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-block-start: auto;
-            margin-block-end: var( --kendo-timeline-date-margin-bottom, #{ $kendo-timeline-date-margin-bottom } );
-        }
-
-        .k-timeline-card {
-            height: 100%;
-            padding-inline: .5em;
-        }
-
-        .k-card {
-            max-height: 100%;
-        }
-
-        .k-timeline-events-list {
-            overflow-x: hidden;
-            padding-block-start: var( --kendo-timeline-track-margin-bottom, #{ $kendo-timeline-track-margin-bottom} );
-
-            .k-timeline-scrollable-wrap {
-                position: relative;
-                height: var( --kendo-timeline-event-height, #{ $kendo-timeline-event-height } );
-
-                .k-timeline-event {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
+            border-radius: $kendo-timeline-vertical-border-radius;
         }
-
-        .k-timeline-track-wrap {
-            position: relative;
-            padding-block: calc( var( --kendo-timeline-track-arrow-height, #{ $kendo-timeline-track-arrow-height } ) / 2 );
-            padding-inline: 0;
-
-            &::after {
-                inset-block-start: auto;
-                inset-block-end: var( --kendo-timeline-track-bottom-calc, #{ $kendo-timeline-track-bottom-calc } );
-                inset-inline-start: var( --kendo-timeline-track-start-calc, #{ $kendo-timeline-track-start-calc } );
-                inset-inline-end: var( --kendo-timeline-track-end-calc, #{ $kendo-timeline-track-end-calc } );
-                transform: translateY(-50%);
-                height: var( --kendo-timeline-track-size, #{ $kendo-timeline-track-size } );
-            }
-
-            .k-timeline-track {
-                overflow: hidden;
-                margin-block: 0;
-                margin-inline: var( --kendo-timeline-track-arrow-width, #{ $kendo-timeline-track-arrow-width } );
-                position: relative;
-                z-index: 2;
-
-                .k-timeline-scrollable-wrap {
-                    transition: transform 1s ease-in-out;
-                }
-            }
-
-            .k-timeline-flag {
-                margin-block-end: var( --kendo-timeline-flag-margin-bottom-calc, #{ $kendo-timeline-flag-margin-bottom-calc } );
-                position: relative;
-                min-width: var( --kendo-timeline-horizontal-flag-min-width, #{ $kendo-timeline-horizontal-flag-min-width } );
-
-                &::after {
-                    content: "";
-                    width: var( --kendo-timeline-flag-callout-width, #{ $kendo-timeline-flag-callout-width } );
-                    height: var( --kendo-timeline-flag-callout-height, #{ $kendo-timeline-flag-callout-height } );
-                    position: absolute;
-                    left: 50%;
-                    bottom: 0;
-                    transform: translate(-50%, 50%) rotate(45deg);
-                }
-            }
-        }
-
-        .k-timeline-scrollable-wrap {
-            padding-bottom: var( --kendo-timeline-track-wrap-padding-bottom, #{ $kendo-timeline-track-wrap-padding-bottom } );
-            display: flex;
-            outline: 0;
-        }
-    }
-
-    .k-timeline-arrow {
-        width: var( --kendo-timeline-track-arrow-width, #{ $kendo-timeline-track-arrow-width } );
-        height: var( --kendo-timeline-track-arrow-height, #{ $kendo-timeline-track-arrow-height } );
-        border-radius: 50%;
-        position: absolute;
-        inset-block-end: var( --kendo-timeline-arrow-inset-block-end, #{ $kendo-timeline-arrow-inset-block-end } );
-        z-index: 3;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .k-timeline-arrow-left {
-        inset-inline-start: 0;
     }
 
-    .k-timeline-arrow-right {
-        inset-inline-end: 0;
-    }
-
-    .k-timeline-mobile {
-        padding-block: 0;
-        padding-inline: var( --kendo-timeline-mobile-spacing-x, #{ $kendo-timeline-mobile-spacing-x } );
-        margin-block: var( --kendo-timeline-mobile-spacing-y, #{ $kendo-timeline-mobile-spacing-y } );
-        margin-inline: 0;
-
-        .k-timeline-flag {
-            max-width: var( --kendo-timeline-mobile-flag-max-width, #{ $kendo-timeline-mobile-flag-max-width } );
-        }
-
-        &.k-timeline-horizontal {
-            .k-timeline-flag-wrap {
-                display: none;
-            }
-        }
-
-        &.k-timeline-vertical {
-            padding-inline-start: var( --kendo-timeline-mobile-vertical-padding-with-dates-calc, #{ $kendo-timeline-mobile-vertical-padding-with-dates-calc } );
-
-            &.k-timeline-dates-hidden {
-                padding-inline-start: var( --kendo-timeline-mobile-vertical-padding-calc, #{ $kendo-timeline-mobile-vertical-padding-calc } );
-            }
-
-            &.k-timeline-alternating {
-                padding-inline-start: var( --kendo-timeline-mobile-spacing-x, #{ $kendo-timeline-mobile-spacing-x } );
-            }
-
-            .k-timeline-card {
-                width: 100%;
-
-
-                .k-card {
-                    width: auto;
-                }
-            }
-        }
+    .k-timeline-horizontal .k-timeline-card {
+        padding-inline: .5em;
     }
 }

package/scss/timeline/_theme.scss

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