@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/gridLegacy/index.scss

@@ -1,94 +1,94 @@
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/scss/src/commons/utils/media';
-@use 'exports' as *;
-
-.grid {
-	@include vars;
-	@include component;
-
-	&.mod-reverse {
-		@include reverse;
-	}
-
-	@each $breakpoint, $value in config.$breakpoints {
-		@include media.min($breakpoint) {
-			&.mod-start\@mediaMin#{$breakpoint} {
-				@include start;
-			}
-
-			&.mod-center\@mediaMin#{$breakpoint} {
-				@include center;
-			}
-
-			&.mod-end\@mediaMin#{$breakpoint} {
-				@include end;
-			}
-
-			&.mod-top\@mediaMin#{$breakpoint} {
-				@include top;
-			}
-
-			&.mod-middle\@mediaMin#{$breakpoint} {
-				@include middle;
-			}
-
-			&.mod-bottom\@mediaMin#{$breakpoint} {
-				@include bottom;
-			}
-
-			&.mod-around\@mediaMin#{$breakpoint} {
-				@include around;
-			}
-
-			&.mod-between\@mediaMin#{$breakpoint} {
-				@include between;
-			}
-		}
-	}
-}
-
-@each $breakpoint, $value in config.$breakpoints {
-	.grid\@mediaMin#{$breakpoint} {
-		@include column;
-	}
-
-	@include media.min($breakpoint) {
-		.grid\@mediaMin#{$breakpoint} {
-			@include grow;
-		}
-	}
-
-	@for $i from 1 through 12 {
-		.grid-#{$i}\@mediaMin#{$breakpoint} {
-			@include column;
-		}
-	}
-}
-
-@each $breakpoint, $value in config.$breakpoints {
-	@for $i from 1 through 12 {
-		@include media.min($breakpoint) {
-			.grid-#{$i}\@mediaMin#{$breakpoint} {
-				@include basis($i);
-			}
-
-			.grid-offset#{$i}\@mediaMin#{$breakpoint} {
-				@include offset($i);
-			}
-		}
-	}
-}
-
-.grid {
-	@each $breakpoint, $value in config.$breakpoints {
-		@include media.min($breakpoint) {
-			.u-first\@mediaMin#{$breakpoint} {
-				@include first;
-			}
-
-			.u-last\@mediaMin#{$breakpoint} {
-				@include last;
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/scss/src/commons/utils/media';
+@use 'exports' as *;
+
+.grid {
+	@include vars;
+	@include component;
+
+	&.mod-reverse {
+		@include reverse;
+	}
+
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.min($breakpoint) {
+			&.mod-start\@mediaMin#{$breakpoint} {
+				@include start;
+			}
+
+			&.mod-center\@mediaMin#{$breakpoint} {
+				@include center;
+			}
+
+			&.mod-end\@mediaMin#{$breakpoint} {
+				@include end;
+			}
+
+			&.mod-top\@mediaMin#{$breakpoint} {
+				@include top;
+			}
+
+			&.mod-middle\@mediaMin#{$breakpoint} {
+				@include middle;
+			}
+
+			&.mod-bottom\@mediaMin#{$breakpoint} {
+				@include bottom;
+			}
+
+			&.mod-around\@mediaMin#{$breakpoint} {
+				@include around;
+			}
+
+			&.mod-between\@mediaMin#{$breakpoint} {
+				@include between;
+			}
+		}
+	}
+}
+
+@each $breakpoint, $value in config.$breakpoints {
+	.grid\@mediaMin#{$breakpoint} {
+		@include column;
+	}
+
+	@include media.min($breakpoint) {
+		.grid\@mediaMin#{$breakpoint} {
+			@include grow;
+		}
+	}
+
+	@for $i from 1 through 12 {
+		.grid-#{$i}\@mediaMin#{$breakpoint} {
+			@include column;
+		}
+	}
+}
+
+@each $breakpoint, $value in config.$breakpoints {
+	@for $i from 1 through 12 {
+		@include media.min($breakpoint) {
+			.grid-#{$i}\@mediaMin#{$breakpoint} {
+				@include basis($i);
+			}
+
+			.grid-offset#{$i}\@mediaMin#{$breakpoint} {
+				@include offset($i);
+			}
+		}
+	}
+}
+
+.grid {
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.min($breakpoint) {
+			.u-first\@mediaMin#{$breakpoint} {
+				@include first;
+			}
+
+			.u-last\@mediaMin#{$breakpoint} {
+				@include last;
+			}
+		}
+	}
+}

