@dialpad/dialtone-css/lib/build/less/components/popover.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: POPOVER
//
//  These are popover classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/popover
//
//  TABLE OF CONTENTS
//  • POPOVER
//  • POPOVER DIALOG
//  • CSS CUSTOM PROPERTIES
//  • POPOVER DIALOG
//    - Base dialog style
//    - Content
//    - Header / Footer

//  $  POPOVER
//  ----------------------------------------------------------------------------
.d-popover {
  //  $  POPOVER DIALOG
  //  ----------------------------------------------------------------------------

  &__dialog {
    //  $$  CSS CUSTOM PROPERTIES
    //  ----------------------------------------------------------------------------
    --popover-color-background: var(--dt-color-surface-secondary);
    --popover-border-width: var(--dt-size-100);
    --popover-border-radius: var(--dt-size-400);
    --popover-color-border: var(--dt-color-border-subtle);
    --popover-shadow: var(--dt-shadow-card);

    // If we don't set this the native app header region will override all click events within the popover
    -webkit-app-region: no-drag;

    &,
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    display: grid;
    grid-template-rows: min-content 1fr min-content;
    overflow: auto;
    color: var(--dt-color-foreground-primary);
    background-color: var(--popover-color-background);
    border: var(--popover-border-width) solid var(--popover-color-border);
    border-radius: var(--popover-border-radius);
    box-shadow: var(--popover-shadow);
    visibility: visible;

    // to be set on the dialog when it is modal
    &--modal {
      z-index: var(--zi-modal-element);
    }
  }

  //  $$  DIALOG CONTENT
  //  ----------------------------------------------------------------------------
  &__content {
    grid-row: 2;
    overflow: auto;
  }

  //  $$  DIALOG HEADER / FOOTER
  //  ----------------------------------------------------------------------------

  &__header,
  &__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: var(--dt-size-650);
    padding-top: var(--dt-space-350);
    padding-bottom: var(--dt-space-350);
    overflow: auto;
    font-weight: var(--dt-font-weight-semi-bold);
    font-size: var(--dt-font-size-200);

    &__content {
      width: 100%;
      text-overflow: ellipsis;
    }

    &__close-button {
      margin-right: var(--dt-space-350);
      padding: var(--dt-space-350);
      border-color: transparent;
    }
  }

  &__header {
    grid-row: 1;
    border-bottom: var(--popover-border-width) solid var(--popover-color-border);
  }

  &__footer {
    grid-row: 3;
    border-top: var(--popover-border-width) solid var(--popover-color-border);
  }
}

.tippy-box[data-popper-reference-hidden] {
  .d-popover__dialog {
    visibility: hidden;
  }
}