deer-ui/es/divider/style.less

React.js UI components for PC Web

@import '../styles/themes.less';

@prefixCls: deer-ui-divider;

.@{prefixCls}-vertical{
    height: 12px;
    display: inline-block;
    border-right: 1px solid @border-color;
    vertical-align: middle;
   &.dashed{
        border-right-style: dashed;
    }
}
.@{prefixCls}-horizontal{
    margin: 10px 0px;
    width: 100%;
    border-bottom: 1px solid @border-color;
    &.dashed{
        border-bottom-style: dashed;
    }
}

.@{prefixCls}-orientation{
    width: 100%;
    padding: @default-divider-orientation-padding;
    font-size: @default-divider-font-size;
    white-space: nowrap;
    font-weight: 500;
    display: table;
    b {
        height: 1px;
        width: 50%;
        display: table-cell;
        border-top: 1px solid @border-color;
        position: relative;
        top: 50%;
        transform: translateY(50%);
      }
    &-center{
        text-align: center;
    }
    &-left{
        b {
            &:first-child {
              width: @default-divider-left-left-width;
            }
            &:last-child {
              width: @default-divider-left-right-width;
            }
          }
    }
    &-right{
        b {
            &:first-child {
              width: @default-divider-right-left-width;
            }
            &:last-child {
              width: @default-divider-right-right-width;
            }
          }
    }
    &-content{
        text-align: center;
        padding: @default-divider-padding;
        font-size: @default-divider-font-size;
        white-space: nowrap;
        font-weight: bold;
    }
}