//
// Overview page components
// --------------------------------------------------

.components {
  border-left: 3px solid #ccc;
  border-left-style: dotted;
  margin-bottom: 30px;
  .connector {
    display: none;
  }
  &.components-group {
    border-left-style: solid;
    .connector {
      display: inline-block;
      position: absolute;
      top: 48%;
      left: -5px;
      i {
        color: #ccc;
        .rotate(137deg);
        font-size: 9px;
        position: absolute;
      }
      &:before {
        content: '\f111';
        font: normal normal normal 6px/1 FontAwesome;
        display: inline-block;
        color: #fff;
        position: absolute;
        left: 2px;
        top:1px;
      }
    }
    @media (min-width: @screen-sm-min) {
      .osc-object-active {
        .connector {
          i {
            color: @osc-object-active-color;
          }
        }
      }
    }
  }
  .components-panel {
    background-color: #fff;
    border: 1px solid @border-color-light-grey;
    position: relative;
    .osc-object-highlight();
    h2 {
      // Avoid clipping descenders in routes on overview.
      line-height: 1.3;
    }
    .component-label {
      color: @gray-light;
      font-size: @component-label;
      line-height: @line-height-base;
      text-transform: uppercase;
      + span {
        margin-left: 5px;
      }
      .component-label-details {
        text-transform: none;
      }
      a.subtle-link {
        color: @gray-light;
        border-bottom: 1px dotted #BBB;

        &:hover, &:active, &:focus {
          color: @link-hover-color;
          border-bottom: 1px dotted @link-hover-color;
          text-decoration: none;
        }
      }
    }
    .component-block {
      .flex-display(@display: flex);
      .flex-direction(@direction: row);
      .flex-wrap(@wrap: wrap);
      @media (max-width: @screen-sm-min) {
        /* Switch to vertical layout at small sizes */
        .flex-direction(@direction: column);
      }
      &.pod-container {
        .flex-direction(@direction: row);
      }
      &.component-meta {
        margin: 4px 0 6px;
      }
      .component {
        // prevent content from overflowing the parent in Safari
        width: 100%;
        @media (min-width: @screen-sm-min) {
          // assign flex properties when >768 for proper layout then .component divs will stack at mobile by default
          .flex(@columns: 2 1 0%);
        }
        h2,h3 {
          margin: 0 0 5px;
          .truncate();
        }
        &.meta-data {
          @media (min-width: @screen-sm-min) {
            // assign flex properties when >768 for proper layout then .component divs will stack at mobile by default
            .flex(@columns: 1 1 0%);
          }
          font-size: @component-label + 1;
          text-align: right;
          line-height: @line-height-base;
          .align-self(@align: left);
          color: @gray-light;
          @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
            // block display multiple port mappings at specific widths to prevent breaking of layout, but also prevent wrapping when not needed
            .port-mappings {
              display: block;
            }
          }
        }
        .add-route-link {
          text-transform: none;
        }
        @media (max-width: @screen-sm-min) {
          // display side-by-side at mobile resolutions
          .port-mappings, .add-route-link {
            display: inline-block;
            margin-right: 5px;
          }
          &.meta-data {
            /* Left align for vertical layout at small sizes */
            text-align: left;
          }
        }
      }
    }
    &.service {
      border-left-width: 0;
      margin-bottom: 6px;
      padding: 6px 15px 5px;
      .osc-object-highlight();
      &.none {
        background-color: transparent;
      }
    }
    &.deployment-block {
      margin: 0 0 6px 6px;
      padding: 5px 15px;
      &.none {
        background-color: transparent;
        &:after {
          background-color: #ccc;
          top: 50%;
          content: "";
          display: block;
          height: 1px;
          left: -10px;
          position: absolute;
          width: 9px;
        }
      }
    }
  }
}

.pod-template-block {
  border-radius: 3px;
  margin-bottom: 10px;
  margin-right: 10px;
  .pod-template {
    border: 1px dotted @border-color-light-grey;
    border-radius: @border-radius-md;
    max-width: 600px;
    padding: 5px 10px;
    h4 {
      margin: 5px 0;
    }
    .pod-template-build {
      .word-break();
    }
  }
}

.pod-container-terminal {
  margin-top: 15px;
  margin-bottom: 15px;
}
.builds-no-service {
  .builds-block {
    .builds {
      .build {
        &:first-child {
          // margin for spacing
          margin-top: 10px;
          &:before {
            // Top border above builds with no service
            content: '';
            display: block;
            height: 1px;
            width: 100%;
            top: -10px;
            left: 0;
            background-color: @border-color-light-grey;
            position: absolute;
          }
        }
      }
    }
  }
}
.builds-block {
  margin-left: 5px;
  .builds {
    margin: 0;
    overflow: hidden;
    .build {
      /* Put a transparent border in place so osc-object-highlight shows selection */
      border: 1px solid transparent;
      .osc-object-highlight();
      border-radius: @border-radius-md;
      padding: 5px;
      position: relative;
      margin: 10px 0 6px;
      text-align: left;
      &:first-child {
        margin-top: 0;
      }
      + .build:after {
        background-color: @connector-color;
        top: -6px;
        content: "";
        display: block;
        height: 1px;
        left: 0;
        right: 0;
        position: absolute;
      }
    }
  }
}

