vxe-gantt/lib/gantt/style/style.css

A vue based gantt component

@charset "UTF-8";
.vxe-gantt-view--chart-task-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.vxe-gantt-view--chart-row,
.vxe-gantt-view--chart-subview-row {
  position: relative;
  width: 100%;
  height: 0;
}

.vxe-gantt-view--chart-row.row--pending .vxe-gantt-view--chart-bar {
  color: var(--vxe-ui-font-disabled-color);
  opacity: 0.5;
  text-decoration: line-through;
}
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar {
  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
}
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-custom-bar-content-wrapper, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-custom-bar-content-wrapper {
  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
}
.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar:hover::after, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar:hover::after {
  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
}

.vxe-gantt-view--chart-subview-row.row--pending .vxe-gantt-view--chart-subview-bar,
.vxe-gantt-view--chart-subview-row.row--pending .vxe-gantt-view--chart-subview-custom-bar {
  color: var(--vxe-ui-font-disabled-color);
  opacity: 0.5;
  text-decoration: line-through;
}
.vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-bar, .vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-custom-bar {
  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
}
.vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-bar .vxe-gantt-view--chart-subview-bar-content-wrapper,
.vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-bar .vxe-gantt-view--chart-subview-custom-bar-content-wrapper, .vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-custom-bar .vxe-gantt-view--chart-subview-bar-content-wrapper,
.vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-custom-bar .vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
}
.vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-bar:hover::after, .vxe-gantt-view--chart-subview-row.is--round > .vxe-gantt-view--chart-subview-custom-bar:hover::after {
  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
}

.vxe-gantt-view--chart-subview-wrapper.is--overview > .vxe-gantt-view--chart-subview-row .vxe-gantt-view--chart-subview-bar {
  color: #ffffff;
  background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
}

.vxe-gantt-view--chart-bar,
.vxe-gantt-view--chart-custom-bar,
.vxe-gantt-view--chart-subview-bar,
.vxe-gantt-view--chart-subview-custom-bar {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  pointer-events: all;
}

.vxe-gantt-view--chart-row.is--progress > .vxe-gantt-view--chart-bar.is--default, .vxe-gantt-view--chart-row.is--progress > .vxe-gantt-view--chart-custom-bar.is--default {
  color: #ffffff;
  background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
}
.vxe-gantt-view--chart-row:not(.is--progress) > .vxe-gantt-view--chart-bar.is--default, .vxe-gantt-view--chart-row:not(.is--progress) > .vxe-gantt-view--chart-custom-bar.is--default {
  color: #ffffff;
  background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
}

.vxe-gantt-view--chart-subview-row.is--progress > .vxe-gantt-view--chart-subview-bar.is--subview, .vxe-gantt-view--chart-subview-row.is--progress > .vxe-gantt-view--chart-subview-custom-bar.is--subview {
  color: #ffffff;
  background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
}
.vxe-gantt-view--chart-subview-row.is--progress > .vxe-gantt-view--chart-subview-bar.is--default, .vxe-gantt-view--chart-subview-row.is--progress > .vxe-gantt-view--chart-subview-custom-bar.is--default {
  color: #ffffff;
  background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
}
.vxe-gantt-view--chart-subview-row:not(.is--progress) > .vxe-gantt-view--chart-subview-bar.is--subview, .vxe-gantt-view--chart-subview-row:not(.is--progress) > .vxe-gantt-view--chart-subview-custom-bar.is--subview {
  color: #ffffff;
  background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
}
.vxe-gantt-view--chart-subview-row:not(.is--progress) > .vxe-gantt-view--chart-subview-bar.is--default, .vxe-gantt-view--chart-subview-row:not(.is--progress) > .vxe-gantt-view--chart-subview-custom-bar.is--default {
  color: #ffffff;
  background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
}

.vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-subview-bar-content-wrapper {
  height: var(--vxe-ui-gantt-view-chart-bar-height);
}

.vxe-gantt-view--chart-custom-bar-content-wrapper,
.vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
  min-height: var(--vxe-ui-gantt-view-chart-bar-height);
}

.vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-custom-bar-content-wrapper,
.vxe-gantt-view--chart-subview-bar-content-wrapper,
.vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
  width: 100%;
  overflow: hidden;
}

