@alifd/meet-react/lib/divider/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component divider
  @display Divider
  @chinese 分割线
  @family data-display
*/
:root {
  /*
    @desc margin-tb
    @namespace size/bounding
    @semantic 上下外边距
  */
  --divider-ver-margin: var(--s-2);
  /*
    @desc margin-lr
    @namespace size/bounding
    @semantic 左右外边距
  */
  --divider-hoz-margin: var(--s-2);
  /*
    @desc font-color
    @namespace state/normal
    @semantic 字体颜色
  */
  --divider-font-color: var(--color-text1-3);
  /*
    @desc font-size
    @namespace state/normal
    @semantic 字体大小
  */
  --divider-font-size: var(--p-body-1-font-size);
  /*
    @desc spacing
    @namespace size/bounding
    @semantic 标题间距
  */
  --divider-spacing: var(--box-medium-spacing);
  /*
    @desc color
    @namespace state/normal
    @semantic 分割线颜色
  */
  --divider-color: var(--color-line1-2);
}

.mt-divider {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.mt-divider:before, .mt-divider:after {
  display: block;
  content: "";
}
.mt-divider--hoz {
  margin: var(--divider-hoz-margin) 0;
}
.mt-divider--hoz:before, .mt-divider--hoz:after {
  flex: 1;
  border-top: var(--line-1) solid var(--divider-color);
  height: 0.13333333333333333vw;
}
.mt-divider--left:before, .mt-divider--right:after {
  width: 5%;
  flex: none;
}
.mt-divider--dashed:before, .mt-divider--dashed:after {
  border-top-style: dashed;
}
.mt-divider--ver {
  width: 0.13333333333333333vw;
  height: 1em;
  background-color: var(--divider-color);
  margin: 0 var(--divider-ver-margin);
}
.mt-divider-text {
  font-size: var(--divider-font-size);
  color: var(--divider-font-color);
  padding: 0 var(--divider-spacing);
  box-sizing: border-box;
}