@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/loading/component.scss

@@ -1,15 +1,15 @@
-@use '@lucca-front/scss/src/commons/utils/loading';
-
-@mixin component {
-	@include loading.spinner();
-
-	min-width: 1.5rem;
-	min-height: 1.5rem;
-	padding-left: var(--spacings-L);
-	display: inline-block;
-	position: relative;
-
-	&::after {
-		margin: 0;
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/loading';
+
+@mixin component {
+	@include loading.spinner();
+
+	min-width: 1.5rem;
+	min-height: 1.5rem;
+	padding-left: var(--spacings-L);
+	display: inline-block;
+	position: relative;
+
+	&::after {
+		margin: 0;
+	}
+}

package/src/components/loading/exports.scss

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

package/src/components/loading/index.scss

@@ -1,30 +1,30 @@
-@use 'exports' as *;
-
-.loading {
-	@include vars;
-	@include component;
-
-	&.mod-L {
-		@include L;
-	}
-
-	&.mod-block {
-		@include block;
-	}
-
-	&.mod-fullPage {
-		@include fullPage;
-	}
-
-	&.mod-sidePanel {
-		@include sidePanel;
-	}
-
-	&.mod-dialog {
-		@include dialog;
-	}
-
-	&.mod-invert {
-		@include invert;
-	}
-}
+@use 'exports' as *;
+
+.loading {
+	@include vars;
+	@include component;
+
+	&.mod-L {
+		@include L;
+	}
+
+	&.mod-block {
+		@include block;
+	}
+
+	&.mod-fullPage {
+		@include fullPage;
+	}
+
+	&.mod-sidePanel {
+		@include sidePanel;
+	}
+
+	&.mod-dialog {
+		@include dialog;
+	}
+
+	&.mod-invert {
+		@include invert;
+	}
+}

package/src/components/loading/mods.scss

@@ -1,78 +1,78 @@
-@mixin L {
-	height: var(--components-loading-size-big);
-	padding: var(--components-loading-size-big) 0 0;
-	text-align: center;
-	width: 100%;
-
-	&::after {
-		margin: 0 auto;
-		width: var(--components-loading-size-big);
-		height: var(--components-loading-size-big);
-	}
-}
-
-@mixin block {
-	display: block;
-	margin-bottom: var(--spacings-L);
-	padding: var(--spacings-XL) 0 0;
-	text-align: center;
-	width: 100%;
-
-	&::after {
-		margin: auto;
-	}
-}
-
-@mixin fullPage {
-	display: block;
-	margin: 0 auto;
-	transform: translateY(30vh);
-
-	&::after {
-		margin: 0 auto;
-		width: var(--components-loading-size-big);
-		height: var(--components-loading-size-big);
-	}
-}
-
-@mixin dialog {
-	display: block;
-	text-align: center;
-	position: relative;
-	padding: 8rem 0 0;
-	margin: 0 var(--spacings-L) var(--spacings-L);
-
-	&::after {
-		margin: auto;
-		width: var(--components-loading-size-big);
-		height: var(--components-loading-size-big);
-		left: 0;
-		right: 0;
-	}
-}
-
-@mixin sidePanel {
-	display: block;
-	text-align: center;
-	position: relative;
-	padding: 8rem 0 0;
-	margin: 0 var(--spacings-L) var(--spacings-L);
-	top: 35vh;
-
-	&::after {
-		margin: auto;
-		width: var(--components-loading-size-big);
-		height: var(--components-loading-size-big);
-		left: 0;
-		right: 0;
-	}
-}
-
-@mixin invert {
-	color: var(--colors-white-color);
-
-	&::after {
-		border-color:  rgba(255, 255, 255, 0.66);
-		border-top-color: transparent;
-	}
-}
+@mixin L {
+	height: var(--components-loading-size-big);
+	padding: var(--components-loading-size-big) 0 0;
+	text-align: center;
+	width: 100%;
+
+	&::after {
+		margin: 0 auto;
+		width: var(--components-loading-size-big);
+		height: var(--components-loading-size-big);
+	}
+}
+
+@mixin block {
+	display: block;
+	margin-bottom: var(--spacings-L);
+	padding: var(--spacings-XL) 0 0;
+	text-align: center;
+	width: 100%;
+
+	&::after {
+		margin: auto;
+	}
+}
+
+@mixin fullPage {
+	display: block;
+	margin: 0 auto;
+	transform: translateY(30vh);
+
+	&::after {
+		margin: 0 auto;
+		width: var(--components-loading-size-big);
+		height: var(--components-loading-size-big);
+	}
+}
+
+@mixin dialog {
+	display: block;
+	text-align: center;
+	position: relative;
+	padding: 8rem 0 0;
+	margin: 0 var(--spacings-L) var(--spacings-L);
+
+	&::after {
+		margin: auto;
+		width: var(--components-loading-size-big);
+		height: var(--components-loading-size-big);
+		left: 0;
+		right: 0;
+	}
+}
+
+@mixin sidePanel {
+	display: block;
+	text-align: center;
+	position: relative;
+	padding: 8rem 0 0;
+	margin: 0 var(--spacings-L) var(--spacings-L);
+	top: 35vh;
+
+	&::after {
+		margin: auto;
+		width: var(--components-loading-size-big);
+		height: var(--components-loading-size-big);
+		left: 0;
+		right: 0;
+	}
+}
+
+@mixin invert {
+	color: var(--colors-white-color);
+
+	&::after {
+		border-color:  rgba(255, 255, 255, 0.66);
+		border-top-color: transparent;
+	}
+}

package/src/components/loading/vars.scss

@@ -1,3 +1,3 @@
-@mixin vars {
-  --components-loading-size-big: 3rem;
-}
+@mixin vars {
+  --components-loading-size-big: 3rem;
+}

package/src/components/main/component.scss

@@ -1,9 +1,9 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin component {
-	position: relative;
-
-	@include media.max('S') {
-		margin-left: 0 !important;
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin component {
+	position: relative;
+
+	@include media.max('S') {
+		margin-left: 0 !important;
+	}
+}

package/src/components/main/exports.scss

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

package/src/components/main/index.scss

@@ -1,32 +1,32 @@
-@use 'exports' as *;
-
-.main {
-	&:is(.is-notScrollable, .notScrollable) {
-		@include notScrollable;
-	}
-}
-
-.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;
-	}
-}
+@use 'exports' as *;
+
+.main {
+	&:is(.is-notScrollable, .notScrollable) {
+		@include notScrollable;
+	}
+}
+
+.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;
+	}
+}

