@syncfusion/ej2-gantt 20.2.50 → 20.3.47

package/styles/gantt/_fusionnew-definition.scss

@@ -21,18 +21,18 @@ $connector-false-line-color: $primary !default;
 $connector-point-hover-color: $icon-color !default;
 $connector-point-border-color: $content-bg-color !default;
 $connector-point-hover-bg-color: $icon-color-hover !default;
-$critical-connector-line-color: #d13438 !default;
-$critical-connector-line-hover-color: #f3d8da !default;
-$connector-point-hover-outerline-color: #e7f1ff !default;
+$critical-connector-line-color: $danger !default;
+$critical-connector-line-hover-color: $danger-light !default;
+$connector-point-hover-outerline-color: $theme-light !default;
 $connector-point-hover-border-color: $content-bg-color !default;
 $gantt-line-container-cell-border-color: $border-light !default;
-// sass-lint:disable-all
+/* stylelint-disable */
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, $primary-light, $primary 30%, $primary 70%, $primary 70%, $primary-light 100%) !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-critical-child-task-bar: #F3D8DA !default;
-$gantt-critical-child-progress-bar: #D13438 !default;
-$gantt-critical-child-task-bar-border: 1px solid #F3D8DA !default;
+$gantt-critical-child-task-bar: $danger-light !default;
+$gantt-critical-child-progress-bar: $danger !default;
+$gantt-critical-child-task-bar-border: 1px solid $danger-light !default;
 $gantt-unscheduled-milestone-top-border: $content-bg-color-alt5 !default;
 $gantt-unscheduled-milestone-bottom-border: $content-bg-color-alt5 !default;
 $gantt-child-task-bar: $primary-light !default;
