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 {
  $white-space: 10px;
  $min: $tile-width * $i;
  $content-size: $min - 12px;

  $legend-width: 140px;
  $legend-weight: 400;
  $legend-font: 15px;
  $legend-margin: 10px;

  $axis-font: 15px;
  $axis-weight: 400;

  $tendency-name-font: 22px;
  $tendency-name-weight: 300;
  $tendency-figure-font: 36px;
  $tendency-figure-weight: 400;
  $tendency-height-corrector: 6.5px;

  $subbar-font: 15px;
  $subar-weight: 400;

  $smallchart-height-corrector: 3px;

  $dashboard-height: 300px;

  @if $i < 4 {
    $legend-width: 0;
    $legend-font: 10px;
    $legend-margin: 10px;

    $axis-font: 10px;

    $tendency-name-font: 14px;
    $tendency-figure-font: 16px;
    $tendency-height-corrector: 7.25px;

    $subbar-font: 10px;

    $smallchart-height-corrector: 5px;

    $dashboard-height: 200px;
  } @else if $i < 5 {
    $legend-width: 120px;
    $legend-font: 11px;
    $legend-margin: 10px;

    $axis-font: 11px;

    $tendency-name-font: 15px;
    $tendency-figure-font: 18px;

    $subbar-font: 11px;

    $dashboard-height: 235px;
  } @else if $i < 6 {
    $legend-width: 130px;
    $legend-font: 12px;
    $legend-margin: 10px;

    $axis-font: 13px;

    $tendency-name-font: 18px;
    $tendency-figure-font: 22px;

    $subbar-font: 13px;

    $dashboard-height: 270px;
  } @else if $i < 7 {
    $legend-width: 140px;
    $legend-font: 13px;
    $legend-margin: 10px;

    $axis-font: 13px;

    $tendency-name-font: 20px;
    $tendency-figure-font: 26px;

    $subbar-font: 13px;

    $dashboard-height: 300px;
  } @else if $i < 8 {
    $legend-width: 160px;
    $legend-font: 14px;
    $legend-margin: 10px;

    $axis-font: 14px;

    $tendency-name-font: 24px;
    $tendency-figure-font: 30px;

    $subbar-font: 14px;

    $dashboard-height: 340px;
  } @else if $i < 9 {
    $legend-width: 170px;
    $legend-font: 15px;
    $legend-margin: 10px;

    $axis-font: 14px;

    $tendency-name-font: 28px;
    $tendency-figure-font: 34px;

    $subbar-font: 15px;

    $dashboard-height: 400px;
  }

  @media (min-width: $min + $white-space) and (max-width: $min + $tile-width - 1 + $white-space) {
    div.resizecontainer {
      width: $content-size;
    }

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

      .dashboard-sub-bar {
        width: $int-width - 12px;
      }

      .dashboard-large-chart-inner {
        .dashboard-interior-chart {
          height: $dashboard-height - $dashboard-padding - 5px;
          width: $int-width - $legend-width - $legend-margin - 0;
        }
      }
    }

    .dashboard-sub-bar-menu {
      font-size: $subbar-font + 2px;
    }

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

      .dashboard-sub-bar {
        margin-left: -5px;
        width: $int-width - 2px;
      }

      .dashboard-interior-chart {
        height: $dashboard-height - $dashboard-padding - 5px;
        width: $int-width - $legend-width - $legend-margin + 10px;
      }

      .dashboard-medium-chart-menu {
        font-size: $tendency-name-font - 2px;
        left: $int-width - $tendency-name-font - 3px;
        top: 0;
      }
      
      #clusterGraphs svg {
        height: $dashboard-height - $dashboard-padding - 5px;
        width: $int-width;
      }

      #clusterGraphs svg text {
        font-size: $legend-font;
      }
    }

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

      .dashboard-sub-bar {
        width: $int-width - 12px;
      }

      .dashboard-small-chart-inner {
        width: $int-width - 10px;

        .dashboard-interior-chart {
          height: $dashboard-height - $smallchart-height-corrector;
          width: $int-width - 10px;

          .nv-axis text {
            fill: $c-darker-grey;
            font: {
              size: $axis-font;
              weight: $axis-weight;
            }
          }
        }
      }
    }

    .dashboard-tendency-container {
      $int-width: ($content-size / 3) - 20px;
  
      .dashboard-tendency-chart {
        $int-height: (($dashboard-height - 29px)  / 2) - $tendency-height-corrector;
        height: $int-height;

        .dashboard-tendency,
        .dashboard-subtitle-bar,
        .dashboard-figure {
          width: ($int-width / 2) - 19px;
        }

        $int-height2: ($int-height - 3px);

        .dashboard-subtitle-bar {
          height: ($int-height2 / 3);
          line-height: ($int-height2 / 3);
        }

        .dashboard-figure {
          height: ($int-height2 * 2 / 3) - ((((($int-height2 * 2 / 3) - (($int-height2 * 2 / 3 / 2) - 6px) * 2) / 2) - 1px) * 2);
          line-height: ((($int-height - 3px) * 2 / 3 / 2) - 6px);
          padding-top: (((($int-height2 * 2 / 3) - (($int-height2 * 2 / 3 / 2) - 6px) * 2) / 2) - 1px);
        }
      }

      .dashboard-sub-bar {
        width: $int-width;
      }
    }

    .dashboard-bar-chart-container {
      $int-width: ($content-size / 3) - 18px;
      $int-height: (($dashboard-height - 30px)  / 2) - $tendency-height-corrector;
      height: $int-height;

      .dashboard-bar-chart {
        height: $int-height;
        width: $int-width;

        .dashboard-bar-chart-title {
          height: (($int-height - 2px) / 3);
          line-height: (($int-height - 2px) / 3);

          .percentage {
            width: ((($int-width / 2) - 8px) * 1.4);
          }

          .absolut {
            width: ($int-width - (($int-width / 2) * 1.4)) - 6px;
          }
        }

        .dashboard-bar-chart-chart {

          $int-height2: ($int-height - 20px);
          height: ($int-height2 * 2 / 3) - 5px;
          line-height: ($int-height2 * 2 / 3) - 5px;
          padding: 5px 8px 10px;
          width: $int-width - 16px;

          #residentSizeChart {
            height: ($int-height2 * 2 / 3);
          }
        }
      }

      .dashboard-sub-bar {
        width: $int-width - 2px;
      }
    }

    .modal-chart-detail {
      $int-width: $content-size;

      bottom: 12.1% !important;
      left: 50%;
      margin-left: -($int-width) / 2;
      width: $int-width;

      .modal-body {
        // min-height: $dashboard-height;
        height: 95%;
        max-height: none;
        padding: 5px;
      }

      .modal-dashboard-legend {
        @if $i < 4 {
          display: none;
        }
        font-size: $legend-font + 2px;
        min-height: $dashboard-height - 10px;
        width: $legend-width + 10px;
      }

      .modal-inner-detail {
        width: $int-width - $legend-width - 20px;
      }
    }

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

        .dashboard-sub-bar {
          width: $int-width - 12px;
        }

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

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

        .dashboard-sub-bar {
          width: $int-width - 2px;
        }

        .dashboard-interior-chart {
          width: $int-width - $legend-width - $legend-margin + 10px;
        }

        .dashboard-medium-chart-menu {
          left: $int-width - $tendency-name-font - 3px;
        }
      }

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

        .dashboard-sub-bar {
          width: $int-width - 12px;
        }

        .dashboard-small-chart-inner {
          width: $int-width - 10px;

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

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

        .dashboard-tendency-chart {

          .dashboard-tendency,
          .dashboard-subtitle-bar,
          .dashboard-figure {
            width: ($int-width / 2) - 19px;
          }
        }

        .dashboard-sub-bar {
          width: $int-width;
        }
      }

      .dashboard-bar-chart-container {
        $int-width: ($content-size / 3) - 18px;

        .dashboard-bar-chart {
          width: $int-width;

          .dashboard-bar-chart-title {
            .percentage {
              width: ((($int-width / 2) - 8px) * 1.4);
            }

            .absolut {
              width: ($int-width - (($int-width / 2) * 1.4)) - 6px;
            }
          }
        }

        .dashboard-bar-chart-chart {
          width: $int-width - 16px;
        }

        .dashboard-sub-bar {
          width: $int-width - 2px;
        }
      }
    }

    .percentage {
      font-size: $tendency-name-font;
    }

    .absolut {
      font-size: $tendency-name-font;
      font-weight: $tendency-name-weight;
    }

    .dashboard-sub-bar {
      font-size: $subbar-font;
      font-weight: $subar-weight;
    }

    .dashboard-subtitle-bar {
      font-size: $tendency-name-font;
      font-weight: $tendency-name-weight;
    }

    .dashboard-figure {
      font-size: $tendency-figure-font;
      font-weight: $tendency-figure-weight;
    }

    .dashboard-figurePer {
      font-size: $tendency-figure-font - 2px;
      font-weight: $tendency-name-weight;
    }
    
    .dygraph-axis-label {
      &.dygraph-axis-label-y, 
      &.dygraph-axis-label-x {
        font: {
          size: $axis-font;
          weight: $axis-weight;
        }
      }
    }

    .dashboard-legend {
      @if $i < 4 {
        display: none;
      }
      font-size: $legend-font;
      font-weight: $legend-weight;
      height: $dashboard-height - $dashboard-padding;
      margin-top: -3px;
      width: $legend-width;
    }

    .dashboard-half-height-legend {
      @if $i < 4 {
        display: none;
      }
      font-size: $legend-font;
      height: $dashboard-height / 2;
      width: $legend-width / 2;
    }
  }
}

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;
  }
}