@worktile/gantt 12.0.1 → 12.0.2

package/main.bundle.scss

@@ -0,0 +1,645 @@
+// basic
+$gantt-color: #333 !default;
+$gantt-header-height: 44px !default;
+$gantt-border-color: #eee !default;
+$gantt-bg-color: #fff !default;
+$gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
+$gantt-container-background-color: #fafafa !default;
+$gantt-item-height: 44px !default;
+$gantt-group-background-color: rgba(
+  $color: #f3f3f3,
+  $alpha: 0.5
+) !default;
+$gantt-group-height: 44px !default;
+$gantt-table-td-padding: 0 15px !default;
+
+// calendar
+$gantt-date-primary-color: #888 !default;
+$gantt-date-primary-font-size: 14px !default;
+$gantt-date-primary-border: #ddd !default;
+$gantt-date-secondary-color: #333 !default;
+$gantt-date-secondary-font-size: 14px !default;
+$gantt-date-secondary-weekend-color: #aaa !default;
+$gantt-date-week-backdrop-bg: rgba(
+  $color: #f3f3f3,
+  $alpha: 0.5
+) !default;
+$gantt-date-today-color: #ff9f73 !default;
+$gantt-date-today-text-color: #fff !default;
+
+// bar
+$gantt-bar-bg: #fff !default;
+$gantt-bar-layer-bg: #fff !default;
+$gantt-bar-handle-color: #cacaca !default;
+$gantt-bar-handle-height: 12px !default;
+$gantt-bar-background-color: #348fe4 !default;
+
+// drag
+$gantt-item-drag-mask-color: #348fe4 !default;
+$gantt-link-dragging-line-color: #348fe4 !default;
+
+// link
+$gantt-link-line-color: #348fe4 !default;
+
+// table
+$gantt-table-header-drag-line-width: 3px !default;
+$gantt-table-header-drag-line-color: #348fe4 !default;
+
+.gantt {
+    width: 100%;
+    height: 100%;
+    background-color: $gantt-bg-color;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    color: $gantt-color;
+    opacity: 0;
+
+    svg {
+        overflow: visible !important;
+    }
+
+    .gantt-side {
+        border-right: 1px solid $gantt-border-color;
+        position: relative;
+        z-index: 3;
+        // overflow-x: scroll;
+        box-shadow: $gantt-side-shadow;
+
+        .gantt-side-header {
+            box-sizing: border-box;
+            height: $gantt-header-height;
+        }
+
+        .gantt-side-container {
+            height: 100%;
+            background-color: $gantt-bg-color;
+            overflow-y: auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    .gantt-container {
+        flex: 1;
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        background-color: $gantt-container-background-color;
+    }
+
+    .gantt-main-container {
+        width: 100%;
+        height: calc(100% - #{$gantt-header-height});
+        flex: 1;
+        position: absolute;
+        top: $gantt-header-height;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        overflow: auto;
+        background-color: $gantt-container-background-color;
+
+        .gantt-main-groups,
+        .gantt-main-items {
+            overflow: hidden;
+            min-height: 100%;
+        }
+
+        .gantt-group {
+            height: $gantt-group-height;
+            background: $gantt-group-background-color;
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+        }
+
+        .gantt-item {
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+            position: relative;
+        }
+    }
+}
+
+.gantt-table {
+  display: block;
+  &-empty {
+    height: 100%;
+    position: relative;
+    .gantt-table-body {
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin-top: 22px;
+      .empty-icon {
+        svg {
+          height: 78px;
+          width: 78px;
+        }
+      }
+      .empty-text {
+        color: #cacaca;
+      }
+    }
+  }
+
+  &-drag-trigger {
+    width: $gantt-table-header-drag-line-width;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    cursor: ew-resize;
+    z-index: 1;
+
+    &:hover {
+      background: $gantt-table-header-drag-line-color;
+      z-index: 2;
+    }
+  }
+
+  &-drag-auxiliary-line {
+    width: $gantt-table-header-drag-line-width;
+    background: $gantt-table-header-drag-line-color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    display: none;
+  }
+
+  .gantt-table-row {
+    display: flex;
+    box-sizing: border-box;
+    border-bottom: 1px solid $gantt-border-color;
+
+    .gantt-table-column {
+      overflow: hidden;
+      border-right: 1px solid $gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  .gantt-table-header {
+    text-align: center;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 2;
+    height: $gantt-header-height;
+    line-height: $gantt-header-height;
+
+    .gantt-table-column {
+      font-weight: 400;
+    }
+  }
+
+  .gantt-table-body {
+    .gantt-table-group {
+      display: flex;
+      height: $gantt-group-height;
+      background: $gantt-group-background-color;
+      padding: 0 10px;
+      align-items: center;
+      border-bottom: 1px solid $gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
+
+      .gantt-table-group-title {
+        cursor: pointer;
+
+        .expand-icon {
+          color: #aaa;
+          margin-right: 6px;
+        }
+      }
+    }
+
+    .gantt-table-item {
+      cursor: pointer;
+      &-first-level-group {
+        background: $gantt-group-background-color;
+      }
+
+      &-with-group {
+        .gantt-table-column {
+          &:first-child {
+            padding: 0 15px 0 32px;
+          }
+        }
+      }
+
+      .gantt-table-column {
+        display: flex;
+        padding: $gantt-table-td-padding;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      .gantt-table-column-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        background-color: $gantt-container-background-color;
+      }
+    }
+
+    .gantt-expand-icon {
+      display: inline-block;
+      width: 20px;
+      color: #aaa;
+    }
+  }
+}
+
+.gantt-calendar-overlay {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+
+  .gantt-calendar-today-overlay {
+    position: relative;
+    z-index: 2;
+    .today-rect {
+      width: 35px;
+      height: 24px;
+      position: absolute;
+      background: $gantt-date-today-color;
+      color: $gantt-date-today-text-color;
+      text-align: center;
+      border-radius: 4px;
+    }
+    .today-line {
+      position: absolute;
+      width: 3px;
+      background: $gantt-date-today-color;
+      transform: scaleX(0.5);
+      transform-origin: 100% 0;
+      margin-left: -2px;
+    }
+  }
+
+  .gantt-calendar-overlay-main {
+    position: relative;
+    z-index: 1;
+    background-color: $gantt-bg-color;
+  }
+
+  svg {
+    overflow: visible;
+  }
+
+  line {
+    shape-rendering: crispEdges;
+  }
+
+  .primary-text {
+    fill: $gantt-date-primary-color;
+    font-size: $gantt-date-primary-font-size;
+  }
+
+  .secondary-text {
+    fill: $gantt-date-secondary-color;
+    font-size: $gantt-date-secondary-font-size;
+
+    &-weekend {
+      fill: $gantt-date-secondary-weekend-color;
+    }
+  }
+
+  .primary-text,
+  .secondary-text {
+    text-anchor: middle;
+  }
+
+  .primary-line {
+    stroke: $gantt-date-primary-border;
+  }
+
+  .secondary-line {
+    stroke-dasharray: 2px 5px;
+    stroke: #cacaca;
+  }
+
+  .header-line {
+    stroke: $gantt-border-color;
+  }
+
+  .secondary-backdrop {
+    fill: $gantt-date-week-backdrop-bg;
+  }
+}
+
+.gantt-drag-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    display: none;
+}
+
+.gantt-drag-mask {
+    position: absolute;
+    top: $gantt-header-height;
+    z-index: 1;
+    height: 100%;
+    display: none;
+    background: rgba($color: $gantt-item-drag-mask-color, $alpha: 0.05);
+
+    .date-range {
+        width: 100%;
+        min-width: 120px;
+        top: -23px;
+        background: $gantt-item-drag-mask-color;
+        line-height: 23px;
+        border-radius: 4px;
+        color: #fff;
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        box-sizing: border-box
+    }
+}
+
+.gantt-link-drag-container {
+    width: 100%;
+    height: 1px;
+    overflow: visible !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2000;
+
+    .link-dragging-line {
+        stroke: $gantt-link-dragging-line-color;
+        stroke-width: 2px;
+    }
+}
+
+$gantt-bar-layer-append-width: 32px;
+$gantt-bar-layer-append-height: 42px;
+$gantt-bar-link-height: 16px;
+$gantt-bar-link-drop-border: 5px;
+
+@mixin link-handles {
+    .link-handles {
+        .handle {
+            position: absolute;
+            display: inline-block;
+            cursor: pointer;
+            width: $gantt-bar-link-height;
+            height: $gantt-bar-link-height;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1001;
+
+            &:first-child {
+                left: 0;
+                top: 0;
+            }
+
+            &:last-child {
+                right: 0;
+                bottom: 0;
+            }
+
+            .point {
+                color: #348fe4;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background: #348fe4;
+                transition: 0.3 ease;
+
+                &:hover {
+                    width: 12px;
+                    height: 12px;
+                }
+            }
+        }
+    }
+}
+
+@mixin drag-handles {
+    .drag-handles {
+        background: $gantt-bar-layer-bg;
+        width: 100%;
+        height: calc(100% - #{$gantt-bar-link-height} * 2);
+        position: absolute;
+        border-radius: 4px;
+        top: $gantt-bar-link-height;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
+
+        .handle {
+            width: 15px;
+            height: 100%;
+            position: absolute;
+            cursor: col-resize;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:before,
+            &:after {
+                content: '';
+                display: inline-block;
+                width: 1px;
+                height: $gantt-bar-handle-height;
+                background: $gantt-bar-handle-color;
+            }
+
+            &::before {
+                margin-right: 2px;
+            }
+
+            &:first-child {
+                left: 0;
+            }
+
+            &:last-child {
+                right: 0;
+            }
+        }
+    }
+}
+
+@mixin active-bar {
+    z-index: 1000;
+
+    .gantt-bar-layer {
+        display: block;
+        z-index: 1;
+    }
+
+    .gantt-bar-content {
+        z-index: 1;
+        box-shadow: none;
+    }
+
+    .cdk-drag {
+        transition: none;
+    }
+}
+
+.gantt-bar {
+    position: absolute;
+    border-radius: 4px;
+    z-index: 2;
+    background: $gantt-bar-bg;
+
+    .gantt-bar-layer {
+        width: calc(100% + #{$gantt-bar-layer-append-width});
+        height: calc(100% + #{$gantt-bar-layer-append-height});
+        position: absolute;
+        border-radius: 4px;
+        left: $gantt-bar-layer-append-width / 2 * -1;
+        top: $gantt-bar-layer-append-height / 2 * -1;
+        display: none;
+        @include drag-handles();
+        @include link-handles();
+    }
+
+    .gantt-bar-border {
+        width: calc(100% + #{$gantt-bar-link-drop-border} * 2);
+        height: calc(100% + #{$gantt-bar-link-drop-border} * 2);
+        position: absolute;
+        border-radius: 4px;
+        left: $gantt-bar-link-drop-border * -1;
+        top: $gantt-bar-link-drop-border * -1;
+        display: none;
+        background: #fff;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .gantt-bar-content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        cursor: pointer;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        background: $gantt-bar-background-color;
+        overflow: hidden;
+        box-sizing: border-box;
+        .gantt-bar-content-progress {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+        }
+
+    }
+
+    &-active {
+        @include active-bar();
+    }
+
+    &-link-drop {
+        .gantt-bar-border {
+            display: block;
+        }
+
+        .gantt-bar-content {
+            box-shadow: none;
+        }
+    }
+}
+
+.gantt-range {
+  position: absolute;
+  z-index: 2;
+  .gantt-range-main {
+    height: 10px;
+    background: #dfdfdf;
+    border: 1px solid #888;
+    border-radius: 4px 4px 0 0;
+    box-sizing: border-box;
+    position: relative;
+    .gantt-range-main-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: #888;
+    }
+  }
+  .gantt-range-triangle {
+    width: 0;
+    height: 0;
+    border-top: 7px solid #888;
+    position: absolute;
+    top: 10px;
+
+    &.left {
+      border-right: 6px solid transparent;
+      left: 0;
+    }
+    &.right {
+      border-left: 6px solid transparent;
+      right: 0;
+    }
+  }
+}
+
+.gantt-icon {
+    font-size: 1rem;
+    line-height: 0;
+
+    svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+        vertical-align: -0.125em;
+        background-repeat: no-repeat;
+    }
+
+}
+
+.gantt-links-overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  svg {
+    overflow: visible;
+    z-index: 2;
+    position: absolute;
+  }
+}
+
+.link-dragging-container {
+  width: 100%;
+  height: 1px;
+  overflow: visible !important;
+  position: absolute;
+  top: $gantt-header-height;
+  left: 0;
+  z-index: 2000;
+
+  .link-dragging-line {
+    stroke: $gantt-link-line-color;
+    stroke-width: 2px;
+  }
+}
+