arangodb/js/apps/system/aardvark/frontend/scss/_newDashboard.scss

%dashboard-chart-box {
  @extend %pull-left;
  border-left: 0 solid $c-black;

  &:first-child {
    margin-left: 0;
  }
}

%dashboard-chart-basic {
  @extend %pull-left;

  margin-bottom: $dashboard-margin;
  position: relative;
}

.dashboard-sub-bar-menu {
  @extend %pull-right;
  @extend %icon-neutral;
  cursor: pointer;
  position: absolute;
  right: 9px;
  top: 6px;
}

.detail-chart {
  @extend %clear-float;
}


.dashboard-sub-bar {
  @extend %clear-float;

  .dashboard-sub-bar-title {
    @extend %pull-left;
  }
}


.dashboard-large-chart {
  @extend %dashboard-chart-basic;
  margin-right: 12px;

  .dashboard-large-chart-inner {
    @extend %dashboard-chart-box;
    @extend %pull-left;
    background-color: $c-white;
    border-left: $dashboard-borderwidth solid $c-e1grey;
    border-right: $dashboard-borderwidth solid $c-e1grey;
    border-top: $dashboard-borderwidth solid $c-e1grey;
    padding-top: $dashboard-padding;

    .dashboard-interior-chart {
      @extend %pull-left;
      margin-bottom: 0;
    }
  }
}


.dashboard-small-chart {
  @extend %dashboard-chart-basic;

  .dashboard-small-chart-inner {
    @extend %dashboard-chart-box;
    @extend %pull-left;
    background-color: $c-white;
    border-left: $dashboard-borderwidth solid $c-e1grey;
    border-right: $dashboard-borderwidth solid $c-e1grey;
    border-top: $dashboard-borderwidth solid $c-e1grey;

    .dashboard-interior-chart {
      @extend %pull-left;

      .nv-bar rect {
        fill-opacity: .15;
        stroke-opacity: 1;
        stroke-width: 1px;
      }
    }
  }
}


.dashboard-medium-chart {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;
  background-color: $c-white;
  border-left: $dashboard-borderwidth solid $c-e1grey;
  border-right: $dashboard-borderwidth solid $c-e1grey;
  border-top: $dashboard-borderwidth solid $c-e1grey;
  padding-top: $dashboard-padding;
  
  &:first-child {
    margin-right: 12px;
  }

  .dashboard-interior-chart {
    @extend %pull-left;
    margin-bottom: 0;
  }
  
  .dashboard-medium-chart-menu {
    @extend %clear-float;
    @include border-radius(2px);

    border: 0 solid $c-halfsemi-transp;
    color: $c-halfsemi-transp;
    cursor: pointer;
    padding: 0 4px;
    position: absolute;
    z-index: 1000;
  }

  .dashboard-medium-chart-menu:hover {
    color: $c-low-transp;
  }

  .dashboard-medium-chart-inner {
    @extend %clear-float;
    padding-top: $dashboard-padding;
  }

  .clusterChart .slice path {
    fill-opacity: .15;
    stroke-opacity: 1;
    stroke-width: 1.5px;
  }

}


.dashboard-tendency-container {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;

  .dashboard-tendency-chart {
    @extend %clear-float;
    background-color: $c-white;
    border-left: 5px solid $c-e1grey;
    border-right: 5px solid $c-e1grey;
    border-top: 5px solid $c-e1grey;

    .dashboard-tendency {
      @extend %pull-left;
      background-color: $c-white;
      margin-top: 5px;
      padding: 0 8px;
      
      &:first-child {
        border-right: 1px solid $c-e1grey;
      }

      .dashboard-subtitle-bar {
        @extend %pull-left;
        border-bottom: 1px solid $c-e1grey;
        text-align: right;
      }

      .dashboard-figure {
        @extend %pull-left;
        text-align: center;
      }
    }
  }
}


.dashboard-bar-chart-container {
  @extend %dashboard-chart-box;
  @extend %dashboard-chart-basic;

  .dashboard-bar-chart {
    @extend %clear-float;
    background-color: $c-white;
    border-left: 5px solid $c-e1grey;
    border-right: 5px solid $c-e1grey;
    border-top: 5px solid $c-e1grey;

    .dashboard-bar-chart-title {
      @extend %pull-left;
      margin-top: 5px;
      padding: 0 8px;

      .percentage {
        @extend %pull-left;
        font-weight: 400;
      }

      .absolut {
        @extend %pull-left;
        text-align: right;
      }
    }

    .dashboard-bar-chart-chart {
      @extend %pull-left;

      .nv-bar rect {
        fill-opacity: .15;
        stroke-opacity: 1;
        stroke-width: 1px;
      }
    }
  }
}


.dashboard-legend {
  @extend %pull-left;

  .dashboard-legend-inner {
    padding: 0 5px 5px 0;
  }
}


.dashboard-sub-bar {
  @extend %pull-left;
  background-color: $c-bar-bg;
  color: $c-white;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0 6px;
}


.dashboard-spacer {
  margin: 0 12px;
}


.headerBar.dashboard-headerbar {
  margin: 15px 0 10px;
}


.modal-chart-detail {
  @extend %pull-left;

  .modal-body {
    @extend %pull-left;
  }

  .modal-dashboard-legend {
    @extend %pull-left;

    .dashboard-legend-inner {
      padding-left: 20px;
      padding-top: 20px;
    }
  }

  .modal-inner-detail {
    @extend %pull-left;
  }
}


.dashboard-half-height-legend {
  @extend %pull-left;

  .dashboard-legend-inner {
    padding-top: 20px;
  }
}


.dashboard-title-bar {
  background-color: $c-bar-bg;
  color: $c-white;
  font-size: 14.5px;
  font-weight: 400;
  height: 30px;
  line-height: 30px;
  padding: 0 5px 0 10px;

  .dashboard-half-title-bar {
    @extend %pull-left;
    border-left: 1px solid $c-black;
    margin-left: -1px;
    width: 50%;

    &:first-child {
      border-left: 0;
      margin-left: 0;
    }
  }
}


.dashboard-row {
  @extend %clear-float;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}


.dygraph-axis-label {
  &.dygraph-axis-label-y, 
  &.dygraph-axis-label-x {
    color: $c-darker-grey;
  }
}