seehoo-design-plus/src/styles/base.less

An UI components for Seehoo Vuejs.3

.ivu {
  // 框类型
  &-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;
    }
  }

  // flex 布局
  &-flex {
    display: flex;
  }
  &-inline-flex {
    display: inline-flex;
  }
  &-flex-row {
    flex-direction: row;
  }
  &-flex-row-reverse {
    flex-direction: row-reverse;
  }
  &-flex-col {
    flex-direction: column;
  }
  &-flex-col-reverse {
    flex-direction: column-reverse;
  }
  &-flex-wrap {
    flex-wrap: wrap;
  }
  &-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  &-flex-nowrap {
    flex-wrap: nowrap;
  }
  &-flex-1 {
    flex: 1 1 0%;
  }
  &-flex-auto {
    flex: 1 1 auto;
  }
  &-flex-initial {
    flex: 0 1 auto;
  }
  &-flex-none {
    flex: none;
  }
  &-flex-grow-0 {
    flex-grow: 0;
  }
  &-flex-grow {
    flex-grow: 1;
  }
  &-flex-shrink-0 {
    flex-shrink: 0;
  }
  &-flex-shrink {
    flex-shrink: 0;
  }
  &-justify-start {
    display: flex;
    justify-content: flex-start;
  }
  &-justify-end {
    display: flex;
    justify-content: flex-end;
  }
  &-justify-center {
    display: flex;
    justify-content: center;
  }
  &-justify-between {
    display: flex;
    justify-content: space-between;
  }
  &-justify-around {
    display: flex;
    justify-content: space-around;
  }
  &-justify-evenly {
    display: flex;
    justify-content: space-evenly;
  }
  &-justify-items-start {
    display: flex;
    justify-items: start;
  }
  &-justify-items-end {
    display: flex;
    justify-items: end;
  }
  &-justify-items-center {
    display: flex;
    justify-items: center;
  }
  &-justify-items-stretch {
    display: flex;
    justify-items: stretch;
  }
  &-justify-self-auto {
    display: flex;
    justify-self: auto;
  }
  &-justify-self-start {
    display: flex;
    justify-self: start;
  }
  &-justify-self-end {
    display: flex;
    justify-self: end;
  }
  &-justify-self-center {
    display: flex;
    justify-self: center;
  }
  &-justify-self-stretch {
    display: flex;
    justify-self: stretch;
  }
  &-content-center {
    display: flex;
    align-content: center;
  }
  &-content-start {
    display: flex;
    align-content: flex-start;
  }
  &-content-end {
    display: flex;
    align-content: flex-end;
  }
  &-content-between {
    display: flex;
    align-content: space-between;
  }
  &-content-around {
    display: flex;
    align-content: space-around;
  }
  &-content-evenly {
    display: flex;
    align-content: space-evenly;
  }
  &-items-start {
    align-items: flex-start;
  }
  &-items-end {
    align-items: flex-end;
  }
  &-items-center {
    align-items: center;
  }
  &-items-baseline {
    align-items: baseline;
  }
  &-items-stretch {
    align-items: stretch;
  }
  &-self-auto {
    align-self: auto;
  }
  &-self-start {
    align-self: flex-start;
  }
  &-self-end {
    align-self: flex-end;
  }
  &-self-center {
    align-self: center;
  }
  &-self-baseline {
    align-self: baseline;
  }
  &-self-stretch {
    align-self: stretch;
  }

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

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

  // 边距
  &-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;
  }
}