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

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;
+
+		&.mod-withBanner {
+			.navSide-item {
+				&.mod-mobileToggle {
+					@include banner;
+				}
+			}
+		}
+
+		&:is(.is-open, .open) {
+			@include mobileOpen;
+
+			&.mod-withBanner {
+				@include mobileOpenBanner;
+			}
+		}
+
+		&:not(.is-open, .open) {
+			.navSide-item {
+				&:not(.mod-mobileToggle) {
+					@include mobileHidden;
+				}
+			}
+		}
+	}
+}
+
+.navSide-item {
+	&.mod-mobileToggle {
+		@include mobileToggle;
+	}
+
+	&:is(.is-open, .open) {
+		@include expanded;
+
+		.navSide-item-subMenu-link {
+			&:is(:hover) {
+				@include sublinkHover;
+			}
+
+			&:is(.is-active, .active) {
+				@include sublinkActive;
+			}
+		}
+	}
+
+	&:not(.is-open) {
+		@include notOpen;
+	}
+}
+
+.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;
+		}
+	}
+}

package/src/components/navside/mods.scss

@@ -0,0 +1,144 @@
+@use '../../commons/utils/a11y';
+
+@mixin compact {
+	background-color: var(--components-navSide-compact-palette-bg-color);
+	width: var(--commons-navSide-compact-width);
+	text-align: center;
+
+	.navSide-mainSection,
+	.navSide-scrollWrapper {
+		width: var(--commons-navSide-compact-width);
+	}
+
+	.navSide-item-link {
+		color: var(--components-navSide-compact-palette-text);
+		font-size: var(--components-navSide-compact-font-size);
+		padding: 1em 0.5em;
+		flex-direction: column;
+		justify-content: center;
+		position: relative;
+		text-align: center;
+
+		.navSide-item-link-title {
+			margin: 0.8em 0 0;
+		}
+	}
+
+	.navSide-item-arrow,
+	.navSide-item-subMenu {
+		display: none;
+	}
+
+	.navSide-item-alert {
+		background-color: var(--components-navSide-compact-palette-alert-color);
+		color: var(--components-navSide-compact-palette-alert-text);
+		padding: 0 0.4em;
+		top: 0.625em;
+		margin: 0.166em;
+		position: relative;
+	}
+
+	.navSide-item-placeholder {
+		flex-direction: column;
+
+		&::before {
+			height: 1.5em;
+			width: 1.5em;
+		}
+
+		&::after {
+			margin-left: 0;
+			margin-top: 0.8em;
+			width: 100%;
+		}
+	}
+
+	.navSide-bottomSection {
+		width: var(--commons-navSide-compact-width);
+
+		.navSide-item-link {
+			background-color: var(--components-navSide-bottom-section-palette-bg-color);
+			color: var(--components-navSide-bottom-section-palette-text);
+			flex-direction: row;
+
+			&:hover {
+				background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
+				color: var(--components-navSide-bottom-section-palette-hovered-text);
+			}
+
+			.navSide-item-link-title {
+				@include a11y.mask;
+			}
+		}
+	}
+}
+
+@mixin compactHover {
+	background-color: var(--components-navSide-compact-palette-hovered-bg);
+	color: var(--components-navSide-compact-palette-hovered-text);
+}
+
+@mixin compactActive {
+	background-color: var(--components-navSide-compact-palette-selected-bg);
+	color: var(--components-navSide-compact-palette-selected-text);
+	opacity: 1;
+
+	.navSide-item-alert {
+		background-color: var(--components-navSide-compact-palette-selected-alert-color);
+		color: var(--components-navSide-compact-palette-selected-alert-text);
+	}
+}
+
+@mixin banner {
+	top: var(--commons-banner-height);
+}
+
+@mixin mobileToggle {
+	display: none;
+}
+
+@mixin mobile {
+	padding-top: var(--commons-navSide-mobile-toggle-height);
+	width: 100%;
+	bottom: auto;
+
+	.navSide-mainSection,
+	.navSide-scrollWrapper {
+		width: 100%;
+		height: auto;
+	}
+
+	@at-root {
+		.navSide-scrollWrapper {
+			padding: 0;
+		}
+
+		.navSide-item {
+			&.mod-mobileToggle {
+				height: var(--commons-navSide-mobile-toggle-height);
+				background-color: var(--palettes-primary-800);
+				top: 0;
+				left: 0;
+				right: 0;
+				z-index: 1;
+				display: block;
+				position: fixed;
+				cursor: pointer;
+
+				.navSide-item-link {
+					border-radius: 0;
+
+					&:focus-visible {
+						box-shadow: 0 0 0 2px var(--components-navSide-fullwidth-palette-selected-text) inset;
+					}
+				}
+			}
+		}
+
+		.navSide-bottomSection {
+			background-color: transparent;
+			width: auto;
+			height: auto;
+		}
+	}
+}