package/src/components/main/mods.scss

@@ -1,21 +1,21 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin menu {
-	margin-left: var(--commons-navSide-width);
-}
-
-@mixin menuCompact {
-	margin-left: var(--commons-navSide-compact-width);
-}
-
-@mixin banner {
-	margin-top: var(--commons-banner-height);
-
-	@include media.max('S') {
-		margin-top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-	}
-}
-
-@mixin stickyHeader {
-	padding-top: var(--components-header-height);
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin menu {
+	margin-left: var(--commons-navSide-width);
+}
+
+@mixin menuCompact {
+	margin-left: var(--commons-navSide-compact-width);
+}
+
+@mixin banner {
+	margin-top: var(--commons-banner-height);
+
+	@include media.max('S') {
+		margin-top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+	}
+}
+
+@mixin stickyHeader {
+	padding-top: var(--components-header-height);
+}

package/src/components/main/states.scss

@@ -1,8 +1,8 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin notScrollable {
-	@include media.max('S') {
-		height: 100vh;
-		overflow: hidden;
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin notScrollable {
+	@include media.max('S') {
+		height: 100vh;
+		overflow: hidden;
+	}
+}

package/src/components/main/vars.scss

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

package/src/components/menu/component.scss

@@ -1,102 +1,102 @@
-@use '@lucca-front/scss/src/commons/utils/reset';
-
-@mixin component($atRoot: 'without: rule') {
-	column-gap: var(--spacings-L);
-	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 { // deprecated
-		margin-right: 0;
-		background-color: var(--palettes-grey-100);
-		color: var(--palettes-grey-700);
-	}
-
-	@at-root ($atRoot) {
-		.menu-list {
-			@include reset.list;
-
-			align-items: flex-end;
-			column-gap: var(--spacings-L);
-			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-borderRadius-M);
-			color: var(--palettes-grey-800);
-			display: inline-flex;
-			align-items: center;
-			text-align: center;
-			gap: var(--spacings-XS);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: color;
-			position: relative;
-			text-decoration: none;
-			width: auto;
-			z-index: 1;
-
-			&::after {
-				background-color: var(--palettes-700, var(--palettes-primary-700));
-				border-radius: var(--commons-borderRadius-M) var(--commons-borderRadius-M) 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]) {
-				&:hover {
-					&:not(.is-active, [aria-current='page']) {
-						color: var(--palettes-grey-900);
-					}
-
-					.label { // deprecated
-						background-color: var(--palettes-100, var(--palettes-primary-100));
-						color: var(--palettes-700, var(--palettes-primary-700));
-					}
-
-					&::after {
-						transform: scale(0.75, 1);
-					}
-				}
-			}
-		}
-
-		.menu-link-placeholder {
-			&::after {
-				content: attr(data-content-after);
-
-				display: block;
-				height: 0;
-				overflow: hidden;
-				font-weight: 600;
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@mixin component($atRoot: 'without: rule') {
+	column-gap: var(--spacings-L);
+	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 { // deprecated
+		margin-right: 0;
+		background-color: var(--palettes-grey-100);
+		color: var(--palettes-grey-700);
+	}
+
+	@at-root ($atRoot) {
+		.menu-list {
+			@include reset.list;
+
+			align-items: flex-end;
+			column-gap: var(--spacings-L);
+			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-borderRadius-M);
+			color: var(--palettes-grey-800);
+			display: inline-flex;
+			align-items: center;
+			text-align: center;
+			gap: var(--spacings-XS);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: color;
+			position: relative;
+			text-decoration: none;
+			width: auto;
+			z-index: 1;
+
+			&::after {
+				background-color: var(--palettes-700, var(--palettes-primary-700));
+				border-radius: var(--commons-borderRadius-M) var(--commons-borderRadius-M) 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]) {
+				&:hover {
+					&:not(.is-active, [aria-current='page']) {
+						color: var(--palettes-grey-900);
+					}
+
+					.label { // deprecated
+						background-color: var(--palettes-100, var(--palettes-primary-100));
+						color: var(--palettes-700, var(--palettes-primary-700));
+					}
+
+					&::after {
+						transform: scale(0.75, 1);
+					}
+				}
+			}
+		}
+
+		.menu-link-placeholder {
+			&::after {
+				content: attr(data-content-after);
+
+				display: block;
+				height: 0;
+				overflow: hidden;
+				font-weight: 600;
+			}
+		}
+	}
+}

package/src/components/menu/exports.scss

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