.vxe-gantt-view--chart-bar-content-wrapper,
.vxe-gantt-view--chart-subview-bar-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.vxe-gantt-view--chart-bar,
.vxe-gantt-view--chart-custom-bar,
.vxe-gantt-view--chart-subview-bar,
.vxe-gantt-view--chart-subview-custom-bar {
  align-items: center;
}
.vxe-gantt-view--chart-bar.is--default:hover::after,
.vxe-gantt-view--chart-custom-bar.is--default:hover::after,
.vxe-gantt-view--chart-subview-bar.is--default:hover::after,
.vxe-gantt-view--chart-subview-custom-bar.is--default:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.vxe-gantt-view--chart-bar.is--milestone,
.vxe-gantt-view--chart-custom-bar.is--milestone,
.vxe-gantt-view--chart-subview-bar.is--milestone,
.vxe-gantt-view--chart-subview-custom-bar.is--milestone {
  white-space: nowrap;
}

.vxe-gantt-view--chart-progress {
  flex-shrink: 0;
  width: 0;
  height: 100%;
  text-align: left;
  background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vxe-gantt-view--chart-content {
  position: absolute;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9em;
  padding: 0 0.6em;
}

.vxe-gantt-view--chart-milestone-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.vxe-gantt-view--chart-milestone-icon {
  flex-shrink: 0;
  padding: 0 0.3em;
  color: var(--vxe-ui-font-primary-color);
}
.vxe-gantt-view--chart-milestone-icon.theme--primary {
  color: var(--vxe-ui-font-primary-color);
}
.vxe-gantt-view--chart-milestone-icon.theme--success {
  color: var(--vxe-ui-status-success-color);
}
.vxe-gantt-view--chart-milestone-icon.theme--info {
  color: var(--vxe-ui-status-info-color);
}
.vxe-gantt-view--chart-milestone-icon.theme--warning {
  color: var(--vxe-ui-status-warning-color);
}
.vxe-gantt-view--chart-milestone-icon.theme--danger {
  color: var(--vxe-ui-status-danger-color);
}
.vxe-gantt-view--chart-milestone-icon.theme--error {
  color: var(--vxe-ui-status-error-color);
}
.vxe-gantt-view--chart-milestone-icon i {
  display: inline-block;
}

.vxe-gantt-view--chart-milestone-content {
  flex-grow: 1;
}

/*行拖拽*/
.vxe-gantt-view--chart-row.row--drag-move,
.vxe-gantt-view--chart-subview-row.row--drag-move {
  transition: transform 0.5s ease;
}
.vxe-gantt-view--chart-row.row--drag-origin,
.vxe-gantt-view--chart-subview-row.row--drag-origin {
  opacity: 0.3;
}

.vxe-gantt {
  position: relative;
  display: flex;
  flex-direction: column;
}
.vxe-gantt.is--loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: var(--vxe-ui-loading-background-color);
}
.vxe-gantt.is--loading > .vxe-gantt-view .vxe-loading {
  background-color: transparent;
}
.vxe-gantt.is--maximize {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.5em 1em;
  background-color: var(--vxe-ui-layout-background-color);
}
.vxe-gantt.is--split-drag {
  cursor: col-resize;
}
.vxe-gantt.is--split-drag .vxe-gantt--table-wrapper::after,
.vxe-gantt.is--split-drag .vxe-gantt--view-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.vxe-gantt .vxe-gantt--form-wrapper,
.vxe-gantt .vxe-gantt--top-wrapper,
.vxe-gantt .vxe-gantt--bottom-wrapper {
  position: relative;
}
.vxe-gantt .vxe-gantt--gantt-container {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  overflow: hidden;
}
.vxe-gantt .vxe-gantt--left-wrapper,
.vxe-gantt .vxe-gantt--right-wrapper {
  flex-shrink: 0;
  overflow: auto;
  outline: 0;
}
.vxe-gantt .vxe-gantt--table-wrapper,
.vxe-gantt .vxe-gantt--view-wrapper {
  display: none;
  position: relative;
  flex-grow: 1;
  overflow: hidden;
}
.vxe-gantt .vxe-gantt--view-split-bar {
  flex-shrink: 0;
  width: var(--vxe-ui-gantt-view-split-bar-width);
}
.vxe-gantt .vxe-gantt--view-split-bar.is--resize {
  cursor: col-resize;
}
.vxe-gantt .vxe-gantt--view-split-bar-handle {
  background-color: var(--vxe-ui-gantt-view-split-bar-background-color);
}
.vxe-gantt .vxe-gantt--view-split-bar-handle:hover, .vxe-gantt .vxe-gantt--view-split-bar-handle:active {
  background-color: var(--vxe-ui-gantt-view-split-bar-hover-background-color);
}
.vxe-gantt.show--left .vxe-gantt--table-wrapper {
  display: block;
}
.vxe-gantt.show--left.show--right .vxe-gantt--table-wrapper {
  flex-grow: unset;
  flex-shrink: 0;
  width: var(--vxe-ui-gantt-view-table-default-width);
}
.vxe-gantt.show--right .vxe-gantt--view-wrapper {
  display: block;
}

