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

package/scss/components/gantt/_theme.scss

@@ -0,0 +1,286 @@
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-gantt--theme-base() {
+
+    // Gantt
+    .k-gantt {
+        @include fill(
+            $kendo-gantt-text,
+            $kendo-gantt-bg,
+            $kendo-gantt-border
+        );
+
+        // React gantt
+        .k-treelist-scrollable {
+            .k-task-milestone .k-task-milestone-content {
+                @include fill(
+                    $bg: $kendo-gantt-milestone-bg,
+                    $border: $kendo-gantt-milestone-border
+                );
+            }
+            .k-task-milestone.k-selected .k-task-milestone-content {
+                @include fill(
+                    $bg: $kendo-gantt-milestone-selected-bg,
+                    $border: $kendo-gantt-milestone-selected-border
+                );
+            }
+        }
+
+        .k-gantt-dependencies-svg {
+            polyline {
+                fill: none;
+                stroke: $kendo-gantt-line-fill;
+            }
+
+            polyline.k-selected {
+                stroke: $kendo-gantt-line-selected-fill;
+            }
+        }
+    }
+
+    // Header and footer
+    .k-gantt-header {}
+    .k-gantt-footer {
+        @include box-shadow( none );
+    }
+    .k-gantt-toolbar {}
+
+
+    // Treelist
+    .k-gantt-treelist {
+        @include fill(
+            $kendo-gantt-treelist-text,
+            $kendo-gantt-treelist-bg,
+            $kendo-gantt-treelist-border
+        );
+
+        .k-treelist,
+        .k-grid-content {
+            background-color: transparent;
+        }
+    }
+
+
+    // Rows and colls
+    .k-gantt-rows {}
+    .k-gantt-columns {}
+
+
+    // Non work hours
+    .k-gantt .k-nonwork-hour {
+        @include fill(
+            $kendo-gantt-nonwork-text,
+            $kendo-gantt-nonwork-bg,
+            $kendo-gantt-nonwork-border
+        );
+    }
+
+
+    // Task dot
+    .k-task-dot {}
+    .k-task-dot::before {
+        @include fill(
+            $bg: $kendo-gantt-dot-bg,
+            $border: $kendo-gantt-dot-border
+        );
+    }
+    .k-task-dot:hover::before,
+    .k-task-dot.k-hover::before {
+        @include fill(
+            $bg: $kendo-gantt-dot-hover-bg,
+            $border: $kendo-gantt-dot-hover-border
+        );
+    }
+
+
+    // Milestone
+    .k-task-milestone {
+        @include fill(
+            $bg: $kendo-gantt-milestone-bg,
+            $border: $kendo-gantt-milestone-border
+        );
+
+        &.k-task-delayed {
+            @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px);
+        }
+
+        &.k-task-advanced {
+            @include fill(
+                $bg: $kendo-gantt-advanced-bg
+            );
+        }
+    }
+    .k-task-milestone.k-selected {
+        background-image: none;
+        @include fill(
+            $bg: $kendo-gantt-milestone-selected-bg,
+            $border: $kendo-gantt-milestone-selected-border
+        );
+    }
+
+
+    // Summary
+    .k-task-summary {
+        color: $kendo-gantt-summary-bg;
+
+        &.k-task-delayed {
+            color: $kendo-gantt-delayed-bg-lighter;
+        }
+
+        &.k-task-advanced {
+            color: $kendo-gantt-advanced-bg-lighter;
+        }
+    }
+    .k-task-summary-complete {
+        color: $kendo-gantt-summary-progress-bg;
+    }
+    .k-task-delayed .k-task-summary-complete {
+        color: $kendo-gantt-delayed-bg;
+    }
+    .k-task-advanced .k-task-summary-complete {
+        color: $kendo-gantt-advanced-bg;
+    }
+    .k-task-summary.k-selected {
+        color: $kendo-gantt-summary-selected-bg;
+
+        .k-task-summary-complete {
+            color: $kendo-gantt-summary-progress-selected-bg;
+        }
+    }
+
+
+    // Tasks
+    .k-task-single {
+        @include fill(
+            $kendo-gantt-task-text,
+            $kendo-gantt-task-bg,
+            $kendo-gantt-task-border
+        );
+
+        &.k-task-delayed {
+            @include fill(
+                $bg: $kendo-gantt-delayed-bg-lighter
+            );
+        }
+
+        &.k-task-advanced {
+            @include fill(
+                $bg: $kendo-gantt-advanced-bg-lighter
+            );
+        }
+
+        .k-task-complete {
+            background-color: $kendo-gantt-task-progress-bg;
+        }
+    }
+    .k-task-delayed .k-task-complete {
+        @include fill(
+            $bg: $kendo-gantt-delayed-bg
+        );
+    }
+    .k-task-advanced .k-task-complete {
+        @include fill(
+            $bg: $kendo-gantt-advanced-bg
+        );
+    }
+    .k-task-single.k-selected {
+        @include fill(
+            $kendo-gantt-task-selected-text,
+            $kendo-gantt-task-selected-bg,
+            $kendo-gantt-task-selected-border
+        );
+
+        .k-task-complete {
+            background-color: $kendo-gantt-task-progress-selected-bg;
+        }
+    }
+
+    // Dependency Lines
+    .k-gantt-line {
+        color: $kendo-gantt-line-fill;
+    }
+    .k-gantt-line.k-selected {
+        color: $kendo-gantt-line-selected-fill;
+    }
+
+    // Planned element
+    .k-task-planned {
+        .k-task-moment {
+            @include fill(
+                $bg: transparent,
+                $border: $kendo-gantt-planned-border
+            );
+        }
+        .k-task-duration {
+            @include fill(
+                $bg: $kendo-gantt-planned-bg
+            );
+        }
+        &:hover .k-task-moment {
+            @include fill(
+                $bg: $kendo-gantt-planned-bg
+            );
+        }
+    }
+
+    // Delay offset
+    .k-task-offset {
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px);
+
+        .k-resize-e::before {
+            @include fill(
+                $border: $kendo-gantt-action-on-offset-text
+            );
+        }
+
+        .k-task-actions {
+            color: $kendo-gantt-action-on-offset-text;
+        }
+    }
+
+    .k-task-offset:hover {
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px);
+    }
+
+    .k-pdf-export .k-task-offset {
+        background-color: $kendo-gantt-delayed-bg;
+    }
+
+    // Tooltips
+    .k-offset-tooltip-delayed {
+        @include fill(
+            $bg: $kendo-gantt-delayed-bg
+        );
+    }
+
+    .k-planned-tooltip {
+        @include fill(
+            $bg: $kendo-gantt-planned-bg
+        );
+    }
+
+    .k-gantt-tooltip-validation {
+        &::before {
+            background-color: $kendo-gantt-validation-tooltip-border;
+        }
+    }
+    .k-gantt-tooltip-valid {
+        &::before {
+            background-color: $kendo-gantt-validation-tooltip-valid-border;
+        }
+    }
+    .k-gantt-tooltip-invalid {
+        &::before {
+            background-color: $kendo-gantt-validation-tooltip-invalid-border;
+        }
+    }
+
+}
+
+
+@mixin kendo-gantt--theme() {
+    @include kendo-gantt--theme-base();
+}

