Wordpressにて進捗状況を示すバーを作成しています。
下記のHTMLに対して、CSSを反映させたいのですがうまく反映されません。
下記以外のコードでもいくつか試してみたのですが、反映されるものと反映されないものがあり、原因が特定できずです。
ご教授いただけば幸いです、よろしくお願いいたします。
HTML
<ul class="ui-step-bar">
<li class="done">
<span>STEP1</span>
</li>
<li class="done">
<span>STEP2</span>
</li>
<li>
<span>STEP3</span>
</li>
<li>
<span>STEP4</span>
</li>
<li>
<span>STEP5</span>
</li>
</ul>
CSS
.ui-step-bar {
$barMargin: 8px 0;
$ballSize: 32px; // ボールの大きさ
$labelWidth: 80px; // ラベル領域の幅。枝の両端の空白もここで決まる
$labelFontSize: 12px; // ラベルのフォントサイズ
$labelFontColor: #ccc; // ラベルのフォントカラー
$labelFontColorActive: #666; // ラベルのフォントカラー
$labelPadding: 2px; // ラベルのpadding
$labelGap: 4px; // ボールとラベルのギャップ(px指定)
$branchWidth: 8px; //枝の太さ
$pendingColor: #ccc; // 待受中の色
$doneColor: #494; // 完了時の色
$unitHeight: $ballSize + ($labelGap + $labelPadding*2 + $labelGap)*2; //プログレスバーの高さ
&,
&>li {
margin: 0;
padding: 0;
list-style-type: none;
}
& {
display: flex;
width: 100%;
box-sizing: border-box;
padding: 0 $labelWidth/2;
position: relative;
height: $unitHeight;
margin: $barMargin;
}
>li {
width: 100%;
position: relative;
>span {
position: absolute;
display: block;
box-sizing: border-box;
width: $labelWidth;
margin: 0 $labelWidth*-0.5;
padding: $labelPadding;
top: ($unitHeight + $ballSize) * 0.5 + $labelPadding;
color: $labelFontColor;
right: 0;
font-size: $labelFontSize;
text-align: center;
line-height: 1em;
}
&:before,
&:after {
content: "";
position: absolute;
display: block;
top: 50%;
}
// ボールの間の枝
&:before {
width: 100%;
height: $branchWidth;
margin: $branchWidth*-0.5 0;
background-color: $pendingColor;
z-index: 1;
left: 0;
}
&:after {
width: $ballSize;
height: $ballSize;
margin: $ballSize*-0.5;
border-radius: 100%;
background-color: $pendingColor;
z-index: 2;
right: 0;
}
// ここがみそ。最初のLI要素のwidthは0にし、疑似要素の枝を非表示にする。
&:first-child {
width: 0;
&:before {
display: none;
}
}
&.done {
>span {
color: $labelFontColorActive;
}
&:before,
&:after {
background-color: $doneColor;
}
}
}
}