.vxe-gantt--layout-body-wrapper {
  display: flex;
  flex-direction: row;
  overflow: auto;
  flex-grow: 1;
}

.vxe-gantt--layout-body-content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.vxe-gantt--layout-header-wrapper,
.vxe-gantt--layout-footer-wrapper,
.vxe-gantt--layout-aside-left-wrapper,
.vxe-gantt--layout-aside-left-wrapper {
  flex-shrink: 0;
  overflow: auto;
}

/*边框线*/
.vxe-gantt--border-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  border: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}

.vxe-gantt.border--full .vxe-gantt-view--header-column,
.vxe-gantt.border--full .vxe-gantt-view--body-column,
.vxe-gantt.border--full .vxe-gantt-view--footer-column {
  background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
  background-repeat: no-repeat;
  background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
  background-position: right top, right bottom;
}
.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before,
.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner::before, .vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before,
.vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner::before, .vxe-gantt.border--outer .vxe-gantt-view--scroll-y-top-corner::before,
.vxe-gantt.border--outer .vxe-gantt-view--scroll-y-bottom-corner::before, .vxe-gantt.border--inner .vxe-gantt-view--scroll-y-top-corner::before,
.vxe-gantt.border--inner .vxe-gantt-view--scroll-y-bottom-corner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-width: 0;
  border-style: solid;
  border-color: var(--vxe-ui-table-border-color);
}
.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before, .vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before, .vxe-gantt.border--outer .vxe-gantt-view--scroll-y-top-corner::before, .vxe-gantt.border--inner .vxe-gantt-view--scroll-y-top-corner::before {
  border-bottom-width: var(--vxe-ui-table-border-width);
}
.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner, .vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner, .vxe-gantt.border--outer .vxe-gantt-view--scroll-y-bottom-corner, .vxe-gantt.border--inner .vxe-gantt-view--scroll-y-bottom-corner {
  border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}
