siteweb/libreavous
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

menu carré, bleu

Browse Source
This commit is contained in:
chankalan 2021-10-03 17:35:26 +02:00
parent 2213f46f50
commit 6f46c16a9a
1 changed files with 92 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
squelettes/scss/styles/_perso.scss
View File

@ -40,9 +40,28 @@ span.btn {
} }
.header_menu { .header_menu {
flex-grow: 2; flex-grow: 2;
padding:1rem; padding:0 0 1rem;
.nav { .nav {
padding-top:0; 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 { .liens {
text-align:right; text-align:right;
@ -89,34 +108,21 @@ span.btn {
} }
} }
} }
.nav a { > .page_container .nav > ul .loupe a {
border:0; padding:0;
color:white; i.fa-search {
padding:0.3em 0.7em 0.2em; padding:1.25rem 1.1rem 1.2rem;
margin-right:0; background-color:$couleurPrincipale;
margin-left:0; /* font-size:0.8rem; */
border-radius:4px; border-radius:0;
/* background-color:$couleurSecondaire; */ /* color:white; */
.on &,
&.on, }
&:focus, &:focus i.fa-search, &:active i.fa-search, &:hover i.fa-search {
&:hover,
&:active {
background-color:$couleurPrincipaleOn; background-color:$couleurPrincipaleOn;
color:$couleurPrincipale; color:$couleurPrincipale;
} }
} }
> .page_container .nav > ul .loupe a {
i.fa-search {
background-color:$blancTransparent;
font-size:0.8rem;
color:$couleurSecondaire;
&:hover {
background-color:$couleurPrincipaleOn;
color:$couleurPrincipale;
}
}
}
} }
.page_header_container { .page_header_container {
@ -1174,39 +1180,21 @@ a.spip_out {
@media (max-width:940px) { @media (max-width:940px) {
.page_header > .page_container { .page_header > .page_container {
.nav { .nav {
padding-top:0.5rem;
font-size:0.95rem; font-size:0.95rem;
z-index:7; z-index:7;
position:static; position:static;
> ul { > .nav-list {
position:absolute; position:absolute;
background:$couleurPrincipale; background:$couleurPrincipale;
width:100%; width:100%;
top:36px; top:36px;
left:-100%; left:-100%;
padding:0.5rem 1rem;
text-align:center;
z-index:10; z-index:10;
justify-content:space-around;
&.ouvert{ &.ouvert{
left:0; left:0;
} }
a {
color:white;
border:0;
display:block;
margin:0;
padding:0.5rem;
&:hover, &:focus, &.on {
background:$couleurSecondaire;
}
}
li {
display:block;
}
.loupe { .loupe {
.fas {
color:white;
}
.formulaire_recherche.vu { .formulaire_recherche.vu {
right:50%; right:50%;
margin-right:-160px; margin-right:-160px;
@ -1229,20 +1217,19 @@ a.spip_out {
.btn-initiatives { .btn-initiatives {
display:block; display:block;
} }
.nav {
.nav { position:absolute;
position:absolute; width:100%;
width:100%; top:36px;
top:36px; left:-100%;
left:-100%; @include vendor-prefix(transition,all 0.3s ease-in-out);
@include vendor-prefix(transition,all 0.3s ease-in-out); &.ouvert {
&.ouvert { left:0;
left:0; }
ul, .initiatives {
display:inline;
}
} }
ul, .initiatives {
display:inline;
}
}
} }
} }
@ -1285,3 +1272,50 @@ a.spip_out {
min-width: 100px; 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;
}
}
}
}
}
}
}
}