fix kanban/gantt padding, navmenu shadows (#412)

* fix kanban/gantt padding, navmenu shadows

* fix lint css

* fix css lint 2

* fix menu shadow without zindex

* kanban/gantt etalons

* remove etalon masks

* add new mask etalons

Author: flagmanAndrew

packages/angular/src/app/components/library/side-navigation-menu/side-navigation-menu.component.scss

@@ -1,6 +1,35 @@
 /* stylelint-disable no-duplicate-selectors */
 @use "../../../../variables.scss" as *;
 
+:host-context(.dx-drawer-overlap)::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  pointer-events: none;
+  background: 
+    linear-gradient(
+      to bottom, 
+      rgba(0,0,0,0.15), 
+      rgba(0,0,0,0)
+    );
+  z-index: 2000;
+}
+
+:host-context(.dx-drawer-overlap)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  pointer-events: none;
+  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.05);
+  z-index: 2000;
+}
+
 :host {
   display: flex;
   flex-direction: column;

packages/angular/src/app/components/library/task-list-gantt/task-list-gantt.component.scss

@@ -1,2 +1,6 @@
 @use "../../../../variables.scss" as *;
 @use "sass:math";
+
+.dx-gantt {
+  border-radius: 8px;
+}

packages/angular/src/app/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.component.scss

@@ -18,3 +18,7 @@
   flex-grow: 1;
   width: 100%;
 }
+
+::ng-deep .dx-drawer-panel-content .dx-overlay-content {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
+}

packages/angular/src/app/pages/planning-task-list/planning-task-list.component.scss

@@ -46,8 +46,4 @@
   .gantt {
     padding: 0 var(--content-padding) var(--content-padding);
   }
-
-  .kanban {
-    padding: 0 0 var(--content-padding) calc(var(--content-padding) / 2);
-  }
 }

packages/react/src/components/library/side-navigation-menu/SideNavigationMenu.scss

@@ -1,5 +1,34 @@
 @use "../../../variables.scss" as *;
 
+.dx-drawer-overlap .side-navigation-menu::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  pointer-events: none;
+  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.05);
+  z-index: 2000;
+}
+
+.dx-drawer-overlap .side-navigation-menu::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  pointer-events: none;
+  background: 
+    linear-gradient(
+      to bottom, 
+      rgba(0,0,0,0.15), 
+      rgba(0,0,0,0)
+    );
+  z-index: 2000;
+}
+
 .side-navigation-menu {
   display: flex;
   flex-direction: column;

packages/react/src/components/library/task-list-gantt/TaskListGantt.scss

@@ -1,2 +1,6 @@
 @use "../../../variables.scss" as *;
 @use "sass:math";
+
+.dx-gantt {
+  border-radius: 8px;
+}

packages/react/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.scss

@@ -23,3 +23,7 @@
 .content {
   flex-grow: 1;
 }
+
+.dx-drawer-panel-content .dx-overlay-content {
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
+}

packages/react/src/pages/planning-task-list/planning-task-list.scss

@@ -35,8 +35,4 @@
   .gantt {
     padding: 0 var(--content-padding) var(--content-padding);
   }
-
-  .kanban {
-    padding: 0 0 var(--content-padding) calc(var(--content-padding) / 2);
-  }
 }