.vxe-gantt.border--default .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--full .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--outer .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--inner .vxe-gantt-view--scroll-x-handle-appearance {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.vxe-gantt.border--default.sx-pos--top .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--full.sx-pos--top .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--outer.sx-pos--top .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--inner.sx-pos--top .vxe-gantt-view--scroll-x-handle-appearance {
  top: 0;
  border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}
.vxe-gantt.border--default.sx-pos--bottom .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--full.sx-pos--bottom .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--outer.sx-pos--bottom .vxe-gantt-view--scroll-x-handle-appearance, .vxe-gantt.border--inner.sx-pos--bottom .vxe-gantt-view--scroll-x-handle-appearance {
  bottom: 0;
  height: calc(100% + var(--vxe-ui-table-border-width));
  border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}
.vxe-gantt.border--default .vxe-gantt-view--scroll-y-top-corner::before, .vxe-gantt.border--full .vxe-gantt-view--scroll-y-top-corner::before {
  border-left-width: var(--vxe-ui-table-border-width);
  border-right-width: var(--vxe-ui-table-border-width);
}
.vxe-gantt.border--default .vxe-gantt-view--scroll-y-bottom-corner::before, .vxe-gantt.border--full .vxe-gantt-view--scroll-y-bottom-corner::before {
  border-left-width: var(--vxe-ui-table-border-width);
  border-right-width: var(--vxe-ui-table-border-width);
}
.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-top-corner::before,
.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-bottom-corner::before, .vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-top-corner::before,
.vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-bottom-corner::before {
  width: calc(100% + 1px);
  left: -1px;
}
.vxe-gantt.border--default .vxe-gantt-view--scroll-y-handle-appearance, .vxe-gantt.border--full .vxe-gantt-view--scroll-y-handle-appearance {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.vxe-gantt.border--default.sy-pos--left .vxe-gantt-view--scroll-y-handle-appearance, .vxe-gantt.border--full.sy-pos--left .vxe-gantt-view--scroll-y-handle-appearance {
  left: 0;
  border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}
.vxe-gantt.border--default.sy-pos--right .vxe-gantt-view--scroll-y-handle-appearance, .vxe-gantt.border--full.sy-pos--right .vxe-gantt-view--scroll-y-handle-appearance {
  right: 0;
  width: calc(100% + var(--vxe-ui-table-border-width));
  border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}
.vxe-gantt.border--default .vxe-gantt-view--header-column,
.vxe-gantt.border--default .vxe-gantt-view--body-column,
.vxe-gantt.border--default .vxe-gantt-view--footer-column, .vxe-gantt.border--inner .vxe-gantt-view--header-column,
.vxe-gantt.border--inner .vxe-gantt-view--body-column,
.vxe-gantt.border--inner .vxe-gantt-view--footer-column {
  background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
  background-repeat: no-repeat;
  background-size: 100% var(--vxe-ui-table-border-width);
  background-position: right bottom;
}
.vxe-gantt.border--default .vxe-gantt-view--footer-wrapper, .vxe-gantt.border--full .vxe-gantt-view--footer-wrapper, .vxe-gantt.border--inner .vxe-gantt-view--footer-wrapper {
  border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
}
.vxe-gantt.border--inner .vxe-gantt--border-line {
  border-width: 0 0 1px 0;
}
.vxe-gantt.border--none .vxe-gantt--border-line {
  display: none;
}

/*分割条*/
.vxe-gantt--view-split-bar {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.vxe-gantt--view-split-bar-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.vxe-gantt--view-split-bar-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}
.vxe-gantt--view-split-bar-btn-wrapper > div {
  margin-top: 1em;
}
.vxe-gantt--view-split-bar-btn-wrapper > div:first-child {
  margin-top: 0;
}

.vxe-gantt--view-split-bar-left-btn,
.vxe-gantt--view-split-bar-right-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: var(--vxe-ui-gantt-view-split-bar-height);
  width: var(--vxe-ui-gantt-view-split-bar-width);
  color: var(--vxe-ui-layout-background-color);
  border-radius: var(--vxe-ui-base-border-radius);
  background-color: var(--vxe-ui-gantt-view-handle-background-color);
  border: 1px solid var(--vxe-ui-input-border-color);
  pointer-events: all;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.1s ease-in-out;
}
.vxe-gantt--view-split-bar-left-btn:hover,
.vxe-gantt--view-split-bar-right-btn:hover {
  color: #ffffff;
  background-color: var(--vxe-ui-font-primary-color);
}
.vxe-gantt--view-split-bar-left-btn:active,
.vxe-gantt--view-split-bar-right-btn:active {
  transform: scale(0.9);
}
.vxe-gantt--view-split-bar-left-btn i,
.vxe-gantt--view-split-bar-right-btn i {
  font-size: 0.5em;
}

.vxe-gantt--resizable-split-tip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: col-resize;
}
.vxe-gantt--resizable-split-tip:before {
  content: "";
  display: block;
  height: 100%;
  background-color: var(--vxe-ui-table-resizable-drag-line-color);
}

