@syncfusion/ej2-gantt 20.1.58 → 20.2.36

package/styles/gantt/_layout.scss

@@ -10,6 +10,73 @@
         .e-timeline-top-header-cell {
           height: $gantt-bigger-timeline-top-header-cell-height;
         }
+
+        .e-event-markers {
+          .e-span-label {
+            border-radius: $gantt-bigger-event-markers-border-radius;
+            font-size: $gantt-bigger-event-arrow-font-size;
+            height: $gantt-bigger-event-markers-height;
+            padding: $gantt-bigger-event-markers-padding;
+            top: $gantt-bigger-event-markers-top;
+          }
+
+          .e-gantt-right-arrow {
+            border-bottom: $gantt-bigger-event-arrow-bottom;
+            border-right: $gantt-bigger-event-arrow-right;
+            border-right-color: $gantt-bigger-event-arrow-color;
+            border-top: $gantt-bigger-event-arrow-top;
+            top: $gantt-bigger-event-arrow-top-value;
+          }
+        }
+
+        @if($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+          .e-left-resize-gripper::before,
+          .e-right-resize-gripper::before {
+            content: '\e888';
+          }
+        }
+        @else {
+          .e-left-resize-gripper::before,
+          .e-right-resize-gripper::before {
+            content: '\e92c';
+          }
+        }
+
+        .e-connectorpoint-right,
+        .e-connectorpoint-left,
+        .e-right-connectorpoint-outer-div,
+        .e-left-connectorpoint-outer-div {
+          border-radius: 50%;
+          display: inline-block;
+          position: absolute;
+        }
+
+        .e-connectorpoint-left-hover,
+        .e-connectorpoint-right-hover {
+          border-style: solid;
+          border-width: 1px;
+          box-sizing: content-box;
+          cursor: pointer;
+          display: inline-block;
+        }
+
+        .e-connectorpoint-left-hover,
+        .e-connectorpoint-right-hover {
+          background-color: $connector-point-hover-color;
+          border-color: $connector-point-border-color;
+        }
+
+        .e-connectorpoint-left-hover:hover,
+        .e-connectorpoint-right-hover:hover {
+          background-color: $connector-point-hover-color;
+          border-color: $connector-point-border-color;
+          outline: 2px solid $connector-point-hover-outerline-color;
+      }
+
+      }
+
+      .e-tab .e-content {
+        height: $gantt-bigger-add-dialog-content-height;
       }
 
       .e-gantt-tree-grid-pane {
@@ -19,6 +86,54 @@
           }
         }
       }
+
+      .e-dialog {
+        .e-dlg-header-content {
+          padding: $gantt-bigger-dialog-header-padding; // sass-lint:disable-line no-important
+
+          .e-btn.e-dlg-closeicon-btn {
+            left: $gantt-bigger-dialog-close-button-left;
+          }
+        }
+
+        @if($skin-name == 'tailwind') {
+          .e-dlg-header-content {
+            height: 68px !important; // sass-lint:disable-line no-important 
+          }
+        }
+
+        .e-btn .e-btn-icon.e-icon-dlg-close {
+          font-size: $gantt-bigger-dialog-close-button-size;
+        }
+
+        .e-footer-content {
+          height: $gantt-bigger-filter-dialog-footer-height;
+          padding: $gantt-bigger-filter-dialog-footer-padding;
+
+          .e-btn {
+            margin-left: 12px;
+          }
+        }
+
+        .e-dlg-header {
+          line-height: 28px;
+        }
+      }
+
+      .e-filter-popup {
+        width: $gantt-bigger-filter-dialog-width;
+      }
+
+      .e-grid .e-flmenu-valuediv {
+        padding: $gantt-bigger-filter-dialog-input-padding;
+      }
+
+      .e-filter-popup {
+        .e-dlg-content {
+          border-radius: $gantt-dialog-bigger-border-radius;
+          padding: $gantt-dialog-bigger-input-padding-field;
+        }
+      }
     }
 
     .e-columnmenu {
@@ -34,6 +149,13 @@
     }
 
     .e-gantt-dialog {
+      border-radius: 6px;
+      width: $gantt-bigger-dialog-width;
+
+      .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
+        padding: 0 16px !important; // sass-lint:disable-line no-important
+      }
+
       .e-edit-form-column:nth-child(odd) {
         padding: $gantt-bigger-dialog-edit-form-odd-padding;
       }
@@ -45,6 +167,162 @@
       .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
         padding: $gantt-bigger-dialog-edit-form-scroll-padding;
       }
