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

package/scss/gantt/_layout.scss

@@ -3,819 +3,23 @@
 @use "../grid/_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
 @use "./_variables.scss" as *;
-@use "../core/spacing/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/gantt/_layout.scss" as *;
 
 @mixin kendo-gantt--layout() {
+    @include kendo-gantt--layout-base();
 
     .k-gantt {
-        border-width: var( --kendo-gantt-border-width, #{$kendo-gantt-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-gantt-font-family, #{$kendo-gantt-font-family} );
-        font-size: var( --kendo-gantt-font-size, #{$kendo-gantt-font-size} );
-        line-height: var( --kendo-gantt-line-height, #{$kendo-gantt-line-height} );
-        display: flex;
-        flex-flow: column nowrap;
-        position: relative;
-        white-space: nowrap;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        .k-table-td {
-            white-space: nowrap;
-        }
-
-        // other
-        td {
-            overflow: hidden;
-            white-space: nowrap;
-            vertical-align: top;
-        }
-        .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
-        }
         .k-grid-header .k-header {
-            position: static;
-            font-weight: var( --kendo-font-weight-bold, bold );
-        }
-        .k-treelist .k-grid-header .k-header {
-            position: relative;
-        }
-        .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2) + #{$kendo-grid-cell-border-width-y} );
-        }
-
-        &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} * 1.7 + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-border-width-y} );
-        }
-
-        // Layout
-        .k-gantt-layout {
-            white-space: normal;
-            vertical-align: top;
-            display: inline-block;
-        }
-
-
-        // Splitbar
-        .k-splitbar {
-            position: relative;
-            display: inline-flex;
-        }
-
-        // Splitter
-        .k-gantt-splitter {
-            border-width: 0;
-        }
-
-        // React gantt
-        .k-treelist-scrollable {
-            width: 100%;
-            border-width: 0;
-            overflow: auto;
-
-            .k-grid-header .k-header {
-                position: sticky;
-            }
-            .k-grid-header th,
-            .k-grid-content-sticky {
-                z-index: 4;
-            }
-            .k-grid-header th.k-grid-header-sticky {
-                z-index: 5;
-            }
-            .k-grid-header tr:first-child th:last-child,
-            tbody td:last-child {
-                padding: 0;
-            }
-            .k-grid-header th:last-child {
-                .k-header {
-                    padding-block: $kendo-grid-header-padding-y;
-                    padding-inline: $kendo-grid-header-padding-x;
-                    border-width: 0 0 1px $kendo-grid-cell-border-width-y;
-                    white-space: nowrap;
-                }
-            }
-
-            tr.k-selected > td:last-child {
-                background: transparent;
-            }
-
-            // Task
-            .k-task {
-                display: inline-flex;
-                flex-flow: row nowrap;
-                white-space: nowrap;
-                z-index: 3;
-
-                &:hover .k-task-start,
-                &:hover .k-task-end {
-                    display: block;
-                }
-
-                &:hover .k-task-draghandle {
-                    visibility: visible;
-                }
-            }
-            .k-task-content {
-                padding-block: var( --kendo-gantt-task-padding-y, #{$kendo-gantt-task-padding-y} );
-                padding-inline: var( --kendo-gantt-task-padding-x, #{$kendo-gantt-task-padding-x} );
-                display: block;
-                line-height: normal;
-                flex: 1 1 auto;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .k-task-actions {
-                flex-shrink: 0;
-            }
-
-            // Milestone
-            .k-task-milestone {
-                border: 0;
-                transform: none;
-                background: none;
-
-                .k-task-milestone-content {
-                    width: 100%;
-                    height: 100%;
-                    border-width: 1px;
-                    border-style: solid;
-                    box-sizing: border-box;
-                    transform: rotate(45deg);
-                }
-            }
-
-            // Summary
-            .k-task-summary {
-                height: 15px;
-                clip-path: polygon(-20px 0, calc( 100% + 20px) 0, calc( 100% + 20px) 100%, 100% 100%, calc( 100% - 8px) calc( 100% - 5px), 8px calc( 100% - 5px), 0 100%, -20px 100%);
-            }
-            .k-task-summary-complete {
-                width: 100%;
-                height: 15px;
-            }
-
-            // Dots
-            .k-task-start {
-                transform: translateX(-140%) translateY(-50%);
-            }
-            .k-task-end {
-                transform: translateX(140%) translateY(-50%);
-            }
-            .k-master-row:hover .k-task-dot {
-                display: block;
-            }
-
-            // Table with columns borders
-            .k-gantt-columns {
-                background: transparent;
-                pointer-events: none;
-                table-layout: fixed;
-            }
+            font-weight: $kendo-font-weight-bold;
         }
 
-        // Dependency lines SVG
         .k-gantt-dependencies-svg {
-            position: absolute;
-            top: 0;
             inset-inline-start: 0;
-            overflow: visible;
-            pointer-events: none;
-            z-index: 2;
-
-            polyline {
-                stroke-width: var( --kendo-gantt-line-size, #{$kendo-gantt-line-size} );
-            }
-        }
-    }
-
-    // Header and footer
-    .k-gantt-header {
-        border-width: 0 0 $kendo-toolbar-border-width;
-        flex-shrink: 0;
-        z-index: 6;
-    }
-    .k-gantt-footer {
-        border-width: 1px 0 0;
-        flex-shrink: 0;
-    }
-
-
-    // Gantt views
-    .k-gantt-views-wrapper {
-        margin-left: auto;
-
-        .k-views-dropdown {
-            width: auto;
-            font-size: inherit;
-            display: none;
-            cursor: pointer;
-        }
-    }
-
-
-    // Responsive gantt toolbar
-    .k-gantt-toggle {
-        display: none;
-    }
-
-    @media (max-width: 480px) { // stylelint-disable-line
-
-        .k-gantt-toolbar {
-            .k-gantt-toggle {
-                display: inline-flex;
-            }
-            .k-gantt-pdf,
-            .k-gantt-create {
-                padding: $kendo-button-md-padding-y;
-                width: $kendo-button-calc-size;
-                height: $kendo-button-calc-size;
-
-                .k-button-icon {}
-                .k-button-text {
-                    display: none;
-                }
-            }
-        }
-
-    }
-
-    @media (max-width: 1024px) { // stylelint-disable-line
-        .k-gantt-views-wrapper .k-gantt-views { display: none; }
-        .k-gantt-views-wrapper .k-views-dropdown { display: flex; }
-    }
-
-
-    // Gant content
-    .k-gantt-content {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-
-
-    // Treelist
-    .k-gantt-treelist {
-
-        .k-treelist {
-            height: 100%;
-            border-width: 0;
-        }
-        .k-grid-header,
-        .k-grid-footer {
-            padding: 0 !important; // stylelint-disable-line declaration-no-important
-        }
-        .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} * 2 + calc( #{$kendo-grid-header-padding-y} * 4 ) + 2px );
-            vertical-align: bottom;
-        }
-        .k-grid-content {
-            overflow: hidden;
-            overflow-x: scroll;
-        }
-        .k-grid-content td {
-            vertical-align: middle;
-        }
-        .k-gantt-treelist-nested-columns .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
-        }
-
-        &.k-gantt-treelist-scrollable {
-            .k-grid-content {
-                overflow: scroll;
-            }
-        }
-    }
-
-
-    // Timeline
-    .k-gantt-timeline-pane {
-
-        .k-gantt-timeline {
-            height: 100%;
-            border-width: 0;
-            display: flex;
-
-            *,
-            *::before,
-            *::after,
-            &::before,
-            &::after {
-                box-sizing: border-box;
-            }
-        }
-        .k-grid-header {}
-        .k-grid-content {
-            overflow-x: scroll;
-        }
-        .k-header {
-            padding-block: $kendo-grid-header-padding-y;
-            padding-inline: $kendo-grid-header-padding-x;
-            border-block-start-width: 0;
-            border-block-end-width: 1px;
-            border-inline-start-width: $kendo-grid-cell-border-width-y;
-            border-inline-end-width: 0;
-            white-space: nowrap;
-        }
-
-    }
-
-
-    // Tables
-    .k-gantt-tables {
-        position: relative;
-        border-color: inherit;
-    }
-    .k-gantt-rows,
-    .k-gantt-columns {
-        border-color: inherit;
-        position: absolute;
-        z-index: 0;
-        top: 0;
-        inset-inline-start: 0;
-    }
-    .k-gantt-rows {}
-
-
-    // Deps
-    .k-gantt-dependencies {
-        opacity: .7;
-        position: absolute;
-        top: 0;
-        inset-inline-start: 0;
-
-        // Arrows
-        .k-arrow-e,
-        .k-arrow-w {
-            width: 0;
-            height: 0;
-            border: 5px solid transparent;
-            position: absolute;
-            top: -4px;
         }
-        .k-arrow-e {
-            border-left-color: currentColor;
-            right: -6px;
-        }
-        .k-arrow-w {
-            border-right-color: currentColor;
-            left: -6px;
-        }
-    }
-
-    // Dependency Lines
-    .k-gantt-line {
-        background-color: currentColor;
-        border-color: currentColor;
-        position: absolute;
-    }
-    .k-gantt-line.k-selected {
-        z-index: 3;
-    }
-
-    .k-gantt-line-h {
-        height: var( --kendo-gantt-line-size, #{$kendo-gantt-line-size} );
     }
 
-    .k-gantt-line-v {
-        width: var( --kendo-gantt-line-size, #{$kendo-gantt-line-size} );
-    }
-
-    .k-gantt-dependency-hint {
-        z-index: 4;
-    }
-
-
-    // Tasks
-    .k-gantt-tasks {
-        position: relative;
-
-        td,
-        .k-table-td {
-            padding: 0;
-            position: relative;
-            vertical-align: middle;
-        }
-        td::after { content: "\200b"; }
-    }
-
-    .k-task-wrap {
-        margin-block: 0;
-        margin-inline: -21px;
-        padding-block: 5px;
-        padding-inline: 21px;
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        position: relative;
-        z-index: 2;
-    }
-    .k-task-wrap.k-drag-hint {
-        position: absolute;
-    }
-    .k-task {
-        position: relative;
-        flex: 1 1 auto;
-    }
-    .k-task-dot {
-        width: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
-        height: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
-        line-height: 1;
-        cursor: pointer;
-        display: none;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-    .k-task-wrap:hover .k-task-dot,
-    .k-task-wrap.k-origin .k-task-dot {
-        display: block;
-    }
-    .k-task-dot::before {
-        content: "";
-        width: var( --kendo-gantt-dot-size, #{$kendo-gantt-dot-size} );
-        height: var( --kendo-gantt-dot-size, #{$kendo-gantt-dot-size} );
-        border-width: 0;
-        border-style: solid;
-        border-radius: 100%;
-        display: inline-block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-    .k-task-dot:hover::before,
-    .k-task-dot.k-hover::before {
-        border-width: 1px;
-    }
-    .k-task-start { inset-inline-start: 0; }
-    .k-task-end { inset-inline-end: 0; }
-
-    .k-task-draghandle {
-        margin-inline-start: 16px;
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-        border-top-width: 0;
-        border-bottom-color: inherit;
-        position: absolute;
-        bottom: 0;
-        // display: none;
-        cursor: ew-resize;
-        visibility: hidden;
-    }
-
-    .k-task-wrap:hover .k-task-draghandle {
-        visibility: visible;
-    }
-
-
-    // Milestone
-    .k-milestone-wrap {
-        margin-block: 0;
-        margin-inline: -2em;
-    }
-    .k-task-milestone {
-        width: 1rem;
-        height: 1rem;
-        border-width: 1px;
-        border-style: solid;
-        box-sizing: border-box;
-        transform: rotate(45deg);
-    }
-
-
-    // Summary
-    .k-summary-wrap {}
-    .k-task-summary {
-        height: 10px;
-        display: inline-block;
-        vertical-align: top;
-    }
-    .k-task-summary,
-    .k-task-summary-complete {
-        background-color: currentColor;
-
-        &::before,
-        &::after {
-            content: "";
-            width: 0;
-            height: 0;
-            border: 8px solid transparent;
-            position: absolute;
-            top: 0;
-            display: none;
-        }
-
-        &::before {
-            border-left-color: currentColor;
-            left: 0;
-        }
-        &::after {
-            border-right-color: currentColor;
-            right: 0;
-        }
-    }
-    .k-task-summary-complete {
-        height: 10px;
-        position: relative;
-        z-index: 2;
-    }
-    .k-task-summary-progress {
-        height: 15px;
-        overflow: hidden;
-    }
-
-
-    // Single task
-    .k-single-wrap {}
-    .k-task-single {
-        border-radius: k-border-radius(md);
-        border-width: var( --kendo-gantt-task-border-width, #{$kendo-gantt-task-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        cursor: default;
-
-        .k-resize-handle {
-            opacity: .5;
-            z-index: 2;
-            visibility: hidden;
-            cursor: ew-resize;
-        }
-
-        .k-resize-handle::before {
-            position: absolute;
-            top: 2px;
-            bottom: 2px;
-        }
-
-        .k-resize-w {
-            left: 0;
-        }
-
-        .k-resize-w::before {
-            left: 2px;
-            border-left-width: 1px;
-        }
-
-        .k-resize-e {
-            right: 0;
-        }
-
-        .k-resize-e::before {
-            right: 2px;
-            border-left-width: 1px;
-        }
-
-        &:hover .k-resize-handle,
-        &:hover .k-task-actions {
-            visibility: visible;
-        }
-    }
-    .k-task-complete {
-        border-radius: k-border-radius(md);
-        width: 20%;
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        bottom: 0;
-        inset-inline-start: 0;
-    }
-    .k-task-content {
-        position: relative;
-        z-index: 2;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        text-align: start;
-        white-space: nowrap;
-    }
-    .k-task-template {
-        padding-block: var( --kendo-gantt-task-padding-y, #{$kendo-gantt-task-padding-y} );
-        padding-inline: var( --kendo-gantt-task-padding-x, #{$kendo-gantt-task-padding-x} );
-        line-height: normal;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
     .k-task-actions {
-        padding-block: var( --kendo-gantt-task-actions-padding-y, #{$kendo-gantt-task-actions-padding-y} );
-        padding-inline: var( --kendo-gantt-task-actions-padding-x, #{$kendo-gantt-task-actions-padding-x} );
-        white-space: nowrap;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        visibility: hidden;
-        z-index: 1;
-    }
-    .k-task-actions > .k-link {
-        display: inline-flex;
-    }
-
-    .k-resources-wrap {
-        position: absolute;
-        display: inline-block;
-        z-index: 2;
-        margin-left: 20px;
-        margin-top: -2px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        .k-resource {
-            margin-block: 0;
-            margin-inline: 5px;
-        }
-    }
-
-
-    // Task tooltip
-    .k-task-details {
-        padding-block: k-spacing(1);
-        padding-inline: k-spacing(2);
-        white-space: nowrap;
-
-        strong {
-            font-size: var( --kendo-font-size-lg, inherit );
-            font-weight: normal;
-            display: block;
-        }
-        .k-task-pct {
-            font-size: var( --kendo-icon-size-xxl, 2rem );
-        }
-        ul {
-            line-height: normal;
-        }
-    }
-
-    // Planned position
-    .k-gantt-planned {
-        .k-gantt-dependencies,
-        .k-task-dot,
-        .k-resources-wrap {
-            margin-top: var( --kendo-gantt-planned-dependency-margin-y, #{$kendo-gantt-planned-dependency-margin-y} );
-        }
-
-        .k-task-wrap {
-            flex-direction: column;
-            align-items: flex-start;
-        }
-
-        .k-task-inner-wrap {
-            display: inline-flex;
-        }
-
-        .k-task-wrap.k-drag-hint {
-            top: var( --kendo-gantt-planned-single-drag-hint-top, #{$kendo-gantt-planned-single-drag-hint-top} );
-        }
-
-        .k-summary-wrap.k-drag-hint {
-            top: var( --kendo-gantt-planned-summary-drag-hint-top, #{$kendo-gantt-planned-summary-drag-hint-top} );
-        }
-
-        .k-milestone-wrap.k-drag-hint {
-            top: var( --kendo-gantt-planned-milestone-drag-hint-top, #{$kendo-gantt-planned-milestone-drag-hint-top} );
-        }
-    }
-
-    // Planned elementkendo-gantt-planned-dependency-margin-y
-    .k-task-planned {
-        margin: 0 0 var( --kendo-gantt-planned-margin-y, #{$kendo-gantt-planned-margin-y} );
-        line-height: var( --kendo-gantt-planned-line-height, #{$kendo-gantt-planned-line-height} );
-        display: flex;
-        align-items: center;
-
-        .k-task-moment {
-            border-width: var( --kendo-gantt-planned-border-width, #{$kendo-gantt-planned-border-width} );
-            border-radius: var( --kendo-gantt-planned-moment-border-radius, #{$kendo-gantt-planned-moment-border-radius} );
-            border-style: solid;
-            height: var( --kendo-gantt-planned-moment-height, #{$kendo-gantt-planned-moment-height} );
-            width: var( --kendo-gantt-planned-moment-width, #{$kendo-gantt-planned-moment-width} );
-            box-sizing: border-box;
-        }
-
-        .k-task-duration {
-            height: var( --kendo-gantt-planned-duration-height, #{$kendo-gantt-planned-duration-height} );
-        }
-
-        .k-task-moment.k-moment-left {
-            margin-inline-start: var( --kendo-gantt-planned-moment-left-margin-x, #{$kendo-gantt-planned-moment-left-margin-x} );
-        }
-
-        &:hover .k-task-duration {
-            height: var( --kendo-gantt-planned-duration-hover-height, #{$kendo-gantt-planned-duration-hover-height} );
-        }
-    }
-
-    .k-milestone-wrap .k-task-moment {
-        margin-inline-start: var( --kendo-gantt-planned-milestone-moment-margin-x, #{$kendo-gantt-planned-milestone-moment-margin-x} );
-    }
-
-    // Planned Tooltip
-    .k-planned-tooltip {
-        .k-task-content {
-            display: block;
-        }
-    }
-
-    // Delay offset
-    .k-task-offset-wrap .k-task-content .k-resize-e {
-        display: none;
-    }
-
-    .k-task-offset {
-        flex-direction: row-reverse;
-        display: flex;
-
-        .k-resize-handle {
-            right: 0;
-            z-index: 2;
-            visibility: hidden;
-            margin-inline-end: var( --kendo-gantt-planned-offset-resize-handler-margin-x, #{$kendo-gantt-planned-offset-resize-handler-margin-x} );
-        }
-
-        .k-resize-handle::before {
-            border-inline-start-width: 1px;
-            position: absolute;
-            top: var( --kendo-gantt-offset-resize-handler-top, #{$kendo-gantt-offset-resize-handler-top} );
-            bottom: .5em;
-            margin-inline-end: 2px;
-        }
-    }
-
-    .k-task-single:hover + .k-task-offset .k-task-actions,
-    .k-task-offset:hover .k-task-actions,
-    .k-task-single:hover + .k-task-offset .k-resize-handle,
-    .k-task-offset:hover .k-resize-handle {
-        visibility: visible;
-    }
-
-
-    // Dependency Validation Tooltip
-    .k-gantt-tooltip-validation {
-        max-width: var( --kendo-gantt-validation-tooltip-width, #{$kendo-gantt-validation-tooltip-width} );
-        display: block;
-
-        &::before {
-            content: "";
-            width: 4px;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            inset-inline-start: 0;
-        }
-    }
-    .k-gantt-tooltip-validation-row {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-    .k-gantt-tooltip-validation-label {
-        display: inline-flex;
-        min-width: var( --kendo-gantt-validation-tooltip-label-width, #{$kendo-gantt-validation-tooltip-label-width} );
-    }
-    .k-gantt-tooltip-validation-value {
-        font-weight: var( --kendo-font-weight-bold, bold );
-    }
-    .k-gantt-tooltip-validation-label,
-    .k-gantt-tooltip-validation-value {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    // PDF Export
-    .k-pdf-export-shadow {
-        .k-gantt {
-            float: left;
-        }
-
-        .k-gantt,
-        .k-gantt-timeline-pane,
-        .k-gantt-dependencies {
-            width: auto !important; // stylelint-disable-line declaration-no-important
-            height: auto !important; // stylelint-disable-line declaration-no-important
-            overflow: visible !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .k-gantt-treelist .k-treelist {
-            display: block;
-        }
-
-        .k-gantt-layout.k-splitbar {
-            display: none;
-        }
-    }
-
-    .k-rtl,
-    [dir="rtl"] {
-        .k-gantt-tasks tbody {
-            text-align: end;
-        }
+        padding-block: $kendo-gantt-task-actions-padding-y;
+        padding-inline: $kendo-gantt-task-actions-padding-x;
     }
 }