@c8y/style/styles/_page-tabs.less

Styles for Cumulocity IoT applications

.page-tabs {
  position: fixed;
  right: 0;
  left: 0;
  z-index: @zindex-navbar-fixed;
  margin: 0;
  padding: 0;
  &:has(.component-tabs) {
    position: static;
  }

  @media (max-width: @screen-xs-max) {
    top: -6px;
    transition: top 0.35s ease;

    .head-open & {
      top: calc(@margin-base * 10 + 12px);
    }
  }
}

.page-tabs-horizontal {
  // hide when there are no tabs available
  &:not(.page-tabs) {
    display: none;
  }

  @media (min-width: @screen-sm-min) {
    top: @headerHeight;
    right: 0;
    left: 0;
    z-index: @zindex-navbar-fixed;
    clip: rect(0, 10000px, 2000px, 0);
    min-height: calc(@margin-base * 6);
    box-shadow: inset 0 -1px 0 0 @component-border-color, @header-shadow;
    &,
    &:after {
      .transition(left @open-menu-time-type);
    }
  }

  @media (min-width: @grid-float-breakpoint) {
    &.navigator-open {
      left: @navigatorWidth;
    }
  }

  .tabContainer {
    overflow-x: auto;
    // box-shadow: inset 0 calc(@nav-tabs-border-width-active * -1) 0 0 @nav-tabs-border-color-default;
    scroll-behavior: smooth;
    .hide-scrollbars();

    .nav-tabs {
      padding-right: 30px;
      padding-left: 30px;
      min-width: max-content;
    }

    @media (min-width: @grid-float-breakpoint) {
      .nav-tabs {
        min-width: max-content;
      }
    }
  }
}

.component-tabs {
  position: relative;
}

.tabs-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  padding: 3px 0 0;
  width: 31px;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: @navbar-background-default;
  color: @link-color;
  box-shadow: inset 0 -1px 0 0 @nav-tabs-border-color-default;

  [class^='dlt-c8y-icon-'],
  [class*=' dlt-c8y-icon-'] {
    position: relative;
    z-index: 3;
    font-size: 20px;
  }

  &:hover,
  &:active,
  &:focus {
    &:not([disabled]) {
      outline: none;
      box-shadow: inset 0 0 0 2px @component-color-focus;
      color: @link-color-hover;
      text-decoration: none;
    }
  }

  &:focus {
    border-radius: @component-border-radius-focus;
  }

  &[disabled] {
    cursor: not-allowed;
    text-decoration: none;
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'] {
      opacity: 0.65;
      color: @text-muted;
    }
  }
}

.tabs-slider-left {
  left: 0;
  border-right: 1px solid @component-border-color;
}

.tabs-slider-right {
  right: 0;
  border-left: 1px solid @component-border-color;
}

.page-tabs-vertical {
  // hide when there are no tabs available
  &:not(.page-tabs) {
    display: none;
  }

  .tabs-slider {
    display: none;
  }

  .nav-tabs {
    .nav-tabs-vertical();
    > div,
    > li {
      position: relative;
      a {
        > [class^='dlt-c8y-icon-'],
        > [class*=' dlt-c8y-icon-'],
        > .c8y-icon {
          display: inline-block;
        }
      }
    }
  }

  @media (min-width: @screen-sm-min) {
    top: @headerHeight;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 101;
    overflow: visible;
    padding-right: calc(@grid-gutter-width / 2);

    .transition(left @open-menu-time-type);

    &:before {
      position: absolute;
      top: 0;
      min-height: 100%;
      width: @nav-tabs-vertical-width;
      box-shadow: 1px 0 0 @nav-tabs-border-color-default;
      content: '';
      background-color: @component-background-default;
    }

    .tabContainer {
      overflow-y: auto;
      .c8y-scrollbar();
      max-height: 100%;
    }
  }

  @media (min-width: @grid-float-breakpoint) {
    &.navigator-open {
      left: @navigatorWidth;
    }
  }
}

body:not(:has(.app-main-header)) {
  @media (min-width: @screen-sm-min) {
    .page-tabs-horizontal, .page-tabs-vertical {
      top: 0;
      .nav-tabs {
        padding-top: 0;
      }
    }
  }
  &:has(.has-action-bar){
    .page-tabs-vertical {
      top: 48px;
    }
  }
  &:not(:has(.has-action-bar)){
    .page-tabs-vertical {
      top: 0;
    }
  }
}

body:not(:has(.has-action-bar)){
  .page-tabs-vertical{
    .nav-tabs{
      padding-top: 0;
      border-top: 1px solid @component-border-color;
    }
  }
}