@import "kie-variables.less";

.kie-container--page {
  margin-top: @pf-spacer-xxl;
  line-height: 1;
}

// override parts of patternfly horizontal nav and utility nav
@navbar-pf-navbar-primary-bg-color-stop: @navbar-pf-bg-color; // #383F43
@navbar-pf-navbar-utility-border-color: @navbar-pf-bg-color;
@navbar-pf-navbar-utility-color: @color-pf-white;
@navbar-pf-navbar-utility-hover-bg-color: @navbar-pf-bg-color;

.navbar-toggle,
.navbar-pf .navbar-utility {
  top: 13px; //adjust top to vertically center the smaller item in the large masthead
  .open > a,
  .open > a:hover {
    background-color: @navbar-pf-bg-color;
  }
}

// page title for the case list template
.kie-page__title {
  font-size: @font-size-h1;
  margin-bottom: @pf-spacer-lg;
}

// remove default space above and below breadcrumb
.breadcrumb {
  padding-bottom: 0;
  padding-top: 0;
}

//remove default border and shadow from toolbar
.kie-toolbar {
  border-bottom: none;
  box-shadow: none;
}

// title and subtitle in a toolbar
.kie-case-view-header__title {
  font-size: @font-size-h3;
}

.kie-case-view-header__subtitle {
  font-size: @font-size-base;
  font-weight: 600;
}

// align the first item
.toolbar-pf .form-group:first-of-type {
  padding-left: 0;
}

// container for the main content on a dashboard or overview
.kie-dashboard-container {
  background-color: @color-pf-black-150;
  width: calc(~"100%" - @grid-gutter-width);
  margin-left: calc(@grid-gutter-width / 2);
  margin-right: calc(@grid-gutter-width / 2);
  margin-top: @pf-spacer-sm;
}

// Building blocks are cards
.kie-card__toolbar {
  float: right;
  margin-top: -.5em; //ugly tweak to line up the toolbar
}

.kie-toolbar__group {
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  border-right: 1px solid @color-pf-black-300;
  &:last-of-type {
    border-color: transparent;
    padding-right: 0;
  }
}

// help the header align things vertically
.kie-vertical-align {
  display: flex;
  align-items: center;
}

// header on case view
.kie-case-view-header {
  margin-bottom: @pf-spacer-md;
  @media (min-width: @screen-sm) {
    .kie-vertical-align;
  }
}

.kie-case-view-header__lhs {
  margin-bottom: @pf-spacer-sm;
  @media (min-width: @screen-sm) {
    margin-bottom: 0;
  }
}

.kie-case-view-header__rhs {
  @media (min-width: @screen-sm) {
    .kie-vertical-align;
  }
}

.kie-case-view-header__stages {
  margin-bottom: @pf-spacer-sm;
  @media (min-width: @screen-sm) {
    margin-bottom: 0;
  }
}

.kie-stages-div{
  display: flex;
  width:100%;
}

.kie-case-view-header__actions {
  @media (min-width: @screen-sm) {
    .kie-vertical-align;
    justify-content: flex-end;
  }
}

// copied from patternfly cards.less card-pf-subtitle and extended
.kie-card__subtitle {
  @media (max-width: @screen-xs-max) {
    // At xs, all columns will stack, so increase spacing above the subtitle
    .card-pf-body [class^="col"] + [class^="col"] & {
      margin-top: (@pf-spacer-xxl);
    }
  }
  @media (max-width: @screen-md-max) {
    // At md, the 3rd column will still be under the second, so only increase spacing above the subtitle of the third column
    .card-pf-body [class^="col"] + [class^="col"] + [class^="col"] & {
      margin-top: (@pf-spacer-xxl);
    }
  }

}

// subtitle icons for Actions
.kie-card__subtitle-icon {
  font-size: @font-size-h1;
  padding-right: .5em;
  &--available {
    color: @kie-color-available;
  }
  &--inprogress {
    color: @kie-color-inprogress;
  }
  &--complete {
    color: @kie-color-complete;
  }
}

