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

package/src/components/_loading.scss

@@ -1,108 +0,0 @@
-.loading {
-	@include loading(1rem);
-	display: inline-block;
-	min-height: 1.7rem;
-	min-width: 1.7rem;
-	padding-left: 2rem;
-	position: relative;
-
-	&::after, &::before {
-		height: 1rem;
-		margin: .35rem;
-		width: 1rem;
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.loading {
-	&.mod-block {
-		display: block;
-		margin-bottom: 2rem;
-		padding: 3rem 0 0;
-		text-align: center;
-		width: 100%;
-
-		&::after, &::before {
-			margin: auto;
-		}
-	}
-
-	&.mod-big {
-		height: 5rem;
-		padding: 5.5rem 0 0;
-		text-align: center;
-		width: 100%;
-
-		&::before, &::after {
-			margin: 0 auto;
-			height: 5rem;
-			width: 5rem;
-			border-width: 3px;
-		}
-	}
-
-	&.mod-fullPage {
-		display: block;
-		margin: 0 auto;
-		transform: translateY(30vh);
-
-		&::before, &::after {
-			margin: 0 auto;
-			height: 5rem;
-			width: 5rem;
-			border-width: 3px;
-		}
-	}
-
-	&.mod-dialog {
-		display: block;
-		text-align: center;
-		position: relative;
-		padding: 8rem 0 0;
-		margin: 0 2rem 2rem;
-
-		&::before, &::after {
-			height: 5rem;
-			width: 5rem;
-			content: "";
-			left: 0;
-			right: 0;
-			margin: auto;
-			border-width: 3px;
-		}
-	}
-
-	&.mod-sidePanel {
-		display: block;
-		text-align: center;
-		position: relative;
-		padding: 8rem 0 0;
-		margin: 0 2rem 2rem;
-		top: 35vh;
-
-		&::before, &::after {
-			height: 5rem;
-			width: 5rem;
-			content: "";
-			left: 0;
-			right: 0;
-			margin: auto;
-			border-width: 3px;
-		}
-	}
-
-	&.mod-invert {
-		color: white;
-
-		&::before {
-			border-color: rgba(255, 255, 255, .25);
-		}
-
-		&::after {
-			border-color: rgba(255, 255, 255, .66) transparent transparent transparent;
-		}
-	}
-}

package/src/components/_main.scss

@@ -1,40 +0,0 @@
-.main-content {
-	position: relative;
-
-	&.mod-withStickyHeader {
-		padding-top: _component("header.height");
-	}
-}
-
-// with vertical navigation
-.navSide ~ .main-content, .mod-withMenu .main-content {
-	margin-left: _theme("components.navSide.width");
-}
-
-// with compact vertical navigation
-.navSide.mod-compact ~ .main-content, .mod-withMenuCompact .main-content {
-	margin-left: _theme("components.navSide.compact.width");
-}
-
-.navSide.mod-withBanner ~ .main-content, .mod-withBanner .main-content, .main-content.mod-withBanner {
-	height: calc(100vh - #{_theme("commons.banner-height")});
-	overflow-y: auto;
-	margin-top: _theme("commons.banner-height");
-}
-
-@include media_smaller_than(_theme("commons.mobile", true)) {
-	.main-content {
-		margin-left: 0 !important;
-	}
-
-	// MOD TO BE ADDED TO .MAIN WHEN THE MENU IS TOGGLED
-	.main.is-notScrollable {
-		height: 100vh;
-		overflow: hidden;
-	}
-
-	.navSide.mod-withBanner ~ .main-content, .main-content.mod-withBanner, .mod-withBanner .main-content {
-		height: calc(100vh - #{_theme("commons.banner-height")} - #{_component("navSide.mobile.toggle-height")});
-		margin-top: calc(#{_theme("commons.banner-height")} + #{_component("navSide.mobile.toggle-height")});
-	}
-}

package/src/components/_menu.scss

@@ -1,153 +0,0 @@
-.menu {
-	align-items: center;
-	background-color: _component('menu.background');
-	display: flex;
-	position: relative;
-	gap: _theme('spacings.big');
-	flex-wrap: wrap;
-
-	&:not(.mod-noBorder)::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		height: 1px;
-		left: 0;
-		right: 0;
-		border-bottom: _theme('commons.divider.width') solid _theme('commons.divider.color');
-	}
-
-	.label {
-		margin-right: 0;
-		background-color: _color('grey', 100);
-		color: _color('grey', 700);
-	}
-}
-
-.menu-list {
-	@include listReset;
-
-	display: flex;
-	gap: _theme('spacings.big');
-	flex-wrap: wrap;
-}
-
-.menu-link, // legacy syntax
-.menu-list-item-action {
-	@include buttonReset;
-	border-radius: _theme('commons.border.radius');
-	color: _color('grey', 700);
-	padding: _component('menu.padding');
-	position: relative;
-	text-decoration: none;
-	transition: color _component('menu.animations.durations.fast') ease;
-	text-align: center;
-	display: block;
-	width: auto;
-
-	&::after {
-		background-color: _component('menu.default-palette.700');
-		border-radius: _theme('commons.border.radius')
-			_theme('commons.border.radius') 0 0;
-		bottom: 0;
-		content: '';
-		display: block;
-		height: 2px;
-		left: 0;
-		position: absolute;
-		right: 0;
-		transform: scale(0, 1);
-		transition: transform _component('menu.animations.durations.fast') ease;
-		z-index: 1;
-	}
-
-	&:not(.is-disabled, [disabled]) {
-		&:focus-visible,
-		&:hover {
-			&:not(.is-active, [aria-current='page']) {
-				color: _color("grey", "900");
-			}
-
-			.label {
-				background-color: _component('menu.default-palette.100');
-				color: _component('menu.default-palette.700');
-			}
-
-			&::after {
-				transform: scale(0.75);
-			}
-		}
-	}
-
-	&:focus-visible {
-		outline: none;
-	}
-}
-
-.menu-link-placeholder { // legacy syntax
-	&::after {
-		content: attr(data-content-after);
-		display: block;
-		height: 0;
-		overflow: hidden;
-		font-weight: 600;
-	}
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.menu {
-	&.mod-header {
-		padding: 0 2.5rem;
-	}
-
-	&.mod-small {
-		.menu-link,   // legacy syntax
-		.menu-list-item-action {
-			font-size: _theme('sizes.small.font-size');
-			line-height: _theme('sizes.small.line-height');
-			padding: .75rem 0;
-		}
-
-		.label {
-			height: _theme("sizes.small.line-height");
-			min-width: _theme("sizes.small.line-height");
-			line-height: _theme("sizes.small.line-height");
-			padding: 0;
-		}
-
-		.menu-link {
-			// legacy syntax
-			margin-right: _theme('spacings.standard'); // magic number
-		}
-	}
-}
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.menu-link,  // legacy syntax
-.menu-list-item-action {
-	&.is-active,  // legacy syntax
-	&[aria-current="page"] {
-		color: _component('menu.default-palette.700');
-
-		.label {
-			background-color: _component('menu.default-palette.100');
-			color: _component('menu.default-palette.700');
-		}
-
-		&::after {
-			background-color: _component('menu.default-palette.700');
-			transform: scale(1);
-		}
-	}
-
-	&.is-disabled, &[disabled] {
-		&,
-		.label {
-			color: _color('grey', 500);
-			pointer-events: none;
-		}
-	}
-}