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

menu carré, bleu

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 {
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 {
> .page_container .nav > ul .loupe a {
padding:0;
i.fa-search {
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_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 {
@ -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,20 +1217,19 @@ a.spip_out {
.btn-initiatives {
display:block;
}
.nav {
position:absolute;
width:100%;
top:36px;
left:-100%;
@include vendor-prefix(transition,all 0.3s ease-in-out);
&.ouvert {
left:0;
.nav {
position:absolute;
width:100%;
top:36px;
left:-100%;
@include vendor-prefix(transition,all 0.3s ease-in-out);
&.ouvert {
left:0;
}
ul, .initiatives {
display:inline;
}
}
ul, .initiatives {
display:inline;
}
}
}
}
@ -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;
}
}
}
}
}
}
}
}