+
+      .e-edit-form-row {
+        height: $gantt-bigger-add-dialog-content-height;
+      }
+
+      .e-edit-form-column {
+        height: $gantt-bigger-add-dialog-input-height;
+      }
+
+      .e-dlg-header-content {
+        border-bottom: 0 !important; // sass-lint:disable-line no-important
+      }
+
+      > .e-dlg-content {
+        border-radius: 0 !important; // sass-lint:disable-line no-important
+      }
+
+      .e-dlg-header-content {
+        border-radius: $gantt-bigger-dialog-border-radius;
+        padding-bottom: $gantt-dialog-padding-bottom;
+
+        .e-btn.e-dlg-closeicon-btn {
+          border-radius: 50%;
+          height: auto !important; // sass-lint:disable-line no-important
+          width: auto;
+        }
+      }
+
+      .e-tab {
+        .e-tab-header .e-toolbar-item.e-active {
+          margin-left: $gantt-bigger-dialog-tab-padding-left;
+        }
+      }
+
+      @if($skin-name == 'bootstrap4') {
+        .e-icon-dlg-close {
+          color: $gantt-bigger-dialog-icon-color;
+        }
+      }
+
+      .e-control-wrapper .e-input-group-icon.e-date-icon {
+        font-size: 16px !important; // sass-lint:disable-line no-important
+      }
+
+      .e-control-wrapper .e-input-group-icon.e-date-icon {
+        min-height: $gantt-bigger-dialog-input-icon;
+        min-width: 35.82px !important; // sass-lint:disable-line no-important
+      }
+
+      .e-btn.e-flat {
+        line-height: 24px;
+        padding: 6px 16px 6px 15px !important; // sass-lint:disable-line no-important
+      }
+
+      .e-btn.e-primary {
+        padding: 6px 21px 6px 23px !important; // sass-lint:disable-line no-important
+      }
+
+      .e-datetime-wrapper .e-time-icon.e-icons::before {
+        font-size: 16px !important; // sass-lint:disable-line no-important
+      }
+
+      .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text {
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .e-float-input.e-control-wrapper input {
+        height: $gantt-bigger-dialog-input-field-height;
+
+        @if($skin-name == 'material') {
+          padding: 5px 0 11px !important; // sass-lint:disable-line no-important
+        }
+      }
+
+      .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
+        min-height: $gantt-bigger-dialog-input-icon;
+        min-width: 35.82px !important; // sass-lint:disable-line no-important
+      }
+
+      .e-control-wrapper .e-input-group-icon.e-time-icon {
+        min-height: $gantt-bigger-dialog-input-icon;
+        min-width: 35.82px !important; // sass-lint:disable-line no-important
+      }
+
+      .e-input-group.e-control-wrapper {
+        height: $gantt-dialog-bigger-input-field;
+      }
+
+      .e-input-group-icon.e-date-icon {
+        min-width: 36px !important; // sass-lint:disable-line no-important
+      }
+
+      @if($skin-name == 'material') {
+        .e-datetime-wrapper .e-input-group-icon.e-time-icon {
+          margin: 5px 0 6px !important; // sass-lint:disable-line no-important
+        }
+
+        .e-input-group.e-control-wrapper .e-input-group-icon {
+          margin-right: 0 !important; // sass-lint:disable-line no-important 
+        }
+      }
+
+      @if($skin-name == 'tailwind') {
+        .e-input-group.e-control-wrapper .e-input-group-icon {
+          padding: 7px 0 !important; // sass-lint:disable-line no-important 
+        }
+      }
+    }
+
+    .e-predecessor-tooltip {
+      background-color: $gantt-bigger-tooltip-button-color;
+
+      .e-left-btn:disabled {
+        color: $gantt-bigger-tooltip-disabled-button-color;
+      }
+
+      .e-right-btn:disabled {
+        color: $gantt-bigger-tooltip-disabled-button-color;
+      }
+
+      .e-tip-content {
+        padding: 3px !important; // sass-lint:disable-line no-important 
+      }
+
+      .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
+        background-color: $gantt-bigger-tooltip-button-color;
+        border-color: $gantt-bigger-tooltip-button-color;
+        color: $gantt-bigger-tooltip-button-text-color;
+        font-size: 12px;
+        line-height: 18px;
+        padding: 0 8px 0 0;
+      }
+
+      .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
+        background-color: $gantt-bigger-tooltip-button-color;
+        border-color: $gantt-bigger-tooltip-button-color;
+        color: $gantt-bigger-tooltip-button-text-color;
+        font-size: 12px;
+        line-height: 18px;
+        padding: 0 0 0 8px;
+      }
+    }
+
+    .e-predecessor-dialog {
+      background-color: $gantt-bigger-tooltip-dialog-color;
+
+      .e-dlg-content {
+        background-color: $gantt-bigger-tooltip-dialog-color;
+        padding: $gantt-bigger-predecessor-dialog-padding;
+      }
     }
   }
 