package/src/components/navside/states.scss

@@ -0,0 +1,63 @@
+@mixin active {
+	background-color: var(--components-navSide-fullwidth-palette-selected-bg);
+	color: var(--components-navSide-fullwidth-palette-selected-text);
+	opacity: 1;
+
+	.navSide-item-alert {
+		background-color: var(--components-navSide-fullwidth-palette-selected-alert-text);
+		color: var(--components-navSide-fullwidth-palette-selected-alert-color);
+	}
+}
+
+@mixin expanded {
+	.navSide-item-arrow {
+		transform: rotate(-0.25turn);
+	}
+}
+
+@mixin notOpen {
+	.navSide-item-subMenu {
+		display: none;
+	}
+}
+
+@mixin sublinkHover {
+	background-color: var(--components-navSide-fullwidth-palette-hovered-bg);
+	color: var(--components-navSide-fullwidth-palette-hovered-text);
+}
+
+@mixin sublinkActive {
+	background-color: var(--components-navSide-fullwidth-palette-selected-bg);
+	color: var(--components-navSide-fullwidth-palette-selected-text);
+}
+
+@mixin mobileOpen {
+	height: 100vh;
+	overflow-x: hidden;
+	overflow-y: auto;
+
+	.navSide-scrollWrapper {
+		padding: 0.5em;
+	}
+}
+
+@mixin mobileOpenBanner {
+	height: calc(100vh - var(--commons-banner-height));
+}
+
+@mixin mobileHidden {
+	display: none;
+}
+
+@mixin overlay {
+	&,
+	body {
+		touch-action: none;
+		overscroll-behavior: none;
+		-webkit-overflow-scrolling: auto;
+	}
+
+	body {
+		overflow: hidden !important;
+	}
+}

package/src/components/navside/vars.scss

