Start Creating Footer with according in mobile.

This commit is contained in:
Fabiano Alencar 2018-01-31 16:30:51 -02:00
parent 0561fe766a
commit 925273f651
4 changed files with 321 additions and 2 deletions

View File

@ -0,0 +1,11 @@
footer{
ul{
li{
p{
.fiber{
font-size: 9px;
}
}
}
}
}

View File

@ -0,0 +1,224 @@
nav{
&.menu-shadow{
.tainacan-logo{
@media only screen {
@media (max-width: 360px){
margin-left: 4vw;
margin-right: 10vw;
}
@media (min-width: 370px) and (max-width: 375px){
margin-left: 4vw;
margin-right: 13vw;
}
@media (min-width: 400px) and (max-width: 414px){
margin-left: 4vw;
margin-right: 21vw;
}
@media (min-width: 768px){
position: absolute;
left: 50px;
top: 1.4vh;
}
}
}
.navbar-toggler{
@media only screen {
@media (max-width: 414px){
position: absolute;
right: 16px;
top: 12px;
}
}
}
}
}
.header{
.header-img{
@media only screen{
@media (max-width: 768px){
min-height: 240px;
}
}
}
.header-icon{
@media only screen{
@media (max-width: 414px){
right: 1.4vw;
}
@media (min-width: 768px){
right: 2.9vw;
}
@media (min-width: 1440px){
right: 1.9vw;
}
@media (min-width: 1670px){
right: 0.9vw;
}
}
}
}
footer{
@media only screen {
@media (max-width: 768px){
%transition {
transition: all 0.25s ease-in-out;
}
%flipIn{
animation: flipdown 0.5s ease both;
}
%no-select{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
h6{
line-height: 34px;
letter-spacing: 1px;
display: block;
margin: 0;
@extend %no-select;
}
p{
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
@extend %transition;
opacity: 1;
display: block;
transform: translate( 0 , 0 ) ;
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
li{
position: relative;
@extend %flipIn;
&:nth-of-type(1){
animation-delay: 0.5s;
}
&:nth-of-type(2){
animation-delay: 0.75s;
}
&:nth-of-type(3){
animation-delay: 1.0s;
}
&:last-of-type{
padding-bottom: 0;
}
i{
position: absolute;
transform: translate( -6px , 0 );
margin-top: 16px;
right: 0;
&:before , &:after{
content: "";
@extend %transition;
}
&:before{
transform: translate( -2px , 0 ) rotate( 45deg );
}
&:after{
transform: translate( 2px , 0 ) rotate( -45deg );
}
}
h6{
i{
&:before{
content: "remove";
@extend %transition;
}
}
}
input[type=checkbox]{
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
&:checked{
&~p{
margin-top: 0;
max-height: 0;
opacity: 0;
display: none;
transform: translate( 0 , 50% );
}
&~i{
&:before{
transform: translate( 2px , 0 ) rotate( 45deg );
}
&:after{
transform: translate( -2px , 0 ) rotate( -45deg );
}
}
&~h6{
i{
&:before{
content: "add";
}
}
}
}
}
@keyframes flipdown{
0%{
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
}
5%{
opacity: 1;
}
80%{
transform: rotateX(8deg);
}
83%{
transform: rotateX(6deg);
}
92%{
transform: rotateX(-3deg);
}
100%{
transform-origin: top center;
transform: rotateX(0deg);
}
}
}
}
}
@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{
&.border{
border: none !important;
input[type=checkbox]{
display: none;
}
}
}
}
}
}
}

View File

@ -2,13 +2,17 @@ $heavy-metal: #1d1d1b;
$jelly-bean: #298596;
$scooter: #2cb4c1;
$jungle-green: #25a189;
$haiti: #150e38;
$oslo-gray: #898d8f;
$theme-colors: (
"heavy-metal": $heavy-metal,
"jelly-bean": $jelly-bean,
"scooter": $scooter,
"jungle-green": $jungle-green
"jungle-green": $jungle-green,
"haiti": $haiti,
"oslo-gray": $oslo-gray
);
@import "../vendor/bootstrap/scss/bootstrap";

View File

@ -1,4 +1,84 @@
<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">
<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"></i></h2>
<p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Página 1
</p>
<p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Página 2
</p>
</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"></i></h2>
<p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Administração 1
</p>
<p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Administração 2
</p>
</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"></i></h2>
<p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Usuário 1
</p>
<p class="text-oslo-gray">
<i class="material-icons text-white fiber">fiber_manual_record</i> Usuário 2
</p>
</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"></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" />
</svg>
Facebook
</p>
<p class="text-oslo-gray">
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
<path fill="#fff" d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" />
</svg>
Youtube
</p>
<p class="text-oslo-gray">
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
<path fill="#fff" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
Twitter
</p>
<p class="text-oslo-gray">
<svg style="width:1rem;height:1rem" viewBox="0 0 24 24">
<path fill="#fff" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg>
Google Plus
</p>
</li>
</ul>
</div>
</div>
<hr class="bg-scooter mx-md-4"/>
<div class="row pt-3 mx-md-4">
<div class="col">
</div>
<div class="col-auto pr-0 d-none d-sm-block">
<img src="<?php echo get_template_directory_uri() ?>/assets/images/logo-footer.svg" alt="">
</div>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>