.pod-block {
  .overview-pods {
    margin-right: 10px;
    min-width: 190px;
    .clickable {
      cursor: pointer;
    }
    .pod-status-chart {
      // Give an empty pod donut chart a light gray outline.
      path.c3-arc-Empty {
        stroke: #d1d1d1;
        // Override the style set in JavaScript since you can't click or hover
        // on the empty chart.
        cursor: inherit !important;
      }
    }
    .scaling-controls {
      font-size: 24px;
      a {
        color: #bbbbbb;
        &:hover, &:active {
          color: #72767b;
          text-decoration: none;
        }
        &.disabled {
          opacity: 0.4;
          cursor: not-allowed;
          &:hover {
            color: #bbbbbb;
          }
        }
      }
    }
  }
}

/*
 * These pod-container styles are not currently used since we've switched to
 * the donut chart. Leaving them commented out for now in case we want to show
 * individual pods in another place in the UI.
 */

//.pod-container {
//  .flex-display(@display: flex);
//  .flex-direction(@direction: row);
//  .flex-wrap(@wrap: wrap);
//  .justify-content(@justify: flex-start);
//  &.pod-container-lg {
//    .pod {
//      width: 70px;
//      height: 70px;
//    }
//  }
//  .pod {
//    .osc-object-highlight();
//    max-width: 450px;
//    min-width: 120px;
//    background-size: 20px 20px;
//    border-radius: @border-radius-md;
//    border: 1px solid transparent;
//    padding: 10px;
//    position: relative;
//    margin: 0 10px 10px 0;
//    text-align: center;
//    -webkit-font-smoothing: antialiased;
//
//    &:last-child {
//      // no right margin on the last one so collapse links align properly
//      margin-right: 0;
//    }
//
//    .pod-status-label {
//      &:before, &:after {
//        font-family: 'PatternFlyIcons-webfont';
//        font-weight: normal;
//      }
//    }
//
//    &.pod-pending {
//      background-color: #ececec;
//      .striped(@color: rgba(255,255,255,.45); @angle: 45deg);
//    }
//    &.pod-failed {
//      background-image: none;
//      .pod-status-label {
//        position: relative;
//        margin-right: -15px;
//        &:after, &:before {
//          position: absolute;
//        }
//        &:after {
//          color: #fff;
//        }
//      }
//    }
//    &.pod-running, &.pod-succeeded {
//      background-color: @pod-running-bg;
//      background-image: none;
//    }
//    &.pod-failed {
//      background-color: @pod-failed-bg;
//      border: @pod-failed-border;
//      .pod-status-label {
//        &:before {
//          content: @pficon-var-error-circle-o;
//          color: @brand-danger;
//          left: -16px;
//          top: 0;
//        }
//      }
//    }
//    &.pod-warning, &.pod-unknown {
//      background-color: @pod-warning-bg;
//    }
//    .pod-text {
//      font-family: @font-family-base;
//      font-size: 11px;
//    }
//  }
//}

.deployment-well {
  &:not(.active) {
    background-color: white;
  }
  &:not(.detailed) {
    padding-top: 12px;
    padding-bottom: 12px;
    .deployment-summary {
      h3 {
        margin-bottom: 5px;
        text-transform: lowercase;
      }
      .deployment-summary-status {
        font-size: 90%;
        margin-left: 7px;
      }
      .deployment-summary-toggler {
        float: right !important;
        font-size: 80%;
      }
    }
    .deployment-details {
      display: none;
    }
  }
  &.detailed {
    .deployment-summary-status, .deployment-summary-toggler {
      display: none;
    }
  }
}

.popover {
  min-width: 300px;
  font-size: 13px;
  line-height: 1.66667;
}

.build-well, .pod-well, .deployment-well {
  overflow: hidden;
  margin-bottom: 10px;
  .build-detail, .pod-detail, .deployment-detail {
    margin-bottom: 3px;
    .build-detail-label, .pod-detail-label, .deployment-detail-label {
      margin-right: 10px;
    }
  }
  .build-status-button {
    margin-left: 7px;
  }
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  -webkit-transition:all 1s;
  transition:all 1s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
}

/* Angular automatically animates things by creating
   transition periods between elements showing and hiding.
   In some cases we do not want to see both elements at the same time
   so we hide things in the ng-leave state that we have tagged with the
   additional hide-ng-leave class.
 */
.hide-ng-leave.ng-leave {
  display: none;
}

.hide-ng-leave .ng-leave {
  display: none;
}
