bin-ui/src/styles/components/popover.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

$arrow-width = 5px;
$arrow-distance = $arrow-width - 1 + 4;
.bin-popover {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: $color-text-default;
  font-size: $base-font-size
  font-variant: tabular-nums;
  line-height: $base-line-height
  list-style: none;
  -webkit-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
  z-index: 1030;
  font-weight: normal;
  white-space: normal;
  text-align: left;
  cursor: auto;
  user-select: text;
  &-rel {
    display: inline-block;
    position: relative;
  }
  &-popper {
    min-width: 150px;
    font-size: $base-font-size;
    &[x-placement^="top"] {
      padding: $arrow-width 0 $arrow-distance 0;
    }
    &[x-placement^="right"] {
      padding: 0 $arrow-width 0 $arrow-distance;
    }
    &[x-placement^="bottom"] {
      padding: $arrow-distance 0 $arrow-width 0;
    }
    &[x-placement^="left"] {
      padding: 0 $arrow-distance 0 $arrow-width;
    }

    &[x-placement^="top"] .bin-popover-arrow {
      bottom: 5px;
      border-top-color: transparent;
      border-right-color: #fff;
      border-bottom-color: #fff;
      border-left-color: transparent;
      -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
      box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
      transform: translateX(-50%) rotate(45deg);
    }
    &[x-placement="top"] .bin-popover-arrow {
      left: 50%;
    }
    &[x-placement="top-start"] .bin-popover-arrow {
      left: 16px;
    }
    &[x-placement="top-end"] .bin-popover-arrow {
      right: 16px;
    }

    &[x-placement^="right"] .bin-popover-arrow {
      left: 5px;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: #fff;
      border-left-color: #fff;
      -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
      box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
    }
    &[x-placement="right"] .bin-popover-arrow {
      top: 50%;
    }
    &[x-placement="right-start"] .bin-popover-arrow {
      top: 12px;
    }
    &[x-placement="right-end"] .bin-popover-arrow {
      bottom: 12px;
    }

    &[x-placement^="left"] .bin-popover-arrow {
      right: 5px;
      border-top-color: #fff;
      border-right-color: #fff;
      border-bottom-color: transparent;
      border-left-color: transparent;
      -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
      box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
    }
    &[x-placement="left"] .bin-popover-arrow {
      top: 50%;
    }
    &[x-placement="left-start"] .bin-popover-arrow {
      top: 12px;
    }
    &[x-placement="left-end"] .bin-popover-arrow {
      bottom: 12px;
    }

    &[x-placement^="bottom"] .bin-popover-arrow {
      top: 5px;
      border-top-color: #fff;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: #fff;
      -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
      box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
    }
    &[x-placement="bottom"] .bin-popover-arrow {
      left: 50%;
      margin-left: - $arrow-width;
    }
    &[x-placement="bottom-start"] .bin-popover-arrow {
      left: 16px;
    }
    &[x-placement="bottom-end"] .bin-popover-arrow {
      right: 16px;
    }
  }

  &-title {
    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 5px 16px 4px;
    color: $color-text-primary;
    font-weight: 500;
    border-bottom: $border-base-light;

    &:after {
      content: '';
      display: block;
      height: 1px;
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 0;
      background-color: @border-color-split;
    }

    &-inner {
      color: @title-color;
      font-size: @font-size-base;
      font-weight: 500;
    }
  }

  &-body {
    padding: 8px 16px;
    &-content {
      overflow: auto;
      &-word-wrap {
        white-space: pre-wrap;
        text-align: justify;
      }
      &-inner {
        color: $color-text-default;
      }
    }
  }
  &-inner {
    width: 100%;
    background-color: $color-white;
    background-clip: padding-box;
    border-radius: $border-base-radius;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
  }

  &-arrow {
    position: absolute;
    display: block;
    width: 8.48528137px;
    height: 8.48528137px;
    background: transparent;
    border-style: solid;
    border-width: 4.24264069px;
    transform: rotate(45deg);
  }
  &-confirm &-popper {
    max-width: 300px;
  }
  &-confirm &-inner {
    white-space: normal;
  }

  &-confirm &-body {
    padding: 12px 16px;
    &-message {
      display: inline-flex;
      padding: 4px 0 12px;
      color: $color-text-default;
      font-size: $base-font-size;
      .iconfont {
        position: relative;
        top: 2px;
        font-size: 18px;
        color: $color-warning;
        margin-right: 8px;
      }
    }
    &-buttons {
      text-align: right;
    }
  }
}