@progress/kendo-theme-classic 4.41.3-dev.0 → 5.0.0-next.3

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

@@ -1,838 +0,0 @@
-@include exports("gantt/layout") {
-
-    $row-height: #{$line-height-em} + #{2 * $table-cell-padding-y} + #{$grid-cell-horizontal-border-width};
-
-    .k-gantt {
-        border-width: $gantt-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $gantt-font-family;
-        font-size: $gantt-font-size;
-        line-height: $gantt-line-height;
-        display: flex;
-        flex-flow: column nowrap;
-        position: relative;
-        white-space: nowrap;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
-
-        // other
-        td {
-            overflow: hidden;
-            white-space: nowrap;
-            vertical-align: top;
-        }
-        .k-grid-header tr {
-            height: calc( #{$line-height-em} + #{$grid-header-padding-y * 2} + 1px );
-        }
-        .k-grid-header .k-header {
-            position: static;
-        }
-        .k-treelist .k-grid-header .k-header {
-            position: relative;
-        }
-        .k-grid-content tr {
-            height: calc( #{$line-height-em} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
-        }
-
-        &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$line-height-em * 1.7} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
-        }
-
-        // Layout
-        .k-gantt-layout {
-            white-space: normal;
-            vertical-align: top;
-            display: inline-block;
-        }
-
-
-        // Splitbar
-        .k-splitbar {
-            position: relative;
-            display: inline-flex;
-        }
-
-        // 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: $grid-header-padding-y $grid-header-padding-x;
-                    border-width: 0 0 1px $grid-cell-vertical-border-width;
-                    white-space: nowrap;
-                }
-            }
-
-            tr.k-state-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: $gantt-task-padding-y $gantt-task-padding-x;
-                display: block;
-                line-height: normal;
-                flex: 1 1 auto;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .k-task-actions {
-                flex-shrink: 0;
-            }
-
-            // Milestone
-            .k-task-milestone {
-                border: 0;
-                transform: none;
-                background: none;
-
-                .k-task-milestone-content {
-                    width: .875em;
-                    height: .875em;
-                    border-width: 1px;
-                    border-style: solid;
-                    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;
-            }
-        }
-
-        // Dependency lines SVG
-        .k-gantt-dependencies-svg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            overflow: visible;
-            pointer-events: none;
-            z-index: 2;
-
-            polyline {
-                stroke-width: $gantt-line-size;
-            }
-        }
-    }
-
-    // Header and footer
-    .k-gantt-header {
-        border-width: 0 0 $toolbar-border-width;
-        flex-shrink: 0;
-        z-index: 6;
-    }
-    .k-gantt-footer {
-        border-width: $toolbar-border-width 0 0;
-        flex-shrink: 0;
-    }
-
-
-    // Toolbar
-    .k-gantt-toolbar {}
-
-    .k-gantt-toggle {
-        display: none;
-    }
-    .k-gantt-add {}
-    .k-gantt-create {}
-    .k-gantt-views {}
-
-
-    // Gantt views
-    .k-gantt-views-wrapper {
-        margin-left: auto;
-
-        .k-views-dropdown {
-            width: auto;
-            font-size: inherit;
-            display: none;
-            cursor: pointer;
-        }
-    }
-
-
-    // Responsive gantt toolbar
-    @media (max-width: 480px) {
-
-        .k-gantt-toolbar {
-            .k-gantt-toggle {
-                display: inline-flex;
-            }
-            .k-gantt-pdf,
-            .k-gantt-create {
-                padding: $button-padding-y;
-                width: $button-calc-size;
-                height: $button-calc-size;
-
-                .k-button-icon {}
-                .k-button-text {
-                    display: none;
-                }
-            }
-        }
-
-    }
-
-    @media (max-width: 1024px) {
-        .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; // sass-lint:disable-line no-important
-        }
-        .k-grid-header tr {
-            height: calc( #{$line-height-em * 2} + #{$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( #{$line-height-em} + #{$grid-header-padding-y * 2} + 1px );
-        }
-
-        &.k-gantt-treelist-scrollable {
-            .k-grid-content {
-                overflow: scroll;
-            }
-        }
-    }
-
-
-    // Timeline
-    .k-gantt-timeline {
-
-        .k-timeline {
-            height: 100%;
-            border-width: 0;
-            display: flex;
-        }
-        .k-grid-header {}
-        .k-grid-content {
-            overflow-x: scroll;
-        }
-        .k-header {
-            padding: $grid-header-padding-y $grid-header-padding-x;
-            border-width: 0 0 1px $grid-cell-vertical-border-width;
-            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;
-        left: 0;
-    }
-    .k-gantt-rows {}
-
-
-    // Deps
-    .k-gantt-dependencies {
-        opacity: .7;
-        position: absolute;
-        top: 0;
-        left: 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-state-selected {
-        z-index: 3;
-    }
-
-    .k-gantt-line-h {
-        height: $gantt-line-size;
-    }
-
-    .k-gantt-line-v {
-        width: $gantt-line-size;
-    }
-
-    .k-gantt-dependency-hint {
-        z-index: 4;
-    }
-
-
-    // Tasks
-    .k-gantt-tasks {
-        position: relative;
-
-        td {
-            padding: 0;
-            border-width: 0;
-            position: relative;
-            vertical-align: middle;
-        }
-        td::after { content: "\a0"; }
-    }
-    .k-task-wrap {
-        margin: 0 -21px;
-        padding: 5px 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( #{$gantt-dot-size} + #{$gantt-dot-spacing * 2} );
-        height: calc( #{$gantt-dot-size} + #{$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: $gantt-dot-size;
-        height: $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-state-hover::before {
-        border-width: 1px;
-    }
-    .k-task-start { left: 0; }
-    .k-task-end { right: 0; }
-    .k-task-draghandle {
-        margin-left: 16px;
-        width: 0;
-        height: 0;
-        border: 5px solid transparent;
-        border-top-width: 0;
-        border-bottom-color: inherit;
-        position: absolute;
-        bottom: 0;
-        // display: none;
-        cursor: e-resize;
-        visibility: hidden;
-    }
-    .k-task-wrap:hover .k-task-draghandle {
-        visibility: visible;
-    }
-
-
-    // Milestone
-    .k-milestone-wrap {
-        margin: 0 -2em;
-    }
-    .k-task-milestone {
-        width: 1em;
-        height: 1em;
-        border-width: 1px;
-        border-style: solid;
-        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 {
-        @include border-radius( $border-radius );
-        border-width: $gantt-task-border-width;
-        border-style: solid;
-        cursor: default;
-
-        .k-resize-handle {
-            opacity: .5;
-            z-index: 2;
-            visibility: hidden;
-        }
-        .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 {
-        @include border-radius( $border-radius );
-        width: 20%;
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        bottom: 0;
-        left: 0;
-    }
-    .k-task-content {
-        position: relative;
-        z-index: 2;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-    .k-task-template {
-        padding: $gantt-task-padding-y $gantt-task-padding-x;
-        line-height: normal;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .k-task-actions {
-        padding: $padding-y-sm;
-        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: 0 5px;
-        }
-    }
-
-
-    // Task tooltip
-    .k-task-details {
-        padding: $padding-y $padding-x;
-        white-space: nowrap;
-
-        strong {
-            font-size: $font-size-lg;
-            font-weight: normal;
-            display: block;
-        }
-        .k-task-pct {
-            font-size: $icon-size-lg;
-        }
-        ul {
-            line-height: normal;
-        }
-    }
-
-    // Planned position
-
-    .k-gantt-planned {
-        .k-gantt-dependencies,
-        .k-task-dot,
-        .k-resources-wrap {
-            margin-top: $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: $gantt-planned-single-drag-hint-top;
-        }
-
-        .k-summary-wrap.k-drag-hint {
-            top: $gantt-planned-summary-drag-hint-top;
-        }
-
-        .k-milestone-wrap.k-drag-hint {
-            top: $gantt-planned-milestone-drag-hint-top;
-        }
-    }
-
-    // Planned element
-
-    .k-task-planned {
-        margin: 0 0 $gantt-planned-margin-y;
-        line-height: $gantt-planned-line-height;
-        display: flex;
-        align-items: center;
-
-        .k-task-moment {
-            border-width: $gantt-planned-border-width;
-            border-radius: $gantt-planned-moment-border-radius;
-            border-style: solid;
-            height: $gantt-planned-moment-height;
-            width: $gantt-planned-moment-width;
-        }
-
-        .k-task-duration {
-            height: $gantt-planned-duration-height;
-        }
-
-        .k-task-moment.k-moment-left {
-            margin-left: $gantt-planned-moment-left-margin-x;
-        }
-
-        &:hover .k-task-duration {
-            height: $gantt-planned-duration-hover-height;
-        }
-    }
-
-    .k-milestone-wrap .k-task-moment {
-        margin-left: $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-right: $gantt-planned-offset-resize-handler-margin-x;
-        }
-
-        .k-resize-handle::before {
-            border-left-width: 1px;
-            position: absolute;
-            top: $gantt-offset-resize-handler-top;
-            bottom: .5em;
-            margin-right: 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;
-    }
-}
-
-@include exports("gantt/export") {
-
-    .k-pdf-export-shadow {
-        .k-gantt {
-            float: left;
-        }
-
-        .k-gantt,
-        .k-gantt-timeline,
-        .k-gantt-dependencies {
-            width: auto !important; // sass-lint:disable-line no-important
-            height: auto !important; // sass-lint:disable-line no-important
-            overflow: visible !important; // sass-lint:disable-line no-important
-        }
-
-        .k-gantt-treelist .k-treelist {
-            display: block;
-        }
-
-        .k-gantt-layout.k-splitbar {
-            display: none;
-        }
-    }
-
-}
-
-
-@include exports("gantt-edit-form/layout") {
-
-
-    .k-gantt-edit-form {}
-
-    .k-gantt-edit-form .k-edit-buttons {}
-    .k-gantt-edit-form .k-gantt-update {}
-    .k-gantt-edit-form .k-gantt-cancel {}
-    .k-gantt-edit-form .k-gantt-delete {
-        float: left;
-    }
-
-}
-
-
-@include exports("gantt/rtl") {
-
-    .k-rtl {
-
-        .k-gantt-rows,
-        .k-gantt-columns {
-            left: auto;
-            right: 0;
-        }
-
-        .k-task-wrap:not(.k-milestone-wrap) {
-            margin: 0 -26px;
-        }
-
-        .k-gantt-timeline {
-
-            .k-gantt-tasks tbody {
-                text-align: left;
-            }
-            .k-header {
-                border-width: 0 $grid-cell-vertical-border-width 1px 0;
-            }
-            .k-header:first-child {
-                border-right-width: 0;
-            }
-
-            .k-task-start {
-                left: auto;
-                right: 0;
-            }
-
-            .k-task-end {
-                right: auto;
-                left: 0;
-            }
-        }
-
-        .k-task-content {
-            text-align: right;
-        }
-
-        .k-task-complete {
-            left: auto;
-            right: 0;
-        }
-
-        .k-task-draghandle {
-            margin-left: 0;
-            margin-right: 16px;
-        }
-
-        .k-gantt-dependencies {
-            left: auto;
-            right: 0;
-        }
-
-        .k-gantt-delete {
-            float: right;
-        }
-
-        .k-task-offset-wrap .k-task-content {
-            .k-resize-e {
-                display: block;
-            }
-
-            .k-resize-w {
-                display: none;
-            }
-        }
-
-        .k-milestone-wrap {
-            margin-left: $gantt-rtl-milestone-wrap-margin-x;
-        }
-
-        .k-milestone-wrap .k-task-moment {
-            margin-right: $gantt-rtl-milestone-planned-moment-margin-x;
-        }
-
-        .k-gantt-timeline .k-milestone-wrap .k-task-start {
-            right: $gantt-rtl-milestone-dot-start-margin-x;
-        }
-    }
-}