@syncfusion/ej2-react-gantt 21.2.10 → 22.1.34

package/CHANGELOG.md

@@ -4,6 +4,19 @@
 
 ### Gantt Chart
 
+#### Features
+
+-`#I43435` - Improved the user interface of taskbar resizing and moving actions in the Gantt Chart. Now, when users perform taskbar resizing or moving, a virtual element is displayed instead of updating the original taskbar element. This virtual element remains visible until the action is completed, providing users with a clear representation of the changes they are making. Please find the demo link [here](https://ej2.syncfusion.com/demos/#/bootstrap5/gantt/editing.html).
+
+
+#### Breaking changes
+
+- Connector lines have been changed from elements to SVG elements for UI improvement. This change has been made to enhance the user interface and provide a more visually appealing and flexible way of displaying connector lines.
+
+## 21.2.10 (2023-06-13)
+
+### Gantt Chart
+
 #### Bug Fixes
 
 - `#I459187` - Newly added record missed at the bottom in virtual scroll issue has been fixed.

package/dist/ej2-react-gantt.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-gantt.min.js
-*  version : 21.2.10
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-react-gantt.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-gantt.umd.min.js
-*  version : 21.2.10
+*  version : 22.1.34
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-gantt@*",
-  "_id": "@syncfusion/ej2-react-gantt@21.2.9",
+  "_id": "@syncfusion/ej2-react-gantt@21.2.8",
   "_inBundle": false,
-  "_integrity": "sha512-JGS9LLhc3tvK2zyNBxD0R1/UppfdNmnzGj6mh83YE7s+8mNWlSZwZ/TsmFzZwfdt2WoiV8PtX4jaGlK7NeAmwQ==",
+  "_integrity": "sha512-6VQwC0Ox5Cd67pODF2rz92leV1FKoRPlSVhmhSA7Ih6IA4hTVE0tD9tbOy7TlM4rUmV2p2Apwi3TB0/epva2XA==",
   "_location": "/@syncfusion/ej2-react-gantt",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-gantt/-/ej2-react-gantt-21.2.9.tgz",
-  "_shasum": "05828a1fd119be1eee95fc739b03670f8258a94a",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-react-gantt/-/ej2-react-gantt-21.2.8.tgz",
+  "_shasum": "545173a77696a23089d9a7e6c0f6e2d820595770",
   "_spec": "@syncfusion/ej2-react-gantt@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.9",
-    "@syncfusion/ej2-gantt": "21.2.10",
-    "@syncfusion/ej2-react-base": "~21.2.8"
+    "@syncfusion/ej2-base": "~22.1.34",
+    "@syncfusion/ej2-gantt": "22.1.34",
+    "@syncfusion/ej2-react-base": "~22.1.34"
   },
   "deprecated": false,
   "description": "Essential JS 2 Gantt Component for React",
@@ -55,6 +55,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "21.2.10",
+  "version": "22.1.34",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -337,9 +337,6 @@
 .e-bigger .e-gantt .e-dialog .e-dlg-header {
   line-height: 28px;
 }
-.e-bigger .e-gantt .e-filter-popup.e-popup {
-  width: 350px !important;
-}
 .e-bigger .e-gantt .e-grid .e-flmenu-valuediv {
   padding: 16px 0 0 !important;
 }
@@ -678,6 +675,9 @@
   line-height: 10px;
   vertical-align: middle;
 }
+.e-gantt .e-gantt-tree-grid-pane .e-grid .e-gantt-resource-parent .e-rowdragdrop {
+  pointer-events: none;
+}
 .e-gantt .e-gantt-chart {
   height: 100%;
   overflow: hidden;
@@ -1601,6 +1601,9 @@
   background: #484848;
   opacity: 1;
 }
+.e-gantt .e-taskbar-resize-div {
+  border-color: #0070f0;
+}
 .e-gantt .e-gantt-chart .e-timeline-header-container {
   background: #1a1a1a;
   border-bottom-color: #484848;
@@ -1648,7 +1651,7 @@
   outline-color: #248aff;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
-  background-color: #248aff;
+  background: #248aff;
   outline: 1px solid #0070f0;
   border-radius: 4px;
 }
@@ -1685,7 +1688,7 @@
   border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
-  background-color: #8dd1c4;
+  background: #8dd1c4;
   outline: #4fb29f;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {
@@ -1853,23 +1856,16 @@
 .e-gantt .e-gantt-chart .e-icon {
   color: #fff;
 }
