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

Styles for Cumulocity IoT applications

@import "../mixins/_shadows-helper.less";

/**
 * Right Drawer - Fixed side panel navigation
 *
 * Note: Uses design tokens for spacing (@size-*; @component-padding), colors (@drawer-*).
 *
 * Intentionally hardcoded values:
 * - 6px padding: Off-grid fine-tuning
 * - 2px/-2px outline: Focus indicator width and offset
 * - Z-index values: Stacking order
 * - Percentages: Transform values
 */

.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;
  transform: translate(100%, 0);
  transition: transform @open-menu-time-type;
  --sticky-top-margin: @size-80;

  --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;
    transform: translate(@navigatorWidth, 0);
  }
  .drawerOpen & {
    transform: 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: @size-24;
    position: sticky;
    top: 0;
    z-index: 11;
    flex-shrink: 0;
    background-color: inherit;
    .user-dot {
      margin-right: @size-base;
    }

    .close {
      margin-top: calc(@size-16 * -1);
      text-shadow: none;
      color: @drawer-color;
      font-weight: lighter;
      font-size: @size-20;

      &: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: @size-20;
      margin: @size-4 @size-8 @size-4 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;
      }
    }
  }
}