Fix availability datepicker styles

Fix availability datepicker styles

Show input date in IE 11
Make input bigger and pull the down arrow to its left, so it responds
to input clicks.

Refs #590

.availability-view {
  @slot-height: 50px;
  @slot-border-size: 1px;
  @slot-border: @slot-border-size solid white;
  @slot-comment-bubble-size: 18px;
  @av-header-height: @input-height-base;
  display: flex;
  justify-content: space-between;
  width: 100%;

  &-single {
    display: block;

    .timeline-group {
      overflow-x: auto;
    }
  }
  .left {
    width: 19%;
  }
  .right {
    width: 80%;
  }
  // max-width calculated based on width: 19% and width: 120px
  @media (max-width: 630px) {
    .left {
      width: 120px;
    }
    .right {
      width: ~"calc(100% - 122px)";
    }
  }
  .top-left, .date-selector {
    display: flex;
    align-items: center;
    height: @av-header-height;
    margin-bottom: @padding-base-vertical;
    background-color: @brand-primary;
    color: white;
    padding: 0 @padding-small-horizontal;
    font-size: @font-size-small;
  }
  .date-selector {
    justify-content: space-between;
    text-transform: lowercase;

    a:hover, a:focus {
      text-decoration: none;
    }

    .previous, .next {
      color: white;
      cursor: pointer;
      line-height: @av-header-height;
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
    }
    .previous::before, .next::after {
      font-family: 'Glyphicons Halflings';
      vertical-align: middle;
    }
    .previous::before {
      content: "\e079";
      padding-right: 5px;
    }
    .next::after {
      content: "\e080";
      padding-left: 5px;
    }
  }

  .date-picker {
    border: none;
    color: black;
    cursor: pointer;
    line-height: @av-header-height;
    input {
      background: none;
      color: white;
      cursor: pointer;
      text-align: left;
      width: 110px;
      height: @av-header-height;
      box-sizing: content-box;
      z-index: 3;
    }
    .react-date-field__calendar-icon {
      display: none;
    }
    &::after {
      font-family: 'Glyphicons Halflings';
      content: "\e252";
      color: white;
      vertical-align: middle;
      margin-left: -20px;
    }
  }
  .group-info {
    background-color: @gray-lighter;

    .group-name, .resource-info {
      height: @slot-height;
    }
    .group-name {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      line-height: @headings-line-height;
      font-weight: @headings-font-weight;
      font-size: @font-size-base;
      color: @headings-color;

      .name {
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .resource-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-size: @font-size-small;
    padding: @padding-xs-vertical @padding-base-horizontal;
    line-height: 16px;

    &-selected {
      background-color: @gray-light;
    }
    .favorite-icon {
      color: red; // @favorite-color;
      padding: 3px;
      font-size: 12px;
    }
    .name {
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;

      a {
        color: @text-color;
        font-size: @font-size-small;
        font-weight: @headings-font-weight;
      }
    }
    .capacity {
      color: @gray;
    }
  }
  .timeline-groups {
    width: 100%;
    overflow-x: auto;
  }
  .timeline-group {
    position: relative;
    &-current-time {
      position: absolute;
      height: 100%;
      width: 2px;
      background-color: @black;
      opacity: 0.25;
    }
    .sticky {
      overflow: hidden;
      z-index: 10;
    }
    .hours {
      display: flex;

      .hour {
        display: flex;
        align-items: center;
        height: @slot-height;
        flex-shrink: 0;
        margin: 0;
        border: @slot-border;
        background-color: @gray-lighter;
        padding: @padding-small-vertical @padding-small-horizontal;
        font-size: @font-size-small;

        &-start-selected {
          background: linear-gradient(to right, @gray-light 49.9%, @gray-lighter 50%);
        }
        &-end-selected {
          background: linear-gradient(to left, @gray-light 49.9%, @gray-lighter 50%);
        }
      }
    }
  }
  .availability-timeline {
    display: flex;
  }
  .reservation-link, .reservation-slot {
    height: @slot-height;
    position: relative;
  }
  .reservation-link.with-comments::after {
    font-family: 'Glyphicons Halflings';
    content: "\e111";
    position: absolute;
    top: -(@slot-comment-bubble-size / 2 + @slot-border-size * 2);
    right: -(@slot-comment-bubble-size / 2 + @slot-border-size * 2);
    width: @slot-comment-bubble-size;
    height: @slot-comment-bubble-size;
    font-size: @slot-comment-bubble-size / 2;
    color: white;
    line-height: @slot-comment-bubble-size;
    text-align: center;
    background-color: @brand-primary;
    border: @slot-border;
    border-width: @slot-border-size * 2;
    border-radius: 50%;
    z-index: 1;
    box-sizing: content-box;
  }
  .reservation, .reservation-slot {
    display: inline-flex;
    margin: 0;
    border: @slot-border;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .reservation {
    height: @slot-height;
    background-color: @brand-success;
    color: white;
    font-size: @font-size-small;
    align-items: center;
    padding: @padding-small-vertical @padding-small-horizontal;
    overflow: hidden;
    cursor: pointer;

    &-link:hover {
      text-decoration: none;
    }
    &.requested {
      background-color: @brand-primary;
    }
    .names {
      height: 100%;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
    }
  }
  .reservation-slot {
    background-color: @gray-lighter;
    overflow: hidden;

    &-selectable {
      background-color: @gray-light;
      cursor: pointer;
    }
    &-selected {
      background-color: @brand-primary;
    }
    .a11y-text {
      position: relative;
      left: 100px;
    }
  }
}

.reservation-slot-popover {
  .popover-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  &-cancel {
    cursor: pointer;
  }
  .reservation-slot-popover-length {
    color: @brand-primary;
  }
}
.reservation-popover {
  hr {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.availability-view {
  @slot-height: 50px;
  @slot-border-size: 1px;
  @slot-border: @slot-border-size solid white;
  @slot-comment-bubble-size: 18px;
  @av-header-height: @input-height-base;
  display: flex;
  justify-content: space-between;
  width: 100%;

  &-single {
    display: block;

    .timeline-group {
      overflow-x: auto;
    }
  }
  .left {
    width: 19%;
  }
  .right {
    width: 80%;
  }
  // max-width calculated based on width: 19% and width: 120px
  @media (max-width: 630px) {
    .left {
      width: 120px;
    }
    .right {
      width: ~"calc(100% - 122px)";
    }
  }
  .top-left, .date-selector {
    display: flex;
    align-items: center;
    height: @av-header-height;
    margin-bottom: @padding-base-vertical;
    background-color: @brand-primary;
    color: white;
    padding: 0 @padding-small-horizontal;
    font-size: @font-size-small;
  }
  .date-selector {
    justify-content: space-between;
    text-transform: lowercase;

    a:hover, a:focus {
      text-decoration: none;
    }

    .previous, .next {
      color: white;
      cursor: pointer;
      line-height: @av-header-height;
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
    }
    .previous::before, .next::after {
      font-family: 'Glyphicons Halflings';
      vertical-align: middle;
    }
    .previous::before {
      content: "\e079";
      padding-right: 5px;
    }
    .next::after {
      content: "\e080";
      padding-left: 5px;
    }
  }

  .date-picker {
    border: none;
    color: black;
    cursor: pointer;
    line-height: @av-header-height;
    input {
      background: none;
      color: white;
      cursor: pointer;
      text-align: center;
      width: 100px;
    }
    .react-date-field__calendar-icon {
      display: none;
    }
    &::after {
      font-family: 'Glyphicons Halflings';
      content: "\e252";
      color: white;
      vertical-align: middle;
      padding-left: 5px;
    }
  }
  .group-info {
    background-color: @gray-lighter;

    .group-name, .resource-info {
      height: @slot-height;
    }
    .group-name {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      line-height: @headings-line-height;
      font-weight: @headings-font-weight;
      font-size: @font-size-base;
      color: @headings-color;

      .name {
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .resource-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-size: @font-size-small;
    padding: @padding-xs-vertical @padding-base-horizontal;
    line-height: 16px;

    &-selected {
      background-color: @gray-light;
    }
    .favorite-icon {
      color: red; // @favorite-color;
      padding: 3px;
      font-size: 12px;
    }
    .name {
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;

      a {
        color: @text-color;
        font-size: @font-size-small;
        font-weight: @headings-font-weight;
      }
    }
    .capacity {
      color: @gray;
    }
  }
  .timeline-groups {
    width: 100%;
    overflow-x: auto;
  }
  .timeline-group {
    position: relative;
    &-current-time {
      position: absolute;
      height: 100%;
      width: 2px;
      background-color: @black;
      opacity: 0.25;
    }
    .sticky {
      overflow: hidden;
      z-index: 10;
    }
    .hours {
      display: flex;

      .hour {
        display: flex;
        align-items: center;
        height: @slot-height;
        flex-shrink: 0;
        margin: 0;
        border: @slot-border;
        background-color: @gray-lighter;
        padding: @padding-small-vertical @padding-small-horizontal;
        font-size: @font-size-small;

        &-start-selected {
          background: linear-gradient(to right, @gray-light 49.9%, @gray-lighter 50%);
        }
        &-end-selected {
          background: linear-gradient(to left, @gray-light 49.9%, @gray-lighter 50%);
        }
      }
    }
  }
  .availability-timeline {
    display: flex;
  }
  .reservation-link, .reservation-slot {
    height: @slot-height;
    position: relative;
  }
  .reservation-link.with-comments::after {
    font-family: 'Glyphicons Halflings';
    content: "\e111";
    position: absolute;
    top: -(@slot-comment-bubble-size / 2 + @slot-border-size * 2);
    right: -(@slot-comment-bubble-size / 2 + @slot-border-size * 2);
    width: @slot-comment-bubble-size;
    height: @slot-comment-bubble-size;
    font-size: @slot-comment-bubble-size / 2;
    color: white;
    line-height: @slot-comment-bubble-size;
    text-align: center;
    background-color: @brand-primary;
    border: @slot-border;
    border-width: @slot-border-size * 2;
    border-radius: 50%;
    z-index: 1;
    box-sizing: content-box;
  }
  .reservation, .reservation-slot {
    display: inline-flex;
    margin: 0;
    border: @slot-border;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .reservation {
    height: @slot-height;
    background-color: @brand-success;
    color: white;
    font-size: @font-size-small;
    align-items: center;
    padding: @padding-small-vertical @padding-small-horizontal;
    overflow: hidden;
    cursor: pointer;

    &-link:hover {
      text-decoration: none;
    }
    &.requested {
      background-color: @brand-primary;
    }
    .names {
      height: 100%;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
    }
  }
  .reservation-slot {
    background-color: @gray-lighter;
    overflow: hidden;

    &-selectable {
      background-color: @gray-light;
      cursor: pointer;
    }
    &-selected {
      background-color: @brand-primary;
    }
    .a11y-text {
      position: relative;
      left: 100px;
    }
  }
}

.reservation-slot-popover {
  .popover-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  &-cancel {
    cursor: pointer;
  }
  .reservation-slot-popover-length {
    color: @brand-primary;
  }
}
.reservation-popover {
  hr {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}


不设置 bottom 值，不然不好设置 `textarea` line number 模式下的高度。 (#233)

@import "../lib.less";
@import (reference) "../input.less";

.veui-textarea {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 300px;
  border: 1px solid @veui-gray-color-5;
  padding: 0;
  background-color: @veui-gray-color-7;
  font-size: @veui-font-size-normal;
  line-height: @veui-height-normal;
  transition: border-color .2s, color .2s;
  color: @veui-text-color-normal;

  .veui-field-invalid & {
    &:extend(._veui-input-invalid all);
  }

  &:hover,
  &-focused {
    border-color: @veui-gray-color-3;
  }

  &-focused {
    color: @veui-text-color-strong;
  }

  &-input,
  &-measurer {
    font: inherit;
  }

  &-input {
    position: relative;
    float: right;
    width: 100%;
    height: 150px;
    border: none;
    outline: none;
    padding: 0 10px;
    background-color: #fff;
    z-index: 1;
    resize: none;
  }

  &-rows &-input {
    height: auto;
  }

  &-measurer + &-input {
    max-width: ~"calc(100% - @{veui-height-normal})";
  }

  &-measurer {
    .absolute(0, 0, _, 0);
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: @veui-text-color-weak;

    &-line {
      overflow: hidden;

      &-number {
        float: left;
        min-width: @veui-height-normal;
        text-align: center;
      }

      &-content {
        .padding(_, 10px);
        overflow: hidden;
        visibility: hidden;
      }
    }
  }

  &[ui~="small"] {
    font-size: @veui-font-size-small;
    line-height: @veui-height-small;
  }

  &[ui~="large"] {
    font-size: @veui-font-size-large;
    line-height: @veui-height-large;
  }

  &.veui-readonly,
  &.veui-disabled {
    &,
    &:hover {
      border-color: @veui-gray-color-5;
      color: @veui-text-color-weak;
    }

    & .veui-textarea-input {
      background-color: @veui-gray-color-8;
    }
  }

  &.veui-disabled {
    &,
    & .veui-textarea-input {
      cursor: not-allowed;
    }
  }
}

@import "../lib.less";
@import (reference) "../input.less";

.veui-textarea {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 300px;
  border: 1px solid @veui-gray-color-5;
  padding: 0;
  background-color: @veui-gray-color-7;
  font-size: @veui-font-size-normal;
  line-height: @veui-height-normal;
  transition: border-color .2s, color .2s;
  color: @veui-text-color-normal;

  .veui-field-invalid & {
    &:extend(._veui-input-invalid all);
  }

  &:hover,
  &-focused {
    border-color: @veui-gray-color-3;
  }

  &-focused {
    color: @veui-text-color-strong;
  }

  &-input,
  &-measurer {
    font: inherit;
  }

  &-input {
    position: relative;
    float: right;
    width: 100%;
    height: 150px;
    border: none;
    outline: none;
    padding: 0 10px;
    background-color: #fff;
    z-index: 1;
    resize: none;
  }

  &-rows &-input {
    height: auto;
  }

  &-measurer + &-input {
    max-width: ~"calc(100% - @{veui-height-normal})";
  }

  &-measurer {
    .absolute(0);
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: @veui-text-color-weak;

    &-line {
      overflow: hidden;

      &-number {
        float: left;
        min-width: @veui-height-normal;
        text-align: center;
      }

      &-content {
        .padding(_, 10px);
        overflow: hidden;
        visibility: hidden;
      }
    }
  }

  &[ui~="small"] {
    font-size: @veui-font-size-small;
    line-height: @veui-height-small;
  }

  &[ui~="large"] {
    font-size: @veui-font-size-large;
    line-height: @veui-height-large;
  }

  &.veui-readonly,
  &.veui-disabled {
    &,
    &:hover {
      border-color: @veui-gray-color-5;
      color: @veui-text-color-weak;
    }

    & .veui-textarea-input {
      background-color: @veui-gray-color-8;
    }
  }

  &.veui-disabled {
    &,
    & .veui-textarea-input {
      cursor: not-allowed;
    }
  }
}


some slight tweaks to the title bar actions

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}

.content {
  ui-view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: ~"calc(100vh - 41px)";

    .container {
      text-align: center;
      margin-top: -45px;

      h1 {
        margin-top: 0;
        margin-bottom: 10px;
      }
    }
  }
}

.subtitle {
    color: gray;
}

.title-bar {
  -webkit-user-select: none;
  border-bottom: 1px solid #aaa;
  display: table;
  width: 100%;

  .title {
    cursor: default;
    display: table-cell;
    padding: 11px;
    -webkit-app-region: drag;
  }

  .actions {
    display: table-cell;
    width: 114px;
    font-size: 22px;
    cursor: default;

    span {
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      min-width: 18px;
    }

    .help {
      &::before {
        content: '?';
      }
    }

    .divider {
      cursor: default;
      opacity: 0.4;
      border-right: 1px solid #aaa;
      min-width: initial;
      min-height: 26px;
      margin-right: 8px;
    }

    .minimize {
      margin-top: -6px;

      &::before {
        content: '_';
      }
    }

    .restore {
      font-size: 33px;
      line-height: 16px;
      margin-top: -6px;

      &::before {
        content: '\25A1';
      }
    }

    .close {
      margin-top: 1px;

      &::before {
        content: 'X';
      }
    }
  }
}

.game-logo-container {
  padding: 8px;
}

.profile-controls {
  select, span {
    display: inline-block;
    vertical-align: middle;
  }

  span.fa {
    margin-left: 4px;
    font-size: 30px;
    cursor: pointer;
  }

  select {
    padding: 4px;
    font-size: 20px;
    min-width: 140px;
    -webkit-appearance: none;

    // background
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      ~"calc(100% - 15px) calc(50% + 2px),
      calc(100% - 10px) calc(50% + 2px),
      calc(100% - 1.5em) 50%";
    background-size:
      5px 5px,
      5px 5px,
      1px 80%;
    background-repeat: no-repeat;
  }
}

.primary-actions {
  margin: 16px;

  .action-box {
    font-size: 28px;
    padding: 8px 16px;
  }
}

.action-box {
  color: #fff;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  background-color: #53b6bf;
  border-radius: 2px;
  margin: 2px;
  font-size: 18px;
  padding: 4px 8px;
  font-weight: 500;
  -webkit-transition: background-color 0.2s ease-in-out;

  &:hover {
    background-color: #4d5e6b;
  }
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}

.content {
  ui-view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: ~"calc(100vh - 41px)";

    .container {
      text-align: center;
      margin-top: -45px;

      h1 {
        margin-top: 0;
        margin-bottom: 10px;
      }
    }
  }
}

.subtitle {
    color: gray;
}

.title-bar {
  -webkit-user-select: none;
  border-bottom: 1px solid #aaa;
  display: table;
  width: 100%;

  .title {
    cursor: default;
    display: table-cell;
    padding: 11px;
    -webkit-app-region: drag;
  }

  .actions {
    display: table-cell;
    width: 112px;
    font-size: 22px;
    cursor: default;

    span {
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      min-width: 18px;
    }

    .help {
      &::before {
        content: '?';
      }
    }

    .divider {
      cursor: default;
      opacity: 0.4;
      border-right: 1px solid #aaa;
      min-width: initial;
      min-height: 26px;
      margin-right: 8px;
    }

    .minimize {
      &::before {
        content: '_';
      }
    }

    .restore {
      font-size: 33px;
      line-height: 16px;
      margin-top: -6px;

      &::before {
        content: '\25A1';
      }
    }

    .close {
      &::before {
        content: 'X';
      }
    }
  }
}

.game-logo-container {
  padding: 8px;
}

.profile-controls {
  select, span {
    display: inline-block;
    vertical-align: middle;
  }

  span.fa {
    margin-left: 4px;
    font-size: 30px;
    cursor: pointer;
  }

  select {
    padding: 4px;
    font-size: 20px;
    min-width: 140px;
    -webkit-appearance: none;

    // background
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      ~"calc(100% - 15px) calc(50% + 2px),
      calc(100% - 10px) calc(50% + 2px),
      calc(100% - 1.5em) 50%";
    background-size:
      5px 5px,
      5px 5px,
      1px 80%;
    background-repeat: no-repeat;
  }
}

.primary-actions {
  margin: 16px;

  .action-box {
    font-size: 28px;
    padding: 8px 16px;
  }
}

.action-box {
  color: #fff;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  background-color: #53b6bf;
  border-radius: 2px;
  margin: 2px;
  font-size: 18px;
  padding: 4px 8px;
  font-weight: 500;
  -webkit-transition: background-color 0.2s ease-in-out;

  &:hover {
    background-color: #4d5e6b;
  }
}


remove merger content

remove merger content

input[type='date'],
input[type='email'],
input[type='number'],
input[type='text'],
textarea {
  &.ng-dirty {

    &.ng-valid {
      border-color: @success-color;
    }

    &.ng-invalid {
      border-color: @error-color;
    }
  }
}

.timepicker.ng-dirty {
  &.ng-valid-time input {
    border: 1px solid @success-color !important;
  }

  &.ng-invalid-time input {
    border: 1px solid @error-color !important;
  }
}

legend::after{
  width: 50% !important;
}

.padding input[type=number]{
  width:75px;
}

.padding {
  margin-left: 10px;
}

@media (max-width: 1200px) {
  .padding {
      margin-left: 0px;
  }
}

input[type='date'],
input[type='email'],
input[type='number'],
input[type='text'],
textarea {
  &.ng-dirty {

    &.ng-valid {
      border-color: @success-color;
    }

    &.ng-invalid {
      border-color: @error-color;
    }
  }
}

.timepicker.ng-dirty {
  &.ng-valid-time input {
    border: 1px solid @success-color !important;
  }

  &.ng-invalid-time input {
    border: 1px solid @error-color !important;
  }
}

input[type=number]{
  width: 75px;
}

legend::after{
  width: 50% !important;
}

.padding {
  margin-left: 10px;
}

@media (max-width: 1200px) {
  .padding {
      margin-left: 0px;
  }
}


removes ns dropdown menu animation

removes ns dropdown menu animation

@import "../../styles/variables.less";
@import "../../styles/themes/cdap/mixins.less";
@import "../../../bower_components/bootstrap/less/mixins.less";

my-breadcrumbs, my-breadcrumb {
  @media (max-width: @screen-sm-max) {
    display: none;
  }
  @media (min-width: @screen-md-min) {
    background-color: white;
    border-bottom: 1px solid @panel-default-border;
    position: absolute;
    top: 75px;
    right: 0;
    left: 0;
    height: 40px;
    line-height: 40px;

    .crumbs {
      .flexbox();
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      height: 40px;

      li.dropdown {
        &.open {
          a.ns-dropdown-toggle:focus {
            border-color: transparent;
          }
        }
      }
    }
    ul.nav {
      margin: 0;
      white-space: nowrap;
      .order(1);
      .open {
        > a, > a:hover, > a:focus {
          background-color: transparent;
        }
      }
    }

    a.ns-dropdown-toggle {
      color: @cdap-gray;
      font-weight: 500;
      padding: 1px 0 0;
      position: relative;
      top: -1px;
      &:hover, &:focus {
        background-color: transparent;
      }
      &:after {
        content: url('@{img-path}/chevron_front.png');
        overflow: hidden;
        position: absolute;
        top: 1px;
        height: 40px;
        z-index: 99;
      }
      > span {
        line-height: 40px;
        vertical-align: top;
        &:first-child {
          padding-right: 5px;
        }
        &:last-child {
          margin-right: 7px;
        }
      }
    }

    ul.dropdown-menu {
      width: 120px;
      height: auto;
      max-height: 290px;
      min-width: 0;
      background-color: white;
      border-color: white;
      padding: 10px 0;
      margin-top: 1px;
      .border-radius(4px);
      .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
      overflow-x: hidden;
      overflow-y: scroll;
      &.am-flip-x {
        .transition(none);
        -webkit-animation-duration: 0s;
        animation-duration: 0s;
      }
      @media (max-width: @screen-md-max) {
        position: absolute;
      }
      > li {
        background-color: white;
        padding: 0;
        &:focus {
          outline: 0;
        }
        > a {
          color: @cdap-header;
          font-weight: 500;
          background-color: white;
          padding-right: 10px;
          padding-left: 10px;
          &:hover, &:focus {
            color: @cdap-orange;
          }
          &:focus {
            outline: 0;
          }
        }
        i {
          display: inline-block;
          width: 13px;
        }
        .active {
          color: #c4c4c4;
          pointer-events: none;
        }
      }
    }

    .breadcrumb {
      background-color: transparent;
      font-weight: 500;
      height: 40px;
      .order(2);
      white-space: nowrap;
      > li {
        display: inline-block;
        height: 40px;
        position: relative;
        text-align: center;
        &:after {
          z-index: 99;
        }
        &:not(:last-child), &:not(:only-child) {
          &:before {
            content: none;
          }
          &:after {
            content: url('@{img-path}/chevron_front.png');
            height: 40px;
            top: 0;
            right: 0;
            display: inline-block;
            position: relative;
          }
        }
        &:nth-last-child(2) {
          &:after {
            content: '';
          }
        }
        &:last-child, &:only-child {
          background-image: url('@{img-path}/gray_chevron_body.png');
          &:before, &:after {
            background-color: white;
            height: 40px;
            top: 0;
          }
          &:before {
            content: url('@{img-path}/gray_chevron_back.png');
            display: inline-block;
            left: 0;
            padding: 0;
            position: relative;
          }
          &:after {
            content: url('@{img-path}/gray_chevron_front.png');
            right: 0;
            position: absolute;
            border-bottom: 1px solid #ddd;
          }
          span {
            color: @cdap-header;
            padding-right: 18px;
          }
        }
        a, span {
          display: inline-block;
          vertical-align: top;
        }
        a {
          color: @cdap-gray;
          padding-left: 11px;
          &:hover, &:focus {
            text-decoration: none;
          }
        }
        &:first-child {
          a {
            padding-left: 18px;
          }
        }
      }
    }
  }
}

@import "../../styles/variables.less";
@import "../../styles/themes/cdap/mixins.less";
@import "../../../bower_components/bootstrap/less/mixins.less";

my-breadcrumbs, my-breadcrumb {
  @media (max-width: @screen-sm-max) {
    display: none;
  }
  @media (min-width: @screen-md-min) {
    background-color: white;
    border-bottom: 1px solid @panel-default-border;
    position: absolute;
    top: 75px;
    right: 0;
    left: 0;
    height: 40px;
    line-height: 40px;
    .crumbs {
      .flexbox();
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      height: 40px;

      li.dropdown {
        ul.dropdown-menu {
          width: 120px;
          max-height: 290px;
          min-width: 0;
          background-color: white;
          border-color: white;
          padding: 10px 0;
          margin-top: 1px;
          .border-radius(4px);
          .box-shadow(0 6px 12px rgba(0, 0, 0, 0.175));
          overflow-x: hidden;
          overflow-y: scroll;
          @media (max-width: @screen-md-max) {
            position: absolute;
          }
          > li {
            background-color: white;
            padding: 0;
            &:focus {
              outline: 0;
            }
            > a {
              color: @cdap-header;
              font-weight: 500;
              background-color: white;
              padding-right: 10px;
              padding-left: 10px;
              &:hover, &:focus {
                color: @cdap-orange;
              }
              &:focus {
                outline: 0;
              }
            }
            i {
              display: inline-block;
              width: 13px;
            }
            .active {
              color: #c4c4c4;
              pointer-events: none;
            }
          }
        }
        &.open {
          a.ns-dropdown-toggle:focus {
            border-color: transparent;
          }
        }
      }
    }
    ul.nav {
      margin: 0;
      white-space: nowrap;
      .order(1);
      .open {
        > a, > a:hover, > a:focus {
          background-color: transparent;
        }
      }
    }

    a.ns-dropdown-toggle {
      color: @cdap-gray;
      font-weight: 500;
      padding: 1px 0 0;
      position: relative;
      top: -1px;
      &:hover, &:focus {
        background-color: transparent;
      }
      &:after {
        content: url('@{img-path}/chevron_front.png');
        overflow: hidden;
        position: absolute;
        top: 1px;
        height: 40px;
        z-index: 99;
      }
      > span {
        line-height: 40px;
        vertical-align: top;
        &:first-child {
          padding-right: 5px;
        }
        &:last-child {
          margin-right: 7px;
        }
      }
    }

    .breadcrumb {
      background-color: transparent;
      font-weight: 500;
      height: 40px;
      .order(2);
      white-space: nowrap;
      > li {
        display: inline-block;
        height: 40px;
        position: relative;
        text-align: center;
        &:after {
          z-index: 99;
        }
        &:not(:last-child), &:not(:only-child) {
          &:before {
            content: none;
          }
          &:after {
            content: url('@{img-path}/chevron_front.png');
            height: 40px;
            top: 0;
            right: 0;
            display: inline-block;
            position: relative;
          }
        }
        &:nth-last-child(2) {
          &:after {
            content: '';
          }
        }
        &:last-child, &:only-child {
          background-image: url('@{img-path}/gray_chevron_body.png');
          &:before, &:after {
            background-color: white;
            height: 40px;
            top: 0;
          }
          &:before {
            content: url('@{img-path}/gray_chevron_back.png');
            display: inline-block;
            left: 0;
            padding: 0;
            position: relative;
          }
          &:after {
            content: url('@{img-path}/gray_chevron_front.png');
            right: 0;
            position: absolute;
            border-bottom: 1px solid #ddd;
          }
          span {
            color: @cdap-header;
            padding-right: 18px;
          }
        }
        a, span {
          display: inline-block;
          vertical-align: top;
        }
        a {
          color: @cdap-gray;
          padding-left: 11px;
          &:hover, &:focus {
            text-decoration: none;
          }
        }
        &:first-child {
          a {
            padding-left: 18px;
          }
        }
      }
    }
  }
}


removed select outline styling from tabs