rsuite/Popover/styles/index.less

A suite of react components

@import '../../styles/common.less';
@import '../../Heading/styles/index.less';
@import './mixins.less';

//
// Popovers
// --------------------------------------------------
.rs-popover {
  position: absolute;
  top: 0;
  left: 0 /* rtl:ignore */;
  z-index: @zindex-popover;
  display: none;
  padding: 12px;
  font-size: @font-size-base;
  background-color: var(--rs-bg-overlay);
  background-clip: padding-box;
  border-radius: @popover-border-radius;
  opacity: 0;
  .drop-shadow(var(--rs-popover-shadow));

  &.rs-anim-fade {
    transition: opacity 0.1s linear, transform 0.1s ease-out;
  }

  &.rs-anim-in {
    opacity: 1;
    transition: opacity 0.15s linear, transform 0.15s ease-in;
  }

  .high-contrast-mode({
    border: 1px solid var(--rs-border-primary);
  });

  // Arrow is outer, Arrow:after is inner
  > .rs-popover-arrow {
    border-width: @popover-arrow-outer-width;

    &,
    &::before,
    &::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    &::before,
    &::after {
      border-width: @popover-arrow-width;
      content: '';
    }

    &::before {
      display: none;
    }

    .high-contrast-mode({
      &::before {
        display: block;
      }
    });
  }

  // Popover Title
  &-title {
    margin: 0; // reset heading margin
    font-size: @font-size-base;
    line-height: @line-height-base;
  }

  // Popover Content
  &-content {
    font-size: @font-size-small;
    line-height: @line-height-small;
  }

  &-title ~ &-content {
    margin-top: 8px;
  }
}

// Common style for .placement-top*
.rs-popover[class*='placement-top'] {
  margin-top: -(@popover-arrow-width + 2px);
  .set-translate-transition(0, -@popover-translate-distance);

  > .rs-popover-arrow {
    margin-left: -@popover-arrow-outer-width;
    bottom: -@popover-arrow-outer-width;

    .with-popover-arrow(bottom);
  }
}

/* rtl:begin:ignore */
// Common style for .placement-right*
.rs-popover[class*='placement-right'] {
  margin-left: (@popover-arrow-width + 2px);
  .set-translate-transition(@popover-translate-distance, 0);

  > .rs-popover-arrow {
    left: -@popover-arrow-outer-width;
    margin-top: -@popover-arrow-outer-width;

    .with-popover-arrow(left);
  }
}

// Common style for .placement-left*
.rs-popover[class*='placement-left'] {
  margin-left: -(@popover-arrow-width + 2px);
  .set-translate-transition(-@popover-translate-distance, 0);

  > .rs-popover-arrow {
    right: -@popover-arrow-outer-width;
    margin-top: -@popover-arrow-outer-width;

    .with-popover-arrow(right);
  }
}

/* rtl:end:ignore */

// Common style for .placement-bottom*
.rs-popover[class*='placement-bottom'] {
  margin-top: (@popover-arrow-width + 2px);
  .set-translate-transition(0, @popover-translate-distance);

  > .rs-popover-arrow {
    margin-left: -@popover-arrow-outer-width;
    top: -@popover-arrow-outer-width;

    .with-popover-arrow(top);
  }
}

.rs-popover.placement-bottom,
.rs-popover.placement-top {
  > .rs-popover-arrow {
    left: 50%;
  }
}

.rs-popover.placement-bottom-end,
.rs-popover.placement-top-end {
  > .rs-popover-arrow {
    right: @popover-arrow-gap;
  }
}

.rs-popover.placement-left,
.rs-popover.placement-right {
  > .rs-popover-arrow {
    top: 50%;
  }
}

.rs-popover.placement-left-end,
.rs-popover.placement-right-end {
  > .rs-popover-arrow {
    bottom: @popover-arrow-gap;
  }
}

// Adjust full popover arrow postion
.rs-popover-full {
  // Reset content padding when [full]
  padding: 0;

  // Reset content margin-top when [full]
  .rs-popover-content {
    margin-top: 0;
  }

  .rs-popover.placement-top-start& > .rs-popover-arrow,
  .rs-popover.placement-bottom-start& > .rs-popover-arrow {
    margin-left: @popover-arrow-outer-width;
  }

  .rs-popover.placement-right-start& > .rs-popover-arrow,
  .rs-popover.placement-left-start& > .rs-popover-arrow {
    margin-top: @popover-arrow-outer-width;
  }
}