react-gantt-lightweight/dist/index.css

react轻量级甘特图

.ganttOverview{position:relative;transition:all .15s linear;height:100%;overflow:hidden}.ganttOverview-box{position:relative;height:100%}.ganttOverview-box .ganttOverview-arrrow{transform:rotate(90deg) translateY(3px)}.ganttOverview-arrrow-box{position:absolute;top:50%;right:-15px;z-index:20;display:flex;align-items:center;justify-content:center;width:15px;height:50px;cursor:pointer;background:#dadbde;border-top-right-radius:12px;border-bottom-right-radius:12px;transform:translateY(-50%)}.ganttOverview-close{position:relative;width:0!important;transition:all .15s linear;overflow:hidden}.ganttOverview-head{height:60px;display:flex;line-height:60px;padding:0 10px;overflow:hidden;background-color:#fff;border-bottom:1px solid var(--borderColor)}.ganttOverview-head .ganttOverview-head-item{flex:1;font-weight:500;font-size:15px;text-align:center}.ganttOverview-body-height{height:100%;box-sizing:border-box;overflow-y:hidden}.ganttOverview-body-height::-webkit-scrollbar{display:none;width:0}.ganttOverview-body{flex:1;overflow:hidden;background:#f6f7f9;display:flex;flex-direction:column}.ganttOverview-body-cell{margin-bottom:10px}.ganttOverview-body-cell:last-child{margin-bottom:0}.ganttOverview-body-cell-filed{display:flex;padding:0 10px;background:#fff;box-shadow:0 1px 6px 1px #0000000d}.ganttOverview-body-cell-open{position:relative;padding:0 10px;overflow:hidden}.ganttOverview-body-cell-open-cell{position:relative;display:flex;width:100%;height:30px;padding-left:10px;line-height:30px}.ganttOverview-body-cell-open-cell:before{position:absolute;bottom:15px;left:0;width:1px;height:100%;content:" ";background-color:#7e868e3d}.ganttOverview-body-cell .ganttOverview-body-cell-open-cell:first-child{margin-top:15px}.ganttOverview-body-cell-open-cell-item{flex:1;font-size:13px}.ganttOverview-body-cell-open-cell-item-first{display:flex;align-items:center}.ganttOverview-body-cell-item{flex:1;height:40px;font-size:14px;line-height:40px;text-align:center}.quan{position:relative;width:4px;height:4px;margin-right:2px;background:#007fff;border-radius:50%}.quan:before{position:absolute;top:50%;left:-10px;width:10px;height:1px;content:" ";background-color:#7e868e3d;transform:translateY(-50%)}.main-arrow{--bg-color: transparent;width:20px;height:20px;display:inline-block;position:relative}.main-arrow:before{position:absolute;top:10px;left:4px;width:8px;height:2px;content:"";background:var(--bg-color);transition:transform .3s;transform:rotate(45deg)}.main-arrow:after{position:absolute;top:10px;left:8px;width:8px;height:2px;content:"";background:var(--bg-color);transition:transform .3s;transform:rotate(-45deg)}.main-arrow.arrow_open:before{transform:rotate(-45deg) translateY(-1px) translate(1px)}.main-arrow.arrow_open:after{transform:rotate(45deg) translateY(-1px) translate(-1px)}.gantt{--borderColor: rgba(126 134 142 /16%);--progressColor: #007fff;--finishColor: #00b042;--waitColor: #e0e2e4;--overtimeColor: #f54040;--finishOvertimeColor: #00b042;-webkit-user-select:none;user-select:none;display:flex;overflow:hidden;border:1px solid var(--borderColor);border-radius:8px}.timeLine-finish{background:var(--finishColor)}.timeLine-wait{background:var(--waitColor)}.timeLine-overtime,.timeLine-progress{background:var(--progressColor)}.timeLine-finishOvertime{background:var(--finishColor)}.timeLine-finishOvertime2,.timeLine-overtime2{background:var(--overtimeColor)}.gantt-right{flex:1;border-left:1px solid var(--borderColor);overflow:hidden}.gantt-right-body{height:100%;overflow:hidden;display:flex;flex-direction:column}.gantt-right-body-head{display:flex;flex-direction:column;height:60px;overflow:hidden;flex:1;position:relative}.gantt-right-body-content{height:100%;overflow-y:auto;position:relative}.gantt-right-head-scrollBarWidth{border-left:1px solid var(--borderColor)}.gantt-right-body-head::-webkit-scrollbar{display:none}.gantt-right-body-body{height:100%;overflow-y:hidden;display:flex;flex-direction:column;flex:1}.gantt-right-body-head .gantt-right-body-head-list{display:flex;flex:1}.gantt-right-body-head .gantt-right-body-head-list .gantt-right-head-item-day{display:flex;align-items:center;justify-content:center;height:100%;font-size:14px;border-left:1px solid rgba(126 134 142 / 16%);box-sizing:border-box}.gantt-right-body-head .gantt-right-body-head-list .gantt-right-head-item-day:first-child{border-left:0}.gantt-right-body-item{padding:3px 10px;cursor:pointer;background-color:transparent;border-left:1px solid rgba(126 134 142 / 16%)}.gantt-right-body-cell .gantt-right-body-item:first-child{border-left:0}.gantt-right-body-cell{position:relative;display:flex}.gantt-right-body-cell:last-child .gantt-right-body-item{border-bottom:0}.progressBar{position:absolute;top:50%;left:0;z-index:2;display:flex;align-items:center;padding:5px;border-radius:6px;opacity:1;transition:opacity .2s linear;transform:translateY(-50%)}.progressBar-finish,.progressBar-finishOvertime{background:#d9f5e5;border:1px solid #9ce2c3}.progressBar-wait{background:#f6f6f6;border:1px solid var(--waitColor)}.progressBar-progress{background:#ebf3ff;border:1px solid #c2d9ff}.progressBar-overtime{background:#fdd9d9;border:1px solid #fbb2b2}.progressBar-default{height:30px;background:var(--progressColor);border-radius:4px}.progressBar-active{z-index:2;height:30px;background:var(--progressColor);border-radius:4px}.progressBar-box{position:relative;display:flex;cursor:pointer}.progress-text{min-width:70px;margin-left:5px;line-height:30px;color:var(--finishColor);font-size:14px;text-align:center;background:#9ce2c3;border-radius:4px;cursor:pointer}.progressBar-overtime .progress-text{color:var(--overtimeColor);background:#fbb2b2}.progressBar-overtime .progressBar-default{background:var(--overtimeColor)}.progressBar-overtime .progressBar-active{position:absolute;left:0;background:var(--progressColor)}.progressBar-progress .progress-text{color:var(--progressColor);background:#c2d9ff}.progressBar-progress .progressBar-default{background:#c2d9ff}.progressBar-progress .progressBar-active{position:absolute;left:0;background:var(--progressColor)}.progressBar-wait .progress-text{color:#171a1d;background:var(--waitColor)}.progressBar-wait .progressBar-default{background:var(--waitColor)}.progressBar-wait .progressBar-active{position:absolute;top:0;left:0;background:var(--waitColor)}.progressBar-finish .progressBar-default{background:#9ce2c3}.progressBar-finish .progressBar-active,.progressBar-finishOvertime .progressBar-active{position:absolute;top:0;left:0;background:var(--finishColor)}.progressBar-overTimeWidth{z-index:2;background:var(--overtimeColor);border-top-right-radius:3px;border-bottom-right-radius:3px}.gantt-right-body-content-mark{position:absolute;top:0;left:0;display:flex;height:100%}.gantt-right-body-head-box{display:flex;border-bottom:1px solid var(--borderColor)}.gantt-right-body-content-mark-item{border-left:1px solid var(--borderColor);box-sizing:border-box}.gantt-right-body-content-mark-item:first-child{border-left:0}.progressBar-default-child,.progressBar-active-child{height:18px;border-radius:2px}.progressBar-overTimeWidth-child{position:relative;height:18px;border-top-right-radius:2px;border-bottom-right-radius:2px}.gantt-right-body-head-year-item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:100%;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--borderColor);border-left:1px solid var(--borderColor)}.gantt-right-body-head-year-item:first-child{border-left:0}.helpLine-line{display:none;position:absolute;z-index:10;border-left:1px solid var(--progressColor);z-index:99}.progressBar:hover~.helpLine-line{display:block}.helpLine-line-finish{border-left-color:var(--finishColor)}.helpLine-line-overtime,.helpLine-line-progress{border-left-color:var(--progressColor)}.helpLine-line-wait{border-left-color:var(--waitColor)}.helpLine-line-finishOvertime{border-left-color:var(--finishColor)}.gantt-animation{opacity:.3;transition:all .2s linear}.overtimeRender{position:absolute;top:0;left:50%;width:100%;transform:translate(-50%)}.progressBar-render{position:absolute;top:0;left:0;z-index:7;display:flex;align-items:center;height:30px}.progressBar-render-child{height:18px}.gantt-right-body-cell-isEmpty{height:15px}.gantt-right-body-cell-parentIsEmpty{height:10px}.gantt-right-body-cell-isParent-true{height:40px}.gantt-right-body-cell-isParent-false{height:30px}.gantt-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#0000001a}.gantt-loading-svg{width:45px;height:45px;fill:currentcolor;animation:rotate-loading .9s linear infinite}@keyframes rotate-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#top-time-width{display:flex}#top-time-width .top-time-width-item .top-time-width-item-child{height:100%}#top-time-width .top-time-width-item{opacity:.3;display:flex;position:absolute;height:30px;bottom:0}