@@ -235,10 +513,12 @@
         }
 
         .e-holiday-container {
+          height: 100%;
           position: absolute;
         }
 
         .e-weekend-container {
+          height: 100%;
           position: absolute;
         }
 
@@ -522,24 +802,22 @@
         cursor: col-resize;
 
         .e-progressbar-handler {
-          border-style: solid;
           border-width: 1px;
           box-sizing: content-box;
           cursor: col-resize;
           height: 2px;
           position: absolute;
           top: 7px;
-          width: 12px;
         }
 
         .e-progressbar-handler-element {
           border-bottom-style: solid;
-          border-bottom-width: 6px;
+          border-bottom-width: 8px;
           border-left: 7px solid transparent;
           border-right: 7px solid transparent;
           cursor: col-resize;
           height: 0;
-          left: -1px;
+          left: 0;
           position: absolute;
           top: -7px;
           width: 0;
@@ -547,14 +825,14 @@
 
         .e-progressbar-handler-after {
           border-bottom-style: solid;
-          border-bottom-width: 6px;
+          border-bottom-width: 8px;
           border-left: 6px solid transparent;
           border-right: 6px solid transparent;
           cursor: col-resize;
           height: 0;
-          left: -1px;
+          left: 1px;
           position: absolute;
-          top: -6px;
+          top: -7px;
           width: 0;
         }
       }
@@ -715,6 +993,10 @@
         outline: 1px solid;
       }
 
+      .e-critical-connector-line-hover {
+        outline: 1px solid;
+      }
+
       .e-connector-line-hover-z-index {
         z-index: 100;
       }
@@ -1075,4 +1357,8 @@
       }
     }
   }
+
+  .e-predecessor-tooltip {
+    visibility: hidden;
+  }
 }

package/styles/gantt/_material-dark-definition.scss

@@ -6,10 +6,11 @@ $gantt-grid-line-color: $grey-700 !default;
 $gantt-label-color: rgba($grey-light-font, .87) !default;
 $gantt-content-color: rgb(0, 0, 0) !default;
 $holiday-background: $grey-700 !default;
-$progress-handler-outline: #fff !default;
+$progress-handler-outline: $primary-font !default;
 $progress-handler-background: #222 !default;
 $holiday-label-color: $grey-dark-font !default;
 $holiday-label-font-size: 12px !default;
+$connector-point-hover-outerline-color: $primary-200 !default;
 $weekend-background: $grey-800 !default;
 $event-marker-line-color: $accent !default;
 $event-marker-label-color: #cae8ff !default;
@@ -19,9 +20,11 @@ $event-marker-label-padding: 7px 12px !default;
 $event-marker-label-height: 30px !default;
 $event-marker-label-arrow-top: 60px !default;
 $connector-line-color: lighten($primary, 15%) !default;
+$critical-connector-line-color: #d13438 !default;
 $connector-line-hover-color: lighten($primary, 15%) !default;
+$critical-connector-line-hover-color: #f3d8da !default;
 $connector-false-line-color: lighten($primary, 15%) !default;
-$connector-point-hover-color: $grey-300 !default;
+$connector-point-hover-color: #005a9e !default;
 $connector-point-border-color: $grey-dark !default;
 $connector-point-hover-bg-color: $grey-700 !default;
 $connector-point-hover-border-color: lighten($primary, 15%) !default;
