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{
@media only screen {
@media (max-width: 768px){
@media (max-width: 991.98px){
%transition {
transition: all 0.25s ease-in-out;
}
@ -86,7 +86,7 @@ footer{
@extend %no-select;
}
p{
line-height: 26px;
line-height: 18px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
@ -97,6 +97,10 @@ footer{
transform: translate( 0 , 0 ) ;
margin-top: 14px;
z-index: 2;
font-size: 14px;
&:nth-of-type(1){
margin-top: 5px;
}
}
ul {
list-style: none;
@ -124,6 +128,7 @@ footer{
transform: translate( -6px , 0 );
margin-top: 16px;
right: 0;
font-size: 15px;
&:before , &:after{
content: "";
@extend %transition;
@ -138,7 +143,7 @@ footer{
h6{
i.symbol{
&:before{
content: "remove";
content: "close";
@extend %transition;
}
}
@ -204,13 +209,11 @@ footer{
@media (min-width: 992px){
ul{
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{
margin-right: 10vw;
&:last-child{
margin-right: 0;
}
&.border{
border: none !important;
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">
<div class="row">
<div class="col-12 col-md ml-md-4">
<ul class="p-4">
<div class="col-12 col-lg">
<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">
<input type="checkbox" checked>
<i></i>
<h6 class="text-white font-weight-bold">Mapa do site <i class="material-icons mt-1 symbol"></i></h2>
<?php for($i=0;$i<=5;$i++){ ?>
<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<=4;$i++){ ?>
<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>
<?php } ?>
</li>
<li class="border border-white border-left-0 border-right-0 border-bottom-0">
<input type="checkbox" checked>
<i></i>
<h6 class="text-white font-weight-bold">Funções de administração <i class="material-icons mt-1 symbol"></i></h2>
<?php for($i=0;$i<=5;$i++){ ?>
<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<=3;$i++){ ?>
<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>
<?php } ?>
</li>
<li class="border border-white border-left-0 border-right-0 border-bottom-0">
<input type="checkbox" checked>
<i></i>
<h6 class="text-white font-weight-bold">Funções do usuário <i class="material-icons mt-1 symbol"></i></h2>
<?php for($i=0;$i<=5;$i++){ ?>
<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<=2;$i++){ ?>
<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>
<?php } ?>
</li>
<li class="border border-white border-left-0 border-right-0">
<input type="checkbox" checked>
<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">
<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" />
@ -65,8 +65,8 @@
</ul>
</div>
</div>
<hr class="bg-scooter mx-md-4"/>
<div class="row pt-3 mx-md-4">
<hr class="bg-scooter"/>
<div class="row pt-3">
<div class="col">
</div>