@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/FooterBar/FooterBar.vue

@@ -240,102 +240,127 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
+
 $white: #fff;
 
 a {
-  cursor: pointer;
+	cursor: pointer;
 }
+
 .v-btn--icon {
-  border: 0;
+	border: 0;
 }
+
 // Fix footer bar height in SK
 .v-footer {
-  flex-grow: 0 !important;
-  justify-content: center;
-  .container {
-    width: 100%;
-    max-width: 1712px;
-    margin: 0 auto;
-  }
+	flex-grow: 0 !important;
+	justify-content: center;
+
+	.container {
+		width: 100%;
+		max-width: 1712px;
+		margin: 0 auto;
+	}
 }
+
 .vd-footer-bar :deep() {
-  .vd-footer-bar-links a {
-    color: rgba(0, 0, 0, .87);
-  }
-  p,
-  .text--primary {
-    color: rgba(0, 0, 0, .87);
-  }
-  .text--secondary {
-    color: rgba(0, 0, 0, .6);
-  }
-  .social {
-    .text--primary {
-      color: tokens.$primary-base;
-    }
-    a.v-btn:hover {
-      background: rgba(0, 0, 0, 0.05);
-    }
-  }
-  button.v-btn:hover {
-    background: rgba(0, 0, 0, 0.05);
-  }
-  a.text--primary {
-    color: tokens.$primary-base;
-  }
-  .v-divider {
-    border-color: rgba(tokens.$parma-darken-60, 1);
-  }
-  svg.logo {
-    fill: tokens.$primary-base;
-  }
-  .scroll {
-    color: tokens.$primary-base !important;
-  }
+	.vd-footer-bar-links a {
+		color: rgb(0 0 0 / 87%);
+	}
+
+	p,
+	.text--primary {
+		color: rgb(0 0 0 / 87%);
+	}
+
+	.text--secondary {
+		color: rgb(0 0 0 / 60%);
+	}
+
+	.social {
+		.text--primary {
+			color: rgb(var(--v-theme-primary));
+		}
+
+		a.v-btn:hover {
+			background: rgb(0 0 0 / 5%);
+		}
+	}
+
+	button.v-btn:hover {
+		background: rgb(0 0 0 / 5%);
+	}
+
+	a.text--primary {
+		color: rgb(var(--v-theme-primary));
+	}
+
+	.v-divider {
+		border-color: rgba(tokens.$parma-darken-60, 1);
+	}
+
+	svg.logo {
+		fill: rgb(var(--v-theme-primary));
+	}
+
+	.scroll {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
 }
+
 // Use deep selector to style user content as well
 .vd-footer-bar.v-theme--dark :deep() {
-  .vd-footer-bar-links a {
-    color: $white;
-  }
-  p,
-  .text--primary {
-    color: rgba($white, 0.87);
-  }
-  .text--secondary {
-    color: rgba($white, 0.6);
-  }
-  a.text--primary {
-    color: $white;
-  }
-  .v-divider {
-    border-color: rgba($white, 1);
-  }
-  svg {
-    fill: $white;
-  }
+	.vd-footer-bar-links a {
+		color: $white;
+	}
+
+	p,
+	.text--primary {
+		color: rgba($white, 0.87);
+	}
+
+	.text--secondary {
+		color: rgba($white, 0.6);
+	}
+
+	a.text--primary {
+		color: $white;
+	}
+
+	.v-divider {
+		border-color: rgba($white, 1);
+	}
+
+	svg {
+		fill: $white;
+	}
 }
+
 .vd-footer-bar-links :deep() {
-  li {
-    list-style: none;
-    display: flex;
-  }
-  a {
-    transition: 0.15s;
-    text-decoration: none;
-    padding-top: 1px; // Add top padding to account for bottom border
-    border-bottom: 1px solid transparent;
-    &:hover,
-    &:focus {
-      border-color: currentColor;
-    }
-  }
-  p {
-    padding: 1px 0;
-  }
+	li {
+		list-style: none;
+		display: flex;
+	}
+
+	a {
+		transition: 0.15s;
+		text-decoration: none;
+		padding-top: 1px; // Add top padding to account for bottom border
+		border-bottom: 1px solid transparent;
+
+		&:hover,
+		&:focus {
+			border-color: currentcolor;
+		}
+	}
+
+	p {
+		padding: 1px 0;
+	}
 }
+
 .v-theme--dark button.v-btn:hover :deep() {
-  background: rgba(white, 0.1);
+	background: rgba(white, 0.1);
 }
 </style>

package/src/components/FranceConnectBtn/FranceConnectBtn.vue

@@ -97,13 +97,14 @@
 .vd-france-connect-btn a {
 	color: #000091;
 
-  &:focus {
-    outline-offset: 3px;
-  }
+	&:focus {
+		outline-offset: 3px;
+	}
 }
 
 .vd-france-connect-link {
 	background: #000091;
+
 	&:hover {
 		background: #1212ff;
 		transition: all 0.2s ease-in-out;
@@ -113,32 +114,32 @@
 		background: #2323ff;
 	}
 
-  &:focus {
-    outline-offset: 3px;
-  }
+	&:focus {
+		outline-offset: 3px;
+	}
 }
 
 .vd-france-connect-btn--dark {
 	.vd-france-connect-link {
-		color: #FFFFFF;
-		background-color: #8585F6;
+		color: #fff;
+		background-color: #8585f6;
 
 		&:hover {
-			background-color: #B1B1F9;
+			background-color: #b1b1f9;
 		}
 
 		&:active {
-			background-color: #C6C6FB;
+			background-color: #c6c6fb;
 		}
 	}
 
 	.vd-france-connect-info-link {
-		color: #8585F6;
+		color: #8585f6;
 	}
 }
 
 .vd-france-connect-info-link {
-	background-image: linear-gradient(currentColor, currentColor);
+	background-image: linear-gradient(currentcolor, currentcolor);
 	background-position: 0% 100%;
 	background-repeat: no-repeat;
 	background-size: 100% 1px;
@@ -149,6 +150,6 @@
 }
 
 :deep(&:focus) {
-  border-radius: 0 !important;
+	border-radius: 0 !important;
 }
 </style>

package/src/components/HeaderBar/HeaderBar.vue

@@ -260,9 +260,9 @@
 }
 
 .menu + .header-logo {
-  @media screen and (min-width: 340px) {
-    padding-left: 16px !important;
-  }
+	@media screen and (width >= 340px) {
+		padding-left: 16px !important;
+	}
 }
 
 @media screen and (min-width: $header-breakpoint) {

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue

@@ -153,7 +153,7 @@
 	inset: 0;
 	position: fixed;
 	z-index: 1000;
-	background-color: rgba(3, 16, 37, .5);
+	background-color: rgb(3 16 37 / 50%);
 	backdrop-filter: blur(2px);
 }
 
