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

package/src/components/_nav-side.scss

@@ -1,488 +0,0 @@
-.navSide {
-	background-color: _component("navSide.fullwidth-palette.bg-color");
-	bottom: 0;
-	left: 0;
-	padding-top: _component("navSide.padding-top");
-	position: fixed;
-	top: 0;
-	width: _component("navSide.width");
-	z-index: 100;
-	display: flex;
-    flex-direction: column;
-}
-
-.navSide-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-	min-height: 0;
-}
-
-// NECESSARY TO AVOID MOVEMENT WHEN THE SCROLLBAR APPEARS
-.navSide-mainSection {
-	flex-grow: 1;
-	display: block;
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-	position: relative;
-
-	// SCROLLBAR
-	scrollbar-face-color: _component("navSide.scrollbar.thumb-color");
-	scrollbar-arrow-color: _component("navSide.scrollbar.arrow-color");
-	scrollbar-track-color: _component("navSide.scrollbar.bg-color");
-	scrollbar-shadow-color: _component("navSide.scrollbar.thumb-color");
-	scrollbar-3dlight-color: _component("navSide.scrollbar.thumb-color");
-
-	&::-webkit-scrollbar-track {
-		background-color: _component("navSide.scrollbar.bg-color");
-	}
-
-	&::-webkit-scrollbar {
-		width: _component("navSide.scrollbar.width");
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: _component("navSide.scrollbar.thumb-color");
-		border-radius: _component("navSide.scrollbar.border-radius");
-	}
-}
-
-.navSide-scrollWrapper {
-	width: _component("navSide.width");
-	padding: 0.5em;
-	margin: 0;
-    list-style-type: none;
-}
-
-.navSide-item:not(.mod-mobileToggle) + .navSide-item, .navSide-item-subMenu-link + .navSide-item-subMenu-link,
-.navSide-item-subMenu-item + .navSide-item-subMenu-item {
-	margin-top: .125em;
-}
-
-
-// MOBILE TOGGLE
-.navSide-item.mod-mobileToggle {
-	display: none;
-}
-
-.navSide-item-link, .navSide-item-subMenu-link {
-	background-color: transparent;
-	border: 0;
-	cursor: pointer;
-	text-align: left;
-	width: 100%;
-	height: 100%;
-	align-items: center;
-	color: _component("navSide.fullwidth-palette.text");
-	display: flex;
-	text-decoration: none;
-	transition: all _theme("commons.animations.durations.fast") ease;
-	user-select: none;
-	border-radius: _theme("commons.border.radius");
-
-	&[aria-expanded="true"] {
-		.navSide-item-arrow {
-			transform: rotate(-0.25turn);
-		}
-	}
-
-	&:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px _component("navSide.fullwidth-palette.selected-text");
-		background-color: _component("navSide.fullwidth-palette.hovered-bg");
-		color: _component("navSide.fullwidth-palette.hovered-text");
-		position: relative;
-		z-index: 1;
-	}
-
-	&.is-active {
-		background-color: _component("navSide.fullwidth-palette.selected-bg");
-		color: _component("navSide.fullwidth-palette.selected-text");
-	}
-}
-
-// MAIN-ITEM
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.navSide-item-link {
-	font-size: _component("navSide.main-font-size");
-	font-weight: 600;
-	line-height: 1rem;
-	padding: _theme("spacings.small");
-	width: 100%;
-	text-align: left;
-	border: 0;
-	background-color: transparent;
-	cursor: pointer;
-
-	&:hover {
-		background-color: _component("navSide.fullwidth-palette.hovered-bg");
-		color: _component("navSide.fullwidth-palette.hovered-text");
-	}
-
-	&:focus-visible {
-		background-color: _component("navSide.fullwidth-palette.hovered-bg");
-		color: _component("navSide.fullwidth-palette.hovered-text");
-	}
-}
-
-.navSide-item-link-title {
-	line-height: 1.2;
-	margin-left: 1em;
-	margin-right: .625em;
-	vertical-align: middle;
-	width: 100%;
-}
-
-.navSide-item-alert {
-	background-color: _component("navSide.fullwidth-palette.alert-color");
-	border-radius: .666em;
-	color: _component("navSide.fullwidth-palette.alert-text");
-	font-size: _theme("sizes.smaller.font-size");
-	height: 1.333em;
-	line-height: 1.333em;
-	margin-left: auto;
-	margin-right: .666em;
-	padding: 0 .666em;
-	transition: background-color _theme("commons.animations.durations.standard") ease;
-}
-
-.navSide-item-arrow {
-	font-size: .8em;
-	margin-left: auto;
-	transform: rotate(0);
-	transition: transform _theme("commons.animations.durations.fast") ease-out;
-	flex-shrink: 0;
-	width: 1em;
-	height: 1em;
-	display: grid;
-	place-items: center;
-	transform-origin: 50% 50%;
-}
-
-// SUB MENU
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-.navSide-item-subMenu {
-	font-size: _component("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: .5em 1em .5em 3.2em;
-	vertical-align: middle;
-}
-
-// BOTTOM MENU
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-.navSide-bottomSection {
-	height: _component("navSide.bottom-section-height");
-	width: _component("navSide.width");
-	z-index: 1;
-
-	.navSide-item, .navSide-item-link {
-		height: 100%;
-		background-color: transparent;
-		padding: .5em;
-	}
-
-	.navSide-item-link {
-		background-color: _component("navSide.bottom-section-palette.bg-color");
-		color: _component("navSide.bottom-section-palette.text");
-		cursor: pointer;
-		box-sizing: border-box;
-		padding: 1em;
-
-		&:hover {
-			background-color: _component("navSide.bottom-section-palette.hovered-bg");
-			color: _component("navSide.bottom-section-palette.hovered-text");
-		}
-	}
-
-	.navSide-item-alert {
-		background-color: _component("navSide.bottom-section-palette.alert-color");
-		color: _component("navSide.bottom-section-palette.alert-text");
-	}
-}
-
-// ACTIVE & OPEN STATE
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.navSide-item {
-	&.is-open {
-		.navSide-item-arrow {
-			transform: rotate(-.25turn);
-		}
-
-		.navSide-item-subMenu-link {
-			&:hover {
-				background-color: _component("navSide.fullwidth-palette.hovered-bg");
-				color: _component("navSide.fullwidth-palette.hovered-text");
-			}
-
-			&.is-active {
-				background-color: _component("navSide.fullwidth-palette.selected-bg");
-				color: _component("navSide.fullwidth-palette.selected-text");
-			}
-		}
-	}
-
-	&:not(.is-open) {
-		.navSide-item-subMenu {
-			display: none;
-		}
-	}
-}
-
-.navSide-item-link.is-active {
-	background-color: _component("navSide.fullwidth-palette.selected-bg");
-	color: _component("navSide.fullwidth-palette.selected-text");
-	opacity: 1;
-
-
-}
-
-.navSide-item-subMenu-link.is-active,
-.navSide-item-link.is-active {
-	.navSide-item-alert {
-		background-color: _component("navSide.fullwidth-palette.selected-alert-text");
-		color: _component("navSide.fullwidth-palette.selected-alert-color");
-	}
-}
-
-// MOD
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-.navSide.mod-withBanner {
-	top: _theme("commons.banner-height");
-}
-// LOADING PLACEHOLDERS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.navSide-item-placeholder {
-	align-items: center;
-	display: flex;
-	padding: 1em;
-
-
-	&::before, &::after {
-		content: "";
-		display: block;
-	}
-
-	&::before {
-		background-color: rgba(0, 0, 0, .15);
-		border-radius: 1em;
-		height: 1em;
-		width: 1em;
-	}
-
-	&::after {
-		@include loadingGradientAnimation(rgba(0, 0, 0, .15), true, rgba(0, 0, 0, .15));
-		border-radius: _theme("commons.border.radius");
-		flex: 1 1 auto;
-		height: .9em;
-		margin-left: 1em;
-	}
-
-	&.mod-inverted {
-		&::before {
-			background-color: rgba(255, 255, 255, .15);
-		}
-
-		&::after {
-			@include loadingGradientAnimation(rgba(255, 255, 255, .15), true, rgba(255, 255, 255, .15));
-		}
-	}
-}
-
-// MOD COMPACT (must be defined only for desktop)
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-@include media_larger_than("s") {
-	.navSide.mod-compact {
-		background-color: _component("navSide.compact-palette.bg-color");
-		text-align: center;
-		width: _component("navSide.compact.width");
-
-		.navSide-mainSection, .navSide-scrollWrapper {
-			width: _component("navSide.compact.width");
-		}
-
-		.navSide-item-link {
-			color: _component("navSide.compact-palette.text");
-			flex-direction: column;
-			font-size: _component("navSide.compact.font-size");
-			justify-content: center;
-			padding: 1em .5em;
-			position: relative;
-			text-align: center;
-
-			.navSide-item-link-title {
-				margin: .8em 0 0;
-			}
-		}
-
-		.navSide-item-arrow, .navSide-item-subMenu {
-			display: none;
-		}
-
-		.navSide-item-alert {
-			background-color: _component("navSide.compact-palette.alert-color");
-			color: _component("navSide.compact-palette.alert-text");
-			padding: 0 .4em;
-			position: relative;
-			top: .625em;
-			margin: .166em;
-		}
-
-		.navSide-item-placeholder {
-			flex-direction: column;
-
-			&::before {
-				height: 1.5em;
-				width: 1.5em;
-			}
-
-			&::after {
-				margin-left: 0;
-				margin-top: .8em;
-				width: 100%;
-			}
-		}
-
-		// COMPACT STATES
-		// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-		.navSide-item-link {
-			&:hover {
-				background-color: _component("navSide.compact-palette.hovered-bg");
-				color: _component("navSide.compact-palette.hovered-text");
-			}
-
-			&.is-active {
-				background-color: _component("navSide.compact-palette.selected-bg");
-				color: _component("navSide.compact-palette.selected-text");
-				opacity: 1;
-
-				.navSide-item-alert {
-					background-color: _component("navSide.compact-palette.selected-alert-color");
-					color: _component("navSide.compact-palette.selected-alert-text");
-				}
-			}
-		}
-
-		.navSide-bottomSection {
-			width: _component("navSide.compact.width");
-
-			.navSide-item-link {
-				background-color: _component("navSide.bottom-section-palette.bg-color");
-				color: _component("navSide.bottom-section-palette.text");
-				flex-direction: row;
-
-				.navSide-item-link-title {
-					@include mask;
-				}
-				&:hover {
-					background-color: _component("navSide.bottom-section-palette.hovered-bg");
-					color: _component("navSide.bottom-section-palette.hovered-text");
-				}
-			}
-		}
-	}
-}
-
-
-// Mobile version
-@include media_smaller_than("s") {
-	.navSide {
-		padding-top: _component("navSide.mobile.toggle-height");
-		width: 100%;
-		bottom: auto;
-
-
-		.navSide-mainSection, .navSide-scrollWrapper {
-			width: 100%;
-			height: auto;
-		}
-
-
-		&:not(.is-open) {
-			.navSide-item {
-				&:not(.mod-mobileToggle) {
-					display: none;
-				}
-			}
-		}
-	}
-
-	.navSide-scrollWrapper {
-		padding: 0;
-	}
-
-	.navSide-item.mod-mobileToggle {
-		display: block;
-		height: _component("navSide.mobile.toggle-height");
-		background-color: _color("primary", 800);
-		cursor: pointer;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 1;
-
-		.navSide-item-link {
-			border-radius: 0;
-
-			&:focus-visible {
-				box-shadow: 0 0 0 2px _component("navSide.fullwidth-palette.selected-text") inset;
-			}
-		}
-	}
-
-	.navSide.mod-withBanner {
-		.navSide-item.mod-mobileToggle {
-			top: _theme("commons.banner-height");
-		}
-	}
-
-	.navSide-bottomSection {
-		background-color: transparent;
-		width: auto;
-		height: auto;
-	}
-
-	.navSide.is-open {
-		height: 100vh;
-		overflow-x: hidden;
-		overflow-y: auto;
-
-		&.mod-withBanner {
-			height: calc(100vh - #{_theme("commons.banner-height")});
-		}
-
-		.navSide-scrollWrapper {
-			padding: .5em;
-		}
-	}
-}
-
-::ng-deep {
-    @include media_smaller_than('s') {
-        .hasMenu {
-            &,
-            body {
-                touch-action: none;
-                overscroll-behavior: none;
-                -webkit-overflow-scrolling: auto;
-            }
-
-            body {
-                overflow: hidden !important;
-            }
-        }
-    }
-}

package/src/components/_page-header.scss

@@ -1,55 +0,0 @@
-.pageHeader {
-	@include elevate(1);
-	padding: _theme('spacings.big') 2.5rem _theme('spacings.standard');
-	background-color: _color('white');
-
-	&.mod-withMenu {
-		padding-bottom: 0;
-	}
-
-	&.mod-withBreadcrumbs {
-		padding-top: _theme('spacings.small');
-
-		.breadcrumbs {
-			margin-bottom: 0;
-		}
-	}
-
-	&.mod-noShadow {
-		box-shadow: none;
-	}
-
-	.menu {
-		margin-top: _theme('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: _theme('spacings.small');
-	}
-}
-
-.pageHeader-description {
-	max-width: _theme('components.pageHeader.description.max-width');
-	margin-top: _theme('spacings.smaller');
-	color: _color('grey', '600');
-}

package/src/components/_pagination.scss

@@ -1,40 +0,0 @@
-.pagination {
-	display: flex;
-	flex-wrap: wrap;
-	margin: _theme("spacings.small") 0;
-
-	> *:not(:last-child) {
-		margin-right: _theme("spacings.smaller");
-	}
-}
-
-.pagination-count,
-.pagination-navigation,
-.pagination-scrolling {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-}
-
-.pagination-count-separator {
-	margin: 0 _theme("spacings.smallest");
-}
-
-.pagination-navigation {
-	list-style: none;
-	padding: 0;
-	margin-top: 0;
-	margin-bottom: 0;
-
-	> *:not(:last-child) {
-		margin-right: _theme("spacings.smallest");
-	}
-}
-
-.pagination-navigation-item {
-	margin-right: _theme("spacings.smallest");
-
-	&.is-ellipsis::after {
-		content: "\2026"; //Unicode ellipsis
-	}
-}

package/src/components/_progress.scss

@@ -1,98 +0,0 @@
-.progress {
-	background-color: _theme("commons.background.base");
-	height: _component("progress.height");
-	margin: _component("progress.margin");
-	position: relative;
-	overflow: hidden;
-}
-
-.progress-bar {
-	background-color: _component("progress.bar.background");
-	bottom: 0;
-	left: 0;
-	position: absolute;
-	top: 0;
-	transition: background-color _theme("commons.animations.durations.standard") ease, width _theme("commons.animations.durations.standard") ease;
-
-	&::after {
-		animation: progress _component("progress.duration") infinite;
-		background-color: _component("progress.bar.gradient");
-		bottom: 0;
-		content: "";
-		display: block;
-		left: 0;
-		position: absolute;
-		right: 0;
-		top: 0;
-		transform-origin: left;
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.progress {
-	&.mod-indeterminate {
-		.progress-bar {
-			width: 30%;
-			animation: progressIndetereminate _component("progress.duration") infinite;
-			animation-timing-function: linear;
-		}
-	}
-}
-
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.progress {
-	&.is-success {
-		.progress-bar {
-			background-color: _color("success");
-			width: 100% !important;
-
-			&::after {
-				display: none;
-			}
-		}
-	}
-
-	&.is-error {
-		.progress-bar {
-			background-color: _color("error");
-			width: 100% !important;
-
-			&::after {
-				display: none;
-			}
-		}
-	}
-}
-
-// ANIMATIONS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-@keyframes progress {
-	from {
-		transform: scale(0, 1);
-		opacity: 1;
-	}
-
-	to {
-		transform: scale(1, 1);
-		opacity: .3;
-	}
-}
-
-@keyframes progressIndetereminate {
-	0% {
-		left: -35%;
-		right: 100%;
-	}
-
-	100% {
-		left: 100%;
-		right: -35%;
-	}
-}

package/src/components/_section.scss

@@ -1,25 +0,0 @@
-.section {
-	background-color: white;
-	border-bottom: 1px solid #E5E5E5;
-	padding: 3rem;
-
-	@include media_smaller_than("s") {
-		padding-left: 2rem;
-		padding-right: 2rem;
-	}
-
-	@include media_smaller_than("xs") {
-		padding-left: 1rem;
-		padding-right: 1rem;
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.section {
-	&.mod-grey {
-		background-color: _theme("commons.background.base");
-	}
-}