.kie-card-body--embedded {
  padding-left: @spacer;
  padding-right: @spacer;
}

// Pagination arrows for under a scrollbox
.kie-list__pagination {
  text-align: center;
  padding-top: @pf-spacer-lg;
  //adjust size of chevron arrows
  .fa, .pficon {
    font-size: @icon-size-sm;
    position: relative;
    padding-left: @pf-spacer-xs;
    padding-right: @pf-spacer-xs;
  }
}

// scrollbox adds a shadow indicating if there is more content above/below the current position
.kie-scrollbox {
  //IMPORTANT: can change to overflow-y: auto to see how the scroll shadows work. JS will have to manually set the scroll of the list
  //overflow-y: hidden;
  line-height: 1.66666667;
  height: 15em;
  background: /* Shadow covers */ linear-gradient(@color-pf-white, rgba(255, 255, 255, 0)), //top
  linear-gradient(rgba(255, 255, 255, 0), @color-pf-white) 0 100%, //bottom
    /* Shadows */ linear-gradient(@color-pf-black-150, rgba(255, 255, 255, 0)),
  linear-gradient(rgba(255, 255, 255, 0), @color-pf-black-150) 0 100%;
  background-repeat: no-repeat;
  background-color: @color-pf-white;
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
  border-bottom: 1px solid @color-pf-black-300;

  .list-group {
    margin-bottom: 0;
  }
  .list-group-item {
    background-color: transparent;
    border-top: 1px solid @color-pf-black-200;
    border-bottom: 1px solid @color-pf-black-200;
    &:last-of-type {
      border-bottom: none;
    }
  }

  .kie-list-group-item-content {
    display: flex;
  }

}

.kie-scrollbox-show-overflow{
  overflow-y: visible;
}

.kie-start-scroll{
  background:  linear-gradient(@color-pf-black-150, rgba(255, 255, 255, 0)) ;
  background-size: 100% 10px;
  background-repeat: no-repeat;
}

.kie-end-scroll{
  background: linear-gradient(rgba(255, 255, 255, 0), @color-pf-black-150) 0 100%;
  background-size: 100% 14px;
  background-repeat: no-repeat;
}

.kie-both-scroll{
  background: linear-gradient(@color-pf-black-150, rgba(255, 255, 255, 0)),
              linear-gradient(rgba(255, 255, 255, 0), @color-pf-black-150) 0 100%;
  background-size: 100% 10px, 100% 14px;
  background-repeat: no-repeat;
}
.kie-list-view--embedded {
  // wrap the list-view as if it were a narrow screen width since it is now in an embedded card
  .list-view-pf-description {
    @media (min-width: @screen-md-min) {
      flex-flow: wrap;
    }
    .list-group-item-heading,
    .list-group-item-text {
      @media (min-width: @screen-md-min) {
        flex-basis: 100%;
      }
    }
  }
}

.kie-milestones__list-group-item {
  padding-left: @pf-spacer-xs;
}

.kie-milestones__main-info {
  padding-top: 0;
  padding-bottom: 0;
}

.kie-milestones__item--completed,
.kie-milestones__item--terminated {
  color: @color-pf-black-500;
}

.kie-milestones__list-view-pf-left {
  padding-right: @pf-spacer-md
}

// overcoming specificity
.list-view-pf-left .fa.kie-milestones__icon--completed,
.list-view-pf-left .fa.kie-milestones__icon--terminated {
  border-color: transparent;
}

.kie-card-heading--embedded {
  border-bottom: 1px solid @color-pf-black-500;
  padding-left: @spacer;
}

// fix clickable area of a kebab
.dropdown-kebab-pf .btn {
  padding-left: @pf-spacer-sm;
  padding-right: @pf-spacer-sm;
  margin-right: -@pf-spacer-sm;
}

