_overview.less

@list-pf-border-color: #dcdcdc;
@list-pf-item-active-border-color: #bbb;
@mini-log-font-size: 11px;
@mini-log-line-height: (@mini-log-font-size + 2);
@mini-log-num-lines: 7;
@overview-border-gray: #d6d6d6;

.build-count {
  .builds,
  .pipelines {
    display: block;
  }
  .icon-count {
    display: inline-block;
    margin-right: 5px;
    &, [data-toggle="tooltip"] {
      cursor: help;
    }
  }
  .running-stage {
    .small();
    .text-muted();
  }
}
.builds-label {
  display: inline-block;
  margin-right: 5px;
  @media (max-width: @screen-sm-max) {
    margin-top: 5px;
  }
}
.mini-donut-link {
  color: @gray-darker;
  &:active,
  &:focus,
  &:hover {
    color: @link-color;
    text-decoration: none;
  }
  &.disabled-link,
  &.disabled-link:active,
  &.disabled-link:focus,
  &.disabled-link:hover {
    color: @gray-darker;
    opacity: 1;
  }
}
.mini-log {
  background-color: @color-pf-black-100;
  border: 1px solid @color-pf-black-300;
  color: @color-pf-black-700;
  font-family: @font-family-monospace;
  font-size: @mini-log-font-size;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px;
  .mini-log-content {
    line-height: @mini-log-line-height;
    min-height: (@mini-log-num-lines * @mini-log-line-height);
    .mini-log-line {
      .truncate();
      white-space: pre;
    }
  }
}
.notification-icon-count {
  display: inline-block;
  margin: 5px 5px 0 0;
  @media (min-width: @screen-md-min) {
    margin-top: 0;
  }
  [data-toggle="tooltip"] {
    cursor: help;
  }
}