@@ -0,0 +1,59 @@
+@mixin vars {
+	@at-root {
+		html {
+			--commons-navSide-width: 15rem;
+			--commons-navSide-compact-width: 7.5rem;
+			--commons-navSide-mobile-toggle-height: 3.5rem;
+		}
+	}
+
+	--components-navSide-width: 15rem;
+	--components-navSide-offset-top: 0;
+	--components-navSide-padding-top: 0;
+	--components-navSide-main-font-size: 0.875rem;
+	--components-navSide-sub-font-size: 0.875rem;
+	--components-navSide-submenu-max-height: 33rem;
+	--components-navSide-mobile-toggle-height: 3.5rem;
+
+	--components-navSide-fullwidth-palette-bg-color: #2d3368;
+	--components-navSide-fullwidth-palette-text: var(--colors-white-color);
+	--components-navSide-fullwidth-palette-selected-bg: var(--palettes-primary-700);
+	--components-navSide-fullwidth-palette-selected-text: var(--colors-white-color);
+	--components-navSide-fullwidth-palette-hovered-bg: var(--palettes-primary-800);
+	--components-navSide-fullwidth-palette-hovered-text: var(--colors-white-color);
+	--components-navSide-fullwidth-palette-alert-color: var(--palettes-secondary-700);
+	--components-navSide-fullwidth-palette-alert-text: var(--colors-white-color);
+	--components-navSide-fullwidth-palette-selected-alert-color: #9299b0;
+	--components-navSide-fullwidth-palette-selected-alert-text: var(--colors-white-color);
+
+	--components-navSide-compact-palette-bg-color: #2d3368;
+	--components-navSide-compact-palette-text: var(--colors-white-color);
+	--components-navSide-compact-palette-selected-bg: var(--palettes-primary-700);
+	--components-navSide-compact-palette-selected-text: var(--colors-white-color);
+	--components-navSide-compact-palette-hovered-bg: var(--palettes-primary-800);
+	--components-navSide-compact-palette-hovered-text: var(--colors-white-color);
+	--components-navSide-compact-palette-alert-color: var(--palettes-secondary-700);
+	--components-navSide-compact-palette-alert-text: var(--colors-white-color);
+	--components-navSide-compact-palette-selected-alert-color: #9299b0;
+	--components-navSide-compact-palette-selected-alert-text: var(--colors-white-color);
+	--components-navSide-compact-width: 7.5rem;
+	--components-navSide-compact-font-size: 0.875rem;
+
+	--components-navSide-bottom-section-palette-bg-color: transparent;
+	--components-navSide-bottom-section-palette-text: var(--colors-white-color);
+	--components-navSide-bottom-section-palette-selected-bg: #9299b0;
+	--components-navSide-bottom-section-palette-selected-text: var(--colors-white-color);
+	--components-navSide-bottom-section-palette-hovered-bg: #31395e;
+	--components-navSide-bottom-section-palette-hovered-text: var(--colors-white-color);
+	--components-navSide-bottom-section-palette-alert-color: #9299b0;
+	--components-navSide-bottom-section-palette-alert-text: var(--colors-white-color);
+	--components-navSide-bottom-section-palette-selected-alert-color: #9299b0;
+	--components-navSide-bottom-section-palette-selected-alert-text: var(--colors-white-color);
+	--components-navSide-bottom-section-height: 3.1rem;
+
+	--components-navSide-scrollbar-width: 0.5rem;
+	--components-navSide-scrollbar-border-radius: 10px;
+	--components-navSide-scrollbar-bg-color: #31395e;
+	--components-navSide-scrollbar-thumb-color: #9299b0;
+	--components-navSide-scrollbar-arrow-color: var(--colors-white-color);
+}

package/src/components/pageHeader/component.scss

