@lui297/vue-ganttastic/lib/vue-ganttastic.css

A simple and customizable Gantt chart component for Vue.js

.g-grid-container{position:absolute;top:0;left:0%;width:100%;height:100%;display:flex;justify-content:space-between}.g-grid-line{width:1px;height:100%;border-left:1px solid #eaeaea}.g-label-column{display:flex;align-items:center;flex-direction:column;color:#404040;font-variant-numeric:tabular-nums;font-size:.9em}.g-label-column-header{width:100%;height:80px;min-height:80px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:5px}.g-label-column-rows{width:100%;height:100%;display:flex;flex-direction:column;border-bottom-left-radius:5px}.g-label-column-row{width:100%;height:100%;display:flex;padding:.1rem .3rem;overflow:hidden;white-space:normal;box-sizing:border-box;text-align:center;align-items:center;justify-content:center}.g-label-column-row:last-child{border-bottom-left-radius:5px}.g-timeaxis{position:sticky;top:0;width:100%;height:80px;background:#fff;z-index:4;display:flex;flex-direction:column}.g-timeunits-container{display:flex;width:100%;height:50%}.g-timeunit{height:100%;font-size:65%;display:flex;flex-direction:column;justify-content:center}.g-upper-timeunit{display:flex;height:100%;justify-content:center;align-items:center}.g-timeaxis-hour-pin{width:1px;height:10px}.g-gantt-tooltip{position:fixed;background:#000;color:#fff;z-index:4;font-size:.85em;padding:5px;border-radius:3px;transition:opacity .2s;display:flex;align-items:center;font-variant-numeric:tabular-nums}.g-gantt-tooltip:before{content:"";position:absolute;top:0;left:10%;width:0;height:0;border:10px solid transparent;border-bottom-color:#000;border-top:0;margin-left:-5px;margin-top:-5px}.g-gantt-tooltip-color-dot{width:8px;height:8px;border-radius:100%;margin-right:4px}.g-fade-enter-active,.g-fade-leave-active{transition:opacity .3s ease}.g-fade-enter-from,.g-fade-leave-to{opacity:0}.g-grid-current-time{position:absolute;height:100%;display:flex;z-index:5;pointer-events:none}.g-grid-current-time-marker{width:0px;height:calc(100% - 2px);display:flex}.g-grid-current-time-text{font-size:x-small}.g-gantt-chart{position:relative;display:flex;flex-direction:column;overflow-x:hidden;-webkit-touch-callout:none;user-select:none;font-variant-numeric:tabular-nums;border-radius:5px}.with-column{border-radius:0 5px 5px 0/0px 5px 5px 0px}.g-gantt-rows-container{position:relative}.labels-in-column{display:flex;flex-direction:row}.g-gantt-bar{display:flex;justify-content:center;align-items:center;background:#5f9ea0;overflow:hidden}.g-gantt-bar-label{width:100%;height:100%;box-sizing:border-box;padding:0 14px;display:flex;justify-content:center;align-items:center}.g-gantt-bar-label>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.g-gantt-bar-handle-left,.g-gantt-bar-handle-right{position:absolute;width:10px;height:100%;background:#fff;opacity:.7;border-radius:0;cursor:ew-resize;top:0}.g-gantt-bar-handle-left{left:0}.g-gantt-bar-handle-right{right:0}.g-gantt-bar-label img{pointer-events:none}.g-gantt-row{width:100%;transition:background .4s;position:relative}.g-gantt-row>.g-gantt-row-bars-container{position:relative;border-top:1px solid #eaeaea;width:100%;border-bottom:1px solid #eaeaea}.g-gantt-row-label{position:absolute;top:0;left:0;padding:0 8px;display:flex;align-items:center;height:60%;min-height:20px;font-size:.8em;font-weight:700;border-bottom-right-radius:6px;background:#f2f2f2;z-index:3;box-shadow:0 1px 4px #0009}.bar-transition-leave-active,.bar-transition-enter-active{transition:all .2s}.bar-transition-enter-from,.bar-transition-leave-to{transform:scale(.8);opacity:0}