ember-gantt.css

/**
 *
 *   GANTT STYLING: use and adjust this
 *
 */
.gantt-chart {
  position: relative; }

.gantt-chart-inner {
  overflow-x: scroll;
  overflow-y: hidden;
  padding-bottom: 50px;
  background: #fff;
  border: 1px solid #ccc; }

.gantt-titles-background {
  position: absolute;
  top: 1px;
  height: calc(100% - 2px);
  width: 200px;
  z-index: 3;
  background: #fff; }

.gantt-timeline {
  margin-left: 200px; }
  .gantt-timeline .gantt-timeline-grid {
    position: relative;
    height: 100%; }
  .gantt-timeline .gantt-timeline-vertical-grid {
    position: absolute;
    top: 0;
    height: 99999999px; }
    .gantt-timeline .gantt-timeline-vertical-grid .gantt-timeline-months,
    .gantt-timeline .gantt-timeline-vertical-grid .gantt-timeline-month,
    .gantt-timeline .gantt-timeline-vertical-grid .gantt-timeline-days,
    .gantt-timeline .gantt-timeline-vertical-grid .day {
      height: 100%;
      min-height: 100%; }
  .gantt-timeline .gantt-timeline-cws,
  .gantt-timeline .gantt-timeline-months,
  .gantt-timeline .gantt-timeline-days {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap; }
  .gantt-timeline .day {
    display: inline-block;
    height: 20px;
    box-sizing: border-box;
    transition: width 200ms ease-out;
    background: #fff;
    border-left: 1px solid #efefef; }
  .gantt-timeline .day-weekend {
    background: #efefef;
    border-color: #fff; }

.gantt-chart-header {
  box-sizing: border-box;
  height: 110px;
  z-index: 1; }
  .gantt-chart-header .gantt-header-title {
    position: absolute;
    left: 1px;
    height: 110px;
    width: 200px;
    z-index: 4;
    padding: 10px;
    font-weight: bold;
    font-size: 1.2em;
    background: #fff; }
  .gantt-chart-header.gantt-chart-header-sticky .gantt-chart-header-inner {
    position: fixed;
    overflow: hidden;
    z-index: 4;
    padding-left: 201px; }
    .gantt-chart-header.gantt-chart-header-sticky .gantt-chart-header-inner .gantt-header-title {
      z-index: 5; }
  .gantt-chart-header .gantt-timeline-scale {
    position: relative;
    background: #fff; }
  .gantt-chart-header .gantt-timeline-months {
    border-right: 1px solid #ccc; }
  .gantt-chart-header .gantt-timeline-month {
    display: inline-block;
    box-sizing: border-box;
    transition: width 200ms ease-out;
    border-bottom: 1px solid #ccc; }
  .gantt-chart-header .gantt-timeline-month-name {
    background: #fff;
    font-size: initial; }
    .gantt-chart-header .gantt-timeline-month-name span {
      padding: 10px;
      display: block;
      border-left: 1px solid #ccc; }
  .gantt-chart-header .gantt-timeline-cws {
    border-right: 1px solid #ccc; }
    .gantt-chart-header .gantt-timeline-cws .cw {
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      text-align: center;
      box-sizing: border-box; }
  .gantt-chart-header .gantt-timeline-days {
    border-right: 1px solid #ccc; }
    .gantt-chart-header .gantt-timeline-days .day {
      padding: 2px 0;
      font-size: 12px;
      text-align: center; }

.gantt-timeline-today {
  position: absolute;
  top: 61px;
  height: 99999999px;
  z-index: 2;
  border-left: 1px solid #444; }
  .gantt-timeline-today > div {
    position: relative;
    left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #444; }

.gantt-line {
  height: 40px;
  border: none; }
  .gantt-line .gantt-line-timeline {
    position: relative;
    margin-left: 200px; }

.gantt-line-title {
  position: absolute;
  height: 40px;
  width: 200px;
  z-index: 3;
  display: table; }
  .gantt-line-title span {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px; }

.gantt-line-bar {
  position: absolute;
  height: 36px;
  margin-top: 2px;
  border-radius: 2px;
  transition: left 200ms ease-out, width 200ms ease-out;
  -webkit-print-color-adjust: exact;
  background: #6d94d3;
  color-adjust: exact; }
  .gantt-line-bar .bar-resize-l,
  .gantt-line-bar .bar-resize-r {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 15px;
    cursor: w-resize; }
  .gantt-line-bar .bar-resize-r {
    left: auto;
    right: 0;
    cursor: e-resize; }
  .gantt-line-bar.gantt-line-bar-editable {
    cursor: move; }

.gantt-line-bar-content {
  position: absolute;
  color: #fff;
  font-size: 12px;
  padding: 2px 10px 0; }

.gantt-line-inline-childs {
  width: 100%;
  height: 20%;
  overflow: hidden; }
  .gantt-line-inline-childs > div {
    float: left;
    height: 100%; }

.gantt-line-wrap.is-moving .gantt-line-bar:before,
.gantt-line-wrap.is-resizing .gantt-line-bar:before {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  background: blue;
  opacity: 0.5; }

.gantt-line-bar:before {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  background: blue;
  opacity: 0.5; }

.gantt-lines > .gantt-line-wrap {
  margin-bottom: 30px; }

.gantt-line-childs .gantt-line,
.gantt-line-childs .gantt-line-title {
  height: 27px; }

.gantt-line-childs .gantt-line-bar {
  background: #71b5a0;
  height: 21px; }

.gantt-line-childs .gantt-line-title span {
  font-size: 0.9em; }