@@ -0,0 +1,39 @@
+@mixin component {
+	box-shadow: var(--commons-box-shadow-xs);
+	padding: var(--spacings-big) 2.5rem var(--spacings-standard);
+	background-color: var(--colors-white-color);
+
+	.menu {
+		margin-top: var(--spacings-smaller);
+
+		&::after {
+			display: none;
+		}
+	}
+
+	.pageHeader-content {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+
+	.pageHeader-content-title,
+	.pageHeader-content-actions {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.pageHeader-content-actions {
+		& > *:not(:last-child) {
+			margin-right: var(--spacings-small);
+		}
+	}
+
+	.pageHeader-description {
+		max-width: var(--components-pageHeader-description-max-width);
+		margin-top: var(--spacings-smaller);
+		color: var(--palettes-grey-600);
+	}
+}

package/src/components/pageHeader/exports.scss

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

package/src/components/pageHeader/index.scss

@@ -0,0 +1,18 @@
+@use 'exports' as *;
+
+.pageHeader {
+	@include vars;
+	@include component;
+
+	&.mod-withMenu {
+		@include menu;
+	}
+
+	&.mod-withBreadcrumbs {
+		@include breadcrumbs;
+	}
+
+	&.mod-noShadow {
+		@include noShadow;
+	}
+}

package/src/components/pageHeader/mods.scss

@@ -0,0 +1,15 @@
+@mixin menu {
+	padding-bottom: 0;
+}
+
+@mixin breadcrumbs {
+	padding-top: var(--spacings-small);
+
+	.breadcrumbs {
+		margin-bottom: 0;
+	}
+}
+
+@mixin noShadow {
+	box-shadow: none;
+}

package/src/components/pageHeader/vars.scss

@@ -0,0 +1,3 @@
+@mixin vars {
+	--components-pageHeader-description-max-width: 50rem;
+}

package/src/components/pagination/component.scss

@@ -0,0 +1,38 @@
+@mixin component {
+	display: flex;
+	flex-wrap: wrap;
+	margin: var(--spacings-small) 0;
+
+	> *:not(:last-child) {
+		margin-right: var(--spacings-smaller);
+	}
+
+	@at-root {
+		.pagination-count,
+		.pagination-navigation,
+		.pagination-scrolling {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+		}
+
+		.pagination-count-separator {
+			margin: 0 var(--spacings-smallest);
+		}
+
+		.pagination-navigation {
+			list-style: none;
+			padding: 0;
+			margin-top: 0;
+			margin-bottom: 0;
+
+			> *:not(:last-child) {
+				margin-right: var(--spacings-smallest);
+			}
+		}
+
+		.pagination-navigation-item {
+			margin-right: var(--spacings-smallest);
+		}
+	}
+}

package/src/components/pagination/exports.scss

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

package/src/components/pagination/index.scss

@@ -0,0 +1,12 @@
+@use 'exports' as *;
+
+.pagination {
+	@include vars;
+	@include component;
+}
+
+.pagination-navigation-item {
+	&:is(.is-ellipsis, .ellipsis) {
+		@include ellipsis;
+	}
+}

package/src/components/pagination/states.scss

@@ -0,0 +1,5 @@
+@mixin ellipsis {
+	&::after {
+		content: '…';
+	}
+}

package/src/components/pagination/vars.scss

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

package/src/components/progress/component.scss

@@ -0,0 +1,40 @@
+@mixin component {
+	@keyframes progress {
+		from {
+			transform: scale(0, 1);
+			opacity: 1;
+		}
+
+		to {
+			transform: scale(1, 1);
+			opacity: 0.3;
+		}
+	}
+
+	background-color: var(--commons-background-base);
+	height: var(--components-progress-height);
+	margin: var(--components-progress-margin-vertical) var(--components-progress-margin-horizontal);
+	position: relative;
+	overflow: hidden;
+
+	@at-root {
+		.progress-bar {
+			background-color: var(--components-progress-bar-background);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: background-color, width;
+			bottom: 0;
+			left: 0;
+			position: absolute;
+			top: 0;
+
+			&::after {
+				animation: progress var(--components-progress-duration) infinite;
+				background-image: var(--components-progress-bar-gradient);
+				transform-origin: left;
+				position: absolute;
+				inset: 0;
+				content: '';
+			}
+		}
+	}
+}

package/src/components/progress/exports.scss

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

package/src/components/progress/index.scss

@@ -0,0 +1,18 @@
+@use 'exports' as *;
+
+.progress {
+	@include vars;
+	@include component;
+
+	&.mod-indeterminate {
+		@include indeterminate;
+	}
+
+	&:is(.is-success, .success) {
+		@include success;
+	}
+
+	&:is(.is-error, .error) {
+		@include error;
+	}
+}

package/src/components/progress/mods.scss

@@ -0,0 +1,19 @@
+@mixin indeterminate {
+	@keyframes progressIndetereminate {
+		0% {
+			left: -35%;
+			right: 100%;
+		}
+
+		100% {
+			left: 100%;
+			right: -35%;
+		}
+	}
+
+	.progress-bar {
+		animation: progressIndetereminate var(--components-progress-duration) infinite;
+		width: 30%;
+		animation-timing-function: linear;
+	}
+}

package/src/components/progress/states.scss

@@ -0,0 +1,25 @@
+@mixin state {
+	.progress-bar {
+		width: 100% !important;
+
+		&::after {
+			display: none;
+		}
+	}
+}
+
+@mixin success {
+	@include state;
+
+	.progress-bar {
+		background-color: var(--palettes-success-700);
+	}
+}
+
+@mixin error {
+	@include state;
+
+	.progress-bar {
+		background-color: var(--palettes-error-700);
+	}
+}

package/src/components/progress/vars.scss

@@ -0,0 +1,8 @@
+@mixin vars {
+	--components-progress-margin-vertical: 1rem;
+	--components-progress-margin-horizontal: 0;
+	--components-progress-height: 4px;
+	--components-progress-bar-background: var(--palettes-primary-700);
+	--components-progress-bar-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 100%);
+	--components-progress-duration: 1.5s;
+}