@lucca-front/scss 8.2.2 → 9.0.0-alpha.3

package/src/components/mainContent/component.scss

@@ -0,0 +1,9 @@
+@use '../../commons/utils/media';
+
+@mixin component {
+	position: relative;
+
+	@include media.smallerThan('s') {
+		margin-left: 0 !important;
+	}
+}

package/src/components/mainContent/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/mainContent/index.scss

@@ -0,0 +1,32 @@
+@use 'exports' as *;
+
+.main-content {
+	@include vars;
+	@include component;
+
+	&.mod-withStickyHeader {
+		@include stickyHeader;
+	}
+
+	&.mod-withBanner,
+	.navSide.mod-withBanner ~ &,
+	.mod-withBanner & {
+		@include banner;
+	}
+
+	.navSide ~ &,
+	.mod-withMenu & {
+		@include menu;
+	}
+
+	.navSide.mod-compact ~ &,
+	.mod-withMenuCompact & {
+		@include menuCompact;
+	}
+}
+
+.main {
+	&:is(.is-notScrollable, .notScrollable) {
+		@include notScrollable;
+	}
+}

package/src/components/mainContent/mods.scss

@@ -0,0 +1,24 @@
+@use '../../commons/utils/media';
+
+@mixin menu {
+	margin-left: var(--commons-navSide-width);
+}
+
+@mixin menuCompact {
+	margin-left: var(--commons-navSide-compact-width);
+}
+
+@mixin banner {
+	height: calc(100vh - var(--commons-banner-height));
+	margin-top: var(--commons-banner-height);
+	overflow-y: auto;
+
+	@include media.smallerThan('s') {
+		height: calc(100vh - var(--commons-banner-height) - var(--commons-navSide-mobile-toggle-height));
+		margin-top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+	}
+}
+
+@mixin stickyHeader {
+	padding-top: var(--components-header-height);
+}

package/src/components/mainContent/states.scss

@@ -0,0 +1,8 @@
+@use '../../commons/utils/media';
+
+@mixin notScrollable {
+	@include media.smallerThan('s') {
+		height: 100vh;
+		overflow: hidden;
+	}
+}

package/src/components/mainContent/vars.scss

@@ -0,0 +1,2 @@
+@mixin vars {
+}

package/src/components/menu/component.scss

@@ -0,0 +1,104 @@
+@use '../../commons/utils/reset';
+
+@mixin component {
+	background-color: var(--components-menu-background);
+	gap: var(--spacings-big);
+	align-items: center;
+	display: flex;
+	position: relative;
+	flex-wrap: wrap;
+
+	&:not(.mod-noBorder) {
+		&::after {
+			border-bottom-width: var(--commons-divider-width);
+			border-bottom-color: var(--commons-divider-color);
+			border-bottom-style: solid;
+			position: absolute;
+			height: 1px;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			content: '';
+		}
+	}
+
+	.label {
+		margin-right: 0;
+		background-color: var(--palettes-grey-100);
+		color: var(--palettes-grey-700);
+	}
+
+	@at-root {
+		.menu-list {
+			@include reset.list;
+
+			gap: var(--spacings-big);
+			display: flex;
+			flex-wrap: wrap;
+		}
+
+		.menu-link, // legacy syntax
+		.menu-list-item-action {
+			@include reset.button;
+			padding: var(--components-menu-padding);
+			border-radius: var(--commons-border-radius);
+			color: var(--palettes-grey-700);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: color;
+			position: relative;
+			text-decoration: none;
+			text-align: center;
+			display: block;
+			width: auto;
+
+			&::after {
+				background-color: var(--palettes-700, var(--palettes-primary-700));
+				border-radius: var(--commons-border-radius) var(--commons-border-radius) 0 0;
+				transition-duration: var(--commons-animations-durations-fast);
+				transition-property: transform;
+				display: block;
+				position: absolute;
+				bottom: 0;
+				height: 2px;
+				left: 0;
+				right: 0;
+				transform: scale(0, 1);
+				z-index: 1;
+				content: '';
+			}
+
+			&:not(.is-disabled, [disabled]) {
+				&:focus-visible,
+				&:hover {
+					&:not(.is-active, [aria-current='page']) {
+						color: var(--palettes-grey-900);
+					}
+
+					.label {
+						background-color: var(--palettes-100, var(--palettes-primary-100));
+						color: var(--palettes-700, var(--palettes-primary-700));
+					}
+
+					&::after {
+						transform: scale(0.75);
+					}
+				}
+			}
+
+			&:focus-visible {
+				outline: none;
+			}
+		}
+
+		.menu-link-placeholder {
+			&::after {
+				content: attr(data-content-after);
+
+				display: block;
+				height: 0;
+				overflow: hidden;
+				font-weight: 600;
+			}
+		}
+	}
+}

package/src/components/menu/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/menu/index.scss

@@ -0,0 +1,26 @@
+@use 'exports' as *;
+
+.menu {
+	@include vars;
+	@include component;
+
+	&.mod-header {
+		@include header;
+	}
+
+	&.mod-small {
+		@include small;
+	}
+}
+
+// legacy syntax
+.menu-link,
+.menu-list-item-action {
+	&:is(.is-active, .active, [aria-current='page']) {
+		@include active;
+	}
+
+	&:is(.is-disabled, .disabled, &[disabled]) {
+		@include disabled;
+	}
+}

