gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
app/assets/scss/component/_header_nav.scss
View File

@@ -8,11 +8,53 @@
font-family: 'brandontext_regular';
font-size: 16px;
.header_nav_item {
.header_nav_topbar_item {
list-style: none;
cursor: pointer;
margin-right: 30px;
&:last-child {
margin-right: 0px;
}
position: relative;
cursor: pointer;
&:hover {
.header_nav_topbar_submenu {
visibility: visible;
/* Pour l'effet de transition */
opacity: 1;
}
}
}
.header_nav_topbar_submenu {
position: absolute;
left: 0;
z-index: 2;
width: 187px;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 3px;
.header_nav_topbar_submenu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 15px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
.header_nav_lang {
display: flex;
@@ -29,12 +71,16 @@
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
@include media_queries.media_min(tablet_600) {
@include media_queries.media_min(tablet_701) {
grid-template-columns: 140px 1fr;
}
}
@include media_queries.media_min(tablet_800) {
grid-template-columns: 140px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 140px 1fr;
grid-template-columns: 171px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: 200px 1fr;
@@ -51,16 +97,65 @@
}
.header_nav_logo {
margin-top: -17px;
@include media_queries.media_min(tablet_700) {
margin-top: -7px;
}
@include media_queries.media_min(tablet_800) {
margin-top: -7px;
}
@include media_queries.media_min(tablet_900) {
margin-top: -17px;
}
@include media_queries.media_max(tablet_700) {
width: 166px;
margin-left: 43px;
}
@include media_queries.media_max(phone_500) {
margin-left: 0px;
}
@include media_queries.media_max(phone_300) {
margin-left: 0px;
}
}
.header_nav_cont {
margin-left: 30px;
margin-right: 30px;
@include media_queries.media_max(tablet_800) {
margin-left: 40px;
margin-right: 20px;
}
@include media_queries.media_min(tablet_800) {
margin-left: 25px;
margin-right: 25px;
}
@include media_queries.media_min(tablet_900) {
margin-left: 30px;
margin-right: 30px;
}
@include media_queries.media_max(tablet_700) {
margin-top: -9px;
}
.header_nav {
display: flex;
row-gap: 13px;
justify-content: center;
@include media_queries.media_min(tablet_700) {
justify-content: flex-start;
}
@include media_queries.media_min(tablet_800) {
justify-content: center;
}
flex-wrap: wrap;
text-wrap-mode: nowrap;
font-family: 'brandontext_regular';
@@ -81,8 +176,23 @@
}
.header_nav_item {
margin-right: 34px;
@include media_queries.media_min(tablet_600) {
position: relative;
cursor: pointer;
&:hover {
.header_nav_sub_menu {
visibility: visible;
/* Pour l'effet de transition */
opacity: 1;
}
}
list-style: none;
&:nth-child(5) {
margin-right: 10px;
}
@include media_queries.media_min(tablet_701) {
margin-right: 20px;
}
@include media_queries.media_min(tablet_900) {
@@ -100,24 +210,51 @@
&:last-child {
margin-right: 0px;
}
}
.header_nav_sub_menu {
position: absolute;
left: 0;
z-index: 2;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
.header_nav_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 18px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
.header_nav_icones {
display: flex;
}
.nav_icone {
display: flex;
.nav_icone_img {
margin-right: 6px;
@include media_queries.media_min(tablet_600) {
margin-top: 1px;
}
@include media_queries.media_min(tablet_900) {
margin-top: 1px;
}
@include media_queries.media_min(desktop_1800) {
margin-top: 2px;
}
img {
@include media_queries.media_max(tablet_600) {
width: 83%;
}
@include media_queries.media_min(tablet_600) {
width: 83%;
}
@@ -128,9 +265,195 @@
width: 100%;
}
}
}
.nav_icone_img--agenda {
margin-right: 13px;
@include media_queries.media_min(tablet_600) {
margin-top: 1px;
}
@include media_queries.media_min(tablet_900) {
margin-top: 2px;
}
@include media_queries.media_min(desktop_1800) {
margin-top: 2px;
}
}
.nav_icone_img--ticket {
width: 46px;
margin-top: -4px;
}
}
}
}
/* accessibilité pour que les écran est le message "ouvrir le menu" mais non visible sur l'écran en mode normal*/
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Par défaut : desktop visible, mobile caché */
.header_nav--desktop { display: flex; }
.header_nav--mobile { display: none; }
.header_nav--mobile-icons { display: none; }
.header_drawer { display: none; }
/* ✅ Mobile < 700px : on inverse */
@media (max-width: 700px) {
.header_nav--desktop { display: none; }
.header_nav--mobile {
display: flex;
justify-content: flex-end;
margin-top: -21px;
}
.header_nav--mobile-icons {
display: none;
@include media_queries.media_min(phone_400) {
display: flex;
}
justify-content: flex-end;
margin-top: -23px;
margin-right: 60px;
}
.hamburger_black {
background-color: $noir;
}
.hamburger_white {
background-color: $blanc;
}
.header_burger {
position: relative;
background: transparent;
border: 0;
cursor: pointer;
width: 27px;
padding: 8px;
font-size: 26px;
line-height: 1;
img {
width: 31px;
}
.burger_line {
position: absolute;
left: 0;
width: 100%;
height: 3px;
transition:
transform 0.25s ease,
opacity 0.2s ease,
top 0.25s ease;
}
.burger_line:nth-child(1) { top: 0; }
.burger_line:nth-child(2) { top: 8px; }
.burger_line:nth-child(3) { top: 16px; }
&.is-open {
.burger_line:nth-child(1) {
top: 8px;
transform: rotate(45deg);
}
.burger_line:nth-child(2) {
opacity: 0;
}
.burger_line:nth-child(3) {
top: 8px;
transform: rotate(-45deg);
}
}
}
.header_drawer {
display: block;
width: 100%;
position: absolute;
left: 0;
border-top: 1px solid rgba(0,0,0,.1);
background-color: rgba(0, 0, 0, 0.9);
margin-top: 47px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 40px;
}
.header_drawer[data-open="false"] {
display: none;
}
.header_drawer_inner {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 0;
}
.header_drawer_link {
text-decoration: none;
color: $blanc;
padding: 6px 0;
font-size: 26px;
position: relative;
cursor: pointer;
&.is-open {
.header_drawer_sub_menu {
display: block;
visibility: visible;
opacity: 1;
}
}
list-style: none;
}
.header_drawer_sub_menu {
display: none;
max-width: 300px;
//position: absolute;
left: 0;
z-index: 2;
visibility:hidden;
/* Pour l'effet de transition */
opacity: 0;
transition: visibility 0.2s,opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-left: 9px;
padding-right: 16px;
padding-bottom: 5px;
text-align: left;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 3px;
}
.header_drawer_sub_menu_item {
list-style: none;
font-family: 'brandontext_regular';
font-size: 18px;
padding-bottom: 2px;
&:hover {
a {
color: var(--c-brand_rouge);
}
}
}
}
}