.vxe-gantt--resizable-split-tip-number {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.vxe-gantt--resizable-split-number-left,
.vxe-gantt--resizable-split-number-right {
  position: absolute;
  padding: 0.25em 0.25em;
  font-size: 12px;
  border-radius: var(--vxe-ui-border-radius);
  white-space: nowrap;
  color: #ffffff;
  background-color: var(--vxe-ui-table-resizable-drag-line-color);
}

.vxe-gantt--resizable-split-number-left {
  right: 0;
}

.vxe-gantt--resizable-split-number-right {
  left: 1px;
}

/*滚动条*/
.vxe-gantt.is--loading > .vxe-gantt-view--scroll-x-virtual {
  visibility: hidden;
}
.vxe-gantt.is--loading > .vxe-gantt-view--layout-wrapper > .vxe-gantt-view--scroll-y-virtual {
  visibility: hidden;
}
.vxe-gantt .vxe-gantt-view--scroll-x-virtual {
  height: 0;
}
.vxe-gantt .vxe-gantt-view--scroll-y-virtual {
  width: 0;
}
.vxe-gantt .vxe-gantt-view--scroll-x-virtual,
.vxe-gantt .vxe-gantt-view--scroll-y-virtual {
  visibility: hidden;
  position: relative;
  flex-shrink: 0;
  z-index: 7;
}
.vxe-gantt .vxe-gantt-view--scroll-x-handle,
.vxe-gantt .vxe-gantt-view--scroll-y-handle,
.vxe-gantt .vxe-gantt-view--scroll-x-wrapper,
.vxe-gantt .vxe-gantt-view--scroll-y-wrapper,
.vxe-gantt .vxe-gantt-view--scroll-y-top-corner,
.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner,
.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,
.vxe-gantt .vxe-gantt-view--scroll-x-right-corner {
  position: absolute;
}
.vxe-gantt .vxe-gantt-view--scroll-x-handle,
.vxe-gantt .vxe-gantt-view--scroll-x-wrapper {
  width: 100%;
  left: 0;
  bottom: 0;
}
.vxe-gantt .vxe-gantt-view--scroll-x-handle {
  overflow-y: hidden;
  overflow-x: scroll;
  height: 18px;
}
.vxe-gantt .vxe-gantt-view--scroll-x-wrapper {
  height: 100%;
}
.vxe-gantt .vxe-gantt-view--scroll-y-handle,
.vxe-gantt .vxe-gantt-view--scroll-y-wrapper {
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
}
.vxe-gantt .vxe-gantt-view--scroll-y-handle {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 18px;
  height: 100%;
}
.vxe-gantt .vxe-gantt-view--scroll-x-space {
  height: 1px;
}
.vxe-gantt .vxe-gantt-view--scroll-y-space {
  width: 1px;
}
.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,
.vxe-gantt .vxe-gantt-view--scroll-x-right-corner,
.vxe-gantt .vxe-gantt-view--scroll-y-top-corner,
.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner {
  display: none;
  position: absolute;
}
.vxe-gantt .vxe-gantt-view--scroll-x-left-corner,
.vxe-gantt .vxe-gantt-view--scroll-x-right-corner {
  bottom: 0;
  width: 0;
  height: 100%;
}
.vxe-gantt .vxe-gantt-view--scroll-x-left-corner::before,
.vxe-gantt .vxe-gantt-view--scroll-x-right-corner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-width: var(--vxe-ui-table-border-width);
  border-style: solid;
  border-color: var(--vxe-ui-table-border-color);
}
.vxe-gantt .vxe-gantt-view--scroll-x-left-corner {
  left: 0;
}
.vxe-gantt .vxe-gantt-view--scroll-x-right-corner {
  right: 0;
}
.vxe-gantt.sy-pos--right .vxe-gantt-view--scroll-x-right-corner {
  right: 1px;
}
.vxe-gantt.sy-pos--right .vxe-gantt-view--scroll-x-right-corner::before {
  border-right: 0;
}
.vxe-gantt.sx-pos--bottom .vxe-gantt-view--scroll-x-right-corner {
  bottom: 1px;
}
.vxe-gantt.sx-pos--bottom .vxe-gantt-view--scroll-x-right-corner::before {
  border-bottom: 0;
}
.vxe-gantt .vxe-gantt-view--scroll-y-top-corner {
  background-color: var(--vxe-ui-table-header-background-color);
}
.vxe-gantt .vxe-gantt-view--scroll-y-top-corner,
.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner {
  top: 0;
  right: 0;
  width: 100%;
  height: 0;
}
.vxe-gantt .vxe-gantt-view--scroll-y-bottom-corner {
  margin-top: -1px;
}

.vxe-gantt-view--layout-wrapper {
  display: flex;
  flex-direction: row;
  background-color: var(--vxe-ui-layout-background-color);
}

.vxe-gantt-view--viewport-wrapper {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
}

.vxe-gantt-view--render-vars {
  width: 0;
  height: 0;
  overflow: hidden;
}

.vxe-gantt-view--column-info {
  width: var(--vxe-ui-gantt-view-default-cell-width);
}

.vxe-gantt-view {
  flex-grow: 1;
  overflow: hidden;
}
.vxe-gantt-view .vxe-body--x-space {
  width: 100%;
  height: 1px;
  margin-bottom: -1px;
}
.vxe-gantt-view .vxe-body--y-space {
  width: 0;
  float: left;
}

