@dialpad/dialtone-css/lib/build/less/recipes/leftbar_row.less

Dialpad's design system

.d-recipe-leftbar-row {
  //  ============================================================================
  //  $   CSS CUSTOM PROPERTIES
  //  ----------------------------------------------------------------------------
  --leftbar-row-color-foreground: var(--dt-shell-color-foreground-primary);
  --leftbar-row-color-background: var(--dt-shell-color-surface-default);
  --leftbar-row-radius: var(--dt-size-radius-pill);
  --leftbar-row-opacity: 100%;
  --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-primary);
  --leftbar-row-alpha-width: calc(var(--dt-size-300) * 10);
  --leftbar-row-alpha-height: calc(var(--dt-size-300) * 9);
  --leftbar-row-omega-height: var(--leftbar-row-alpha-height);
  --leftbar-row-unread-badge-display: inline-flex;
  --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-primary);
  --leftbar-row-description-font-weight: var(--dt-font-weight-normal);
  --leftbar-row-description-font-size: var(--dt-font-size-200);
  --leftbar-row-description-line-height: var(--dt-font-line-height-200);
  --leftbar-row-status-color-foreground: var(--dt-shell-color-foreground-muted);
  --leftbar-row-status-font-size: var(--dt-font-size-100);
  --leftbar-row-status-line-height: var(--dt-font-line-height-100);
  --leftbar-row-action-position-right: var(--dt-size-400);
  --leftbar-row-action-position-bottom: 50%;
  --leftbar-row-action-width: var(--dt-size-550);
  --leftbar-row-action-height: var(--leftbar-row-action-width);

  .d-presence {
    // Presence colors in shell have specific tokens
    --presence-color-border-offline: var(--dt-shell-presence-color-offline);
    --presence-color-background-active: var(--dt-shell-presence-color-available);
    --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
    --presence-color-background-away: var(--dt-shell-presence-color-busy);
  }

  //  ============================================================================
  //  $   BASE STYLE
  //  ----------------------------------------------------------------------------
  position: relative;
  display: flex;
  background-color: var(--dt-shell-color-surface-default);
  border-radius: var(--leftbar-row-radius);
  cursor: pointer;
  opacity: var(--leftbar-row-opacity);
  transition-timing-function: var(--ttf-out-quint);
  transition-duration: var(--td200);
  transition-property: background-color, border, box-shadow;

  //  ============================================================================
  //  $   VARIANTS
  //  ----------------------------------------------------------------------------
  //
  //  <div class="d-recipe-leftbar-row d-recipe-leftbar-row--{$VARIANT}">
  //    ...
  //  </div>
  //
  &:not(.d-recipe-leftbar-row--no-action):hover,
  &:not(.d-recipe-leftbar-row--no-action):focus-within {
    --leftbar-row-unread-badge-display: none;

    .d-recipe-leftbar-row__action {
      display: inline-flex;
    }

    .d-recipe-leftbar-row__action-button {
      opacity: 1;
    }
  }

  &:hover,
  &:focus-within {
    --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-hover);

    .d-presence {
      // TODO: Remove this once @jeverhart-dialpad's DLT-2665 PR
      --presence-color-border-base: var(--dt-color-black-200);
    }

    .d-avatar__count {
      // TODO: Remove this once @jeverhart-dialpad's DLT-2665 PR
      --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
    }
  }

  //  ============================================================================
  //  $   LABEL'S ELEMENTS
  //  ----------------------------------------------------------------------------
  //
  //  <div class="d-recipe-leftbar-row__description">
  //    ...
  //  </div>
  //  <div class="d-recipe-leftbar-row__status">
  //    <span class="d-recipe-leftbar-row__meta-context ...">...</span>
  //    <span class="d-recipe-leftbar-row__meta-custom">...</span>
  //  </div>
  //
  &__description {
    overflow: hidden;
    color: var(--leftbar-row-description-color-foreground);
    font-weight: var(--leftbar-row-description-font-weight);
    font-size: var(--leftbar-row-description-font-size);
    line-height: var(--leftbar-row-description-line-height);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__status {
    padding-bottom: var(--dt-space-100);
    overflow: hidden;
    color: var(--leftbar-row-status-color-foreground);
    font-size: var(--leftbar-row-status-font-size);
    line-height: var(--leftbar-row-status-line-height);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__meta-context ~ &__meta-custom:not(:empty)::before {
    color: var(--dt-shell-color-foreground-muted);
    content: " • ";
  }

  &--has-unread {
    --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
    --leftbar-row-description-color-foreground: var(--dt-shell-color-foreground-strong);
    --leftbar-row-alpha-color-foreground: var(--dt-shell-color-foreground-strong);
  }

  &--muted {
    --leftbar-row-opacity: 60%;
  }

  &--selected {
    --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-selected);
    --leftbar-row-description-color-foreground: var(--dt-shell-action-color-foreground-primary-selected);

    .d-presence {
      --presence-color-border-base: var(--dt-color-black-200);
    }

    .d-avatar__count {
      --avatar-count-color-shadow: var(--dt-shell-action-color-background-primary-selected);
    }
  }

  &__is-typing {
    --is-typing-size-shape: var(--dt-size-550);

    position: absolute;
    display: flex;
    gap: var(--dt-space-200);
    align-items: center;
    justify-content: center;
    width: var(--is-typing-size-shape);
    height: var(--is-typing-size-shape);
    border-radius: var(--dt-size-radius-pill);
    opacity: 0.75;

    & span {
      display: inline-block;
      width: var(--dt-size-300);
      height: var(--dt-size-300);
      padding: 0;
      background: var(--dt-color-surface-strong);
      border-radius: var(--dt-size-radius-pill);
      opacity: 0.3;
      transition: all 500ms ease;
      animation: d-recipe-leftbar-row-wave 1.5s ease infinite;

      &:nth-child(1) {
        animation-delay: 0ms;
      }

      &:nth-child(2) {
        animation-delay: var(--td100);
      }

      &:nth-child(3) {
        animation-delay: var(--td200);
      }
    }
  }

  //  ============================================================================
  //  $   ACTIONABLE ELEMENTS
  //  ----------------------------------------------------------------------------
  //
  // <el class="d-recipe-leftbar-row__primary" ...>
  //   ...
  // </el>
  // <div class="d-recipe-leftbar-row__action">
  //   <button class="d-recipe-leftbar-row__action-button d-btn ..." ...>...</button>
  // </div>
  //

  // Style overrides for leftbar button icon and background, using the shell tokens for theming
  .d-btn--inverted.d-btn--primary {
    --button-color-text: var(--dt-shell-mention-color-surface-primary);
  }

  .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
    --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 10%, var(--dt-color-surface-primary) 100%);
  }

  .d-btn--inverted.d-btn--primary:active:not([disabled]) {
    --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, var(--dt-color-surface-primary) 100%);
  }

  .d-fc-success {
    color:var(--dt-shell-color-foreground-positive)!important;
  }

  &__primary {
    // contains extra style properties to support both <button> and <a>
    display: flex;
    flex: 1;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--leftbar-row-color-foreground);
    font-size: inherit;
    line-height: inherit;
    text-align: left;
    text-decoration: none;
    background-color: var(--leftbar-row-color-background);
    border: 0;
    border-radius: var(--leftbar-row-radius);
    appearance: none;

    &:active {
      --leftbar-row-color-background: var(--dt-shell-action-color-background-primary-active);
    }

    &:focus-visible {
      box-shadow: var(--dt-shadow-focus-inset);
    }
  }

  &__action-button {
    width: var(--leftbar-row-action-width);
    height: var(--leftbar-row-action-height);
    opacity: 0;
  }

  //  ============================================================================
  //  $   PRIMARY'S MAIN ELEMENTS
  //  ----------------------------------------------------------------------------
  //
  //  <div class="d-recipe-leftbar-row__alpha">...</div>
  //  <div class="d-recipe-leftbar-row__label">...</div>
  //  <div class="d-recipe-leftbar-row__omega">...</div>

  &__alpha {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--leftbar-row-alpha-width);
    height: var(--leftbar-row-alpha-height);
    padding-right: var(--dt-space-400);
    padding-left: var(--dt-space-400);
    color: var(--leftbar-row-alpha-color-foreground);
    border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
  }

  &__label {
    flex: 0 1;
    min-width: 0;
  }

  &__omega {
    position: absolute;
    top: var(--leftbar-row-action-position-bottom);
    right: var(--leftbar-row-action-position-right);
    display: flex;
    gap: var(--dt-space-300);
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    border-radius: var(--leftbar-row-radius);
    transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
  }

  &__unread-badge {
    display: var(--leftbar-row-unread-badge-display);
    color: var(--dt-shell-mention-color-foreground-primary);
    background-color: var(--dt-shell-mention-color-surface-primary);
  }

  &__unread-count {
    .d-recipe-leftbar-row__action {
      display: none;
    }
  }

  &__unread-count-badge {
    border-top-right-radius: var(--dt-size-radius-0);
    border-bottom-right-radius: var(--dt-size-radius-0);
  }

  &__unread-mention-count-badge {
    color: var(--dt-shell-mention-color-foreground-secondary);
    background-color: var(--dt-shell-mention-color-surface-secondary);
    border-top-left-radius: var(--dt-size-radius-0);
    border-bottom-left-radius: var(--dt-size-radius-0);
  }

  &__unread-mention-only-count-badge {
    color: var(--dt-shell-mention-color-foreground-secondary);
    background-color: var(--dt-shell-mention-color-surface-secondary);
  }

  &__active-voice {
    display: inline-flex;
    color: var(--dt-color-purple-400);
    .d-recipe-leftbar-row-opacity-pulsate();
  }

  &__dnd {
    padding-top: var(--dt-space-200);
    padding-right: var(--dt-space-300);
    color: var(--dt-color-foreground-tertiary);
    font-weight: var(--dt-font-weight-medium);
    font-size: var(--dt-font-size-100);
    line-height: var(--dt-font-line-height-400);
  }

  &__container--off-duty {
    background-color: var(--dt-color-surface-critical);
    border: var(--dt-size-100) solid var(--dt-color-border-subtle);
    border-radius: var(--dt-size-radius-500);

    .d-recipe-leftbar-row__primary {
      margin: calc(var(--dt-size-100) * -1);
    }
  }

  &--contact-centers {
    .d-recipe-leftbar-row__alpha {
      padding-right: var(--dt-space-450);
      padding-left: var(--dt-space-450);
    }

    .d-recipe-leftbar-row__action-container {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      min-width: var(--dt-size-600);
      height: var(--dt-size-500);
    }
  }

  &__icon-cc {
    width: calc(var(--dt-size-300) * 3.5);
    height: calc(var(--dt-size-300) * 3.5);
    border-radius: var(--dt-size-200);
  }
}