@@ -46,7 +46,7 @@ $gantt-unscheduled-manualtaskbar-background: linear-gradient(to right, $success-
 $gantt-parent-task-bar: $content-bg-color-alt4 !default;
 $gantt-parent-progress-bar: $content-bg-color-alt5 !default;
 $gantt-milestone-border-color: $content-bg-color-alt5 !default;
-$gantt-critical-milestone-border-color: #D13438 !default;
+$gantt-critical-milestone-border-color: $danger !default;
 $gantt-parent-milestone-border-color: $content-bg-color-alt5 !default;
 $gantt-label-font-color: $content-text-color-alt2 !default;
 $gantt-task-label-font-color: $primary-text-color !default;
@@ -102,7 +102,6 @@ $gantt-unscheduled-taskbar-left: 3px !default;
 $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: 13px !default;
 $gantt-header-border-spacing: 0 !default;
-// sass-lint:disable-all
 $gantt-child-progress-bar-border: 0px !default;
 $gantt-child-progress-bar-border-radious:4px;
 $gantt-child-task-bar-border: 1px solid $primary !default;
@@ -131,7 +130,7 @@ $gantt-bigger-dialog-close-button-left: 2px !important;
 $gantt-bigger-dialog-close-button-size: 14px !important;
 $gantt-bigger-dialog-header-padding: 16px 4px 16px 16px !important;
 $gantt-bigger-add-dialog-content-height: 250px !important;
-$gantt-bigger-event-arrow-color: #fff3cd;
+$gantt-bigger-event-arrow-color: $warning-light;
 $gantt-bigger-event-arrow-font-size: 12px !important;
 $gantt-bigger-event-markers-border-radius: 4px !important;
 $gantt-bigger-event-markers-height: 26px !important;
@@ -154,6 +153,9 @@ $gantt-bigger-filter-dialog-width: 350px !important;
 $gantt-dialog-bigger-input-field: 38px !default;
 $gantt-dialog-bigger-input-padding-field: 32px 16px 16px !important;
 $gantt-bigger-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-predecessor-dialog-font-size: 12px;
+$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
+$gantt-bigger-predecessor-dialog-line-height: 1.8 !default;
 $gantt-bigger-dialog-input-field-height: 36px !important;
 $gantt-bigger-dialog-input-icon: 36px !important;
 $gantt-dialog-bigger-border-radius: 6px !important;

package/styles/gantt/_highcontrast-definition.scss

@@ -33,7 +33,7 @@ $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: 13px !default;
 $gantt-header-border-spacing: 0 !default;
 $gantt-line-container-cell-border-color: $border-default !default;
-// sass-lint:disable-all
+/* stylelint-disable */
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, rgba(#3e047d, 0.2), #3e047d 30%, #3e047d 70%, #3e047d 70%, rgba(#3e047d, 0.2) 100%) !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;
@@ -82,6 +82,9 @@ $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-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-predecessor-dialog-font-size: 12px;
+$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
+$gantt-bigger-predecessor-dialog-line-height: 1.8 !default;
 $gantt-bigger-tooltip-button-color: $selection-font;
 $gantt-bigger-tooltip-dialog-color: $bg-base-10;
 $gantt-bigger-dialog-edit-form-odd-padding: 16px 9px 0 18px !default;

package/styles/gantt/_highcontrast-light-definition.scss

@@ -34,7 +34,7 @@ $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: 13px !default;
 $gantt-header-border-spacing: 0 !default;
 $gantt-line-container-cell-border-color: #e0e0e0 !default;
-// sass-lint:disable-all
+/* stylelint-disable */
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, rgba(#3e047d, 0.2), #3e047d 30%, #3e047d 70%, #3e047d 70%, rgba(#3e047d, 0.2) 100%) !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;
@@ -82,6 +82,9 @@ $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-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-predecessor-dialog-font-size: 12px;
+$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
+$gantt-bigger-predecessor-dialog-line-height: 1.8 !default;
 $gantt-bigger-tooltip-button-color: $hover-border;
 $gantt-bigger-tooltip-dialog-color: #1a1a1a;
 $gantt-bigger-dialog-edit-form-odd-padding: 16px 9px 0 18px !default;

package/styles/gantt/_layout.scss

@@ -29,7 +29,7 @@
           }
         }
 
-        @if($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
+        @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
           .e-left-resize-gripper::before,
           .e-right-resize-gripper::before {
             content: '\e888';
@@ -81,23 +81,27 @@
       .e-gantt-tree-grid-pane {
         .e-columnheader {
           .e-headercell {
-            height: $gantt-bigger-treegrid-header-border-height !important; // sass-lint:disable-line no-important
+            height: $gantt-bigger-treegrid-header-border-height !important; /* stylelint-disable-line declaration-no-important */
           }
         }
       }
 
       .e-dialog {
         .e-dlg-header-content {
-          padding: $gantt-bigger-dialog-header-padding; // sass-lint:disable-line no-important
+          padding: $gantt-bigger-dialog-header-padding; /* stylelint-disable-line declaration-no-important */
 
           .e-btn.e-dlg-closeicon-btn {
             left: $gantt-bigger-dialog-close-button-left;
           }
         }
-
-        @if($skin-name == 'tailwind') {
+        @if ($skin-name == 'FluentUI' or $skin-name == 'fluent-dark') {
+          .e-dlg-content {
+            margin-bottom: 0;
+          }
+        }
+        @if ($skin-name == 'tailwind') {
           .e-dlg-header-content {
-            height: 68px !important; // sass-lint:disable-line no-important 
+            height: 68px !important; /* stylelint-disable-line declaration-no-important */
           }
         }
 
@@ -119,7 +123,7 @@
         }
       }
 
-      .e-filter-popup {
+      .e-filter-popup.e-popup {
         width: $gantt-bigger-filter-dialog-width;
       }
 
@@ -148,11 +152,12 @@
     }
 
     .e-gantt-dialog {
-      border-radius: 6px;
-      width: $gantt-bigger-dialog-width;
-
+      .e-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
+        padding: 0 16px !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-edit-form-column:nth-child(odd) {
@@ -176,11 +181,11 @@
       }
 
       .e-dlg-header-content {
-        border-bottom: 0 !important; // sass-lint:disable-line no-important
+        border-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
       }
 
       > .e-dlg-content {
-        border-radius: 0 !important; // sass-lint:disable-line no-important
+        border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-dlg-header-content {
@@ -189,7 +194,7 @@
 
         .e-btn.e-dlg-closeicon-btn {
           border-radius: 50%;
-          height: auto !important; // sass-lint:disable-line no-important
+          height: auto !important; /* stylelint-disable-line declaration-no-important */
           width: auto;
         }
       }
@@ -200,32 +205,32 @@
         }
       }
 
-      @if($skin-name == 'bootstrap4') {
+      @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
+        font-size: 16px !important; /* stylelint-disable-line declaration-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
+        min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-btn.e-flat {
         line-height: 24px;
-        padding: 6px 16px 6px 15px !important; // sass-lint:disable-line no-important
+        padding: 6px 16px 6px 15px !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-btn.e-primary {
-        padding: 6px 21px 6px 23px !important; // sass-lint:disable-line no-important
+        padding: 6px 21px 6px 23px !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-datetime-wrapper .e-time-icon.e-icons::before {
-        font-size: 16px !important; // sass-lint:disable-line no-important
+        font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
@@ -241,19 +246,19 @@
       .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
+        @if ($skin-name == 'material') {
+          padding: 5px 0 11px !important; /* stylelint-disable-line declaration-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
+        min-width: 35.82px !important; /* stylelint-disable-line declaration-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
+        min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-input-group.e-control-wrapper {
@@ -261,28 +266,41 @@
       }
 
       .e-input-group-icon.e-date-icon {
-        min-width: 36px !important; // sass-lint:disable-line no-important
+        min-width: 36px !important; /* stylelint-disable-line declaration-no-important */
       }
 
-      @if($skin-name == 'material') {
+      @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
+          margin: 5px 0 6px !important; /* stylelint-disable-line declaration-no-important */
         }
 
         .e-input-group.e-control-wrapper .e-input-group-icon {
-          margin-right: 0 !important; // sass-lint:disable-line no-important 
+          margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
         }
       }
 
-      @if($skin-name == 'tailwind') {
+      @if ($skin-name == 'tailwind') {
         .e-input-group.e-control-wrapper .e-input-group-icon {
-          padding: 7px 0 !important; // sass-lint:disable-line no-important 
+          padding: 7px 0 !important; /* stylelint-disable-line declaration-no-important */
         }
       }
     }
 
     .e-predecessor-tooltip {
-      background-color: $gantt-bigger-tooltip-button-color;
+      .e-arrow-tip-outer.e-tip-bottom {
+        border-top: 8px solid $gantt-bigger-tooltip-button-color;
+        @if ($skin-name == 'FluentUI')
+        {
+          border-top: 12.5px solid $gantt-bigger-tooltip-button-color;
+        }
+        @else if ($skin-name == 'highcontrast'){
+          border-top: 7px solid $gantt-bigger-tooltip-button-color;
+        }
+      }
+
+      .e-arrow-tip-inner.e-tip-bottom {
+        color: $gantt-bigger-tooltip-button-color;
+      }
 
       .e-left-btn:disabled {
         color: $gantt-bigger-tooltip-disabled-button-color;
@@ -293,7 +311,7 @@
       }
 
       .e-tip-content {
-        padding: 3px !important; // sass-lint:disable-line no-important 
+        padding: 3px !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
@@ -321,6 +339,15 @@
       .e-dlg-content {
         background-color: $gantt-bigger-tooltip-dialog-color;
         padding: $gantt-bigger-predecessor-dialog-padding;
+        font-size: $gantt-bigger-predecessor-dialog-font-size;
+        font-weight: $gantt-bigger-predecessor-dialog-font-weight;
+        line-height: $gantt-bigger-predecessor-dialog-line-height;
+        @if ($skin-name == 'FluentUI') {
+          margin-bottom: 0;
+        }
+        @if ($skin-name == 'bootstrap-dark' or $skin-name == 'fabric-dark' or $theme-name == 'material-dark') {
+          color: $gantt-bigger-tooltip-button-color;
+        }
       }
     }
   }
@@ -415,7 +442,7 @@
       }
 
       .e-pane {
-        overflow: hidden !important; // sass-lint:disable-line no-important
+        overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
       }
     }
 