package/scss/components/gantt/_variables.scss

@@ -0,0 +1,101 @@
+// Gantt
+
+$kendo-gantt-border-width: null !default;
+$kendo-gantt-font-family: null !default;
+$kendo-gantt-font-size: null !default;
+$kendo-gantt-line-height: null !default;
+
+$kendo-gantt-bg: null !default;
+$kendo-gantt-text: null !default;
+$kendo-gantt-border: null !default;
+
+$kendo-gantt-treelist-bg: null !default;
+$kendo-gantt-treelist-text: null !default;
+$kendo-gantt-treelist-border: null !default;
+
+$kendo-gantt-nonwork-bg: null !default;
+$kendo-gantt-nonwork-text: null !default;
+$kendo-gantt-nonwork-border: null !default;
+
+$kendo-gantt-line-size: null !default;
+$kendo-gantt-line-fill: null !default;
+$kendo-gantt-line-selected-fill: null !default;
+
+$kendo-gantt-dot-size: null !default;
+$kendo-gantt-dot-spacing: null !default;
+$kendo-gantt-dot-bg: null !default;
+$kendo-gantt-dot-border: null !default;
+$kendo-gantt-dot-hover-bg: null !default;
+$kendo-gantt-dot-hover-border: null !default;
+
+$kendo-gantt-milestone-bg: null !default;
+$kendo-gantt-milestone-border: null !default;
+$kendo-gantt-milestone-selected-bg: null !default;
+$kendo-gantt-milestone-selected-border: null !default;
+
+$kendo-gantt-summary-bg: null !default;
+$kendo-gantt-summary-progress-bg: null !default;
+$kendo-gantt-summary-selected-bg: null !default;
+$kendo-gantt-summary-progress-selected-bg: null !default;
+
+$kendo-gantt-task-border-width: null !default;
+$kendo-gantt-task-padding-x: null !default;
+$kendo-gantt-task-padding-y: null !default;
+$kendo-gantt-task-bg: null !default;
+$kendo-gantt-task-text: null !default;
+$kendo-gantt-task-border: null !default;
+$kendo-gantt-task-progress-bg: null !default;
+$kendo-gantt-task-selected-bg: null !default;
+$kendo-gantt-task-selected-text: null !default;
+$kendo-gantt-task-selected-border: null !default;
+$kendo-gantt-task-progress-selected-bg: null !default;
+
+$kendo-gantt-task-actions-padding: null !default;
+
+$kendo-gantt-planned-margin-y: null !default;
+$kendo-gantt-planned-border-width: null !default;
+$kendo-gantt-planned-line-height: null !default;
+
+$kendo-gantt-planned-dependency-margin-y: null !default;
+
+$kendo-gantt-planned-moment-width: null !default;
+$kendo-gantt-planned-moment-height: null !default;
+$kendo-gantt-planned-moment-border-radius: null !default;
+$kendo-gantt-planned-moment-left-margin-x: null !default;
+$kendo-gantt-planned-milestone-moment-margin-x: null !default;
+
+$kendo-gantt-planned-duration-height: null !default;
+$kendo-gantt-planned-duration-hover-height: null !default;
+
+$kendo-gantt-planned-single-drag-hint-top: null !default;
+$kendo-gantt-planned-summary-drag-hint-top: null !default;
+$kendo-gantt-planned-milestone-drag-hint-top: null !default;
+
+$kendo-gantt-rtl-milestone-wrap-margin-x: null !default;
+$kendo-gantt-rtl-milestone-planned-moment-margin-x: null !default;
+$kendo-gantt-rtl-milestone-dot-start-margin-x: null !default;
+
+$kendo-gantt-planned-offset-resize-handler-margin-x: null !default;
+
+$kendo-gantt-planned-bg: null !default;
+$kendo-gantt-planned-border: null !default;
+
+$kendo-gantt-delayed-bg: null !default;
+$kendo-gantt-delayed-bg-lighter: null !default;
+
+$kendo-gantt-advanced-bg: null !default;
+$kendo-gantt-advanced-bg-lighter: null !default;
+
+$kendo-gantt-action-on-offset-text: null !default;
+$kendo-gantt-offset-resize-handler-top: null !default;
+
+$kendo-gantt-validation-tooltip-width: null !default;
+$kendo-gantt-validation-tooltip-label-width: null !default;
+$kendo-gantt-validation-tooltip-border: null !default;
+$kendo-gantt-validation-tooltip-valid-border: null !default;
+$kendo-gantt-validation-tooltip-invalid-border: null !default;
+
+$kendo-gantt-task-tooltip-padding-x: null !default;
+$kendo-gantt-task-tooltip-padding-y: null !default;
+
+

