.haloe {
  // 框类型
  &-block {
    display: block;
  }
  &-inline {
    display: inline;
  }
  &-inline-block {
    display: inline-block;
  }
  // 文字
  &-text-center {
    text-align: center;
  }
  &-text-left {
    text-align: left;
  }
  &-text-right {
    text-align: right;
  }

  // 浮动
  &-fl {
    float: left;
  }
  &-fr {
    float: right;
  }
  &-clearfix {
    &:before,
    &:after {
      display: table;
      content: '';
    }
    &:after {
      clear: both;
    }
  }

  // 行数省略...
  &-line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  // 边框
  &-b {
    border: 1px solid @color-complementary-7;
  }
  &-bt {
    border-top: 1px solid @color-complementary-7;
  }
  &-br {
    border-right: 1px solid @color-complementary-7;
  }
  &-bb {
    border-bottom: 1px solid @color-complementary-7;
  }
  &-bl {
    border-left: 1px solid @color-complementary-7;
  }

  // 边距
  &-m-0 {
    margin: 0 !important;
  }
  &-mt-0 {
    margin-top: 0 !important;
  }
  &-mr-0 {
    margin-right: 0 !important;
  }
  &-mb-0 {
    margin-bottom: 0 !important;
  }
  &-ml-0 {
    margin-left: 0 !important;
  }

  &-m-4 {
    margin: 4px !important;
  }
  &-mt-4 {
    margin-top: 4px !important;
  }
  &-mr-4 {
    margin-right: 4px !important;
  }
  &-mb-4 {
    margin-bottom: 4px !important;
  }
  &-ml-4 {
    margin-left: 4px !important;
  }

  &-m-8 {
    margin: 8px !important;
  }
  &-mt-8 {
    margin-top: 8px !important;
  }
  &-mr-8 {
    margin-right: 8px !important;
  }
  &-mb-8 {
    margin-bottom: 8px !important;
  }
  &-ml-8 {
    margin-left: 8px !important;
  }

  &-p-0 {
    padding: 0 !important;
  }
  &-pt-0 {
    padding-top: 0 !important;
  }
  &-pr-0 {
    padding-right: 0 !important;
  }
  &-pb-0 {
    padding-bottom: 0 !important;
  }
  &-pl-0 {
    padding-left: 0 !important;
  }

  &-p-4 {
    padding: 4px !important;
  }
  &-pt-4 {
    padding-top: 4px !important;
  }
  &-pr-4 {
    padding-right: 4px !important;
  }
  &-pb-4 {
    padding-bottom: 4px !important;
  }
  &-pl-4 {
    padding-left: 4px !important;
  }

  &-p-8 {
    padding: 8px !important;
  }
  &-pt-8 {
    padding-top: 8px !important;
  }
  &-pr-8 {
    padding-right: 8px !important;
  }
  &-pb-8 {
    padding-bottom: 8px !important;
  }
  &-pl-8 {
    padding-left: 8px !important;
  }

  &-m-16,
  &-m {
    margin: 16px !important;
  }
  &-mt-16,
  &-mt {
    margin-top: 16px !important;
  }
  &-mr-16,
  &-mr {
    margin-right: 16px !important;
  }
  &-mb-16,
  &-mb {
    margin-bottom: 16px !important;
  }
  &-ml-16,
  &-ml {
    margin-left: 16px !important;
  }

  &-p-16,
  &-p {
    padding: 16px !important;
  }
  &-pt-16,
  &-pt {
    padding-top: 16px !important;
  }
  &-pr-16,
  &-pr {
    padding-right: 16px !important;
  }
  &-pb-16,
  &-pb {
    padding-bottom: 16px !important;
  }
  &-pl-16,
  &-pl {
    padding-left: 16px !important;
  }
}