@@ -436,11 +463,11 @@
         border-width: 0;
       }
 
-      .e-grid.e-gridhover tr[role='row']:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-gridhover tr[role='row']:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-gridhover tr[role='row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-rtl .e-gridhover tr[role='row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-      .e-grid.e-gridhover tr[role='row']:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
+      .e-grid.e-gridhover tr[role = 'row']:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
+      .e-grid.e-gridhover tr[role = 'row']:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
+      .e-grid.e-gridhover tr[role = 'row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
+      .e-grid.e-rtl .e-gridhover tr[role = 'row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
+      .e-grid.e-gridhover tr[role = 'row']:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
         background-color: transparent;
       }
 
@@ -451,22 +478,22 @@
       }
 
       .e-headercontent {
-        border-right-width: 0 !important; // sass-lint:disable-line no-important
+        border-right-width: 0 !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-gridheader {
         border-top-style: none;
         border-top-width: 0;
-        padding-right: 0 !important; // sass-lint:disable-line no-important
+        padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-columnheader,
       .e-headercell {
-        height: $gantt-treegrid-header-border-height !important; // sass-lint:disable-line no-important
+        height: $gantt-treegrid-header-border-height !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-gridcontent .e-content {
-        overflow-x: scroll !important; // sass-lint:disable-line no-important
+        overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
       }
 
       .e-gridcontent .e-content.e-gantt-scroll-padding {
@@ -496,7 +523,7 @@
         border-right: 0 solid;
 
         .e-content {
-          -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
+          -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
           overflow-x: scroll;
           overflow-y: auto;
           position: relative;
@@ -1157,7 +1184,7 @@
 
     .e-richtexteditor {
       border-bottom-width: $gantt-richtext-border-bottom;
-      height: $gantt-dialog-rte-height !important; // sass-lint:disable-line no-important
+      height: $gantt-dialog-rte-height !important; /* stylelint-disable-line declaration-no-important */
       overflow: hidden;
     }
 
@@ -1172,14 +1199,14 @@
     }
 
     > .e-dlg-content {
-      padding: 0 !important; // sass-lint:disable-line no-important
+      padding: 0 !important; /* stylelint-disable-line declaration-no-important */
       @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
         height: 291px;
       }
     }
 
     .e-dlg-header-content {
-      border-bottom: 0 !important; // sass-lint:disable-line no-important
+      border-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
     }
 
     .e-dlg-header-content {
@@ -1188,8 +1215,8 @@
 
       .e-btn.e-dlg-closeicon-btn {
         border-radius: 50%;
-        height: auto !important; // sass-lint:disable-line no-important
-        width: auto !important; // sass-lint:disable-line no-important
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+        width: auto !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }
@@ -1199,9 +1226,9 @@
   }
 
   .e-ganttpopup {
-    -moz-user-select: none; // sass-lint:disable-line no-vendor-prefixes
-    -ms-user-select: none; // sass-lint:disable-line no-vendor-prefixes
-    -webkit-user-select: none; // sass-lint:disable-line no-vendor-prefixes
+    -moz-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
+    -ms-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
+    -webkit-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
     font-weight: normal;
     position: absolute;
     user-select: none;
@@ -1349,6 +1376,71 @@
   }
 
   .e-predecessor-tooltip {
+    background-color: $gantt-bigger-tooltip-button-color !important; /* stylelint-disable-line declaration-no-important */
+    border-color: $gantt-bigger-tooltip-button-color !important; /* stylelint-disable-line declaration-no-important */
     visibility: hidden;
+
+    .e-arrow-tip-outer.e-tip-bottom {
+      border-top: 8px solid $gantt-bigger-tooltip-button-color;
+      @if ($skin-name == 'FluentUI')
+      {
+        border-top: 12.5px solid $gantt-bigger-tooltip-button-color;
+      }
+      @else if ($skin-name == 'highcontrast'){
+        border-top: 7px solid $gantt-bigger-tooltip-button-color;
+      }
+    }
+
+    .e-arrow-tip-inner.e-tip-bottom {
+      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; /* stylelint-disable-line declaration-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;
+      font-size: $gantt-bigger-predecessor-dialog-font-size;
+      font-weight: $gantt-bigger-predecessor-dialog-font-weight;
+      line-height: $gantt-bigger-predecessor-dialog-line-height;
+      @if ($skin-name == 'FluentUI') {
+        margin-bottom: 0;
+      }
+      @if ($skin-name == 'bootstrap-dark' or $skin-name == 'fabric-dark' or $theme-name == 'material-dark') {
+        color: $gantt-bigger-tooltip-button-color;
+      }
+    }
   }
 }

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

@@ -36,7 +36,7 @@ $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: 13px !default;
 $gantt-header-border-spacing: 0 !default;
 $gantt-line-container-cell-border-color: $grey-700 !default;
-// sass-lint:disable-all
+/* stylelint-disable */
 $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-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;
@@ -84,6 +84,9 @@ $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-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-predecessor-dialog-font-size: 12px;
+$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
+$gantt-bigger-predecessor-dialog-line-height: 1.46 !default;
 $gantt-bigger-tooltip-button-color: $grey-black;
 $gantt-bigger-tooltip-dialog-color: #f3f3f3;
 $gantt-bigger-tooltip-button-text-color: $grey-white;

package/styles/gantt/_material-definition.scss

@@ -36,7 +36,7 @@ $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: 13px !default;
 $gantt-header-border-spacing: 0 !default;
 $gantt-line-container-cell-border-color: $grey-300 !default;
-// sass-lint:disable-all
+/* stylelint-disable */
 $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-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;
@@ -84,6 +84,9 @@ $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-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-predecessor-dialog-font-size: 12px;
+$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
+$gantt-bigger-predecessor-dialog-line-height: 1.46 !default;
 $gantt-bigger-tooltip-button-color: $grey-black;
 $gantt-bigger-tooltip-dialog-color: #f3f3f3;
 $gantt-bigger-tooltip-button-text-color: $grey-white;

package/styles/gantt/_material3-definition.scss

@@ -21,18 +21,18 @@ $connector-false-line-color: $primary !default;
 $connector-point-hover-color: $icon-color !default;
 $connector-point-border-color: $content-bg-color !default;
 $connector-point-hover-bg-color: $icon-color-hover !default;
-$connector-point-hover-outerline-color: #e7f1ff !default;
-$critical-connector-line-color: #d13438 !default;
-$critical-connector-line-hover-color: #f3d8da !default;
+$connector-point-hover-outerline-color: $theme-light !default;
+$critical-connector-line-color: $danger !default;
+$critical-connector-line-hover-color: $danger-light !default;
 $connector-point-hover-border-color: $content-bg-color !default;
 $gantt-line-container-cell-border-color: $border-light !default;
-// sass-lint:disable-all
+/* stylelint-disable */
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, $primary-light, $primary 30%, $primary 70%, $primary 70%, $primary-light 100%) !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-critical-child-task-bar: #F3D8DA !default;
-$gantt-critical-child-progress-bar: #D13438 !default;
-$gantt-critical-child-task-bar-border: 1px solid #F3D8DA !default;
+$gantt-critical-child-task-bar: $danger-light !default;
+$gantt-critical-child-progress-bar: $danger !default;
+$gantt-critical-child-task-bar-border: 1px solid $danger-light !default;
 $gantt-unscheduled-milestone-top-border: $content-bg-color-alt5 !default;
 $gantt-unscheduled-milestone-bottom-border: $content-bg-color-alt5 !default;
 $gantt-child-task-bar: $primary-light !default;
@@ -46,7 +46,7 @@ $gantt-unscheduled-manualtaskbar-background: linear-gradient(to right, $success-
 $gantt-parent-task-bar: $content-bg-color-alt4 !default;
 $gantt-parent-progress-bar: $content-bg-color-alt5 !default;
 $gantt-milestone-border-color: $content-bg-color-alt5 !default;
-$gantt-critical-milestone-border-color: #D13438 !default;
+$gantt-critical-milestone-border-color: $danger !default;
 $gantt-parent-milestone-border-color: $content-bg-color-alt5 !default;
 $gantt-label-font-color: $content-text-color-alt2 !default;
 $gantt-task-label-font-color: $primary-text-color !default;
@@ -102,7 +102,6 @@ $gantt-unscheduled-taskbar-left: 3px !default;
 $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: 13px !default;
 $gantt-header-border-spacing: 0 !default;
-// sass-lint:disable-all
 $gantt-child-progress-bar-border: 0px !default;
 $gantt-child-progress-bar-border-radious:4px;
 $gantt-child-task-bar-border: 1px solid $primary !default;
@@ -123,7 +122,7 @@ $gantt-dialog-edit-form-odd-padding: 12px 18px 0 18px !default;
 $gantt-dialog-edit-form-even-padding: 12px 18px 0 0 !default;
 $gantt-dialog-edit-form-scroll-padding: 12px 18px 0 0 !default;
 $gantt-bigger-tooltip-button-color: $warning-text;
-$gantt-bigger-tooltip-dialog-color: #f3f3f3;
+$gantt-bigger-tooltip-dialog-color: $content-bg-color-alt1;
 $gantt-bigger-tooltip-button-text-color: $toooltip-text-color;
 $gantt-bigger-tooltip-disabled-button-color: $content-bg-color-alt5 !important;
 $gantt-bigger-dialog-edit-form-odd-padding: 16px 12px 0 16px !default;
@@ -132,7 +131,7 @@ $gantt-bigger-dialog-close-button-left: 2px !important;
 $gantt-bigger-dialog-close-button-size: 14px !important;
 $gantt-bigger-dialog-header-padding: 16px 4px 16px 16px !important;
 $gantt-bigger-add-dialog-content-height: 250px !important;
-$gantt-bigger-event-arrow-color: #fff3cd;
+$gantt-bigger-event-arrow-color: $warning-light;
 $gantt-bigger-event-arrow-font-size: 12px !important;
 $gantt-bigger-event-markers-border-radius: 4px !important;
 $gantt-bigger-event-markers-height: 26px !important;
@@ -155,6 +154,9 @@ $gantt-bigger-filter-dialog-width: 350px !important;
 $gantt-dialog-bigger-input-field: 38px !default;
 $gantt-dialog-bigger-input-padding-field: 32px 16px 16px !important;
 $gantt-bigger-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-predecessor-dialog-font-size: 12px;
+$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
+$gantt-bigger-predecessor-dialog-line-height: 1.8 !default;
 $gantt-bigger-dialog-input-field-height: 36px !important;
 $gantt-bigger-dialog-input-icon: 36px !important;
 $gantt-dialog-bigger-border-radius: 6px !important;

package/styles/gantt/_tailwind-definition.scss

@@ -25,7 +25,7 @@ $connector-point-border-color: $content-bg-color !default;
 $connector-point-hover-bg-color: $icon-color-hover !default;
 $connector-point-hover-border-color: $content-bg-color !default;
 $gantt-line-container-cell-border-color: $border-light !default;
-// sass-lint:disable-all
+/* stylelint-disable */
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, $primary-light, $primary 30%, $primary 70%, $primary 70%, $primary-light 100%) !default;
 $gantt-unscheduled-critical-taskbar-background: linear-gradient(to right, rgba(285,85,85, 0.2), $danger 30%, $danger 70%, $danger 70%, rgba(285,85,85, 0.2) 100%) !default;
 $gantt-unscheduled-critical-taskbar-background-color: rgba(285,85,85, .2) !default;
@@ -100,7 +100,6 @@ $gantt-unscheduled-taskbar-left: 3px !default;
 $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: $text-sm !default;
 $gantt-header-border-spacing: 0 !default;
-// sass-lint:disable-all
 $gantt-child-progress-bar-border: 0px !default;
 $gantt-child-progress-bar-border-radious:4px;
 $gantt-child-task-bar-border: 1px solid $primary !default;
@@ -121,6 +120,9 @@ $gantt-dialog-edit-form-odd-padding: 12px 12px 0 19px !default;
 $gantt-dialog-edit-form-even-padding: 12px 19px 0 0 !default;
 $gantt-dialog-edit-form-scroll-padding: 12px 15px 0 0 !default;
 $gantt-bigger-predecessor-dialog-padding: 10px 9px 9px 14px !important;
+$gantt-bigger-predecessor-dialog-font-size: 12px;
+$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
+$gantt-bigger-predecessor-dialog-line-height: 1.8 !default;
 $gantt-bigger-tooltip-button-color: $black;
 $gantt-bigger-tooltip-dialog-color: $content-bg-color-alt1;
 $gantt-bigger-tooltip-button-text-color: $white;