.overview {
  .app-heading {
    display: flex;
    justify-content: space-between;
    // Stack the route at mobile. Use `max-width: @screen-sm-max` to set just
    // the mobile styles. Otherwise we'd need to reset the default h3 margins
    // at wider widths.
    @media (max-width: @screen-sm-max) {
      flex-direction: column;
      justify-content: flex-start;
      .overview-route {
        .h4();
        margin-top: -5px;
        margin-bottom: 15px;
      }
    }
  }
  .build-pipeline {
    border-color: @overview-border-gray;
  }
  .build-pipelines {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .c3-line {
    stroke-width: 1px;
  }
  .component-label {
    font-size: @component-label;
    font-weight: 500;
    padding: 0 0 4px 0;
    .text-muted();
    text-transform: uppercase;
    .sublabel {
      font-size: (@component-label - 1);
      margin-left: 2px;
      text-transform: none;
    }
  }
  .data-toolbar-dropdown {
    display: inline-block;
  }
  .data-toolbar-filter {
    display: flex;
    .label-filter,
    .name-filter {
      flex-grow: 1;
    }
    .label-filter,
    .name-filter input {
      // Avoid double border since the input is directly beside the filter select.
      border-left: 0;
    }
    .name-filter {
      form,
      input {
        width: 100%;
      }
      input {
        // Extra padding from the filter type combo
        padding-left: 5px;
      }
    }
    .ui-select-container {
      width: 100px;
    }
    .ui-select-container .ui-select-match .btn,
    .label-filter-add.btn {
      box-shadow: none;
      -webkit-box-shadow: none;
    }
  }
  .data-toolbar-label {
    margin-right: 7px;
  }
  .deployment-connector {
    align-items: flex-end;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    @media (min-width: @screen-xs-min) {
      align-items: center;
      justify-content: flex-end;
    }
    .deployment-connector-arrow {
      align-items: center;
      display: flex;
      font-size: 300%;
      .text-muted();
      &:before {
        content: '\2192';
        // center arrow
        margin-top: -8px;
        padding-right: 0;
      }
      @media (max-width: @screen-xxs-max) {
        &:before {
          content: '\2191';
          // center arrow when donuts stacked
          margin-top: -20px;
          padding-right: 23px;
        }
      }
    }
  }
  .empty-state {
    // prevent alerts from displaying too close to top-header
    padding-top: @grid-gutter-width / 2;
  }
  .expanded-section {
    margin-top: 20px;
    .row > [class^=col-] {
      margin-bottom: 10px;
      @media (min-width: @screen-lg-min) {
        // aligns 2nd columns with metrics
        &.overview-builds-msg,
        &.overview-routes,
        &.overview-bindings {
          padding-left: 0;
        }
      }
    }
    h3 {
      line-height: 1.4;
      margin-bottom: 5px;
      margin-top: 0;
      width: 100%; // IE
      .word-break();
    }
    .section-title {
      .h4();
      border-bottom: 1px solid @list-pf-border-color;
      padding-bottom: 10px;
      &.no-border {
        border-bottom: 0;
        padding-bottom: 0;
      }
    }
  }
  .filter-status {
    margin-bottom: 5px;
  }
  h1, h2 {
    // Don't clip descenders.
    line-height: normal;
    min-width: 130px; // prevent name from complete truncation at mobile
    .truncate();
  }
  h2 {
    margin-top: 0;
    > .component-label {
      padding-bottom: 0;
    }
  }
  .list-pf {
    border-bottom-color: @list-pf-border-color;
    margin-bottom: 50px;
  }
  .list-pf-actions {
    // if no actions-dropdown-kebab is present, still take up space
    min-width: 19px;
  }
  .list-pf-details {
    .fade-in();
    @media (min-width: @screen-sm-min) {
      justify-content: flex-end;
    }
    @media(max-width: @screen-xs-max) {
      &.deployment-in-progress-msg {
        margin-top: 5px;
        width: 100%;
      }
    }
  }
  .list-pf-expansion.in {
    .deployment-donut > div[row] {
      justify-content: center;
    }
    .empty-state-message {
      margin-bottom: 30px;
      margin-top: 20px;
      // Avoid breaking long identifiers like image stream names in empty state message.
      max-width: none;
      padding: 0;
      .text-center();
      p {
        .word-break();
      }
    }
    .list-pf-content {
      max-width: 100%;
      // prevent deployment animation from overlaying alerts
      // TODO set as default for all alerts?
      alerts {
        position: relative;
        z-index: 2;
        display: block;
      }
    }
    .list-pf-container {
      display: block; // so that .word-break() will work in IE
    }
    .pod-donut {
      .text-center();
    }
  }
  .list-pf-item {
    border-top-color: @list-pf-border-color;
    &.active {
      border-top-color: @list-pf-item-active-border-color;
    }
    &.deployment-in-progress {
      // So animation offsets are hidden when sliding in horizontally
      // Only use this style when a deployment is in progress so that chart
      // tooltips aren't clipped and only when expanded(.active), so that kebab dropdown menu isn't clipped.
      &.active {
        overflow: hidden;
      }
      .list-pf-expansion {
        @media (max-width: @screen-xs-max) {
          overflow: hidden; // Hidden when sliding in vertically
        }
      }
    }
    > .list-pf-container {
      cursor: pointer;
      > .list-pf-content {
        @media (max-width: @screen-xs-max) {
          align-items: stretch;
          flex-direction: column;
          width: 100%; // IE
          .word-break();
        }
        @media (min-width: @screen-sm-min) {
          // Prevent the row from shrinking slightly on expand.
          min-height: 45px;
          padding-right: 15px;
        }
      }
      .toggle-expand-link {
        color: inherit;
      }
    }
  }
  .list-pf-name {
    display: flex;
    flex-direction: column;
    @media (max-width: @screen-sm-max) {
      width: auto !important;
    }
    @media (min-width: @screen-md-min) {
      align-items: center;
      flex-direction: row;
    }
    h3 {
      line-height: 1;
      margin: 0 15px 0 0;
      @media (min-width: @screen-md-min) {
        width: 60%;
      }
      a {
        .word-break();
      }
    }
  }
  .list-row-longname {
    .text-muted();
    font-size: @component-label;
    margin-top: 3px;
  }
  .list-row-tabset {
    margin-top: 20px;
    @media (min-width: @screen-sm-min) {
      margin-top: 0;
    }
    .nav-tabs > li.active > a .build-count {
      color: #4d5258;
    }
  }
  .list-view-pf-actions .actions-dropdown-kebab {
    font-size: 18px;
    // Give a bigger click target (fill `list-view-pf-actions` width)
    width: 100%;
  }
  .loading-message {
    padding-top: 20px;
  }
  .metrics-collapsed {
    flex-grow: 1;
    .text-center();
  }
  .metrics-summary {
    display: inline-block;
    .text-center();
    + .metrics-summary {
      margin-left: 20px;
    }
  }
  .metrics-compact {
    white-space : nowrap;
    .metrics-sparkline {
      border-bottom: 1px solid #ededed;
      display: inline-block;
      height: 28px;
      max-width: 300px;
      vertical-align: -6px;
      width: calc(~"100% - 80px");
    }
    .metrics-usage {
      display: inline-block;
      margin-left: 10px;
      max-width: 80px;
    }
    .usage-label {
    // Make sure the labels align with the bottom of the chart.
      line-height: 1;
      margin-bottom: -1px;
    }
    .usage-value {
      line-height: 1;
      margin: 3px 0;
    }
  }
  .middle .middle-container {
    // FIXME: workaround issue where middle-container usage of flexbox causes content to not fill width
    > div {
      width: 100%;
    }
    .container-fluid {
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  .networking-section .row + .row:before {
    content: '';
    display: block;
    border-top: 1px solid @list-pf-border-color;
    margin: 0 20px 10px;
  }
  .overview-route {
    .word-break();
  }
  .overview-routes + .overview-routes {
    .mar-top-md();
  }
  .overview-row-inline-actions {
    .mar-left-md();
  }
  pod-donut[mini] {
    align-items: center;
    display: flex;
  }
  .provisioned-service {
    .expanded-section {
      margin-top: 0;
    }
    .list-pf-details {
      @media (min-width: @screen-sm-min) {
        justify-content: space-between;
      }
      .bindings {
        margin-bottom: 0;
        margin-top: -4px;
      }
      .component-label {
        padding-bottom: 0;
      }
      .small {
        color: #9c9c9c;
        font-size: 10px;
      }
    }
  }
  @media (min-width: @screen-md-min) {
    .status-icons {
      margin-right: 15px;
      width: 40%;
    }
  }
  :not(.tab-pane) > overview-pipelines > .expanded-section {
    margin-bottom: 30px;
  }
  .toolbar-container {
    padding-bottom: 13px;
    padding-top: 13px;
    .surface-shaded();
  }
  .triggers {
    margin-bottom: 20px;
  }
  .usage-value {
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
  }
  .usage-label {
    .small();
    .text-muted();
  }
  .view-by-options {
    align-items: baseline;
    display: flex;
    @media (max-width: @screen-xs-max) {
      margin-top: 10px;
    }
  }
  .view-full-log {
    position: relative;
    top: 2px;
  }

  // Deployment animations
  @keyframes deploymentSlideDown {
    0% {
      // align previous and latest donut start position
      transform: translateY(-220px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes deploymentSlideIn {
    0% {
      // align previous and latest donut start position
      transform: translateX(240px);
    }
    100% {
      transform: translateX(0);
    }
  }

  .row-expanded-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    @media (min-width: @screen-lg-min) {
      // width needed to enable flex to trigger word-break on content
      .overview-animation-block,
      .overview-pod-template {
        width: 50%;
      }
    }
    .overview-animation-block {
      display: flex;
      flex: 1 1 auto;
      justify-content: center;
      &.animation-in-progress .overview-deployment-donut {
        @media (min-width: @screen-xs-min) {
          max-width: 450px;
        }
        @media (min-width: @screen-sm-min) {
          .latest-donut {
            justify-content: flex-end;
          }
        }
      }
      .overview-deployment-donut {
        @media (min-width: @screen-xs-min) {
          display: flex;
          flex: 1 1 auto;
          // prevents resize jump; set height since the donut isn't displayed exactly when expanded-section is rendered
          min-height: 150px;
        }
        &.ng-enter {
          animation: deploymentSlideIn 750ms ease forwards;
        }
        &.stacked-template {
          .overview-pod-template {
            min-width: 100%;
          }
          @media (max-width: @screen-xxs-max) {
            display: flex;
            // stack latest deployment-donut above previous-donut
            flex-direction: column-reverse;
            &.ng-enter {
              animation: deploymentSlideDown 750ms ease forwards;
            }
          }
        }
        .latest-donut {
          display: flex;
          flex: 1 1 auto;
        }
        .previous-donut {
          display: flex;
          flex: 1 1 auto;
          .fade-out();
          &.ng-enter-prepare {
            // prevent previous-donut initial "flash" before animation
            display: none;
          }
          @media (max-width: @screen-xxs-max) {
            flex-direction: column;
            deployment-donut {
              // move arrow to point at latest deployment-donut
              order: 2;
            }
          }
        }
      }
    }
    &.metrics-active {
      @media (max-width: @screen-md-max) {
        flex-direction: column;
        .overview-pod-template {
          min-width: 100%;
          order: 3;
        }
      }
      .latest-donut {
        justify-content: flex-end;
      }
      .overview-animation-block {
        @media (min-width: @screen-xs-min) and (max-width: @screen-md-max) {
          justify-content: space-between;
          // add spacing when pod-template-block is stacked beneath
          padding-bottom: 20px;
          &.animation-in-progress {
            justify-content: center;
          }
        }
      }
      .overview-metrics {
        display:none;
        // display metrics beside donut
        @media (min-width: @screen-xs-min) {
          display:block;
          .fade-in();
          .fade-out();
          width: 50%;
        }
      }
    }
    &.metrics-not-active {
      .latest-donut {
        justify-content: center;
        @media (min-width: @screen-sm-min) {
          // right align donut when pod-template is shown
          justify-content: flex-end;
        }
      }
      .overview-pod-template {
        // prevent wrapping of flex containers
        width: 50%;
      }
    }
    .overview-pod-template {
      flex: 1 1 auto;
      .pod-template-block {
        // add space so text can't touch metrics or doughnut
        padding-right: 10px;
        &.ng-leave-prepare {
          // prevent previous-donut initial "flash" before animation
          display: none;
        }
      }
    }
  }
}