vui-design/src/style/components/divider.less

A high quality UI Toolkit based on Vue.js

@vui-divider: ~"@{vui}-divider";

.@{vui-divider} {
  display:block;
  box-sizing:border-box;
  margin:0;
  padding:0;

  &-horizontal {
    clear:both;
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    height:0;
    border-top:1px solid @divider-color;
    margin:@divider-horizontal-gutter 0;
  }
  &-horizontal&-dashed {
    border-top-style:dashed;
  }

  &-horizontal&-with-text {
    display:flex;
    align-items:center;
    height:auto;
    border-top:none;

    &:before, &:after {
      content:"";
      display:block;
      box-sizing:border-box;
      height:0;
      border-top:1px solid @divider-color;
    }
  }
  &-horizontal&-with-text&-dashed {
    &:before, &:after {
      border-top-style:dashed;
    }
  }

  &-with-text-left {
    &:before {
      width:5%;
    }
    &:after {
      width:95%;
    }
  }
  &-with-text-center {
    &:before {
      width:50%;
    }
    &:after {
      width:50%;
    }
  }
  &-with-text-right {
    &:before {
      width:95%;
    }
    &:after {
      width:5%;
    }
  }

  &-text {
    display:block;
    box-sizing:border-box;
    margin:0;
    padding:0 1em;
    color:@divider-text-font-color;
    font-size:@divider-text-font-size;
    font-style:normal;
    white-space:nowrap;
    text-align:center;
    line-height:1;
  }

  &-vertical {
    position:relative;
    top:-0.06em;
    display:inline-block;
    box-sizing:border-box;
    width:0;
    height:0.9em;
    border-left:1px solid @divider-color;
    margin:0 @divider-vertical-gutter;
    vertical-align:middle;
  }
  &-vertical&-dashed {
    border-left-style:dashed;
  }
}