@dialpad/dialtone-css/lib/build/less/components/emoji-picker.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: EMOJI-PICKER
//
//  These are the styles for emoji-picker component.
//
//
//  TABLE OF CONTENTS
//  • BASE STYLE

//  @@  BASE STYLE
//  ----------------------------------------------------------------------------
.d-emoji-picker {
  flex-direction: column;
  // fixed width to achieve accessibility in keyboard (372px)
  // with this width we have 9 emoji per row
  width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
  height: 100%;
  background-color: var(--dt-color-surface-primary);
  border-radius: var(--dt-size-radius-300);

  &--header {
    position: relative;
    padding: var(--dt-space-300) var(--dt-space-300) 0;

    &::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: var(--dt-size-border-200);
      background-color: var(--dt-color-surface-moderate) !important;
      content: '';
    }
  }

  &__alignment {
    // !important to default value to override popover dialog box-sizing: border-box style
    box-sizing: content-box !important;
    width: auto;
    max-width: calc(var(--dt-size-925) + var(--dt-size-400));
    margin: 0 var(--dt-space-500);
  }

  &--footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
    padding: 0 var(--dt-space-500);
    background: var(--dt-color-surface-secondary);
    border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
  }

  &__add-emoji {
    flex-shrink: 0;
    font-size: var(--dt-font-size-100);
  }

  &__tabset-list {
      gap: var(--dt-space-0);
      justify-content: space-between;

      &::after {
        background-color: var(--dt-color-surface-moderate) !important;
      }

      .d-tab {
        --tab-padding-y: var(--dt-space-400);
        --tab-padding-x: var(--dt-space-300);

        flex-grow: 1;

        &.d-tab--selected {
          &::after {
            height: var(--dt-size-border-200);
          }
        }
    }
  }

  &__skin-list {
    display: inline-flex;
    flex-direction: row;
    gap: var(--dt-space-300);
    align-items: flex-start;
    padding: var(--dt-space-300);
    background: var(--dt-color-surface-moderate-opaque);
    border-radius: var(--dt-size-radius-pill);

    button {
      width: var(--dt-size-600);
      height: var(--dt-size-600);
      margin: 0;
      padding: 0;
      background: none;
      border: var(--dt-size-border-100) solid transparent;
      border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
      outline: none;
      cursor: pointer;

      &:hover {
        background: var(--dt-color-surface-moderate-opaque);
      }

      &:active,
      &.selected {
        border-color: var(--dt-color-border-bold);
      }
    }
  }

  &__skin-selected {
    button {
      display: inline-block;
      width: var(--dt-size-625);
      height: var(--dt-size-625);
      margin: 0;
      padding: calc(var(--dt-space-350) + var(--dt-space-100));
      background: var(--dt-color-surface-moderate-opaque);
      border: none;
      border-radius: var(--dt-size-radius-circle);
      outline: none;
      cursor: pointer;

      &:hover {
        background: var(--dt-color-surface-bold);
      }
    }
  }

  &__selector {
    min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));

    p {
      padding-bottom: var(--dt-space-300);
      color: var(--dt-color-foreground-secondary);
      font: var(--dt-typography-headline-eyebrow);
      text-transform: var(--dt-typography-headline-eyebrow-text-case);
    }
  }

  &__category {
    position: sticky;
    top: 0;
    width: 100%;
    margin: 0;
    padding: var(--dt-space-500) var(--dt-space-500) 0 var(--dt-space-500);
    background: var(--dt-color-surface-primary);
  }

  &__list {
    position: relative;
    height: 100%;
    max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
    padding-bottom: calc(var(--dt-space-300) + var(--dt-space-100));
    overflow: hidden auto;

    div:not(:first-child) {
      p {
        margin-top: var(--dt-space-500);
      }
    }
  }

  &__search-label {
    padding-top: var(--dt-space-500);
  }

  &__search-x-button {
    margin-right: var(--dt-space-300-negative);
  }

  &__tab {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dt-space-200);
    width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
    max-width: calc(var(--dt-size-925) + var(--dt-size-400));
    // We use this margin left to align the emoji list with the tabset label
    margin-left: var(--dt-space-350-negative);
    padding-top: var(--dt-space-300);

    button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--dt-size-600) + var(--dt-size-300));
      height: calc(var(--dt-size-600) + var(--dt-size-300));
      margin: 0;
      padding: 0;
      background: none;
      border: none;
      border-radius: var(--dt-size-radius-circle);
      outline: none;
      cursor: pointer;

      &:hover,
      &:active {
        background: var(--dt-color-surface-moderate-opaque);
      }

      &.hover-emoji {
        background: var(--dt-color-surface-moderate-opaque);
      }

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

  &__search {
    position: relative;
    z-index: 1;
    padding: var(--dt-space-500) 0 0 0;
  }

  &__search-button {
    margin: 0;
    padding: 0;
    line-height: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
  }

  &__data {
    display: flex;
    gap: var(--dt-space-400);
    align-items: center;
    width: 100%;
    max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
    color: var(--dt-color-foreground-tertiary);
    font: var(--dt-typography-body-md);
  }
}