menu carré, bleu
This commit is contained in:
parent
2213f46f50
commit
6f46c16a9a
@ -40,9 +40,28 @@ span.btn {
|
||||
}
|
||||
.header_menu {
|
||||
flex-grow: 2;
|
||||
padding:1rem;
|
||||
padding:0 0 1rem;
|
||||
.nav {
|
||||
padding-top:0;
|
||||
.nav-list {
|
||||
@include flex();
|
||||
justify-content:end;
|
||||
align-items:stretch;
|
||||
}
|
||||
li {
|
||||
margin:0;
|
||||
}
|
||||
a {
|
||||
padding:1.1rem 1rem 1rem;
|
||||
margin:0;
|
||||
background:$couleurPrincipale !important;
|
||||
border:0;
|
||||
&:hover, &:active, &:focus, &.on {
|
||||
color:$couleurPrincipale !important;
|
||||
background:$couleurPrincipaleOn !important;
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.liens {
|
||||
text-align:right;
|
||||
@ -89,34 +108,21 @@ span.btn {
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav a {
|
||||
border:0;
|
||||
color:white;
|
||||
padding:0.3em 0.7em 0.2em;
|
||||
margin-right:0;
|
||||
margin-left:0;
|
||||
border-radius:4px;
|
||||
/* background-color:$couleurSecondaire; */
|
||||
.on &,
|
||||
&.on,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color:$couleurPrincipaleOn;
|
||||
color:$couleurPrincipale;
|
||||
}
|
||||
}
|
||||
> .page_container .nav > ul .loupe a {
|
||||
padding:0;
|
||||
i.fa-search {
|
||||
background-color:$blancTransparent;
|
||||
font-size:0.8rem;
|
||||
color:$couleurSecondaire;
|
||||
&:hover {
|
||||
padding:1.25rem 1.1rem 1.2rem;
|
||||
background-color:$couleurPrincipale;
|
||||
/* font-size:0.8rem; */
|
||||
border-radius:0;
|
||||
/* color:white; */
|
||||
|
||||
}
|
||||
&:focus i.fa-search, &:active i.fa-search, &:hover i.fa-search {
|
||||
background-color:$couleurPrincipaleOn;
|
||||
color:$couleurPrincipale;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page_header_container {
|
||||
@ -1174,39 +1180,21 @@ a.spip_out {
|
||||
@media (max-width:940px) {
|
||||
.page_header > .page_container {
|
||||
.nav {
|
||||
padding-top:0.5rem;
|
||||
font-size:0.95rem;
|
||||
z-index:7;
|
||||
position:static;
|
||||
> ul {
|
||||
> .nav-list {
|
||||
position:absolute;
|
||||
background:$couleurPrincipale;
|
||||
width:100%;
|
||||
top:36px;
|
||||
left:-100%;
|
||||
padding:0.5rem 1rem;
|
||||
text-align:center;
|
||||
z-index:10;
|
||||
justify-content:space-around;
|
||||
&.ouvert{
|
||||
left:0;
|
||||
}
|
||||
a {
|
||||
color:white;
|
||||
border:0;
|
||||
display:block;
|
||||
margin:0;
|
||||
padding:0.5rem;
|
||||
&:hover, &:focus, &.on {
|
||||
background:$couleurSecondaire;
|
||||
}
|
||||
}
|
||||
li {
|
||||
display:block;
|
||||
}
|
||||
.loupe {
|
||||
.fas {
|
||||
color:white;
|
||||
}
|
||||
.formulaire_recherche.vu {
|
||||
right:50%;
|
||||
margin-right:-160px;
|
||||
@ -1229,7 +1217,6 @@ a.spip_out {
|
||||
.btn-initiatives {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
@ -1285,3 +1272,50 @@ a.spip_out {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
@media($bp-medium) {
|
||||
.page_header > .page_container {
|
||||
.nav {
|
||||
font-size:0.95rem;
|
||||
z-index:7;
|
||||
position:static;
|
||||
> .nav-list {
|
||||
position:absolute;
|
||||
background:$couleurPrincipale;
|
||||
width:100%;
|
||||
top:36px;
|
||||
left:-100%;
|
||||
z-index:10;
|
||||
justify-content:space-around;
|
||||
flex-wrap:wrap;
|
||||
padding:0;
|
||||
&.ouvert{
|
||||
left:0;
|
||||
}
|
||||
a {
|
||||
padding:1.1rem 1rem 1rem;
|
||||
margin:0;
|
||||
background:$couleurPrincipale !important;
|
||||
border:0;
|
||||
&:hover, &:active, &:focus, &.on {
|
||||
color:$couleurPrincipale !important;
|
||||
background:$couleurPrincipaleOn !important;
|
||||
border:0;
|
||||
}
|
||||
}
|
||||
.loupe {
|
||||
.formulaire_recherche.vu {
|
||||
right:50%;
|
||||
margin-right:-160px;
|
||||
max-width:320px;
|
||||
form {
|
||||
padding:0.5rem;
|
||||
&:before {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user