@alifd/meet-react/es/progress/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component progress
  @display Progress
  @chinese 进度条
  @family data-entry
*/
:root {
  /**
    @desc small-corner
    @semantic 线形圆角尺寸(大号)
    @namespace size/common
  */
  --progress-bar-small-corner: 1.6vw;
  /**
    @desc medium-corner
    @semantic 线形圆角尺寸(中号)
    @namespace size/common
  */
  --progress-bar-medium-corner: 2.4vw;
  /**
    @desc large-corner
    @semantic 线形圆角尺寸(大号)
    @namespace size/common
  */
  --progress-bar-large-corner: var(--s-3);
  /**
    @desc margin
    @semantic 默认外边距
    @namespace size/common
  */
  --progress-margin: var(--s-2);
  /**
    @desc small-spacing
    @semantic 元素间距(小号)
    @namespace size/common
  */
  --progress-small-spacing: var(--s-3);
  /**
    @desc small-spacing
    @semantic 元素间距(小号)
    @namespace size/common
  */
  --progress-medium-spacing: var(--s-4);
  /**
    @desc small-spacing
    @semantic 元素间距(小号)
    @namespace size/common
  */
  --progress-large-spacing: var(--s-5);
}

.mt-progress {
  margin-top: var(--progress-margin);
  margin-bottom: var(--progress-margin);
}
.mt-progress-track {
  width: 100%;
}
.mt-progress-line {
  box-sizing: border-box;
}
.mt-progress-line-bar {
  transition: all 0.3s ease;
}
.mt-progress-line--small {
  width: 100%;
  padding: var(--progress-small-spacing) 0;
}
.mt-progress-line-small-corner {
  border-radius: var(--progress-bar-small-corner);
}
.mt-progress-line--medium {
  width: 100%;
  padding: var(--progress-medium-spacing) 0;
}
.mt-progress-line-medium-corner {
  border-radius: var(--progress-bar-medium-corner);
}
.mt-progress-line--large {
  width: 100%;
  padding: var(--progress-large-spacing) 0;
}
.mt-progress-line-large-corner {
  border-radius: var(--progress-bar-large-corner);
}
.mt-progress-circle {
  display: inline-block;
}