412 lines
10 KiB
SCSS
Vendored
412 lines
10 KiB
SCSS
Vendored
// :root {
|
|
// --logo-width: 225px;
|
|
// --logo-marginX: 20px;
|
|
// }
|
|
|
|
header {
|
|
position: absolute;
|
|
top: 0;
|
|
// left: calc(50% - var(--container) / 2); top: 0;
|
|
// width: var(--container);
|
|
left: 0;
|
|
width: 100%;
|
|
height: var(--header-height);
|
|
padding: 20px 20px 10px;
|
|
background-color: rgb(255 255 255 / 50%);
|
|
grid-template-columns: 3fr 6fr 3fr;
|
|
place-items: center center;
|
|
|
|
.toggle-menu {
|
|
width: 25px;
|
|
height: 25px;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
|
|
&:hover .toggle-menu-span,
|
|
&:hover .toggle-menu-span::before,
|
|
&:hover .toggle-menu-span::after {
|
|
background-color: $first-btn-color-hover;
|
|
}
|
|
|
|
&.active {
|
|
.toggle-menu-span {
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-menu-span::before {
|
|
top: 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.toggle-menu-span::after {
|
|
top: 0;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
|
|
span {
|
|
position: relative;
|
|
display: block;
|
|
width: 25px;
|
|
height: 3px;
|
|
background-color: $first-btn-color;
|
|
transition: background-color 0.8s;
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 20px;
|
|
height: 3px;
|
|
background-color: $first-btn-color;
|
|
content: "";
|
|
transition: all 0.8s;
|
|
}
|
|
|
|
&::before {
|
|
top: -9px;
|
|
}
|
|
|
|
&::after {
|
|
top: 9px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
position: relative;
|
|
width: auto;
|
|
height: 100%;
|
|
max-height: 106px;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
transition: transform 0.5s;
|
|
will-change: transform;
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.header-logo-link {
|
|
position: absolute;
|
|
top: -10px;
|
|
width: 126px;
|
|
height: calc(var(--header-height) - 20px);
|
|
max-height: 106px;
|
|
background-image: url("@/images/logo-jeusselin.png");
|
|
background-position-y: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
// transition: background-image .5s;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
position: absolute;
|
|
top: var(--header-height);
|
|
left: -105%;
|
|
width: 100%;
|
|
height: calc(100vh - var(--header-height));
|
|
background-color: rgb(255 255 255 / 90%);
|
|
transition: 0.5s;
|
|
|
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
&.active {
|
|
z-index: 2;
|
|
left: 0;
|
|
}
|
|
|
|
ul {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-top: 1px solid;
|
|
border-top-color: $gris;
|
|
|
|
li {
|
|
width: 100%;
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid;
|
|
border-bottom-color: $gris;
|
|
text-align: center;
|
|
|
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
&:hover a,
|
|
&.active a {
|
|
color: $tertiary;
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
a {
|
|
display: block;
|
|
color: #000;
|
|
font-family: "Exo_2_Bold", Arial, Helvetica, sans-serif;
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition: color 0.5s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-menu {
|
|
display: none;
|
|
}
|
|
|
|
.right-menu-mobile {
|
|
position: relative;
|
|
top: -10px;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
|
|
.mobile-disconnect {
|
|
margin-left: 10px;
|
|
// display: none;
|
|
}
|
|
// .mobile-connect, .mobile-disconnect{display: none;}
|
|
// .mobile-connect.active{display: block;}
|
|
.mobile-disconnect.logged {
|
|
display: block;
|
|
}
|
|
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
#svg-connect,
|
|
#svg-search,
|
|
img {
|
|
width: 25px;
|
|
height: auto;
|
|
fill: $first-btn-color;
|
|
transition: all 0.5s;
|
|
|
|
&:hover {
|
|
fill: $first-btn-color-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ****
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// ****
|
|
@media only screen and (width >= 1024px) {
|
|
header {
|
|
grid-template-columns: 10% 70% 20%;
|
|
justify-items: normal;
|
|
|
|
.logo,
|
|
nav,
|
|
.toggle-menu {
|
|
z-index: 1;
|
|
}
|
|
|
|
.logo .header-logo-link {
|
|
width: 102px;
|
|
height: calc(var(--header-height) - 20px);
|
|
}
|
|
|
|
.logo img {
|
|
height: 100%;
|
|
}
|
|
|
|
.toggle-menu {
|
|
display: none;
|
|
}
|
|
|
|
nav {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
height: calc(var(--header-height) - 20px);
|
|
background-color: transparent;
|
|
|
|
ul {
|
|
height: 100%;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
border-top: 0;
|
|
|
|
li {
|
|
width: unset;
|
|
padding: 5px 0;
|
|
border-bottom: 2px solid transparent;
|
|
transition: 0.5s;
|
|
|
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
&:hover,
|
|
&.active {
|
|
border-bottom: 2px solid;
|
|
border-bottom-color: $tertiary;
|
|
}
|
|
|
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
&:hover a,
|
|
&.active a {
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
a {
|
|
display: inline;
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-menu {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
|
|
.connect-contain {
|
|
position: absolute;
|
|
top: calc(-100% - 20px);
|
|
right: 0;
|
|
display: flex;
|
|
width: 500px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
// p{display: none;}
|
|
.connect {
|
|
text-align: right;
|
|
// transform: translateY(-15%);
|
|
|
|
a {
|
|
padding-left: 40px;
|
|
margin: 10px 0 10px 10px;
|
|
background-image: url("@/images/connect.svg");
|
|
background-position: 10px center;
|
|
background-repeat: no-repeat;
|
|
background-size: 20px;
|
|
font-size: 0.8rem;
|
|
line-height: 1.2rem;
|
|
|
|
&::after {
|
|
content: "Espace Agri Jeusselin";
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
p.logged {
|
|
display: block;
|
|
}
|
|
|
|
.connect.logged {
|
|
a::after {
|
|
content: "Mon compte";
|
|
}
|
|
}
|
|
|
|
.disconnect {
|
|
// display: none;
|
|
width: 40px;
|
|
height: 30px;
|
|
text-align: right;
|
|
|
|
img {
|
|
height: 100%;
|
|
transition: all 0.5s;
|
|
|
|
&:hover {
|
|
filter: brightness(200%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.disconnect.logged {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.search {
|
|
justify-content: flex-end;
|
|
transition: all 0.5s;
|
|
|
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
input[type="text"] {
|
|
width: 70%;
|
|
padding: 7px 20px 7px 30px;
|
|
border: 0;
|
|
border-radius: 20px 0 0 20px;
|
|
background-image: url("@/images/search.svg");
|
|
background-position: 10px center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* stylelint-disable-next-line selector-no-qualifying-type */
|
|
input[type="submit"] {
|
|
padding: 7px 10px;
|
|
border: 0;
|
|
border-radius: 0 20px 20px 0;
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
line-height: normal;
|
|
|
|
&:hover {
|
|
color: $second-color-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-menu-mobile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.sticky-bar {
|
|
position: fixed;
|
|
z-index: 99;
|
|
height: 55px;
|
|
padding: 0 20px;
|
|
background-color: rgb(244 244 244 / 100%);
|
|
|
|
nav {
|
|
height: 55px;
|
|
}
|
|
|
|
.logo .header-logo-link {
|
|
top: 0;
|
|
height: 100%;
|
|
background-image: url("@/images/logo-jeusselin-fixed.png");
|
|
background-size: unset;
|
|
}
|
|
|
|
.right-menu .search {
|
|
display: none;
|
|
}
|
|
|
|
.right-menu .connect-contain {
|
|
top: calc(-100% - 27px);
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
.right-menu .connect {
|
|
top: 0;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|