baz_april/squelettes/scss/styles/_nav.scss

293 lines
4.9 KiB
SCSS
Raw Normal View History

2020-02-18 13:23:20 +01:00
// ------------------------------------------
// Sous-navigation et autres menus
// ------------------------------------------
// Habillage general des menus de nav
2020-02-18 23:50:44 +01:00
.menu {
clear: both;
margin-bottom: 1.5em;
text-align: left;
2020-02-18 13:23:20 +01:00
p {}
2020-02-18 23:50:44 +01:00
ul {
margin-bottom: 1.5em;
}
2020-02-18 13:23:20 +01:00
ul li {}
2020-02-18 23:50:44 +01:00
ul li ul {
margin-left: 1.5em;
list-style: circle;
}
2020-02-18 13:23:20 +01:00
}
.nav {
2020-02-18 23:50:44 +01:00
ul {
margin:0;
padding:0;
}
li {
display:inline;
line-height:1.2;
}
2020-06-27 02:45:19 +02:00
a {
2020-02-18 23:50:44 +01:00
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;
2020-06-05 11:11:09 +02:00
.header_initiatives & {
2020-02-18 23:50:44 +01:00
font-weight:400;
padding:0.5em;
2020-02-18 23:50:44 +01:00
margin:0;
color:white;
border:0;
}
2020-02-18 13:23:20 +01:00
.on &,
&.on,
&:focus,
&:hover,
2020-02-18 23:50:44 +01:00
&:active {
border-color:$couleurSecondaire;
2020-06-05 11:11:09 +02:00
.header_initiatives & {
2020-02-18 23:50:44 +01:00
background:$couleurSecondaire;
}
}
2020-02-18 13:23:20 +01:00
}
.pagination { margin:0 0 1rem; }
}
2020-02-28 01:57:35 +01:00
// menu smart cf js/script.js
// ----------------------------------------
.btn-nav {
position:absolute;
z-index:2;
right:$spacer;
top:0;
padding:0.4rem;
2020-02-28 01:57:35 +01:00
border:none;
background:$couleurPrincipale;
color:white;
font-size:0.9em;
outline:none !important;
display:none;
@media ($bp-medium) {
display:block;
}
&.actif {
color:$couleurPrincipaleDowner;
}
}
2020-02-18 13:23:20 +01:00
/* header = nav-principale */
.page_header > .page_container {
2020-02-18 23:50:44 +01:00
.nav {
padding-top:($spacer/2);
2020-09-16 15:33:54 +02:00
font-size:0.95rem;
2020-06-30 22:35:13 +02:00
z-index:9;
2020-02-18 23:50:44 +01:00
> ul {
text-align:right;
2020-06-30 22:35:13 +02:00
@include vendor-prefix(transition,all 0.3s ease-in-out);
2020-02-28 01:57:35 +01:00
@media ($bp-medium) {
position:absolute;
background:$couleurPrincipale;
width:100%;
top:38px;
2020-02-28 01:57:35 +01:00
left:-100%;
padding:$spacer/2 $spacer;
2020-06-30 22:36:36 +02:00
text-align:center;
2020-02-28 01:57:35 +01:00
&.ouvert{
left:0;
}
a {
color:white;
border:0;
display:block;
margin:0;
padding:0.5rem;
&:hover, &:focus, &.on {
background:$couleurSecondaire;
}
2020-02-28 01:57:35 +01:00
}
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;
}
}
}
}
2020-02-28 01:57:35 +01:00
}
.loupe {
position:relative;
display:inline-block !important;
/* width: em(26px); */
/* height: em(26px); */
span {
@include visuallyhidden;
}
a {
border:0;
background:none;
&:hover 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;
@include vendor-prefix(transition,all 0.3s ease-in-out);
form:before {
left:0.5rem;
}
#recherche {
width:100%;
}
&.vu {
top:1rem;
}
}
}
2020-02-18 23:50:44 +01:00
}
a {
font-weight:700;
}
2020-02-18 13:23:20 +01:00
}
}
// aside
// ------------------------------------
.page_aside {
2020-02-18 23:50:44 +01:00
.nav {
padding:0;
li {
display:block;
}
a {
width:100%;
}
2020-02-18 13:23:20 +01:00
& .blog {
2020-02-18 23:50:44 +01:00
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;
}
2020-02-18 13:23:20 +01:00
}
2020-02-18 23:50:44 +01:00
/* &:hover, &:focus, &:active, &.on { background:darken($grayLighter,10); color:$couleurPrincipaleDowner; } */
2020-02-18 13:23:20 +01:00
}
}
}
}
2020-06-05 11:11:09 +02:00
// initiatives
.page_header .header_initiatives {
2020-02-18 13:23:20 +01:00
position:absolute;
top:0;
left:0;
right:0;
2020-02-18 23:50:44 +01:00
background-color:$couleurPrincipale;
2020-02-18 13:23:20 +01:00
color:white;
2020-02-28 01:57:35 +01:00
2020-06-05 11:11:09 +02:00
.btn-initiatives {
font-size:0.8rem;
2020-02-28 01:57:35 +01:00
display:none;
padding:0.5rem;
margin-left:-$spacer;
2020-02-28 01:57:35 +01:00
background:$couleurPrincipale;
color:white;
@media ($bp-medium) {
display:block;
}
}
.nav {
2020-02-28 02:13:50 +01:00
font-size:0.8rem;
2020-02-28 01:57:35 +01:00
background:$couleurPrincipale;
@media ($bp-medium) {
position:absolute;
width:100%;
top:38px;
2020-02-28 01:57:35 +01:00
left:-100%;
2020-06-30 22:36:36 +02:00
@include vendor-prefix(transition,all 0.3s ease-in-out);
2020-02-28 01:57:35 +01:00
&.ouvert {
left:0;
}
ul, .initiatives {
display:inline;
}
2020-02-28 01:57:35 +01:00
}
}
.initiatives {
2020-02-28 02:13:50 +01:00
font-size:0.8rem;
2020-06-05 11:11:09 +02:00
}
.titre_initiatives {
2020-02-28 01:57:35 +01:00
float:right;
padding:0.5em;
2020-02-28 01:57:35 +01:00
@media ($bp-medium) {
2020-06-05 11:11:09 +02:00
display:none;
2020-02-28 01:57:35 +01:00
}
}
// 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;
z-index:9;
transition:all 0.3s ease-in-out;
&.ouvert {
top:38px;
li {
display:block;
background:$couleurPrincipale;
a {
display:block;
}
}
}
}
}
@include media($bp-medium) {
.menu-items__lien.sousinitiatives {
display:none;
}
}
}
2020-02-18 13:23:20 +01:00
}