From 97b28b45c569b35186ca393d7db3636be1d4d9bc Mon Sep 17 00:00:00 2001
From: Fabiano Alencar <fabianocarvalho15@gmail.com>
Date: Fri, 2 Feb 2018 15:05:51 -0200
Subject: [PATCH] Footer mobile accordion and list on desktop. (No using js).

---
 src/assets/scss/_media_query.scss | 21 ++++++++++++---------
 src/footer.php                    | 28 ++++++++++++++--------------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/assets/scss/_media_query.scss b/src/assets/scss/_media_query.scss
index 9697b96..db89f39 100644
--- a/src/assets/scss/_media_query.scss
+++ b/src/assets/scss/_media_query.scss
@@ -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]{
diff --git a/src/footer.php b/src/footer.php
index 749e29a..cfb9250 100644
--- a/src/footer.php
+++ b/src/footer.php
@@ -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>