@@ -188,8 +188,7 @@
 
 	.header-menu {
 		background-color: $neutral-white;
-		overflow-y : auto;
-		overflow-x: hidden;
+		overflow: hidden auto;
 		height: 100%;
 	}
 }
@@ -210,12 +209,14 @@
 	}
 }
 
-.menu-enter-from, .menu-leave-to {
+.menu-enter-from,
+.menu-leave-to {
 	opacity: 0;
 }
 
 @media screen and (min-width: $header-breakpoint) {
-	.menu-enter-from, .menu-leave-to {
+	.menu-enter-from,
+	.menu-leave-to {
 		.header-menu-wrapper {
 			transform: translateY(10px);
 		}
@@ -223,10 +224,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.menu-enter-active, .menu-leave-active {
+	.menu-enter-active,
+	.menu-leave-active {
 		transition: opacity 0s;
 	}
-	.menu-enter-from, .menu-leave-to {
+
+	.menu-enter-from,
+	.menu-leave-to {
 		.header-menu-wrapper {
 			transform: none;
 		}

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -9,10 +9,10 @@
 </template>
 
 <style lang="scss" scoped>
-	@use "@/assets/tokens.scss" as *;
+	@use '@/assets/tokens.scss' as *;
 
 	.header-menu-item {
-		color: $primary-base;
+		color: rgb(var(--v-theme-primary));
 		list-style-type: none;
 		margin: 0;
 		padding: 0;
@@ -24,14 +24,14 @@
 			flex-direction: column;
 			padding: 16px 50px 16px 20px;
 			text-decoration: none;
-			color: currentColor;
+			color: currentcolor;
 
 			&:hover {
 				text-decoration: underline;
 			}
 
 			&:visited {
-				color: currentColor;
+				color: currentcolor;
 			}
 
 			&::first-letter {
@@ -41,7 +41,7 @@
 	}
 
 	.header-menu-item:hover {
-		background-color: $primary-base;
+		background-color: rgb(var(--v-theme-primary));
 		color: $neutral-white;
 
 		> :deep(a > *) {

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue

@@ -30,8 +30,8 @@
 </template>
 
 <style lang="scss" scoped>
-@use "@/assets/tokens.scss" as *;
-@use "../../consts.scss" as menu;
+@use '@/assets/tokens.scss' as *;
+@use '../../consts.scss' as menu;
 
 .header-menu-section {
 	list-style-type: none;

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -61,7 +61,7 @@
 </template>
 
 <style lang="scss" scoped>
-	@use "@/assets/tokens.scss" as *;
+	@use '@/assets/tokens.scss' as *;
 	@use '../../consts' as *;
 
 	.sub-menu-btn {
@@ -71,10 +71,10 @@
 		width: 100%;
 		padding: 16px 50px 16px 20px;
 		text-align: left;
-		color: $primary-base;
+		color: rgb(var(--v-theme-primary));
 
 		&:hover {
-			background-color: $primary-base;
+			background-color: rgb(var(--v-theme-primary));
 			color: $neutral-white;
 			text-decoration: underline;
 
@@ -119,6 +119,7 @@
 
 			&:hover {
 				color: #000;
+
 				> :deep(*) {
 					color: #000 !important;
 				}
@@ -137,7 +138,7 @@
 		}
 
 		.sub-menu--open > .sub-menu-btn {
-			background-color: $primary-base;
+			background-color: rgb(var(--v-theme-primary));
 			color: $neutral-white;
 			transition: color 0.15s linear, background-color 0.15s linear;
 
@@ -158,8 +159,7 @@
 			height: 100%;
 			background: #f9f9f9;
 			border-left: 1px solid $menu-border-color;
-			overflow-y: auto;
-			overflow-x: hidden;
+			overflow: hidden auto;
 
 			> .sub-menu--open .sub-menu-content {
 				left: $menu-width * 2;
@@ -180,13 +180,15 @@
 			transition: opacity 0.08s ease-in, transform 0.08s ease-in;
 		}
 
-		.slide-fade-enter-from, .slide-fade-leave-to {
+		.slide-fade-enter-from,
+		.slide-fade-leave-to {
 			opacity: 0;
 			transform: translateX(-10px);
 		}
 
 		@media (prefers-reduced-motion) {
-			.slide-fade-enter-active, .slide-fade-leave-active {
+			.slide-fade-enter-active,
+			.slide-fade-leave-active {
 				transition: none;
 			}
 		}

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -109,9 +109,9 @@
 	display: flex;
 	height: 52px;
 	align-items: center;
-	color: $primary-base;
+	color: rgb(var(--v-theme-primary));
 	line-height: 1.45;
-	font-family: 'Cabin', 'Arial', 'Helvetica', sans-serif;
+	font-family: Cabin, Arial, Helvetica, sans-serif;
 	text-decoration: none;
 	cursor: pointer;
 }

package/src/components/HeaderBar/HeaderLogo/logos/Logo-mobile.vue

@@ -114,4 +114,5 @@
 	</svg>
 </template>
 
-<style scoped>.cls-2{fill:#0c419a}</style>
+<style scoped>.cls-2 { fill: #0c419a; }
+</style>

package/src/components/HeaderBar/HeaderLogo/logos/Logo.vue

@@ -276,4 +276,5 @@
 	</svg>
 </template>
 
-<style scoped>.cls-2{fill:#0c419a}</style>
+<style scoped>.cls-2 { fill: #0c419a; }
+</style>

package/src/components/HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue

@@ -34,10 +34,10 @@
 
 <style lang="scss" scoped>
 @use '../consts' as *;
-@use '@/assets/tokens.scss' as *;
+@use '@/assets/tokens';
 
 .header-menu-btn {
-	text-transform: Capitalize;
+	text-transform: capitalize;
 	height: $header-height;
 	width: 82px;
 	display: flex;
@@ -46,21 +46,21 @@
 	flex-shrink: 0;
 	justify-content: center;
 	font-weight: 700;
-	background-color: $primary-base;
-	color: $neutral-white;
-	border-bottom: solid 1px $blue-lighten-80;
+	background-color: rgb(var(--v-theme-primary));
+	color: tokens.$neutral-white;
+	border-bottom: solid 1px tokens.$blue-lighten-80;
 	transition: color 0.15s 0.1s, background-color 0.15s 0.1s, border-bottom 0.15s 0.1s;
 
 	&:focus-visible {
-		background-color: $neutral-white;
-		color: $primary-base;
+		background-color: tokens.$neutral-white;
+		color: rgb(var(--v-theme-primary));
 	}
 }
 
 .header-menu-btn__open {
-	background-color: $neutral-white;
-	color: $primary-base;
-	border-color: $neutral-white;
+	background-color: tokens.$neutral-white;
+	color: rgb(var(--v-theme-primary));
+	border-color: tokens.$neutral-white;
 }
 
 @media screen and (max-width: ($header-breakpoint + 1)) {

package/src/components/HeaderBar/consts.scss

@@ -3,4 +3,4 @@ $header-height-desktop: 95px;
 $header-height: 77px;
 $header-max-width: 1712px;
 $menu-border-color: #e0e0e0;
-$menu-width: 350px;
+$menu-width: 350px;

package/src/components/HeaderLoading/HeaderLoading.vue

@@ -26,20 +26,21 @@
 
 <style lang="scss" scoped>
 .vd-header-loading :deep() {
-  background: transparent;
-  .v-skeleton-loader__heading {
-    width: 100%;
-    height: 100%;
-    border-radius: 35px;
-    margin: 0;
-    background: rgba(grey, var(--v-border-opacity));
-  }
+	background: transparent;
+
+	.v-skeleton-loader__heading {
+		width: 100%;
+		height: 100%;
+		border-radius: 35px;
+		margin: 0;
+		background: rgba(grey, var(--v-border-opacity));
+	}
 }
 
 // Remove border radius when tile option is activated
 .vd-header-loading.v-skeleton-loader--tile :deep() {
-  .v-skeleton-loader__heading {
-    border-radius: 0;
-  }
+	.v-skeleton-loader__heading {
+		border-radius: 0;
+	}
 }
 </style>

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -6,7 +6,7 @@
 	import useHeaderResponsiveMode from '@/components/HeaderBar/useHeaderResponsiveMode'
 	import type { CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { computed } from 'vue'
-	import { RouterLink, type RouteLocationRaw } from 'vue-router'
+	import { type RouteLocationRaw } from 'vue-router'
 	import HorizontalNavbar from './HorizontalNavbar/HorizontalNavbar.vue'
 	import type { NavigationItem } from './types'
 
@@ -123,6 +123,7 @@
 									<RouterLink
 										v-else-if="item.to"
 										:to="item.to"
+										@click="menuOpen = false"
 									>
 										{{ item.label }}
 									</RouterLink>

package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue

@@ -51,26 +51,26 @@
 @use '@/components/HeaderBar/consts' as *;
 
 .horizontal-menu {
-  display: flex;
-  align-items: center;
-  max-width: $header-max-width;
-  margin: 0 auto;
+	display: flex;
+	align-items: center;
+	max-width: $header-max-width;
+	margin: 0 auto;
 }
 
 .horizontal-menu__tabs {
-  flex: 1 1 0;
+	flex: 1 1 0;
 }
 
 .horizontal-menu__item {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .horizontal-menu__item-link {
-  font-size: 0.875rem;
-  font-weight: 700;
+	font-size: 0.875rem;
+	font-weight: 700;
 }
 
 .v-tab-item--selected span {
-  color: #fff;
+	color: #fff;
 }
 </style>