baz_april/squelettes/scss/_baz-nav.scss

193 lines
3.0 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, a:visited {
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__boussole & {
font-weight:400;
padding:1em;
margin:0;
color:white;
border:0;
}
.on &,
&.on,
&:focus,
&:hover,
&:active {
border-color:$couleurSecondaire;
.header__boussole & {
background:$couleurSecondaire;
}
}
}
.pagination { margin:0 0 1rem; }
}
// menu smart cf js/script.js
// ----------------------------------------
.btn-nav {
position:absolute;
z-index:2;
right:$spacer;
top:0;
padding:$spacer;
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;
font-size:0.9rem;
> ul {
text-align:right;
@media ($bp-medium) {
position:absolute;
background:$couleurPrincipale;
width:100%;
top:44px;
left:-100%;
padding:$spacer/2 $spacer;
&.ouvert{
left:0;
}
a {
color:white;
border-color:$couleurPrincipale;
}
li {
display:block;
}
}
}
a {
font-weight:700;
}
}
}
// aside
// ------------------------------------
.contentAside {
.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; } */
}
}
}
}
// boussole
.page__header .header__boussole {
position:absolute;
top:0;
left:0;
right:0;
background-color:$couleurPrincipale;
color:white;
.btn-boussole {
font-size:0.8rem;
display:none;
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:43px;
left:-100%;
&.ouvert {
left:0;
}
}
}
.initiatives {
font-size:0.8rem;
float:right;
margin-top:$spacer;
@media ($bp-medium) {
color:$couleurPrincipaleDowner;
font-size:0.6em;
margin:0;
position:absolute;
bottom:-$spacer;
left:$spacer*1.6;
}
}
}