@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

package/src/Components/DataDisplay/GanttChart/GanttChart.module.scss

@@ -0,0 +1,258 @@
+/* Month navigation */
+.monthControls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 24px;
+
+  .prevBtn,.nxtBtn{
+    display: flex;
+    padding: calc(2 * var(--space-unit));
+    cursor: pointer;
+
+    svg{
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  .monthControlLeft, .monthControlRight{
+    display: flex;
+    align-items: center;
+  }
+
+  .period{
+    font-size: var(--font-size-h2);
+    line-height: var(--line-height-h2);
+    font-weight: var(--font-weight-h2);
+    margin-left: 24px;
+  }
+
+  .action{
+    display: flex;
+    align-items: center;
+    margin: calc(var(--space-unit) * -1);
+
+    & > div {
+      padding: var(--space-unit);
+    }
+
+  }
+
+  .dropdowm{
+    display: flex;
+    margin-left: 24px;
+  }
+
+}
+
+
+.ganttChart {
+  font-family: Arial, sans-serif;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  .ganttHeader {
+    display: flex;
+    position: sticky;
+    top: 0;
+    z-index: 200;
+    min-width: max-content;
+
+    .taskCol {
+      position: sticky;
+      left: 0;
+      flex: 0 0 200px;
+      z-index: 201;
+      padding: 8px 12px;
+      font-weight: 600;
+      border-right: 1px solid #e6e9f0;
+      font-size: 14px;
+      background: #FFFFFF;
+      border-bottom: 1px solid var(--color-gray-100);
+    }
+
+    .days {
+      display: flex;
+      flex: 1;
+      border-bottom: 1px solid #e6e9f0;
+
+      .dateDayView {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        border-right: 1px solid var(--color-secondary-100);
+
+        .singleDate {
+          text-align: left;
+          padding: 10px 4px;
+          font-size: 12px;
+          font-weight: 600;
+          line-height: 1.33;
+          color: #212121;
+          font-family: var(--font);
+        }
+
+        .hours {
+          display: flex;
+        }
+      }
+
+      .hour {
+        flex: 1;
+        min-width:60px;
+        text-align: center;
+        font-size: 11px;
+        padding: 2px 0;
+        color: #666;
+        background-color: #fff;
+
+        &:first-child {
+          border-left: none;
+        }
+      }
+    }
+  }
+
+  .ganttBody {
+    min-width: max-content;
+
+
+    .ganttRow {
+      display: flex;
+      min-height: 28px;
+
+      &:hover {
+        background-color: #fafafa;
+      }
+
+      .taskColLabel {
+        position: sticky;
+        display: flex;
+        align-items: center;
+        left: 0;
+        flex: 0 0 200px;
+        padding: 0px 8px;
+        font-size: 13px;
+        border-right: 1px solid #f0f0f0;
+        background-color: #fff;
+        z-index: 100;
+        border-bottom: 1px solid var(--color-gray-100);
+      }
+
+      .days {
+        flex: 1;
+        display: flex;
+        position: relative;
+
+        .dayColumn{
+          display: flex;
+          align-items: center;
+          border-left: 1px solid var(--color-secondary-100);
+        }
+
+        .dayHrs{
+          min-width: 60px;
+          height: 28px;
+
+          &.disabled {
+            background-color: #E6EAED;
+            pointer-events: none;
+          }
+
+        }
+
+        > div {
+          flex: 1;
+          min-width:60px;
+
+          &:first-child {
+            border-left: none;
+          }
+        }
+      }
+    }
+  }
+
+  .taskBar {
+    position: absolute;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    font-size: 12px;
+    color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+
+    .resize-handle {
+      width: 6px;
+      cursor: ew-resize;
+
+      &.left {
+        border-radius: 4px 0 0 4px;
+        background: rgba(0, 0, 0, 0.2);
+      }
+
+      &.right {
+        border-radius: 0 4px 4px 0;
+        background: rgba(0, 0, 0, 0.2);
+      }
+    }
+
+    .bar {
+      flex: 1;
+      padding: 0 6px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .content{
+        display: flex;
+        align-items: center;
+      }
+
+      .editIcon{
+        display: flex;
+        svg{
+          width: 12px;
+          height: 12px;
+          cursor: pointer;
+        }
+      }
+
+      .barDrag{
+        display: flex;
+        align-items: center;
+        cursor: grab;
+
+        svg{
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      span {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+
+.task-bar[style*="background-color: blue"] {
+  background-color: #4a90e2 !important;
+}
+.task-bar[style*="background-color: green"] {
+  background-color: #34c759 !important;
+}
+.task-bar[style*="background-color: orange"] {
+  background-color: #f5a623 !important;
+}
+.task-bar[style*="background-color: red"] {
+  background-color: #ff3b30 !important;
+}