-.e-gantt .e-gantt-chart .e-milestone-top {
-  border-bottom-color: #dadada;
-}
-.e-gantt .e-gantt-chart .e-milestone-bottom {
-  border-top-color: #dadada;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-top {
-  border-bottom-color: #4cc7ba;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-bottom {
-  border-top-color: #4cc7ba;
+.e-gantt .e-gantt-chart .e-gantt-milestone {
+  background-color: #dadada;
+  border-color: #0070f0;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-top {
-  border-bottom-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-parent-milestone {
+  background-color: #4cc7ba;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom {
-  border-top-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-manualparent-milestone {
+  background-color: #989A9C;
+  border-color: #0070f0;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-manualtask {
   background: linear-gradient(to right, rgba(63, 81, 181, 0.2), #989A9C 30%, #989A9C 70%, #989A9C 70%, rgba(63, 81, 181, 0.2) 100%);
@@ -1889,11 +1885,8 @@
 .e-gantt .e-gantt-chart .e-baseline-bar {
   background-color: #fac168;
 }
-.e-gantt .e-gantt-chart .e-baseline-milestone-top {
-  border-bottom-color: #fac168;
-}
-.e-gantt .e-gantt-chart .e-baseline-milestone-bottom {
-  border-top-color: #fac168;
+.e-gantt .e-gantt-chart .e-baseline-gantt-milestone-container {
+  background-color: #fac168;
 }
 .e-gantt .e-gantt-chart .e-uptail::before {
   border-bottom-color: #e0e0e0;
@@ -1947,11 +1940,8 @@
   background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
   border: transparent !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-top {
-  border-bottom-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-bottom {
-  border-top-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-milestone {
+  background-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-taskbar-inner-div {
   background-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
@@ -1965,21 +1955,15 @@
   background: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
   border: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-top {
-  border-bottom-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-bottom {
-  border-top-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-gantt-milestone {
+  background-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-child-taskbar-inner-div {
   background: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
   border: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-top {
-  border-bottom-color: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-bottom {
-  border-top-color: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-milestone {
+  background-color: #57a5ff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-line {
   border-color: #0070f0 !important; /* stylelint-disable-line declaration-no-important */
@@ -2079,7 +2063,7 @@
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
-  background-color: #F3D8DA;
+  background: #F3D8DA;
   outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
@@ -2098,10 +2082,6 @@
   border-radius: 4px;
 }
 
-.e-gantt .e-gantt-chart .e-critical-milestone-top {
-  border-bottom-color: #D13438;
-}
-
-.e-gantt .e-gantt-chart .e-critical-milestone-bottom {
-  border-top-color: #D13438;
+.e-gantt .e-gantt-chart .e-critical-milestone {
+  background-color: #D13438;
 }

package/styles/bootstrap.css

@@ -47,8 +47,8 @@
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-fontcolor-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-numberformatlist-dropdown,
 .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-rte-bulletformatlist-dropdown {
-  padding-bottom: 0;
-  padding-top: 0;
+  padding-bottom: 1px;
+  padding-top: 1px;
 }
 .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn:hover, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active, .e-rte-toolbar .e-toolbar-items .e-rte-backgroundcolor-dropdown.e-tbar-btn.e-btn.e-active:hover,
 .e-rte-toolbar .e-toolbar-items .e-rte-fontcolor-dropdown.e-tbar-btn.e-btn:hover,
@@ -481,9 +481,6 @@
 .e-bigger .e-gantt .e-dialog .e-dlg-header {
   line-height: 28px;
 }
-.e-bigger .e-gantt .e-filter-popup.e-popup {
-  width: 350px !important;
-}
 .e-bigger .e-gantt .e-grid .e-flmenu-valuediv {
   padding: 16px 0 0 !important;
 }
@@ -821,6 +818,9 @@
   line-height: 10px;
   vertical-align: middle;
 }
+.e-gantt .e-gantt-tree-grid-pane .e-grid .e-gantt-resource-parent .e-rowdragdrop {
+  pointer-events: none;
+}
 .e-gantt .e-gantt-chart {
   height: 100%;
   overflow: hidden;
@@ -1743,6 +1743,9 @@
   background: #c6ddf0;
   opacity: 1;
 }
+.e-gantt .e-taskbar-resize-div {
+  border-color: #317ab9;
+}
 .e-gantt .e-gantt-chart .e-timeline-header-container {
   background: #fff;
   border-bottom-color: #ddd;
@@ -1790,7 +1793,7 @@
   outline-color: #66afe9;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
-  background-color: #317ab9;
+  background: #317ab9;
   outline: 1px solid #21527d;
   border-radius: 4px;
 }
@@ -1827,7 +1830,7 @@
   border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
-  background-color: #7538C9;
+  background: #7538C9;
   outline: 1px solid #572A96;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {
@@ -1995,23 +1998,16 @@
 .e-gantt .e-gantt-chart .e-icon {
   color: #fff;
 }
-.e-gantt .e-gantt-chart .e-milestone-top {
-  border-bottom-color: #555;
-}
-.e-gantt .e-gantt-chart .e-milestone-bottom {
-  border-top-color: #555;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-top {
-  border-bottom-color: #555;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-bottom {
-  border-top-color: #555;
+.e-gantt .e-gantt-chart .e-gantt-milestone {
+  background-color: #555;
+  border-color: #21527d;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-top {
-  border-bottom-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-parent-milestone {
+  background-color: #555;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom {
-  border-top-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-manualparent-milestone {
+  background-color: #989A9C;
+  border-color: #21527d;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-manualtask {
   background: linear-gradient(to right, rgba(63, 81, 181, 0.2), #989A9C 30%, #989A9C 70%, #989A9C 70%, rgba(63, 81, 181, 0.2) 100%);
@@ -2031,11 +2027,8 @@
 .e-gantt .e-gantt-chart .e-baseline-bar {
   background-color: #f0ad4e;
 }
-.e-gantt .e-gantt-chart .e-baseline-milestone-top {
-  border-bottom-color: #f0ad4e;
-}
-.e-gantt .e-gantt-chart .e-baseline-milestone-bottom {
-  border-top-color: #f0ad4e;
+.e-gantt .e-gantt-chart .e-baseline-gantt-milestone-container {
+  background-color: #f0ad4e;
 }
 .e-gantt .e-gantt-chart .e-uptail::before {
   border-bottom-color: #e0e0e0;
@@ -2089,11 +2082,8 @@
   background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
   border: transparent !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-top {
-  border-bottom-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-bottom {
-  border-top-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-milestone {
+  background-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-taskbar-inner-div {
   background-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
@@ -2107,21 +2097,15 @@
   background: #21527d !important; /* stylelint-disable-line declaration-no-important */
   border: #21527d !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-top {
-  border-bottom-color: #21527d !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-bottom {
-  border-top-color: #21527d !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-gantt-milestone {
+  background-color: #21527d !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-child-taskbar-inner-div {
   background: #75acdb !important; /* stylelint-disable-line declaration-no-important */
   border: #75acdb !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-top {
-  border-bottom-color: #75acdb !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-bottom {
-  border-top-color: #75acdb !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-milestone {
+  background-color: #75acdb !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-line {
   border-color: #21527d !important; /* stylelint-disable-line declaration-no-important */
@@ -2221,7 +2205,7 @@
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
-  background-color: #F3D8DA;
+  background: #F3D8DA;
   outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
@@ -2240,10 +2224,6 @@
   border-radius: 4px;
 }
 
-.e-gantt .e-gantt-chart .e-critical-milestone-top {
-  border-bottom-color: #D13438;
-}
-
-.e-gantt .e-gantt-chart .e-critical-milestone-bottom {
-  border-top-color: #D13438;
+.e-gantt .e-gantt-chart .e-critical-milestone {
+  background-color: #D13438;
 }

package/styles/bootstrap4.css

@@ -38,8 +38,8 @@
 }
 .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn, .e-richtexteditor .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-rte-inline-dropdown.e-control.e-tbar-btn.e-btn {
   border: 1px solid transparent;
-  padding-bottom: 1px;
-  padding-top: 1px;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 .e-richtexteditor .e-rte-content {
   border-bottom-left-radius: 4px;
@@ -662,9 +662,6 @@
 .e-bigger .e-gantt .e-dialog .e-dlg-header {
   line-height: 28px;
 }
-.e-bigger .e-gantt .e-filter-popup.e-popup {
-  width: 350px !important;
-}
 .e-bigger .e-gantt .e-grid .e-flmenu-valuediv {
   padding: 16px 0 0 !important;
 }
@@ -1005,6 +1002,9 @@
   line-height: 10px;
   vertical-align: middle;
 }
+.e-gantt .e-gantt-tree-grid-pane .e-grid .e-gantt-resource-parent .e-rowdragdrop {
+  pointer-events: none;
+}
 .e-gantt .e-gantt-chart {
   height: 100%;
   overflow: hidden;
@@ -1927,6 +1927,9 @@
   background: rgba(0, 123, 255, 0.16);
   opacity: 1;
 }
+.e-gantt .e-taskbar-resize-div {
+  border-color: #007bff;
+}
 .e-gantt .e-gantt-chart .e-timeline-header-container {
   background: #fff;
   border-bottom-color: #dee2e6;
@@ -1974,7 +1977,7 @@
   outline-color: #66afe9;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-taskbar-inner-div {
-  background-color: #007bff;
+  background: #007bff;
   outline: 1px solid #0056b3;
   border-radius: 4px;
 }
@@ -2011,7 +2014,7 @@
   border-radius: 3px;
 }
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
-  background-color: #8553F1;
+  background: #8553F1;
   outline: 1px solid #6628EE;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {
@@ -2179,23 +2182,16 @@
 .e-gantt .e-gantt-chart .e-icon {
   color: #fff;
 }
-.e-gantt .e-gantt-chart .e-milestone-top {
-  border-bottom-color: #495057;
-}
-.e-gantt .e-gantt-chart .e-milestone-bottom {
-  border-top-color: #495057;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-top {
-  border-bottom-color: #495057;
-}
-.e-gantt .e-gantt-chart .e-parent-milestone-bottom {
-  border-top-color: #495057;
+.e-gantt .e-gantt-chart .e-gantt-milestone {
+  background-color: #495057;
+  border-color: #0056b3;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-top {
-  border-bottom-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-parent-milestone {
+  background-color: #495057;
 }
-.e-gantt .e-gantt-chart .e-manualparent-milestone-bottom {
-  border-top-color: #989A9C;
+.e-gantt .e-gantt-chart .e-gantt-manualparent-milestone {
+  background-color: #989A9C;
+  border-color: #0056b3;
 }
 .e-gantt .e-gantt-chart .e-gantt-unscheduled-manualtask {
   background: linear-gradient(to right, rgba(63, 81, 181, 0.2), #989A9C 30%, #989A9C 70%, #989A9C 70%, rgba(63, 81, 181, 0.2) 100%);
@@ -2215,11 +2211,8 @@
 .e-gantt .e-gantt-chart .e-baseline-bar {
   background-color: #ffc107;
 }
-.e-gantt .e-gantt-chart .e-baseline-milestone-top {
-  border-bottom-color: #ffc107;
-}
-.e-gantt .e-gantt-chart .e-baseline-milestone-bottom {
-  border-top-color: #ffc107;
+.e-gantt .e-gantt-chart .e-baseline-gantt-milestone-container {
+  background-color: #ffc107;
 }
 .e-gantt .e-gantt-chart .e-uptail::before {
   border-bottom-color: #e0e0e0;
@@ -2273,11 +2266,8 @@
   background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
   border: transparent !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-top {
-  border-bottom-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-milestone-bottom {
-  border-top-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-milestone {
+  background-color: #D5D5D5 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-gantt-parent-taskbar-inner-div {
   background-color: #8A8A8A !important; /* stylelint-disable-line declaration-no-important */
@@ -2291,21 +2281,15 @@
   background: #0056b3 !important; /* stylelint-disable-line declaration-no-important */
   border: #0056b3 !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-top {
-  border-bottom-color: #0056b3 !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-milestone-bottom {
-  border-top-color: #0056b3 !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-child-task .e-gantt-milestone {
+  background-color: #0056b3 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-child-taskbar-inner-div {
   background: #66b0ff !important; /* stylelint-disable-line declaration-no-important */
   border: #66b0ff !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-top {
-  border-bottom-color: #66b0ff !important; /* stylelint-disable-line declaration-no-important */
-}
-.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-milestone-bottom {
-  border-top-color: #66b0ff !important; /* stylelint-disable-line declaration-no-important */
+.e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-gantt-milestone {
+  background-color: #66b0ff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-gantt .e-gantt-chart .e-predecessor-touch-mode .e-active-connected-task .e-line {
   border-color: #0056b3 !important; /* stylelint-disable-line declaration-no-important */
@@ -2405,7 +2389,7 @@
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
-  background-color: #F3D8DA;
+  background: #F3D8DA;
   outline: 1px solid #F3D8DA;
   border-radius: 4px;
 }
@@ -2424,10 +2408,6 @@
   border-radius: 4px;
 }
 
-.e-gantt .e-gantt-chart .e-critical-milestone-top {
-  border-bottom-color: #D13438;
-}
-
-.e-gantt .e-gantt-chart .e-critical-milestone-bottom {
-  border-top-color: #D13438;
+.e-gantt .e-gantt-chart .e-critical-milestone {
+  background-color: #D13438;
 }