baz_april/squelettes/scss/styles/_nav.scss
2021-10-04 07:48:46 +02:00

324 lines
5.4 KiB
SCSS

// ------------------------------------------
// Sous-navigation et autres menus
// ------------------------------------------
// Habillage general des menus de nav
.menu {
clear: both;
margin-bottom: 1.5em;
text-align: left;
p {}
ul {
margin-bottom: 1.5em;
}
ul li {}
ul li ul {
margin-left: 1.5em;
list-style: circle;
}
}
.nav {
ul {
margin:0;
padding:0;
}
li {
display:inline;
line-height:1.2;
}
a {
display: inline-block;
padding:0.3em 0 0.2em;
margin:0 0.5em 0.4em;
text-decoration: none;
line-height:1.4;
border-bottom:3px solid white;
.header_initiatives & {
font-weight:400;
padding:0.5em;
margin:0.1rem 0.4rem;
color:white;
border:0;
@include media($bp-medium) {
padding:0.8rem;
}
}
.on &,
&.on,
&:focus,
&:hover,
&:active {
border-color:$couleurSecondaire;
.header_initiatives & {
border-color:$couleurPrincipaleOn;
}
}
}
.pagination { margin:0 0 1rem; }
}
.menucache {
display: none;
position: fixed;
left: 0;
top: 0px;
width: 100%;
height: 100%;
background:transparent;
z-index:8;
cursor:pointer;
&.cache { display:block;}
}
// menu smart cf js/script.js
// ----------------------------------------
.btn-nav {
position:absolute;
z-index:10;
right:$spacer;
top:0;
padding:0.4rem;
border:none;
background:$couleurPrincipale;
color:white;
font-size:0.9em;
outline:none !important;
display:none;
@media ($bp-medium) {
display:block;
}
&.actif {
color:$couleurPrincipaleDowner;
}
}
/* header = nav-principale */
.page_header > .page_container {
.nav {
padding-top:($spacer/2);
font-size:0.95rem;
@include media($bp-medium-up) {
position:relative;
}
> ul {
text-align:right;
@include vendor-prefix(transition,all 0.3s ease-in-out);
@media ($bp-medium) {
position:absolute;
background:$couleurPrincipale;
width:100%;
top:36px;
left:-100%;
padding:$spacer/2 $spacer;
text-align:center;
z-index:10;
&.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;
max-width:320px;
form {
padding:0.5rem;
&:before {
display:none;
}
}
}
}
}
.loupe {
position:relative;
display:inline-block !important;
/* width: em(26px); */
/* height: em(26px); */
span {
@include visuallyhidden;
}
a {
display:inline;
padding:0;
border:0;
background:none;
&:hover i.fa-search, &:focus i.fa-search {
background-color:$couleurSecondaire;
}
}
i.fa-search {
font-size:1rem;
border-radius: 20px;
background-color: $couleurPrincipale;
padding:7px;
color:white;
}
.formulaire_recherche {
position:absolute;
height:auto;
width:em(350px);
max-width:em(350px);
top:-1000px;
left:auto;
right:0;
border-radius: $spacer/2;
z-index:2;
@include vendor-prefix(transition,all 0.3s ease-in-out);
form:before {
left:0.5rem;
}
#recherche {
width:100%;
}
&.vu {
top:1rem;
}
}
}
}
a {
font-weight:700;
}
}
}
// aside
// ------------------------------------
.page_aside {
.nav {
padding:0;
li {
display:block;
}
a {
width:100%;
}
& .blog {
a {
line-height:1;
padding:1em;
font-weight:700;
p {
font-weight:400;
margin:0;
&.date {
font-size:90%;
margin:0 0 0.3em;
}
&.introduction {
font-size:0.8em;
margin-top:0.5em;
}
}
/* &:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$couleurPrincipaleDowner; } */
}
}
}
}
// initiatives
.header_initiatives {
position:absolute;
top:0;
left:0;
right:0;
background-color:$couleurPrincipale;
color:white;
z-index:9;
.btn-initiatives {
font-size:0.8rem;
display:none;
padding:0.5rem;
margin-left:-$spacer;
background:$couleurPrincipale;
color:white;
@media ($bp-medium) {
display:block;
}
}
.nav {
font-size:0.8rem;
background:$couleurPrincipale;
@media ($bp-medium) {
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;
}
li {
margin:0;
}
}
.menu-liste .menu-liste {
li, a {
margin:0;
}
}
}
.initiatives {
font-size:0.8rem;
}
.titre_initiatives {
float:right;
padding:0.5em;
@media ($bp-medium) {
display:none;
}
}
.initiatives_april {
float:right;
}
// un sous-menu dans initiatives : .menu-entree.sousinitiatives > .menu-items__lien.sousinitiatives
.menu-entree.sousinitiatives {
position:relative;
> ul {
@include media($bp-medium-up) {
position:absolute;
top:-999em;
left:0;
width:150px;
&.ouvert {
top:23px;
li {
display:block;
background:$couleurPrincipale;
a {
display:block;
}
}
}
}
}
@include media($bp-medium) {
.menu-items__lien.sousinitiatives {
display:none;
}
}
}
}