Create Menu, Header and Align icons.
This commit is contained in:
Fabiano Alencar
parent
93a85ef6bd
commit
c749a18eb8
|
|
@ -14,6 +14,35 @@ Text Domain: tainacans
|
|||
nav{
|
||||
&.menu-shadow{
|
||||
box-shadow: 0 2px 9px 0 #808080a6;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-toggler{
|
||||
@media only screen {
|
||||
@media (max-width: 414px){
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -22,13 +51,13 @@ form{
|
|||
flex-flow: nowrap;
|
||||
.tainacan-input-search{
|
||||
&:focus{
|
||||
border-color: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.tainacan-button-search{
|
||||
border-color: none;
|
||||
box-shadow: none;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -40,6 +69,22 @@ form{
|
|||
min-height: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.header-icon{
|
||||
background-color: #0000007a;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
src/header.php
129
src/header.php
|
|
@ -8,77 +8,72 @@
|
|||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white menu-shadow">
|
||||
<div class="d-flex flex-nowrap w-100">
|
||||
<div class="mr-auto p-0">
|
||||
<a class="navbar-brand" href="#">
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-white menu-shadow px-1">
|
||||
<div class="d-md-flex ml-md-auto mr-md-4">
|
||||
<a class="navbar-brand tainacan-logo" href="#">
|
||||
<img src="<?php echo get_template_directory_uri().'/assets/images/logo.svg' ?>" class="logo" style="width: 150px">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-0">
|
||||
<div class="btn-group pt-1">
|
||||
<button type="button" class="btn btn-link text-heavy-metal pr-0"><i class="material-icons">folder_open</i></button>
|
||||
<button type="button" class="btn btn-link text-jelly-bean pl-0 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
<div class="btn-group pt-1 ml-auto">
|
||||
<button type="button" class="btn btn-link text-heavy-metal pr-0"><i class="material-icons">folder_open</i></button>
|
||||
<button type="button" class="btn btn-link text-jelly-bean px-0 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group pt-1">
|
||||
<button type="button" class="btn btn-link text-heavy-metal pr-0 pl-0"><i class="material-icons">person_outline</i></button>
|
||||
<button type="button" class="btn btn-link text-jelly-bean pl-0 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
<div class="btn-group pt-1">
|
||||
<button type="button" class="btn btn-link text-heavy-metal pr-0 pl-0"><i class="material-icons">person_outline</i></button>
|
||||
<button type="button" class="btn btn-link text-jelly-bean px-0 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<a class="dropdown-item" href="#">Trocar Senha</a>
|
||||
<a class="dropdown-item" href="#">Sair</a>
|
||||
</div>
|
||||
</div>
|
||||
<button class="navbar-toggler text-heavy-metal border-0 px-0 pt-2" type="button" data-toggle="collapse" data-target="#menuTp" aria-controls="menuTp" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse mt-sm-1" id="menuTp">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-heavy-metal" href="#"><i class="material-icons">notifications_none</i></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-heavy-metal" href="#"><i class="material-icons">event</i></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-heavy-metal" href="#"><i class="material-icons">help_outline</i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-0">
|
||||
<button class="navbar-toggler text-heavy-metal border-0 px-0 pt-2 mt-1" type="button" data-toggle="collapse" data-target="#menuTp" aria-controls="menuTp" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse mt-sm-1" id="menuTp">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-heavy-metal" href="#"><i class="material-icons">notifications_none</i></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-heavy-metal" href="#"><i class="material-icons">event</i></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-heavy-metal" href="#"><i class="material-icons">help_outline</i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<form class="tainacan-form-search">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="w-100 pt-1 mt-2 pl-1">
|
||||
<input class="form-control h-75 tainacan-input-search py-0 border-0" type="search" placeholder="Pesquisar">
|
||||
</div>
|
||||
<div class="pt-1 mt-2 mx-1">
|
||||
<button type="submit" class="btn h-75 pt-2 border-0 text-heavy-metal bg-white tainacan-button-search" onclick=""><i class="material-icons">search</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="d-flex flex-column header">
|
||||
<img src="<?php echo get_template_directory_uri() ?>/assets/images/capa.png" class="img-fluid header-img">
|
||||
<i class="material-icons float-right p-1 m-3 text-white bg-dark rounded-circle position-absolute" style="right: 0">settings</i>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<form class="tainacan-form-search">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="w-100 pt-1 mt-2 pl-1">
|
||||
<input class="form-control h-75 tainacan-input-search py-0 border-0" type="search" placeholder="Pesquisar">
|
||||
</div>
|
||||
<div class="pt-1 mt-2 ml-1">
|
||||
<button type="reset" class="btn h-75 pt-0 pr-0 border-0 bg-white tainacan-button-search" onclick=""><i class="material-icons">close</i></button>
|
||||
</div>
|
||||
<div class="pt-1 mt-2 mx-1">
|
||||
<button type="submit" class="btn h-75 pt-0 border-0 text-heavy-metal bg-white tainacan-button-search" onclick=""><i class="material-icons">search</i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="d-flex flex-column header">
|
||||
<img src="<?php echo get_template_directory_uri() ?>/assets/images/capa.png" class="img-fluid header-img">
|
||||
<i class="material-icons float-right p-1 m-2 mt-3 text-white rounded-circle position-absolute header-icon">settings</i>
|
||||
</div>
|
||||
Loading…
Reference in New Issue