// case details uses dl
dd:not(:last-child) {
  margin-bottom: @pf-spacer-md;
}

.kie-btn-link {
  color: @color-pf-black;
  &:hover {
    color: @link-hover-color;
  }
}

// Activities
.kie-scrollbox--activities {
  max-height: 20em;
  overflow-y: auto;
  border-bottom: none;
  .list-group-item {
    border-top: none;
    border-bottom: none;
  }

}

.kie-activities {
  border-top: 0;
  margin-bottom: 0;
}

.kie-activities__list-group-item {
  background-color: transparent;
  border-top: 0;
  border-bottom: 0;
  .list-group-item-heading,
  .list-group-item-text {
    font-size: @font-size-relative-base;
    margin-right: 0;
  }
}

.kie-activities__list-view-pf-left {
  .list-view-pf-icon-sm {
    background-color: @color-pf-white;
  }
}

.kie-activities__list-view-pf-left .pficon.kie-no-highlight,
.kie-activities__list-view-pf-left .fa.kie-no-highlight {
  background-color: @color-pf-black-200;
  border-color: transparent;
}
.kie-activities__main-info {
  padding-top: 0;
  padding-bottom: 0;
  flex-wrap: wrap;
}
.kie-activities__list-view-pf-description {
  width: 100%;
}
.kie-activities--dotted-line {
  background-image: linear-gradient(to bottom, @color-pf-black-300, @color-pf-black-300 3px, @color-pf-white 3px, @color-pf-white);
  background-repeat: repeat-y;
  background-size: 1px 5px;
  background-position: 30px 1px;
}

// Comments
.kie-scrollbox--comments{
  overflow: auto;
}

.kie-list-group-item--header {
  border-bottom: 2px solid @color-pf-black-300;
  border-top: 0;
  display: flex;
  align-items: center;
  padding-top: 0;
}
.kie-comments__add-button {
  font-size: @icon-size-sm;
}

.kie-comments__pf-actions {
  margin-top: 0;
  margin-bottom: 0;
}
.kie-comments__main-info {
  padding-top: 0;
  padding-bottom: 0;
}
.kie-item-heading__role {
  font-weight: @pf-font-weight-normal;
}
.kie-comments__list-view-pf-description {
  width: 100%;
}
.kie-comments__list-view-pf-left .pficon.kie-no-highlight,
.kie-comments__list-view-pf-left .fa.kie-no-highlight {
  background-color: @color-pf-black-200;
  border-color: transparent;
}

.kie-card-frame{
  margin-left: -10px;
  margin-right: -10px;
}

.card-pf {
  margin: 0 0px 20px;
}

.kie-card-large-height{
  min-height:@kie-card-large-height;
}

.kie-card-small-height{
  min-height:@kie-card-small-height;
}

.kie-full-width {
  width: 100%;
  display:inline-block;
}

.kie-scrollbox--milestones {
  height: 21em;
  overflow-y: auto;
  border-bottom: none;
  margin-left: -20px;
  margin-right: -20px;
}

.kie-roles-item-line{
  margin-left: 20px;
  margin-top: -20px;
  position : absolute;
}

.kie-roles-item-line-expanded{
  margin-left: 20px;
  margin-top: -12px;
  border: 1px solid #bbb;
  background-color: @color-pf-white;
  position : relative;
  float:right;
  z-index: 1;
}

.kie-more-info{
  cursor: pointer;
  z-index: 3;
}

.kie-more-info-link{
  text-decoration: none;
  cursor: pointer;
}

.kie-remove-role-item {
  margin-left: 3px;
  margin-top: 6px;
  cursor: pointer;
}

.kie-full-width {
  width: 100%;
  display:inline-block;
}

.kie-unassigned-color {
  color: #8b8d8f;
  cursor:not-allowed;
}

.kie-unassigned-padding-left{
  padding-left: 8px;
}

.kie-single-role-assignment-height{
  height: 40px;
}

