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

div.resizecontainer {
  @extend %clear-float; 
  margin: 0 auto;
}

@media (max-width: 798px) {

  #arangoCollectionUl {
    display: none;
  }

  #collectionsDropdown ul {
    width: auto !important;
  }

  #arangoCollectionSelect {
    display: inline-block;
  }
}

@media (min-width: 799px) and (max-width: 1041px) {

  #arangoCollectionUl a {
    font-size: 12px;
    padding: 10px 5px;
  }
}

@media (min-width: 1042px) and (max-width: 1284px) {

  #arangoCollectionUl a {
    font-size: 14px;
  }

}

@for $i from 1 through 11 {
  $min: $tile-width * $i;
  $content-size: $min - 12px;
  
  @media (min-width: $min) and (max-width: $min + $tile-width - 1) {

    div.resizecontainer {
      width: $content-size;
    }

    div.modalChartDetail {
      left: 50%;
      margin-left: -($content-size)/2;
      width: $content-size;
    }

    .dashboard-large-chart {
      $int-width: ($content-size * 2 / 3);
      width: $int-width;

      .dashboard-interior-chart {
        width: $int-width - $legend-width;
      }
    }

    .dashboard-medium-chart {
      $int-width: ($content-size / 2);
      width: $int-width;

      .dashboard-interior-chart {
        width: $int-width - $legend-width;
      }
    }

    .dashboard-small-chart {
      $int-width: ($content-size / 3);
      width: $int-width;

      .dashboard-interior-chart {
        width: $int-width - $legend-width;
      }
    }

    .dashboard-tendency-chart {
      $int-width: ($content-size / 3);
      width: $int-width;

      .dashboard-interior-chart {
        width: $int-width - $legend-width;
      }
    }

  }
}

div.centralRow {
  margin: {
    top: 65px;
    bottom: 65px;
  }
}

div.centralContent {
  @extend %pull-left;
  background-color: $c-content-transp;
  height: 100%;
  margin-left: -5px;
  margin-right: -5px;
  min-height: 80px;
  padding: 5px;
  width: 100%;
}

.contentDiv {
  list-style: none;
  padding: 13px 0 0;

  li {
    @extend %pull-left;
    background-color: $c-very-transp;
  }

  a.add {
    display: block;
    font-weight: 400;
    padding: 40px 0;
    text-align: left;
  }

  .icon {
    @extend %clickable;
    padding: {
      left: 5px;
      right:5px;
      top: 10px;
    }
  }

  &:after {
    clear: both;
  }

  &:after,
  &:before {
    content: '';
    display: table;
    line-height: 0;
  }
}