package/src/components/menu/mods.scss

@@ -0,0 +1,25 @@
+@mixin header {
+	padding: 0 2.5rem;
+}
+
+@mixin small {
+	// legacy syntax
+	.menu-link,
+	.menu-list-item-action {
+		font-size: var(--sizes-small-font-size);
+		line-height: var(--sizes-small-line-height);
+		padding: 0.75rem 0;
+	}
+
+	.label {
+		height: var(--sizes-small-line-height);
+		min-width: var(--sizes-small-line-height);
+		line-height: var(--sizes-small-line-height);
+		padding: 0;
+	}
+
+	// legacy syntax
+	.menu-link {
+		margin-right: var(--spacings-standard);
+	}
+}

package/src/components/menu/states.scss

@@ -0,0 +1,21 @@
+@mixin active {
+	color: var(--palettes-700, var(--palettes-primary-700));
+
+	.label {
+		background-color: var(--palettes-100, var(--palettes-primary-100));
+		color: var(--palettes-700, var(--palettes-primary-700));
+	}
+
+	&::after {
+		background-color: var(--palettes-700, var(--palettes-primary-700));
+		transform: scale(1);
+	}
+}
+
+@mixin disabled {
+	&,
+	.label {
+		color: var(--palettes-grey-500);
+		pointer-events: none;
+	}
+}

package/src/components/menu/vars.scss

@@ -0,0 +1,4 @@
+@mixin vars {
+	--components-menu-background: var(--colors-white-color);
+	--components-menu-padding: var(--spacings-small) 0;
+}

package/src/components/navside/component.scss

@@ -0,0 +1,225 @@
+@use '../../commons/utils/loading';
+
+@mixin component {
+	bottom: 0;
+	left: 0;
+	top: 0;
+	z-index: 100;
+	position: fixed;
+	display: flex;
+	flex-direction: column;
+	background-color: var(--components-navSide-fullwidth-palette-bg-color);
+	padding-top: var(--components-navSide-padding-top);
+	width: var(--commons-navSide-width);
+
+	@at-root {
+		.navSide-wrapper {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			min-height: 0;
+		}
+
+		.navSide-mainSection {
+			flex-grow: 1;
+			display: block;
+			height: 100%;
+			overflow-x: hidden;
+			overflow-y: auto;
+			position: relative;
+
+			scrollbar-face-color: var(--components-navSide-scrollbar-thumb-color);
+			scrollbar-arrow-color: var(--components-navSide-scrollbar-arrow-color);
+			scrollbar-track-color: var(--components-navSide-scrollbar-bg-color);
+			scrollbar-shadow-color: var(--components-navSide-scrollbar-thumb-color);
+			scrollbar-3dlight-color: var(--components-navSide-scrollbar-thumb-color);
+
+			&::-webkit-scrollbar-track {
+				background-color: var(--components-navSide-scrollbar-bg-color);
+			}
+
+			&::-webkit-scrollbar {
+				width: var(--components-navSide-scrollbar-width);
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background-color: var(--components-navSide-scrollbar-thumb-color);
+				border-radius: var(--components-navSide-scrollbar-border-radius);
+			}
+		}
+
+		.navSide-scrollWrapper {
+			width: var(--commons-navSide-width);
+			padding: 0.5em;
+			margin: 0;
+			list-style-type: none;
+		}
+
+		.navSide-item,
+		.navSide-item-subMenu-item,
+		.navSide-item-subMenu-link {
+			&:not(.mod-mobileToggle) {
+				+ .navSide-item,
+				+ .navSide-item-subMenu-item,
+				+ .navSide-item-subMenu-link {
+					margin-top: 0.125em;
+				}
+			}
+		}
+
+		.navSide-item-link,
+		.navSide-item-subMenu-link {
+			cursor: pointer;
+			background-color: transparent;
+			border: 0;
+			text-align: left;
+			width: 100%;
+			height: 100%;
+			align-items: center;
+			display: flex;
+			text-decoration: none;
+			user-select: none;
+			color: var(--components-navSide-fullwidth-palette-text);
+			transition-property: all;
+			transition-duration: var(--commons-animations-durations-fast);
+			border-radius: var(--commons-border-radius);
+
+			&:focus-visible {
+				outline: none;
+				position: relative;
+				z-index: 1;
+				box-shadow: 0 0 0 2px var(--components-navSide-fullwidth-palette-selected-text);
+				background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
+				color: var(--components-navSide-fullwidth-palette-hovered-text);
+			}
+		}
+
+		.navSide-item-link {
+			font-size: var(--components-navSide-main-font-size);
+			padding: var(--spacings-small);
+			font-weight: 600;
+			line-height: 1rem;
+
+			&:focus-visible {
+				background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
+				color: var(--components-navSide-fullwidth-palette-hovered-text);
+			}
+
+			&:hover {
+				background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
+				color: var(--components-navSide-fullwidth-palette-hovered-text);
+			}
+		}
+
+		.navSide-item-link-title {
+			line-height: 1.2;
+			margin-left: 1em;
+			margin-right: 0.625em;
+			vertical-align: middle;
+			width: 100%;
+		}
+
+		.navSide-item-alert {
+			font-size: var(--sizes-smaller-font-size);
+			background-color: var(--components-navSide-fullwidth-palette-alert-color);
+			color: var(--components-navSide-fullwidth-palette-alert-text);
+			transition-duration: var(--commons-animations-durations-standard);
+			transition-property: background-color;
+			margin-left: auto;
+			border-radius: 0.666em;
+			height: 1.333em;
+			line-height: 1.333em;
+			margin-right: 0.666em;
+			padding: 0 0.666em;
+		}
+
+		.navSide-item-arrow {
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: transform;
+			transition-timing-function: ease-out;
+			margin-left: auto;
+			display: grid;
+			place-items: center;
+			transform: rotate(0);
+			font-size: 0.8em;
+			flex-shrink: 0;
+			width: 1em;
+			height: 1em;
+			transform-origin: 50% 50%;
+		}
+
+		.navSide-item-subMenu {
+			font-size: var(--components-navSide-sub-font-size);
+			margin: 0;
+			padding: 0;
+			list-style-type: none;
+			overflow: visible;
+		}
+
+		.navSide-item-subMenu-link {
+			font-weight: 400;
+			line-height: 1.4;
+			padding: 0.5em 1em 0.5em 3.2em;
+			vertical-align: middle;
+		}
+
+		.navSide-bottomSection {
+			height: var(--components-navSide-bottom-section-height);
+			width: var(--components-navSide-width);
+			z-index: 1;
+
+			.navSide-item,
+			.navSide-item-link {
+				height: 100%;
+				background-color: transparent;
+				padding: 0.5em;
+			}
+
+			.navSide-item-link {
+				background-color: var(--components-navSide-bottom-section-palette-bg-color);
+				color: var(--components-navSide-bottom-section-palette-text);
+				padding: 1em;
+				box-sizing: border-box;
+				cursor: pointer;
+
+				&:hover {
+					background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
+					color: var(--components-navSide-bottom-section-palette-hovered-text);
+				}
+			}
+
+			.navSide-item-alert {
+				background-color: var(--components-navSide-bottom-section-palette-alert-color);
+				color: var(--components-navSide-bottom-section-palette-alert-text);
+			}
+		}
+
+		.navSide-item-placeholder {
+			align-items: center;
+			display: flex;
+			padding: 1em;
+
+			&::before,
+			&::after {
+				display: block;
+				content: '';
+			}
+
+			&::before {
+				background-color: rgba(0, 0, 0, 0.15);
+				border-radius: 1em;
+				height: 1em;
+				width: 1em;
+			}
+
+			&::after {
+				@include loading.gradient;
+
+				border-radius: var(--commons-border-radius);
+				flex: 1 1 auto;
+				height: 0.9em;
+				margin-left: 1em;
+			}
+		}
+	}
+}

