@c8y/style/styles/_tabs.less

Styles for Cumulocity IoT applications

.nav-tabs {
  display: flex;
  background-color: @nav-tabs-background-active;
  box-shadow: inset 0 -1px 0 0 @nav-tabs-border-color-default;
  color: @nav-tabs-color-default;

  > div,
  li {
    flex: 0 0 auto;
    > a,
    > button:not(.btn-clean) {
      padding: @nav-tabs-padding;
      height: @margin-64;
      border: none;
      background-color: @nav-tabs-background-default;
      color: @nav-tabs-color-default;
      line-height: @line-height-base;
      display: flex;
      flex-direction: column;
      transition: all 0.15s ease;
      position: relative;
      text-decoration: none;
      .label {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      @media (min-width: @grid-float-breakpoint) {
        flex-direction: row;
        height: @margin-48;
      }

      > [class^='dlt-c8y-icon-'],
      > [class*=' dlt-c8y-icon-'],
      > .c8y-icon {
        display: block;
        margin: 0 auto;
        margin-top: -2px;
        width: 1em;
        height: 18px;
        color: @nav-tabs-icon-color-default;
        font-size: @nav-tabs-icon-size;
        @media (min-width: @grid-float-breakpoint) {
          display: inline-block;
          margin-top: 0;
          margin-right: @margin-8;
          vertical-align: text-top;
        }
      }
      &:hover:not([disabled]) {
        outline: 2px solid @component-color-focus;
        outline-offset: -2px;
        background-color: @nav-tabs-background-hover;
        text-decoration: none;
        // border-radius: @component-border-radius-focus;
        > [class^='dlt-c8y-icon-'],
        > [class*=' dlt-c8y-icon-'],
        > .c8y-icon {
          color: @nav-tabs-icon-color-hover;
        }
      }
      &:focus {
        .c8y-focus-inset();
      }
      &[disabled] {
        opacity: @component-disabled-opacity !important;
        cursor: @cursor-disabled !important;
      }
    }
    // Active state, and its :hover to override normal :hover
    &.active > a,
    &.active > button:not([disabled]) {
      &,
      &:hover,
      &:focus {
        background-color: @nav-tabs-background-active;
        box-shadow:
          inset 0 @nav-tabs-border-width-active 0 0 @nav-tabs-border-color-active,
          inset 1px 0 0 0 @component-border-color,
          inset -1px 0 0 0 @component-border-color;
        font-weight: 500;
        cursor: default;
        outline: none;
        border-radius: 0 !important;
        pointer-events: none;
      }
      > [class^='dlt-c8y-icon-'],
      > [class*=' dlt-c8y-icon-'],
      > .c8y-icon {
        color: @nav-tabs-icon-color-active;
        opacity: 1;
      }
    }
  } // pulling this in mainly for less shorthand
  &.nav-justified {
    .nav-justified();
    .nav-tabs-justified();
  }
  .dashboard-template-marker {
    position: absolute;
    right: 6px;
    top: 9px;
  }
}

// Move borders to anchors instead of bottom of list
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified {
  > li > a {
    margin-right: 0;
    border-radius: @component-border-radius-base;
  }
  @media (min-width: @screen-sm-min) {
    > li > a {
      border-radius: @component-border-radius-base @component-border-radius-base 0 0;
    }
  }
}

// Tabbable tabs
// Hide tabbable panes to start, show them when `.active`
.tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}

// Dropdowns
// Specific dropdowns
.nav-tabs .dropdown-menu {
  // make dropdown border overlap tab border
  margin-top: -1px; // Remove the top rounded corners here since there is a hard edge above the menu

  .border-top-radius(0);
}

.mobile-tabs {
  margin: 0;
  padding: @margin-4 @margin-base;
  min-height: calc(@margin-base * 6);
  background-color: @brand-primary;
  color: @palette-high;
  .c8y-select-wrapper {
    border-color: transparent;
    background-color: transparent;
    color: inherit;
    font-size: 18px;
    &:after {
      color: inherit;
    }
    select {
      height: calc(@margin-base * 5);
      background-color: transparent;
      box-shadow: none;
      color: inherit;
      option {
        color: var(--gray-text, @text-color);
      }
    }
  }
  .btn-dot {
    color: @palette-high;
  }
}

.nav-tabs-vertical {
  display: block;
  padding-top: @margin-48;
  width: @nav-tabs-vertical-width;
  border: 0;
  box-shadow: none;
  > div,
  li {
    > a {
      display: flex;
      align-items: center;
      flex-direction: row;
      margin: 0;
      padding: @nav-tabs-vertical-padding;
      height: auto;
      border: 0;
      box-shadow: inset 0 -1px 0 @nav-tabs-border-color-default;
      text-transform: none;
      font-size: inherit;
      transition: all 0.25s ease;

      [class^='dlt-c8y-icon-'],
      [class*=' dlt-c8y-icon-'],
      .c8y-icon {
        margin: 0 @margin-8 0 0;
        width: 1.25em;
        ~ span {
          display: inline-block;
          overflow: hidden;
          max-width: 100%;
          vertical-align: middle;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    &.active {
      > a,
      a:hover {
        border-left: 4px solid @nav-tabs-color-active;
        background-color: @nav-tabs-background-active;
        box-shadow: inset 0 -1px 0 @nav-tabs-border-color-default !important;
        border-radius: 0 !important;
        pointer-events: none;
        &::before {
          width: 100%;
        }
        &::after {
          left: 100%;
          height: 100%;
          border-width: calc(@margin-16 + @margin-4) 0 calc(@margin-16 + @margin-4) @margin-base;
        }
      }
    }
  }
}

.tabs_ctrl + .container-fluid .tab-content-spacer {
  margin: 0 -30px 0;
  padding-bottom: 20px;
  border: 0;
}

c8y-roles-overview > .page-tabs {
  margin-top: -30px;
}

.page-tabs .tab-content {
  padding-top: calc(@headerHeight + 3);
}