.vxe-gantt-view--header-table,
.vxe-gantt-view--body-table {
  border: 0;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
}
.vxe-gantt-view--header-table col,
.vxe-gantt-view--body-table col {
  width: var(--vxe-ui-gantt-view-default-cell-width);
}

.vxe-gantt-view--body-table {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.vxe-gantt-view--header-wrapper {
  background-color: var(--vxe-ui-table-header-background-color);
}

.vxe-gantt-view--footer-wrapper {
  margin-top: calc(var(--vxe-ui-table-border-width) * -1);
  background-color: var(--vxe-ui-table-footer-background-color);
}

.vxe-gantt-view--header-wrapper,
.vxe-gantt-view--body-wrapper {
  overflow: hidden;
}

.vxe-gantt-view--header-inner-wrapper {
  overflow-y: hidden;
  overflow-x: scroll;
}

.vxe-gantt-view--body-inner-wrapper {
  overflow-y: scroll;
  overflow-x: scroll;
}

.vxe-gantt-view--header-inner-wrapper,
.vxe-gantt-view--body-inner-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.vxe-gantt-view--header-inner-wrapper::-webkit-scrollbar,
.vxe-gantt-view--body-inner-wrapper::-webkit-scrollbar {
  display: none;
}

.vxe-gantt-view--header-column {
  text-align: center;
  font-size: 1em;
  height: var(--vxe-ui-gantt-view-cell-height, var(--vxe-ui-table-row-line-height));
}
.vxe-gantt-view--header-column.is--now {
  color: var(--vxe-ui-gantt-view-task-now-line-color, var(--vxe-ui-font-primary-color));
}

.vxe-gantt-view--header-column,
.vxe-gantt-view--body-column,
.vxe-gantt-view--footer-column {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vxe-gantt-view--body-row.row--pending > .vxe-gantt-view--body-column::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  border-bottom: 1px solid var(--vxe-ui-table-validate-error-color);
  z-index: 1;
}

.vxe-gantt-view--chart-now-line {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.vxe-gantt-view--chart-now-line::before {
  content: "";
  display: block;
  width: var(--vxe-ui-gantt-view-task-now-line-width, 1px);
  height: 100%;
  background-color: var(--vxe-ui-gantt-view-task-now-line-background-color, var(--vxe-ui-font-primary-color));
}

.vxe-gantt-view--body-row.row--stripe {
  background-color: var(--vxe-ui-table-row-striped-background-color);
}
.vxe-gantt-view--body-row.row--radio {
  background-color: var(--vxe-ui-table-row-radio-checked-background-color);
}
.vxe-gantt-view--body-row.row--checked {
  background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
}
.vxe-gantt-view--body-row.row--current {
  background-color: var(--vxe-ui-table-row-current-background-color);
}
.vxe-gantt-view--body-row.row--hover {
  background-color: var(--vxe-ui-table-row-hover-background-color);
}
.vxe-gantt-view--body-row.row--hover.row--stripe {
  background-color: var(--vxe-ui-table-row-hover-striped-background-color);
}
.vxe-gantt-view--body-row.row--hover.row--radio {
  background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
}
.vxe-gantt-view--body-row.row--hover.row--checked {
  background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
}
.vxe-gantt-view--body-row.row--hover.row--current {
  background-color: var(--vxe-ui-table-row-hover-current-background-color);
}

/*行拖拽*/
.vxe-gantt-view--body-row.row--drag-move {
  transition: transform 0.5s ease;
}
.vxe-gantt-view--body-row.row--drag-origin > .vxe-gantt-view--body-column {
  opacity: 0.3;
}

.vxe-gantt-view--body-column .vxe-gantt-view-cell--row-resizable {
  position: absolute;
  left: 0;
  bottom: -0.4em;
  height: 0.8em;
  width: 100%;
  text-align: center;
  z-index: 1;
  cursor: row-resize;
}

.vxe-gantt-view--body-row:last-child .vxe-gantt-view--body-column .vxe-gantt-view-cell--row-resizable {
  height: 0.4em;
  bottom: 0px;
}

.vxe-gantt {
  font-size: var(--vxe-ui-font-size-default);
}
.vxe-gantt.size--medium {
  font-size: var(--vxe-ui-font-size-medium);
}
.vxe-gantt.size--small {
  font-size: var(--vxe-ui-font-size-small);
}
.vxe-gantt.size--mini {
  font-size: var(--vxe-ui-font-size-mini);
}