package/scss/components/grid/_index.scss

@@ -0,0 +1,64 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../adaptive/_index.scss" as *;
+@use "../progressbar/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../validator/_index.scss" as *;
+@use "../autocomplete/_index.scss" as *;
+@use "../datetimepicker/_index.scss" as *;
+@use "../dropdownlist/_index.scss" as *;
+@use "../numerictextbox/_index.scss" as *;
+@use "../menu/_index.scss" as *;
+@use "../dialog/_index.scss" as *;
+@use "../pager/_index.scss" as *;
+@use "../chip/_index.scss" as *;
+@use "../skeleton/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../table/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-grid--styles() {
+    @include import-once( "grid" ) {
+        @include core-styles();
+        @include kendo-adaptive--styles();
+        @include kendo-progressbar--styles();
+        @include kendo-button--styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-input--styles();
+        @include kendo-textbox--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-validator--styles();
+        @include kendo-autocomplete--styles();
+        @include kendo-date-time-picker--styles();
+        @include kendo-dropdown-list--styles();
+        @include kendo-numeric-textbox--styles();
+        @include kendo-menu--styles();
+        @include kendo-dialog--styles();
+        @include kendo-pager--styles();
+        @include kendo-chip--styles();
+        @include kendo-skeleton--styles();
+        @include kendo-list--styles();
+        @include kendo-table--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-grid--layout();
+        @include kendo-grid--theme();
+        @include kendo-utils--interactivity--touch-action();
+        @include kendo-utils--interactivity--cursor();
+        @include kendo-utils--layout--display();
+    }
+}