rsuite/src/Popover/styles/common.less

A suite of react components

@import '../../styles/common';

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

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

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

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

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

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

  // 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*
.@{ns}popover[class*='placement-top'] {
  margin-top: -@popover-arrow-width;
  .set-translate-transition(0, -@popover-translate-distance);

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

    &::after {
      bottom: 1px;
      margin-left: -@popover-arrow-width;
      border-bottom-width: 0;
      border-top-color: @popover-arrow-color;
    }
  }
}

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

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

    &::after {
      left: 1px;
      bottom: -@popover-arrow-width;
      border-left-width: 0;
      border-right-color: @popover-arrow-color;
    }
  }
}

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

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

    &::after {
      top: 1px;
      margin-left: -@popover-arrow-width;
      border-top-width: 0;
      border-bottom-color: @popover-arrow-color;
    }
  }
}

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

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

    &::after {
      right: 1px;
      border-right-width: 0;
      border-left-color: @popover-arrow-color;
      bottom: -@popover-arrow-width;
    }
  }
}

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

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

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

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

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

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

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

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