@c8y/style/styles/_c8y-top-drawer.less

Styles for Cumulocity IoT applications

.c8y-top-drawer{
  position: sticky;
  z-index: (@zindex-action-bar - 2);
  margin: 0 calc(@margin-base * -1);
  transform: translateY(-24px);
  max-width: 100vw;
  background-color: @component-background-default;
  color: @component-color-default;
  top: @headerHeight;
  box-shadow: var(--c8y-elevation-md-bottom), inset 0 0 0 1px @component-border-color;
  --c8y-nav-tabs-background-default: var(--c8y-level-1);
  --c8y-nav-tabs-background-active: var(--c8y-level-0);

  @media (max-width: @screen-xs-max) {
    .head-open & {
      top: calc(@headerHeight + 76);
    }
    .has-tabs & {
      top: calc(@headerHeight + 6px);
      transition: top 0.35s ease;
    }
    .has-tabs .head-open & {
      top: calc(@headerHeight * 2 + 12px);
    }
  }
  @media (min-width: @screen-sm-min) {
    margin: 0 calc(@margin-base * -1);
    top: calc(@headerHeight + 72px);
    clip: rect(0, 10000px, 2000px, 0);
    .horizontal-tabs.has-tabs & {
      top: calc(@headerHeight * 2 + 72px);
    }
  }
  @media (min-width: @grid-float-breakpoint) {
    .transition(left @open-menu-time-type);
    .horizontal-tabs.has-tabs & {
      top: calc(@headerHeight * 2 + 56px);
    }
  }
  :fullscreen:not(:root) &{
    top: 0;
    margin:0;
    transform: translateY(-32px);
  }
  .component-tabs.nav-tabs{
    padding-top: 0;
  }
  &--tabs{
    position: relative;
    padding-right: 0;
    background-color: var(--c8y-level-1);
    &::before{
      display: none;
    }
  }
  &--footer{
    padding:@margin-24;
    padding-left: var(--c8y-nav-tabs-vertical-width);
    background-color: var(--c8y-level-1);
  }
  &__tabs-container{
    border-bottom: 1px solid @component-border-color;
    max-height: calc(100vh - 380px);
    height: 445px;
    min-height: 220px;
  }
}