tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Footer mobile accordion and list on desktop. (No using js).

This commit is contained in:
Fabiano Alencar 2018-02-02 15:05:51 -02:00
parent d2e9b1745f
commit 97b28b45c5
2 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/scss/_media_query.scss
View File

@ -61,7 +61,7 @@ nav{
footer{ footer{
@media only screen { @media only screen {
@media (max-width: 768px){ @media (max-width: 991.98px){
%transition { %transition {
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
} }
@ -86,7 +86,7 @@ footer{
@extend %no-select; @extend %no-select;
} }
p{ p{
line-height: 26px; line-height: 18px;
letter-spacing: 1px; letter-spacing: 1px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -97,6 +97,10 @@ footer{
transform: translate( 0 , 0 ) ; transform: translate( 0 , 0 ) ;
margin-top: 14px; margin-top: 14px;
z-index: 2; z-index: 2;
font-size: 14px;
&:nth-of-type(1){
margin-top: 5px;
}
} }
ul { ul {
list-style: none; list-style: none;
@ -124,6 +128,7 @@ footer{
transform: translate( -6px , 0 ); transform: translate( -6px , 0 );
margin-top: 16px; margin-top: 16px;
right: 0; right: 0;
font-size: 15px;
&:before , &:after{ &:before , &:after{
content: ""; content: "";
@extend %transition; @extend %transition;
@ -138,7 +143,7 @@ footer{
h6{ h6{
i.symbol{ i.symbol{
&:before{ &:before{
content: "remove"; content: "close";
@extend %transition; @extend %transition;
} }
} }
@ -204,13 +209,11 @@ footer{
@media (min-width: 992px){ @media (min-width: 992px){
ul{ ul{
list-style: none; list-style: none;
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
column-count: 4;
column-gap: 20px;
li{ li{
margin-right: 10vw;
&:last-child{
margin-right: 0;
}
&.border{ &.border{
border: none !important; border: none !important;
input[type=checkbox]{ input[type=checkbox]{

28
src/footer.php
View File

@ -1,42 +1,42 @@
<footer class="container-fluid p-4 p-sm-5 mt-2 bg-haiti"> <footer class="container-fluid p-4 p-sm-5 mt-2 bg-haiti">
<div class="row"> <div class="row">
<div class="col-12 col-md ml-md-4"> <div class="col-12 col-lg">
<ul class="p-4"> <ul class="p-4 d-lg-flex justify-content-md-center mb-md-0">
<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 symbol"></i></h2> <h6 class="text-white font-weight-bold mb-lg-4">Mapa do site <i class="material-icons mt-2 symbol"></i></h2>
<?php for($i=0;$i<=5;$i++){ ?> <?php for($i=0;$i<=4;$i++){ ?>
<p class="text-oslo-gray"> <p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Página <?=$i;?> <i class="d-none d-md-inline-block material-icons text-white fiber">fiber_manual_record</i> Página <?=$i;?>
</p> </p>
<?php } ?> <?php } ?>
</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 symbol"></i></h2> <h6 class="text-white font-weight-bold mb-lg-4">Funções de administração <i class="material-icons mt-2 symbol"></i></h2>
<?php for($i=0;$i<=5;$i++){ ?> <?php for($i=0;$i<=3;$i++){ ?>
<p class="text-oslo-gray"> <p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Administração <?=$i;?> <i class="d-none d-md-inline-block material-icons text-white fiber">fiber_manual_record</i> Administração <?=$i;?>
</p> </p>
<?php } ?> <?php } ?>
</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 symbol"></i></h2> <h6 class="text-white font-weight-bold mb-lg-4">Funções do usuário <i class="material-icons mt-2 symbol"></i></h2>
<?php for($i=0;$i<=5;$i++){ ?> <?php for($i=0;$i<=2;$i++){ ?>
<p class="text-oslo-gray"> <p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Usuário <?=$i;?> <i class="d-none d-md-inline-block material-icons text-white fiber">fiber_manual_record</i> Usuário <?=$i;?>
</p> </p>
<?php } ?> <?php } ?>
</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 symbol"></i></h2> <h6 class="text-white font-weight-bold mb-lg-4">Redes sociais <i class="material-icons mt-2 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" />
@ -65,8 +65,8 @@
</ul> </ul>
</div> </div>
</div> </div>
<hr class="bg-scooter mx-md-4"/> <hr class="bg-scooter"/>
<div class="row pt-3 mx-md-4"> <div class="row pt-3">
<div class="col"> <div class="col">
</div> </div>