css - 步骤指示器 CSS

Question

我正在尝试模仿这个步骤指示器，但我才刚刚开始学习 SASS，而且绝不是一般的 CSS 专业人士。

我正在努力实现这一目标:

但到目前为止:

代码笔:https://codepen.io/tarnn/pen/XEPdMP`

.progressbar li.completed:before {
        content: '';
        background: url("/assets/icons/check.svg") 0 3px no-repeat;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ebeae8;
    }`

非常接近，但我意识到有一些问题我还不知道如何解决，并希望能朝着正确的方向推进。

我正在努力解决的原始问题:

1. 字体大小每步增加，1-2-3-4 等。
2. 步骤之间的线在两端都有一个小的边距/空间
3. 它下面的字体不适合，也没有正确居中。

** 我的是对的，原文是错的**

每一步添加一个类:

Active:带蓝色圆圈和数字的current为active类。已完成:添加灰色复选框，我正在使用 SVG。不活动:带文字的普通白色 BG。

Answer 1

以下是一些可能有帮助的更改，下面是更新的 CodePen(在 SCSS 中有附加注释):

• 将 SASS 变量用于圆的大小和边框，以及直线和圆之间的间隙:

  $circleSize: 50px;
$circleBorderWidth: 5px;
$lineOffset: 10px;

  这样可以更轻松地计算线宽、位置和线高。例如:

  .progressbar li:after {
宽度:计算(100% - #{($circleSize + $circleBorderWidth * 2 + $lineOffset * 2)})；
}

• 为非事件元素添加白色边框，使它们与您的事件 元素的大小匹配 - 这样线条和圆圈之间的间隙可以保持一致。

https://codepen.io/anon/pen/RMYRPp

编辑:更新 CodePen 以修复圆圈大小