package/src/components/gridLegacy/mods.scss

@@ -1,46 +1,46 @@
-@mixin reverse {
-	flex-direction: row-reverse;
-}
-
-@mixin first {
-	order: -1;
-}
-
-@mixin last {
-	order: 1;
-}
-
-@mixin start {
-	justify-content: flex-start;
-	text-align: start;
-}
-
-@mixin center {
-	justify-content: center;
-	text-align: center;
-}
-
-@mixin end {
-	justify-content: flex-end;
-	text-align: end;
-}
-
-@mixin top {
-	align-items: flex-start;
-}
-
-@mixin middle {
-	align-items: center;
-}
-
-@mixin bottom {
-	align-items: flex-end;
-}
-
-@mixin around {
-	justify-content: space-around;
-}
-
-@mixin between {
-	justify-content: space-between;
-}
+@mixin reverse {
+	flex-direction: row-reverse;
+}
+
+@mixin first {
+	order: -1;
+}
+
+@mixin last {
+	order: 1;
+}
+
+@mixin start {
+	justify-content: flex-start;
+	text-align: start;
+}
+
+@mixin center {
+	justify-content: center;
+	text-align: center;
+}
+
+@mixin end {
+	justify-content: flex-end;
+	text-align: end;
+}
+
+@mixin top {
+	align-items: flex-start;
+}
+
+@mixin middle {
+	align-items: center;
+}
+
+@mixin bottom {
+	align-items: flex-end;
+}
+
+@mixin around {
+	justify-content: space-around;
+}
+
+@mixin between {
+	justify-content: space-between;
+}

package/src/components/gridLegacy/vars.scss

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

package/src/components/header/component.scss