package/src/components/navside/exports.scss

@@ -0,0 +1,4 @@
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/navside/index.scss

@@ -0,0 +1,98 @@
+@use '../../commons/utils/media';
+@use 'exports' as *;
+
+.navSide {
+	@include vars;
+	@include component;
+
+	&.mod-withBanner {
+		@include banner;
+	}
+
+	&.mod-compact {
+		@include media.largerThan('s') {
+			@include compact;
+
+			.navSide-item-link {
+				&:hover {
+					@include compactHover;
+				}
+
+				&:is(.is-active, .active) {
+					@include compactActive;
+				}
+			}
+		}
+	}
+
+	@include media.smallerThan('s') {
+		@include mobile;
+
+		&:not(.is-open, .open) {
+			.navSide-item {
+				&:not(.mod-mobileToggle) {
+					@include mobileHidden;
+				}
+			}
+		}
+
+		&.mod-withBanner {
+			.navSide-item {
+				&.mod-mobileToggle {
+					@include banner;
+				}
+			}
+		}
+
+		&:is(.is-open, .open) {
+			@include mobileOpen;
+
+			&.mod-withBanner {
+				@include mobileOpenBanner;
+			}
+		}
+	}
+}
+
+.navSide-item {
+	&:not(.is-open) {
+		@include notOpen;
+	}
+
+	&.mod-mobileToggle {
+		@include mobileToggle;
+	}
+
+	&:is(.is-open, .open) {
+		@include expanded;
+
+		.navSide-item-subMenu-link {
+			&:is(:hover) {
+				@include sublinkHover;
+			}
+
+			&:is(.is-active, .active) {
+				@include sublinkActive;
+			}
+		}
+	}
+}
+
+.navSide-item-subMenu-link,
+.navSide-item-link {
+	&:is(.is-active, .active) {
+		@include active;
+	}
+
+	&:is([aria-expanded='true']) {
+		@include expanded;
+	}
+}
+
+html {
+	&:is(.hasMenu, .withMenu) {
+		@include media.smallerThan('s') {
+			@include overlay;
+		}
+	}
+}