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

Styles for Cumulocity IoT applications

.checkwhiteicon(@icon) when (@icon='white') {
  &:before {
    color: @icon-white-color-dark;
  }

  &::after {
    color: @icon-white-color-light;
  }
}

.checkdarkicon(@icon) when (@icon='duo') {
  &:before {
    color: @icon-dark-color-dark;
  }

  &:after {
    color: @icon-dark-color-light;
  }
}

.c8y-right-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-color: @drawer-bg;
  color: @drawer-color;
  overflow-y: auto;
  padding: 0;
  z-index: @zindex-navbar-fixed + 1;
  display: flex;
  flex-direction: column;
  .translate(100%, 0);
  .transition(transform @open-menu-time-type);
  --sticky-top-margin: 80px;

  --c8y-text-muted: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));

  --c8y-form-label-color: @drawer-color;
  
  --c8y-component-border-color: var(--right-drawer-separator-color, var(--c8y-right-drawer-separator-color, var(--navigator-separator-color, var(--c8y-root-component-border-color))));
  
  --link-color: var(--right-drawer-link-color, var(--c8y-right-drawer-link-color, var(--c8y-right-drawer-link-color-default, var(--c8y-root-component-color-link))));
  
  --c8y-component-color-link-hover: var(--right-drawer-link-color-hover, var(--c8y-right-drawer-link-color-hover, var(--c8y-root-component-color-link-hover)));
  
  @media (min-width: @screen-sm-min) {
    width: @navigatorWidth;
    .translate(@navigatorWidth, 0);
  }
  .drawerOpen & {
    .translate(0, 0);
    .boxShadowHelper(md, right);
  }

  .legend, .text-muted {
    color: @drawer-legend;
  }
  .sticky-top {
    top: var(--sticky-top-margin);
    background-color: @drawer-bg!important;
  }
  &__header {
    padding: @component-padding;
    padding-top: @margin-24;
    position: sticky;
    top: 0;
    z-index: 11;
    flex-shrink: 0;
    background-color: inherit;
    .user-dot {
      margin-right: @margin-base;
    }

    .close {
      margin-top: -16px;
      text-shadow: none;
      color: @drawer-color;
      font-weight: lighter;
      font-size: 20px;

      &:hover,
      &:focus {
        opacity: 1;
      }
    }
  }

  .c8y-right-drawer__link,
  .c8y-right-drawer__item {
    display: flex;
    align-items: center;
    width: 100%;
    color: inherit;
    text-align: left;
    padding: 6px @component-padding;
    background-image: none;
    background-color: transparent;
    border: 0;
    &.sticky-top {
      background-color: inherit;
    }
    [class^='dlt-c8y-icon-'],
    [class*=' dlt-c8y-icon-'],
    .c8y-icon {
      font-size: 20px;
      margin: 4px 8px 4px 0;
    }
  }

  .c8y-right-drawer__link {
    &:active {
      background-color: @drawer-background-active;
    }

    &:hover,
    &:focus {
      text-decoration: none;
      outline: 2px solid @drawer-border-selected;
      outline-offset: -2px;
      color: @drawer-color;
      [class^='dlt-c8y-icon-'],
      [class*=' dlt-c8y-icon-'],
      .c8y-icon {
        color: @drawer-border-selected;
      }
    }
  }
}