.d-recipe-leftbar-row-opacity-pulsate {
  -webkit-animation-name: d-recipe-leftbar-row-opacity-pulsate;
  -moz-animation-name: d-recipe-leftbar-row-opacity-pulsate;
  animation-name: d-recipe-leftbar-row-opacity-pulsate;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes d-recipe-leftbar-row-opacity-pulsate {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

@keyframes d-recipe-leftbar-row-wave {
  0%,
  50%,
  100% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(0, -0.5rem);
    opacity: 0.9;
  }
}

//  ============================================================================
//  $   Contact Row
//  ----------------------------------------------------------------------------
.d-recipe-contact-row--active {
  color: var(--dt-shell-color-foreground-positive);
}

.d-recipe-contact-row--busy {
  color: var(--dt-shell-color-foreground-critical);
}

.d-recipe-contact-row--away {
  color: var(--dt-shell-color-foreground-warning);
}

//  ============================================================================
//  $   CSS General Row
//  ----------------------------------------------------------------------------
.d-recipe-leftbar-general-row {
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__contact-center {
    &--magenta-100 {
      background-color: var(--dt-color-magenta-100);
    }

    &--magenta-200 {
      background-color: var(--dt-color-magenta-200);
    }

    &--magenta-300 {
      background-color: var(--dt-color-magenta-300);
    }

    &--magenta-400 {
      background-color: var(--dt-color-magenta-400);
    }

    &--green-200 {
      background-color: var(--dt-color-green-200);
    }

    &--green-500 {
      background-color: var(--dt-color-green-500);
    }

    &--gold-300 {
      background-color: var(--dt-color-gold-300);
    }

    &--purple-100 {
      background-color: var(--dt-color-purple-100);
    }

    &--purple-300 {
      background-color: var(--dt-color-purple-300);
    }

    &--purple-600 {
      background-color: var(--dt-color-purple-600);
    }

    &--black-300 {
      background-color: var(--dt-color-black-300);
    }
  }
}