O layout desktop possui uma timeline horizontal e quando acessar pelo mobile, a timeline deve ficar vertical.
Código HTML:
<section class="status">
<div class="status__box">
<p class="notaEmitida">Nota Fiscal Emitida</p>
<div class="status__vector">
<svg class="notaFiscalEmitida" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="despachado">Despachado</p>
<div class="status__vector">
<svg class="produtoDespachado" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="transito">Em trânsito</p>
<div class="status__vector">
<svg class="emTransito" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="entrega">Saiu para entrega</p>
<div class="status__vector">
<svg class="rotaEntrega" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
<svg class="line" width="120" height="3" viewBox="0 0 120 3" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M119.675 1.26636L0.111959 1.26636" stroke="#E5E5E5" stroke-width="2" />
</svg>
</div>
</div>
<div class="status__box">
<p class="entregue">Entregue</p>
<div class="status__vector">
<svg class="produtoEntregue" width="59" height="57" viewBox="0 0 59 57" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M29.4255 0.234112C45.6615 0.234112 58.7449 12.7194 58.7449 28.2131C58.7449 43.7069 45.6615 56.1921 29.4255 56.1921C13.1896 56.1921 0.106281 43.7069 0.106281 28.2131C0.106281 12.8698 13.1896 0.234112 29.4255 0.234112ZM29.4255 45.6624C39.5139 45.6624 47.7107 37.8403 47.7107 28.2131C47.7107 18.5859 39.5139 10.7638 29.4255 10.7638C19.3372 10.7638 11.1404 18.5859 11.1404 28.2131C11.1404 37.8403 19.3372 45.6624 29.4255 45.6624Z"
fill="#E5E5E5" />
</svg>
</div>
</div>
</section>
Código SCSS:
.status {
margin-top: 116px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
&__vector {
display: flex;
justify-content: center;
align-items: center;
}
&__box {
p {
padding-bottom: 20px;
position: relative;
font-weight: bold;
font-style: italic;
font-size: 13px;
color: #E5E5E5;
}
}
}
Está dessa forma:
Deve ficar versão mobile:
Qual a melhor forma de fazer o layout se adptar ao mobile?
@media
do CSS. Ela é responsável por aplicar estilos de forma condicional. Clique aqui – yoyo 4/11/20 às 16:19