_core.less

//
// Core
// --------------------------------------------------

// See https://docs.angularjs.org/api/ng/directive/ngCloak
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

body.ios {
  // Prevent having to tap tabs twice on iOS.
  .nav-tabs > {
    li > a:hover:before {
      content: none;
    }
    li.active > a:before {
      content: '';
    }
  }

  @media only screen and (max-device-width: 736px) {
    // Fix Bootstrap modal dialog zoom on the iPhone
    // See http://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
    padding-right: 0px !important;

    // Prevent page from scrolling underneath modals and wizard overlays.
    &.modal-open, &.overlay-open {
      overflow-y: auto;
      position: fixed;
    }

    // Prevent zooming when focusing input fields in mobile Safari. Only
    // target iPhones to avoid larger-than-wanted fonts elsewhere.
    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    select.form-control,
    textarea,
    textarea.form-control,
    .console-os .ace_editor {
      font-size: 16px;
    }
  }
}

// Firefox-specific hack for preventing fieldset content causing the container to expand
// see: https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685
@-moz-document url-prefix() {
  .console-os fieldset {
    display: table-cell;
  }
}

.separator {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.surface-shaded .nav-tabs {
  border-color: rgba(0, 0, 0, 0.15);
}

.surface-shaded .ui-select-bootstrap .ui-select-match > .btn {
  background-color: #ffffff;
  background-image: linear-gradient(to bottom, #ffffff 0%, #fbfbfb 100%);
}

.breadcrumb {
  padding-bottom: 0;
  strong {
    font-weight: 600;
  }
}

.nav-tabs {
  // Use Patternfly secondary tab style on tabs
  // https://www.patternfly.org/widgets/#tabs
  .nav-tabs-pf;

  // Make sure the tabs are left-aligned when they wrap. Apply the same style
  // Patternfly uses for the first tab to all tabs, which prevents the extra
  // left margin on the second line.
  > li {
    // Right padding keeps the same spacing between tabs as before.
    padding-right: 15px;
    // https://github.com/patternfly/patternfly/blob/v3.3.2/less/tabs.less#L82-L89
    > a {
      padding-left: 0;
      &:before {
        left: 0 !important;
      }
    }
  }
}

.nav-tabs {
  margin-bottom: @grid-gutter-width / 2;
}

.resource-details {
  .config-parameters-form {
    margin-top: 5px;

    .hide-show-link {
      font-size: @font-size-base;
      margin-left: 5px;
    }

    @media (min-width: @screen-lg-min) {
      margin-bottom: 10px;
    }
  }

  h3 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }
  overlay-panel h3 {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.hide-tabs .nav-tabs {
  display: none;
}

.btn-link.inline-btn-link {
  font-size: inherit;
  font-weight: inherit;
  vertical-align: initial;
  padding: 0;
}

.empty-state-message {
  margin: 40px auto 60px;
  max-width: 600px;
  padding: 0;
  &.loading {
    margin: 0 auto;
    padding: 40px 0 60px;
    h2 {
      margin-top: 0;
    }
  }
  @media (min-height: 800px) {
    margin-top: 130px;
    // reduce margin-top when alert is shown
    alerts + & {
      margin-top: 90px;
    }
    &.loading {
      margin-top: 0;
      padding-top: 130px;
    }
  }
  @media (min-height: 1024px) {
    margin-top: 170px;
    alerts + & {
      margin-top: 130px;
    }
    &.loading {
      margin-top: 0;
      padding-top: 170px;
    }
  }
  @media(min-width: @screen-xs-min) {
    padding-left: (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
  }
  .btn {
    margin: 10px 0 20px;
  }
  .empty-state-message-main-action {
    margin-top: @line-height-computed;
    .btn {
      margin-bottom: 0;
    }
  }
  .empty-state-message-secondary-action {
    margin-top: @line-height-computed;
    @media(max-width: (@screen-xs-min - 1)) {
      align-items: center;
      flex-direction: column;
    }
    .btn {
      margin-bottom: 8px;
      @media(min-width: @screen-xs-min) {
        margin-right: 5px;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
  .empty-state-message-main-action,
  .empty-state-message-secondary-action {
    display: flex;
    justify-content: center;
    .btn {
      flex: 0 1 auto;
      margin-top: 0;
      min-width: 33.333333%;
    }
  }
  h2, .h2 {
    // Avoid clipped descenders with class truncate or overflow: hidden
    line-height: 1.4;
  }
}

// Mark is used for highlighting terms like search terms. See http://getbootstrap.com/css/#type-inline-text
// Remove the default padding as it makes letters jump for as-you-type updates.
mark {
  padding: 0;
  background-color: rgba(252, 248, 160, 0.5);
  .ui-select-choices-row.active > span & {
    background-color: rgba(252, 248, 160, 0.75);
  }
}

.service-table {
  .text-center;
  max-width: 650px;
  thead {
    tr th {
      .text-center;
    }
  }
  @media (max-width: @screen-sm-max) {
    // The `table-responsive` div adds a 100% border. Make sure the table is at
    // least 100% to avoid a white block at some screen sizes.
    min-width: 100%;
  }
}

.deployment-config-summary, .build-config-summary {
  .h3 {
    margin-bottom: 0;
  }
  .last-status {
    margin-right: 5px;
  }
  // Indent icon width to align with text above.
  .last-timestamp {
    margin-left: 25px;
  }
}

.route-status .h3 {
  margin-top: 0;
  margin-bottom: 5px;
}

.deployment-config-summary {
  .gutter-bottom();
}

registry-image-pull {
  margin-bottom: @grid-gutter-width / 2;
}

registry-imagestream-push {
  margin-top: @grid-gutter-width;
}

registry-image-listing {
  /* No expandable listing when shown in the Openshift Web Console */
  .listing-ct-toggle {
    display: none;
  }
  .registry-image-tag {
    max-width: 115px;
  }
  table {
    width: 100%;
  }
}

registry-image-body dt:after,
registry-image-config dt:after,
registry-image-meta dt:after,
registry-imagestream-body dt:after,
registry-imagestream-meta dt:after {
  content: ':';
}

.image-sources {
  .source-path:after,
  .destination-dir:before {
    content: "\00a0 ";
  }
}

.pipelines-page {
  @media (max-width: @screen-xs-max) {
    h2 small {
      display: block;
      margin-top: 3px;
    }
    .source-repo {
      display: block;
    }
  }
}

// The chart gets too compressed at narrow widths. Use an approach
// similar to table-responsive on mobile where the user can scroll.
.build-trends-responsive {
  width: 100%;
  margin-top: 20px;
  overflow: auto;
  .build-trends-container {
    min-width: 600px;
    height: 235px;
    // Set initial tooltip position to 0, 0 to avoid scrollbars flickering when
    // c3 first shows the tooltip, but hasn't positioned it.
    // (Doesn't change tooltip positioning.)
    .c3-tooltip-container {
      top: 0;
      left: 0;
    }
    // Disable the gray vertical line when hover over a bar.
    .c3-xgrid-focus {
      display: none;
    }
    .build-trends-avg-line {
      stroke: #d1d1d1;
      stroke-dasharray: 8,5;
      stroke-width: 1;
    }
    .avg-duration {
      margin-right: 30px;
    }
    .avg-duration-text {
      vertical-align: top;
      // same as c3-legend
      font-size: 12px;
    }
    @media (max-width: @screen-xs-max) {
      // Show a border at mobile screen widths so it's obvious you can scroll.
      border: 1px solid #d1d1d1;
      padding: 10px 0;
    }
  }
}

.metrics {
  .metrics-options {
    .form-group {
      margin-bottom: 0;
    }
    .multiple-containers,
    .select-range {
      vertical-align: middle;
    }
    .select-container,
    .select-range {
      display: inline-block;
    }
    @media (min-width: @screen-sm-min) {
      .form-group {
        display: inline-block;
        vertical-align: middle;
      }
      .select-container {
        margin-right: 10px;
      }
    }
    @media (max-width: @screen-xs-max) {
      .form-group {
        padding-bottom: 10px;
        label {
          width: 100px;
        }
      }
    }
  }
  .metrics-full {
    h2:not(.has-limit) {
      border-bottom: 1px solid #d1d1d1;
      margin-bottom: 0;
      padding-bottom: 15px;
    }
    .metrics-donut,
    .metrics-sparkline {
      margin-top: 20px;
    }
    .metrics-sparkline {
      margin-left: -10px;
    }
  }

  // Avoid overlapping tick text at mobile.
  @media (max-width: 500px) {
    .metrics-sparkline .c3-axis-x .tick {
      display: none;
    }
  }
}

// Since the monitoring page has additional padding, we need to stop showing ticks sooner.
@media (max-width: 550px) {
  .monitoring-page .metrics-sparkline .c3-axis-x .tick {
    display: none;
  }
}

// The sidebar takes additional width from the chart when open.
@media (max-width: 950px) {
  .monitoring-page.sidebar-open .metrics-sparkline .c3-axis-x .tick {
    display: none;
  }
}

.quota-chart {
  margin: 0 20px;
}

.quota-charts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.route-service-bar-chart {
  .service-name,
  .service-weight {
    .small();
    .text-muted();
    display: inline-block;
    vertical-align: middle;
  }
  .service-name {
    .truncate();
    width: 125px;
  }
  .service-weight {
    margin-left: 5px;
  }
  .progress {
    background: none;
    box-shadow: none;
    display: inline-block;
    margin: 0;
    width: 125px;
    -webkit-box-shadow: none;
    &:not(.highlight) .progress-bar {
      background-color: @color-pf-black-300;
    }
  }
}


// Create App
// --------------------------------------------------

label.checkbox {
  font-weight: normal;
}

.form-group .checkbox {
  // Use the default form-group margin for consistency. Otherwise the
  // checkboxes are closer than other form elements.
  margin-bottom: inherit;
}

.drag-and-drop-zone {
  display: none;
}

.show-drag-and-drop-zone {
  border-style: dashed;
  display: block;
  border-color:  rgb(136, 136, 136);
  border-width: 3px;
  background-color: rgba(255, 255, 255, 0.6);
  margin: -3px;
  text-align: center;
  vertical-align: middle;
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    margin: 0;
  }
}

.highlight-drag-and-drop-zone {
  border-color: #0099d3;
  p {
    color: #0099d3;
  }
}

.deploy-image {
  h2 small {
    display: block;
    margin-top: 5px;
    @media (min-width:@screen-md-min) {
      display: inline-block;
      margin-top: 0;
    }
  }
}

.icon-xl {
  font-size: 128px;
}

.istag-separator {
  .hidden-xs();
  .text-muted();
  position: absolute;
  top: 2px;
  right: -3px;
}

.about,
.command-line {
  .about-icon {
    img {
      width: 100%;
    }
  }
}

.about .about-reg {
  font-size: 65%;
  vertical-align: 5px;
}

.lifecycle-hook {
  padding-bottom: 20px;
  &:first-of-type {
    padding-top: 20px;
  }
  .read-only-tag-image {
    padding-bottom: 10px;
  }
}

.osc-form {
  .icon {
    text-align: center;
    custom-icon {
      font-size: 100px;
      line-height: 1;
      img {
        max-width: 100px;
      }
    }
  }
  span.fa.visible-xs-inline {
    margin-right: 10px;
  }
  .flow {
    .separator;
    display: table;
    margin-top: @grid-gutter-width;
    width: 100%;
    .wizard-pf-main-form-contents & {
      border-top: 0;
      margin-top: 0;
    }
    > .flow-block {
      display: inline-block;
      &.right {
        font-size: @font-size-small;
        font-weight: normal;
        .action-inline {
          @media (max-width: @screen-xs-max) {
            margin-left: 0;
          }
        }
      }
      .action {
          font-size: @font-size-small;
          font-weight: normal;
          // &:extend(.action-inline);
        }
      > ul.list-inline {
        margin-bottom: 0;
        > li {
          font-size: @font-size-small;
          padding-right: 0;
          text-align: left;
        }
      }
    }
  }
  .first-section .flow {
    margin-top: (@grid-gutter-width / 2);
    border-top: 0;
  }
  .template-options {
    line-height: 1.5;
    .list-unstyled {
      .options {
        margin-bottom: 12px;
      }
      .help-block {
        margin: 0 0 5px 2px;
      }
    }
    .form-group {
      .parameter-input-wrapper {
        position: relative;

        .resize-input {
          position: absolute;
          right: 6px;
          top: 5px;

          .fa-expand, .fa-compress {
            transform: rotate(90deg);
          }
        }
      }
    }
    &.form-horizontal .form-group .parameter-input-wrapper {
      .resize-input {
        right: 26px;
      }
    }
    .help-block {
      margin-bottom: 5px;
    }
  }
}

.compute-resource {
  .resource-size {
    display: flex;
    height: 27px;
    .resource-amount {
      width: 70%;
      input {
        width: 100%;
      }
    }
    .resource-unit {
      width: 30%;
      .ui-select-container {
        height: 27px;
      }
      .ui-select-choices,
      .ui-select-toggle {
        width: 100%;
      }
    }
    @media (min-width: @screen-sm-min) {
      .resource-amount {
        width: 80%;
      }
      .resource-unit {
        width: 20%;
      }
    }
    @media (min-width: @screen-md-min) {
      .resource-amount {
        width: 85%;
      }
      .resource-unit {
        width: 15%;
      }
    }
  }
}

.next-steps {
  .tile {
    margin-bottom: 0;
    &.tile-status {
      margin-top: 0;
    }
  }
}

// `edit-command` directive
.command-args {
  textarea {
    // Resize does not work well with drag and drop reordering.
    resize: none;
  }
  .drag-handle {
    cursor: move;
    .fa {
      padding-left: 5px;
    }
  }
  .drag-handle, .remove-arg {
    background-color: inherit;
    border: 0;
    font-size: 15px;
    padding-top: 5px;
    vertical-align: top;
  }
}

@create-form-md-width: 44%;
@media (min-width: 767px) {
  .osc-form {
    .flow > .flow-block {
      display: table-cell;
      &.right {
        // float: right;
        text-align: right;
      }
    }
    .labels .form-group {
      // Show name/value fields like labels and env vars side by side at wide screen sizes.
      // Align text fields with read-only values.
      width: @create-form-md-width;
      .form-control {
        width: 100%;
      }
    }
  }
}

.label-list li,
.env-variable-list li {
  &:first-child {
    padding: 6px 0 0;
  }
  .key,
  .value {
    display: inline-block;
    margin: 0;
    width: 44%;
  }
  .value {
    max-width: 500px; // enable firefox to truncate
  }
  .btn {
    vertical-align: top;
  }
}

.label + .label {
  margin-left: 3px;
}

.template-message {
  background-color: transparent;
  border: 1px solid @color-pf-black-300;
  margin-top: 21px !important;
  .resource-description {
    font-family: @font-family-monospace;
    // Consistent font-size with the CLI examples in code blocks below the template message.
    font-size: @font-size-base;
    margin-bottom: 0;
  }
}

.resource-description {
  margin-bottom: (@grid-gutter-width / 2);
  .pre-wrap();
  .word-break();
}
.resource-metadata {
  margin-bottom: (@grid-gutter-width / 2);
}

.tasks {
  background-color: #ffffff;
  font-weight: normal;
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
  &.success {
    border: 1px solid #3f9c35;
    border-left: 3px solid #3f9c35;
  }
  &.failure {
    border: 1px solid #cc0000;
    border-left: 3px solid #cc0000;
  }
  .task-icon {
    font-size: 38px;
    left: 15px;
    position: absolute;
    top: 14px;
  }
  .task-content {
    font-size: 16px;
    .task-info {
      margin-left: 45px;
    }
    .task-title {
      margin-right: 10px;
    }
    .task-links {
      font-size: 13px;
      font-weight: 300;
      white-space: nowrap;
    }
  }
  .task-expanded-details {
    margin-top: 20px;
    .alert {
      margin-bottom: 7px;
    }
  }
}

.btn-xs {
  padding: 0 4px;
}
.btn-lg, .btn-group-lg > .btn {
  line-height: 1.334; // needed to make same height as inputs
}

code {
  white-space: normal;
}

pre,
div {
  &.code {
    background-color: #fff;
    border: none;
    border-left: 2px solid rgb(204, 204, 204);
  }
}

div.code {
  &:extend(pre);
}

[data-toggle="tooltip"] {
  cursor: pointer; // so tooltips get correct cursor
}

// Fix to override the Firefox 40+ behavior to add text-decoration
// No other browser does this.
abbr[data-original-title], abbr[title] {
  text-decoration: none;
}

.dl-horizontal {
  &.left {
    dt {
      text-align: left;
    }
  }
  &.indent {
    margin-left: (@grid-gutter-width / 2); // 20px
  }
  dd {
    &:extend(.clearfix all); // Including this here because it's not being set even though it's in /bootstrap/less/type.less dunno why?
  }
}

.gutter-top-bottom {
  padding: @grid-gutter-width / 2 0;
  &.gutter-top-bottom-2x {
    padding: @grid-gutter-width 0;
  }
}
.gutter-top {
  padding-top: @grid-gutter-width / 2;
  &.gutter-top-2x {
    padding-top: @grid-gutter-width;
  }
}
.gutter-bottom {
  padding-bottom: @grid-gutter-width / 2;
  &.gutter-bottom-2x {
    padding-bottom: @grid-gutter-width;
  }
}

select:invalid {
    box-shadow: none;
}

.truncate {
  // Bootstrap mixin
  // Note: If truncating within a flex container then the parent needs a width
  .text-overflow();
}

.nowrap {
  white-space: nowrap;
}

.well > {
  h1, h2, h3, h4, h5 {
    &:first-child {
      margin: 5px 0 15px;
    }
  }
}

.spinner.spinner-xs { // set height & width to 12px so that FF displays correctly
  height: 12px;
  width: 12px;
}

.attention-message {
  background-color: lighten(@brand-primary, 50%);
  border: 1px solid darken(@brand-primary, 10%);
  position: absolute;
  left: 50%;
  margin-top: 100px;
  transform: translateX(-50%);
  padding: 1em 1em 2em;
  min-width: 85%;
  h1,p {
    text-align: center;
  }
  p {
    max-width: 70em;
    margin: auto;
  }
}

.short-id {
  background-color: #f1f1f1;
  color: #666;
}

.input-number {
  width: 60px;
}

.alert {
  margin-bottom: 14px;
  margin-top: 7px;
  &.toast-pf {
    margin-top: 0;
  }
  code {
    // alerts have a clashing background color. Inherit the background and
    // remove padding, which looks strange without the background color.
    background-color: inherit;
    display: inline-block; // So Firefox will break-word
    padding: 0;
    .word-break-all();
  }
  .close {
    margin-left: 5px;
  }
}

.action-button {
  color: @gray-light;
  cursor: pointer;
  &:hover, &:active, &:focus {
    color: #000;
  }
}

a.action-button {
  &:hover, &:active, &:focus {
    text-decoration: none;
  }
}

// Use with aria-disabled="true" and role="button"
a.disabled-link {
  color: #bbbbbb;
  cursor: not-allowed;
  opacity: 0.4;
  &:hover, &:active, &:focus {
    color: #bbbbbb;
    text-decoration: none;
  }
}

.actions-dropdown-btn {
  margin-left: 5px;
}

.actions-dropdown-kebab {
  color: @gray-darker;
  padding: 0 10px;
  &:active,
  &:focus,
  &:hover {
    color: @link-color;
  }
}

.contains-actions .dropdown {
  margin-left: 10px;
  @media(max-width: @screen-xs-max) {
    // add dropdown-pf-kebab styles
    .dropdown-kebab-pf;
    // adjust position of dropdown to account for larger kebab
    .dropdown-menu.dropdown-menu-right {
      right: -4px;
    }
  }
}

.header-actions {
  .small();
  margin-left: 5px;
}

.modal-body {
  &.contains-form {
    padding-left: (@grid-gutter-width / 2); // so required field label indicator (*) is correctly positioned
  }
  .buttons {
    display: flex;
    flex-direction: row-reverse; // reverse the direction of the buttons so primary comes after secondary
    margin-top: 9px; // so spacing above buttons is same as modal-footer
    &.gutter-bottom,
    &.gutter-top-bottom {
      padding-bottom: 0;
    }
    .btn + .btn {
      margin-right: 8px;
    }
  }
  textarea {
    resize: vertical; // so the textarea cannot be resized wider than the modal
  }
}

.debug-pod-action {
  margin-top: 5px;
}

.modal-debug-terminal {
  .empty-state-message {
    margin-top: 60px;
  }
  .original-cmd-msg {
    margin-bottom: 10px;
  }
}

.edit-form {
  .with-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding-top: 21px;
    padding-bottom: 10px;
    margin-top: 10px;
  }
  .labels {
    .form-group {
      width: 44%;
      .form-control {
        width: 100%;
      }
    }
  }
  .checkbox {
    margin: 10px 0;
  }

  .section {
    padding-bottom: 5px;
  }
  @media (max-width: @screen-sm-min) {
    .trigger-url {
      max-width: 90%;
    }
    .labels {
      .form-group {
        width: 100%;
      }
    }
  }
}

.status {
  display: flex;
  min-width: 130px;
  // when status-icon is child of .status, add margin-right to the icon
  // because the space resulting from display: inline-block collapses
  status-icon {
    margin-right: 3px;
  }
}

.status-detail {
  flex: 1 1 0%;
}

build-counts,
notification-icon,
status-icon {
  // so that status-icons have a fixed width (like .fa-fw, but better sized)
  // this ensures when the icons change, the text that follows doesn't shift
  .fa, .pficon {
    text-align: center;
    width: 1.230769em; // ~16px at 13px font size
    .last-status & {
      width: 20px;
    }
  }
  // fixes wobble that occurs when status-icons utilize fa-spin (see https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-249591495)
  .fa-spin {
    line-height: normal;
  }
  // so that spinners match width of .fa/.pficon (16px or 20px)
  .spinner.spinner-inline {
    margin-left: 0.153846em; // ~2px at 13px font size
    margin-right: 0.153846em; // ~2px at 13px font size
    .last-status & {
      margin-left: 4px;
      margin-right: 4px;
    }
  }
}

pre.clipped {
  display: inline-block;
  margin-top: 10px;
  max-width: 100%;
  &.scroll {
    max-height: 150px;
    overflow: auto;
    width: 100%;
  }
}

.k8s-label {
  display: flex;
  margin-right: 5px;
  // A bit more space below the actions button.
  margin-top: 3px;
  max-width: 100%; // needed to enable truncation within table, but still allow inline display if room is available
  &:before {
    content: ' ';
    white-space: normal;
  }
  .label-pair {
    display: flex;
    margin-bottom: 2px;
    max-width: 100%; // needed to enable truncation within table, but still allow inline display if room is available
  .label {
    // prevent short label-key or label-value from being truncated less than 4 characters
    min-width: 50px;
    &:first-child {
      border-radius: 2px 0 0 2px;
    }
    &:last-child {
      border-radius: 0 2px 2px 0;
    }
  }
  .label-key {
    background-color: #bee1f4;
    color: #00659c;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: 0;
    font-size: 12px;
  }
  // if its a link
  a.label-key {
    &:hover, &:focus, &:active {
      background-color: #00659c;
      color: #FFFFFF;
    }
  }
  .label-value {
    background-color: #7dc3e8;
    color: #FFFFFF;
    margin-left: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 12px;
  }
  a.label-value {
    &:hover, &:focus, &:active {
      background-color: #00659c;
    }
  }
  }
}
@media (max-width: @screen-sm-min) {
  .k8s-label {
  // enable label to truncate
    width: 100%;
    .label {
      display: block;
      min-width: 50px;
    }
    .label-pair {
      width: 100%;
    }
  }
}

.k8s-labels {
  display: flex;
  flex-wrap: wrap;
}

.action-divider {
  color: @gray-light;
  padding: 0 6px;
}

.surface-shaded .table {
  background-color: transparent;
}

.environment-variables {
  &.table.table-bordered > tbody > tr > td:first-child {
    font-weight: bold;
    padding-right: 10px;
    vertical-align: top;
  }
  &.table.table-bordered > tbody > tr > td:last-child {
    word-break: break-all;
    width: 100%;

    .env-var-value {
      font-family: @font-family-monospace;

      a {
        font-family: @font-family-base;
      }
    }
  }
}

.info-popover, .warnings-popover {
  cursor: help;
  vertical-align: middle;
  margin-left: 2px;
  &.pficon-info {
    color: @color-pf-black-700;
  }
}

.label-tech-preview {
  display: inline-block;
  line-height: normal; // so that label height is adjusted and text vertically aligned within
  margin-top: 7px;
  @media(min-width: @screen-xs-min) {
    float: right;
    margin-left: 10px;
  }
  + h1 {
    @media(max-width: @screen-xxs-max) {
      margin-top: 11px;
    }
  }
  .page-header & {
    margin-top: 3px;
  }
}

// add an option for a single-column display at screen resolutions 0-479px
@media (max-width: @screen-xxs-max) {
  .col-xxs-12 {
    width: 100%;
  }
}

.icon-row {
  .icon-wrap {
    text-align: center;
    width: 30px;
  }
}

.order-service-config {
  .order-services-filter {
    margin-left: 0;
  }
  .blank-slate-pf {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .select-project-for-template {
    border-bottom: solid 1px @color-pf-black-300;
    padding-bottom: 10px;

    > h2 {
      margin-bottom: 20px;
      margin-top: 0;
    }
    .ui-select-container {
      display: inline-block;
      width: 275px;
    }
  }
  .services-item {
    &.show-selection {
      // Clear focus settings, keep before active settings
      &:focus {
        color: @text-color;
        .services-item-icon:after {
          border: none;
        }

        .services-item-name {
          color: @text-color;
        }
      }
      &.active {
        color: @link-hover-color;
        .services-item-icon:after {
          border: 2px solid @link-color;
        }
        .services-item-name {
          color: @link-hover-color;
        }
      }
    }
  }
}

.init-container-status-detail {
  flex: 1 1 0%;
}

.init-container-status,
.ui-select-choices-flex {
  display: flex;
}

.ui-select-choices-flex {
  justify-content: space-between;
}