Align icons in footer mobile.

This commit is contained in:
Fabiano Alencar 2018-02-01 16:58:21 -02:00
parent 2e09c751a8
commit d2e9b1745f
2 changed files with 22 additions and 25 deletions

View File

@ -119,7 +119,7 @@ footer{
&:last-of-type{ &:last-of-type{
padding-bottom: 0; padding-bottom: 0;
} }
i{ i.symbol{
position: absolute; position: absolute;
transform: translate( -6px , 0 ); transform: translate( -6px , 0 );
margin-top: 16px; margin-top: 16px;
@ -136,7 +136,7 @@ footer{
} }
} }
h6{ h6{
i{ i.symbol{
&:before{ &:before{
content: "remove"; content: "remove";
@extend %transition; @extend %transition;
@ -158,7 +158,7 @@ footer{
display: none; display: none;
transform: translate( 0 , 50% ); transform: translate( 0 , 50% );
} }
&~i{ &~i.symbol{
&:before{ &:before{
transform: translate( 2px , 0 ) rotate( 45deg ); transform: translate( 2px , 0 ) rotate( 45deg );
} }

View File

@ -6,40 +6,37 @@
<li class="border border-white border-left-0 border-right-0 border-bottom-0"> <li class="border border-white border-left-0 border-right-0 border-bottom-0">
<input type="checkbox" checked> <input type="checkbox" checked>
<i></i> <i></i>
<h6 class="text-white font-weight-bold">Mapa do site <i class="material-icons mt-1"></i></h2> <h6 class="text-white font-weight-bold">Mapa do site <i class="material-icons mt-1 symbol"></i></h2>
<p class="text-oslo-gray"> <?php for($i=0;$i<=5;$i++){ ?>
<i class="material-icons text-white fiber">fiber_manual_record</i> Página 1 <p class="text-oslo-gray">
</p> <i class="material-icons text-white fiber">fiber_manual_record</i> Página <?=$i;?>
<p class="text-oslo-gray"> </p>
<i class="material-icons text-white fiber">fiber_manual_record</i> Página 2 <?php } ?>
</p>
</li> </li>
<li class="border border-white border-left-0 border-right-0 border-bottom-0"> <li class="border border-white border-left-0 border-right-0 border-bottom-0">
<input type="checkbox" checked> <input type="checkbox" checked>
<i></i> <i></i>
<h6 class="text-white font-weight-bold">Funções de administração <i class="material-icons mt-1"></i></h2> <h6 class="text-white font-weight-bold">Funções de administração <i class="material-icons mt-1 symbol"></i></h2>
<p class="text-oslo-gray"> <?php for($i=0;$i<=5;$i++){ ?>
<i class="material-icons text-white fiber">fiber_manual_record</i> Administração 1 <p class="text-oslo-gray">
</p> <i class="material-icons text-white fiber">fiber_manual_record</i> Administração <?=$i;?>
<p class="text-oslo-gray"> </p>
<i class="material-icons text-white fiber">fiber_manual_record</i> Administração 2 <?php } ?>
</p>
</li> </li>
<li class="border border-white border-left-0 border-right-0 border-bottom-0"> <li class="border border-white border-left-0 border-right-0 border-bottom-0">
<input type="checkbox" checked> <input type="checkbox" checked>
<i></i> <i></i>
<h6 class="text-white font-weight-bold">Funções do usuário <i class="material-icons mt-1"></i></h2> <h6 class="text-white font-weight-bold">Funções do usuário <i class="material-icons mt-1 symbol"></i></h2>
<p class="text-oslo-gray"> <?php for($i=0;$i<=5;$i++){ ?>
<i class="material-icons text-white fiber">fiber_manual_record</i> Usuário 1 <p class="text-oslo-gray">
</p> <i class="material-icons text-white fiber">fiber_manual_record</i> Usuário <?=$i;?>
<p class="text-oslo-gray"> </p>
<i class="material-icons text-white fiber">fiber_manual_record</i> Usuário 2 <?php } ?>
</p>
</li> </li>
<li class="border border-white border-left-0 border-right-0"> <li class="border border-white border-left-0 border-right-0">
<input type="checkbox" checked> <input type="checkbox" checked>
<i></i> <i></i>
<h6 class="text-white font-weight-bold">Redes sociais <i class="material-icons mt-1"></i></h2> <h6 class="text-white font-weight-bold">Redes sociais <i class="material-icons mt-1 symbol"></i></h2>
<p class="text-oslo-gray"> <p class="text-oslo-gray">
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24"> <svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
<path fill="#fff" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" /> <path fill="#fff" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />