代码之家 › 专栏 › 技术社区 › Taranjit Kang

阶梯指示器CSS

sass css

Taranjit Kang · 技术社区 · 8 年前

我正试图模仿这个步骤指示器,但我刚刚开始学习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-2-3-4等。
步骤之间的线条两端都有一个小的边距/空间
下面的字体不完美,也没有正确居中。

**我的文本是正确的,原文是错误的**

每个步骤都会添加一个类:

活动:带有蓝色圆圈和数字的电流为活动类别。已完成:添加灰色复选框,我正在使用SVG。非活动:带文本的普通白色背景。

1 回复 | 直到 8 年前

bags 8 年前

以下是一些可能会有所帮助的更改,下面是更新的代码笔(SCS中有其他注释):

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

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

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

.progressbar li:after { width: calc(100% - #{($circleSize + $circleBorderWidth * 2 + $lineOffset * 2)}); }
为非活动项添加白色边框,使其与 active 项目-这样线和圆之间的间隙可以均匀。

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

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

推荐文章