Я пытаюсь создать адаптивный индикатор выполнения, используя flex-direction: column. Пока он отлично работает в Chrome, Firefox и IE, но не работает в Safari.
В Safari шаги индикатора выполнения отображаются один под другим, а не в линию.
В моем css явно чего-то не хватает. Любые идеи?
Код css и html находится здесь: https://codepen.io/anon/pen/PeLJWY
Большое спасибо.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
margin: 0 auto;
height: 100px;
}
.step-indicator {
display: flex;
align-items: center;
padding: 0 10px;
}
.step {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
z-index: 1;
}
.step-indicator .step-icon {
height: 35px;
width: 35px;
border-radius: 50%;
background: #c2c2c2;
font-size: 8px;
text-align: center;
color: #ffffff;
position: relative;
line-height: 35px;
font-size: 20px;
}
.step-icon a {
text-align: center;
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
.step.active .step-icon {
background: #F08B46;
}
.step p {
text-align: center;
position: absolute;
bottom: -30px;
color: #c2c2c2;
font-size: 12px;
font-weight: bold;
width: 100px;
}
.step.active p {
color: #F08B46;
}
.step.step2 p,
.step.step3 p {
left: 50%;
transform: translateX(-50%);
}
.indicator-line {
width: 100%;
height: 7px;
background: #c2c2c2;
flex: 1;
margin-left: 3px;
margin-right: 3px;
}
.indicator-line.active {
background: #F08B46;
}
</style>
</head>
<body>
<div class="container">
<section class="step-indicator">
<div class="step active active"><div class="step-icon"> <a href="#" title="First Step">1</a></div><p>First Step</p></div> <div class="indicator-line active active"></div>
<div class="step active"><div class="step-icon"> <a href="#" title="Second Step">2</a></div><p>Second Step</p></div> <div class="indicator-line active"></div>
<div class="step"><div class="step-icon"> <a href="#" title="Third Step">3</a></div><p>Third Step</p></div> <div class="indicator-line "></div>
<div class="step"><div class="step-icon"> <a href="#" title="Done!"><i class="fa fa-check" aria-hidden="true"></i></a></div><p>Done!</p></div>
</section>
</div>
</body>
</html>