@@ -1,72 +1,72 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-
-@mixin component($atRoot: 'without: rule') {
-	box-shadow: var(--commons-boxShadow-XS);
-	background-color: var(--components-header-background);
-	min-height: var(--components-header-height);
-	padding: var(--components-header-padding);
-	position: relative;
-	display: flex;
-	align-items: center;
-	z-index: 99;
-
-	@at-root ($atRoot) {
-		.header-contentLeft {
-			display: flex;
-		}
-
-		.header-contentRight {
-			display: flex;
-			margin-left: auto;
-		}
-
-		.header-nav {
-			height: var(--components-header-height);
-			padding-left: calc(var(--components-header-height) + var(--spacings-S));
-			align-items: flex-start;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			position: relative;
-		}
-
-		.header-nav-back {
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: all;
-			border-right-color: var(--commons-divider-color);
-			border-right-width: var(--commons-divider-width);
-			border-right-style: solid;
-			color: var(--palettes-grey-500);
-			height: var(--components-header-height);
-			width: var(--components-header-height);
-			line-height: var(--components-header-height);
-			font-size: 1.3rem;
-			left: 0;
-			top: 0;
-			position: absolute;
-			display: block;
-			text-align: center;
-			text-decoration: none;
-
-			&:hover {
-				background-color: var(--commons-background-base);
-				color: var(--palettes-grey-800);
-			}
-
-			&::before {
-				@include icon.generate('arrow_left');
-			}
-		}
-
-		.header-nav-category {
-			color: var(--palettes-grey-500);
-			font-size: var(--sizes-S-fontSize);
-		}
-
-		.header-nav-title {
-			color: var(--palettes-primary-700);
-			line-height: var(--sizes-XS-lineHeight);
-			margin: 0;
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+
+@mixin component($atRoot: 'without: rule') {
+	box-shadow: var(--commons-boxShadow-XS);
+	background-color: var(--components-header-background);
+	min-height: var(--components-header-height);
+	padding: var(--components-header-padding);
+	position: relative;
+	display: flex;
+	align-items: center;
+	z-index: 99;
+
+	@at-root ($atRoot) {
+		.header-contentLeft {
+			display: flex;
+		}
+
+		.header-contentRight {
+			display: flex;
+			margin-left: auto;
+		}
+
+		.header-nav {
+			height: var(--components-header-height);
+			padding-left: calc(var(--components-header-height) + var(--spacings-S));
+			align-items: flex-start;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			position: relative;
+		}
+
+		.header-nav-back {
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: all;
+			border-right-color: var(--commons-divider-color);
+			border-right-width: var(--commons-divider-width);
+			border-right-style: solid;
+			color: var(--palettes-grey-500);
+			height: var(--components-header-height);
+			width: var(--components-header-height);
+			line-height: var(--components-header-height);
+			font-size: 1.3rem;
+			left: 0;
+			top: 0;
+			position: absolute;
+			display: block;
+			text-align: center;
+			text-decoration: none;
+
+			&:hover {
+				background-color: var(--commons-background-base);
+				color: var(--palettes-grey-800);
+			}
+
+			&::before {
+				@include icon.generate('arrow_left');
+			}
+		}
+
+		.header-nav-category {
+			color: var(--palettes-grey-500);
+			font-size: var(--sizes-S-fontSize);
+		}
+
+		.header-nav-title {
+			color: var(--palettes-primary-700);
+			line-height: var(--sizes-XS-lineHeight);
+			margin: 0;
+		}
+	}
+}

package/src/components/header/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/header/index.scss

@@ -1,28 +1,28 @@
-@use 'exports' as *;
-
-.header {
-	@include vars;
-	@include component;
-
-	&.mod-sticky {
-		@include sticky;
-
-		.navSide ~ .main-content &,
-		.mod-withMenu .main-content & {
-			@include left;
-		}
-
-		.navSide.mod-compact ~ .main-content &,
-		.mod-withMenuCompact .main-content & {
-			@include leftCompact;
-		}
-	}
-
-	&.mod-nav {
-		@include nav;
-	}
-
-	&:is(.is-loading, .loading) {
-		@include loading;
-	}
-}
+@use 'exports' as *;
+
+.header {
+	@include vars;
+	@include component;
+
+	&.mod-sticky {
+		@include sticky;
+
+		.navSide ~ .main-content &,
+		.mod-withMenu .main-content & {
+			@include left;
+		}
+
+		.navSide.mod-compact ~ .main-content &,
+		.mod-withMenuCompact .main-content & {
+			@include leftCompact;
+		}
+	}
+
+	&.mod-nav {
+		@include nav;
+	}
+
+	&:is(.is-loading, .loading) {
+		@include loading;
+	}
+}

package/src/components/header/mods.scss

@@ -1,34 +1,34 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin sticky {
-	top: var(--commons-banner-height);
-	position: fixed;
-	left: 0;
-	right: 0;
-
-	@include media.max('S') {
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-		left: 0 !important;
-	}
-}
-
-@mixin nav {
-	align-items: center;
-	padding-bottom: 0;
-	padding-left: 0;
-	padding-top: 0;
-}
-
-@mixin left {
-	left: var(--commons-navSide-width);
-
-	@include media.max('S') {
-		top: var(--commons-navSide-mobile-toggle-height);
-	}
-}
-
-@mixin leftCompact {
-	@include left;
-
-	left: var(--commons-navSide-compact-width);
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin sticky {
+	top: var(--commons-banner-height);
+	position: fixed;
+	left: 0;
+	right: 0;
+
+	@include media.max('S') {
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+		left: 0 !important;
+	}
+}
+
+@mixin nav {
+	align-items: center;
+	padding-bottom: 0;
+	padding-left: 0;
+	padding-top: 0;
+}
+
+@mixin left {
+	left: var(--commons-navSide-width);
+
+	@include media.max('S') {
+		top: var(--commons-navSide-mobile-toggle-height);
+	}
+}
+
+@mixin leftCompact {
+	@include left;
+
+	left: var(--commons-navSide-compact-width);
+}

package/src/components/header/states.scss

@@ -1,13 +1,13 @@
-@use '@lucca-front/scss/src/commons/utils/loading';
-
-@mixin loading {
-	height: 75px;
-
-	&::after {
-		@include loading.gradient;
-
-		inset: 0;
-		position: absolute;
-		content: '';
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/loading';
+
+@mixin loading {
+	height: 75px;
+
+	&::after {
+		@include loading.gradient;
+
+		inset: 0;
+		position: absolute;
+		content: '';
+	}
+}

package/src/components/header/vars.scss

@@ -1,5 +1,5 @@
-@mixin vars {
-	--components-header-background: var(--colors-white-color);
-	--components-header-padding: var(--spacings-XS) var(--spacings-S);
-	--components-header-height: 4rem;
-}
+@mixin vars {
+	--components-header-background: var(--colors-white-color);
+	--components-header-padding: var(--spacings-XS) var(--spacings-S);
+	--components-header-height: 4rem;
+}