@@ -35,15 +38,18 @@ $gantt-header-border-spacing: 0 !default;
 $gantt-line-container-cell-border-color: $grey-700 !default;
 // sass-lint:disable-all
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, rgba(63,81,181, 0.2), #3f51b5 30%, #3f51b5 70%, #3f51b5 70%, rgba(63,81,181, 0.2) 100%) !default;
-$gantt-unscheduled-taskbar-background-color: rgba(63,81,181, .2) !default;
+$gantt-unscheduled-critical-taskbar-background: linear-gradient(to right, rgba(285,85,85, 0.2), #D13438 30%, #D13438 70%, #D13438 70%, rgba(285,85,85, 0.2) 100%) !default;
+$gantt-unscheduled-critical-taskbar-background-color: rgba(285,85,85, .2) !default;
 $gantt-unscheduled-milestone-top-border: #dadada !default;
 $gantt-unscheduled-milestone-bottom-border: #dadada !default;
-$gantt-resize-gripper: rgba(249, 146, 11, .2) !default;
 $gantt-child-task-bar: $primary !default;
+$gantt-critical-child-task-bar: #F3D8DA !default;
 $gantt-child-progress-bar: lighten($primary, 15%) !default;
+$gantt-critical-child-progress-bar: #D13438 !default;
 $gantt-child-progress-bar-border: 0px !default;
 $gantt-child-progress-bar-border-radious:4px;
 $gantt-child-task-bar-border: 1px solid lighten($primary, 15%) !default;
+$gantt-critical-child-task-bar-border: 1px solid #F3D8DA !default;
 $gantt-manualchild-task-bar: #8dd1c4;
 $gantt-manualchild-progress-bar: #67c1b2;
 $gantt-manualchild-progress-bar-border: #4fb29f;
@@ -54,6 +60,7 @@ $gantt-unscheduled-manualtaskbar-background: linear-gradient(to right, rgba(63,8
 $gantt-parent-task-bar: #029f90 !default;
 $gantt-parent-progress-bar:  #4cc7ba !default;
 $gantt-milestone-border-color:  #dadada !default;
+$gantt-critical-milestone-border-color: #d13438 !default;
 $gantt-parent-milestone-border-color:   #4cc7ba !default;
 $gantt-parent-progress-bar-border: 0px !default;
 $gantt-parent-task-bar-border: 1px solid  #4cc7ba !default;
@@ -66,19 +73,56 @@ $gantt-task-label-font-color: $primary-font !default;
 $gantt-label-font-size: 13px !default;
 $gantt-bigger-label-font-size: 14px !default;
 $gantt-label-font-color: $grey-dark-font !default;
-$gantt-tab-header-active-font-color: #fff !default;
+$gantt-tab-header-active-font-color: $primary-font !default;
 $gantt-tab-header-font-color: rgba(255, 255, 255, 0.64) !default;
 $gantt-edit-icon-color: $grey-white !default;
-$gantt-icons-color: #fff;
+$gantt-icons-color: $primary-font;
 $gantt-unscheduled-taskbar-border: 0px !default;
 $gantt-unscheduled-taskbar-border-radius: 0px !default;
 $gantt-dialog-general-height: 241px !default;
 $gantt-dialog-edit-form-odd-padding: 16px 18px 0 18px !default;
 $gantt-dialog-edit-form-even-padding: 16px 16px 0 0 !default;
 $gantt-dialog-edit-form-scroll-padding: 16px 16px 0 0 !default;
-$gantt-bigger-dialog-edit-form-odd-padding: 16px 18px 0 18px !default;
-$gantt-bigger-dialog-edit-form-even-padding: 16px 18px 0 0 !default;
-$gantt-bigger-dialog-edit-form-scroll-padding: 16px 18px 0 0 !default;
+$gantt-bigger-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-tooltip-button-color: $grey-black;
+$gantt-bigger-tooltip-dialog-color: #f3f3f3;
+$gantt-bigger-tooltip-button-text-color: $grey-white;
+$gantt-bigger-tooltip-disabled-button-color: $grey-600 !important;
+$gantt-bigger-dialog-edit-form-odd-padding: 16px 9px 0 16px !default;
+$gantt-bigger-dialog-edit-form-even-padding: 16px 16px 0 9px !default;
+$gantt-bigger-dialog-close-button-left: 1px !important;
+$gantt-bigger-dialog-close-button-size: 12px !important;
+$gantt-bigger-dialog-edit-form-odd-padding: 16px 9px 0 16px !default;
+$gantt-bigger-dialog-header-padding: 16px 4px 17px 16px !important;
+$gantt-bigger-add-dialog-content-height: 241px !important;
+$gantt-bigger-event-arrow-color: #cae8ff;
+$gantt-bigger-event-arrow-font-size: 12px !important;
+$gantt-bigger-event-markers-border-radius: 4px !important;
+$gantt-bigger-event-markers-height: 26px !important;
+$gantt-bigger-event-arrow-bottom: 6px solid transparent;
+$gantt-bigger-event-arrow-right: 6px solid transparent;
+$gantt-bigger-event-arrow-top: 6px solid transparent;
+$gantt-bigger-event-arrow-top-value: 73px !important;
+$gantt-bigger-event-markers-top: 65px !important;
+$gantt-bigger-event-markers-padding: 4px 12px 4px 9px !important;
+$gantt-bigger-add-dialog-input-height: 78px !important;
+$gantt-bigger-add-dialog-input-width: 250px !important;
+$gantt-bigger-add-dialog-input-field-width: 175px !default;
+$gantt-bigger-filter-dialog-footer-padding: 16px !important;
+$gantt-bigger-add-dialog-footer-padding: 16px !important;
+$gantt-bigger-filter-dialog-footer-height: 70px !important;
+$gantt-bigger-filter-dialog-input-padding: 14px 0 0 !important;
+$gantt-bigger-add-dialog-footer-height: 70px !important;
+$gantt-bigger-dialog-width: 550px !important;
+$gantt-bigger-filter-dialog-width: 350px !important;
+$gantt-dialog-bigger-input-field: 44px !default;
+$gantt-dialog-bigger-input-padding-field: 20px 16px 6px 16px !important;
+$gantt-bigger-dialog-input-field-height: 27px !important;
+$gantt-bigger-dialog-input-icon: 26px !important;
+$gantt-dialog-bigger-border-radius: 6px !important;
+$gantt-bigger-dialog-tab-padding-left: 4px !important;
+$gantt-bigger-dialog-border-radius: 6px 6px 0px 0px !default;
+$gantt-bigger-dialog-edit-form-scroll-padding: 16px 18px 0 9px !default;
 $gantt-dialog-dependent-height: 153px !default;
 $gantt-dialog-resource-height: 196px !default;
 $gantt-dialog-rte-height: 241px !default;
@@ -90,7 +134,7 @@ $gantt-dialog-tab-background: $primary !default;
 $gantt-dialog-header-font-color: $primary-font !default;
 $gantt-dialog-icon-color: $grey-white !default;
 $gantt-dialog-icon-hover-color: rgba(255, 255, 255, 0.15) !default;
-$gantt-dialog-close-icon-hover-color: #fff !default;
+$gantt-dialog-close-icon-hover-color: $primary-font !default;
 $gantt-dialog-tab-hover-border-color: transparent !default;
 $gantt-dialog-tab-header-border-no-color: transparent !default;
 $gantt-tab-header-border-width: 0px;
@@ -98,7 +142,7 @@ $gantt-depedent-div-border-bottom: 1px !default;
 $gantt-resource-div-border-bottom: 1px !default;
 $gantt-richtext-border-bottom: 1px !default;
 $gantt-richtext-content-border-bottom: 0px !default;
-$gantt-tab-selection-indicator-color: #00b0ff !default;
+$gantt-tab-selection-indicator-color: $accent !default;
 $gantt-tab-header-hover-color: transparent !default;
 $gantt-tab-header-hover-font-color: rgba(0, 0, 0, 0.87) !default;
 $gantt-connector-point-width: 12px !default;
@@ -108,7 +152,7 @@ $gantt-parent-progress-bar-border-radius: 4px !default;
 $gantt-timeline-top-headercell-font-size: 12px !default;
 $gantt-timeline-top-headercell-font-weight: 500 !default;
 $gantt-active-background: rgba(255, 255, 255, 0.28) !default;
-$gantt-active-color: #fff !default;
+$gantt-active-color: $primary-font !default;
 $gantt-active-color-opacity: 0.87 !default;
 $gantt-table-background: $grey-dark !default;
 $gantt-baseline-color: #ff9800 !default;
@@ -134,11 +178,11 @@ $gantt-inactive-parent: #8A8A8A !default;
 $gantt-inactive-child: #D5D5D5 !default;
 $gantt-connected-task: lighten($primary, 20%) !default;
 $gantt-active-parent-task: lighten(#000000, 10%) !default;
-$gantt-uptail-border:  #e0e0e0 !default;
-$gantt-gridpopup-span: #000 !default;
+$gantt-uptail-border:  $grey-300 !default;
+$gantt-gridpopup-span: $accent-font !default;
 $gantt-active-parent-shadow: rgba($gantt-gridpopup-span, 0.5) !default;
-$gantt-left-resize-gripper-border: #9e9e9e !default;
-$gantt-left-resize-gripper-color: #eee !default;
+$gantt-left-resize-gripper-border: $grey-500 !default;
+$gantt-left-resize-gripper-color: $grey-200 !default;
 $gantt-clone-padding: 4px 5px !default;
 $gantt-bigger-clone-padding: $gantt-clone-padding !default;
 $gantt-cell-border-color: $grey-700 !default;