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

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

.bin-divider {
  background-color: #dcdfe6;
  position: relative;
  &-horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
  }
  &-vertical {
    position: relative;
    margin: 0 8px;
    display: inline-block;
    height: 1em;
    width: 1px;
    vertical-align: middle;
    top: -0.06em;
  }
  &-dashed {
    background: 0 0;
    border-top: 1px dashed #dcdfe6;
  }
  &-inner-text {
    position: absolute;
    background-color: #fff;
    padding: 0 16px;
    font-weight: 500;
    color: #303133;
    font-size: 14px;
    &.is-left {
      left: 24px;
      transform: translateY(-50%);
    }
    &.is-center {
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    &.is-right {
      right: 24px;
      transform: translateY(-50%);
    }
  }
}