@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/timeline/states.scss

@@ -1,22 +1,22 @@
-@mixin current {
-	.timeline-step-title {
-		color: var(--palettes-primary-700);
-
-		&::before {
-			background-color: var(--palettes-primary-700);
-			box-shadow: 0 0 0 var(--spacings-XXS) var(--palettes-primary-200);
-			color: var(--colors-white-color);
-		}
-	}
-
-	~ .timeline-step {
-		.timeline-step-title {
-			color: var(--palettes-grey-600);
-
-			&::before {
-				background-color: var(--palettes-grey-200);
-				color: var(--palettes-grey-600);
-			}
-		}
-	}
-}
+@mixin current {
+	.timeline-step-title {
+		color: var(--palettes-primary-700);
+
+		&::before {
+			background-color: var(--palettes-primary-700);
+			box-shadow: 0 0 0 var(--spacings-XXS) var(--palettes-primary-200);
+			color: var(--colors-white-color);
+		}
+	}
+
+	~ .timeline-step {
+		.timeline-step-title {
+			color: var(--palettes-grey-600);
+
+			&::before {
+				background-color: var(--palettes-grey-200);
+				color: var(--palettes-grey-600);
+			}
+		}
+	}
+}

package/src/components/timeline/vars.scss

@@ -1,3 +1,3 @@
-@mixin vars {
-  --components-timeline-icon-size: var(--sizes-XS-lineHeight);
-}
+@mixin vars {
+  --components-timeline-icon-size: var(--sizes-XS-lineHeight);
+}

package/src/components/timepicker/component.scss

@@ -1,91 +1,91 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component($atRoot: 'without: rule') {
-	padding: var(--components-timepicker-padding);
-	border: 0;
-	border-radius: var(--commons-borderRadius-M);
-	box-shadow: 0 0 0 1px var(--palettes-grey-300);
-	display: inline-flex;
-	background-color: var(--colors-white-color);
-	transition: box-shadow var(--commons-animations-durations-fast);
-
-	&:focus-within {
-		@include a11y.focusVisible($offset: 3px);
-		background-color: transparent;
-	}
-
-	@at-root ($atRoot) {
-		.timepicker-field {
-			position: relative;
-			display: inline-block;
-		}
-
-		.timepicker-field-input {
-			background-color: transparent;
-			border-radius: var(--commons-borderRadius-M);
-			text-align: center;
-			color: var(--palettes-grey-800);
-			width: var(--components-timepicker-input-width);
-			height: var(--components-timepicker-input-height);
-			border: 0;
-			padding: 0;
-			-moz-appearance: textfield;
-
-			&::-webkit-outer-spin-button,
-			&::-webkit-inner-spin-button {
-				-webkit-appearance: none;
-				margin: 0;
-			}
-
-			&:hover,
-			&:focus,
-			&:focus-visible {
-				background-color: var(--palettes-100, var(--palettes-primary-100));
-				outline: none;
-			}
-		}
-
-		.timepicker-field-increment {
-			cursor: pointer;
-			position: absolute;
-			bottom: calc(100% + 0.5rem + 1px);
-			left: 0;
-			border: 0;
-			height: 1.25rem;
-			background-color: transparent;
-			color: var(--palettes-grey-600);
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-			border-radius: var(--commons-borderRadius-M);
-			width: var(--components-timepicker-input-width);
-			padding: 0;
-
-			&:last-child {
-				top: calc(100% + 0.5rem + 1px);
-				bottom: auto;
-			}
-
-			&:hover {
-				background-color: var(--palettes-grey-50);
-				color: var(--palettes-grey-800);
-			}
-
-			&:focus {
-				background-color: var(--palettes-grey-100);
-				color: var(--palettes-grey-800);
-			}
-
-			.lucca-icon {
-				font-size: 1rem;
-			}
-		}
-
-		.timepicker-separator {
-			margin: 0 var(--spacings-XXS);
-			text-align: center;
-			width: 0.5rem;
-			line-height: var(--components-timepicker-input-height);
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	padding: var(--components-timepicker-padding);
+	border: 0;
+	border-radius: var(--commons-borderRadius-M);
+	box-shadow: 0 0 0 1px var(--palettes-grey-300);
+	display: inline-flex;
+	background-color: var(--colors-white-color);
+	transition: box-shadow var(--commons-animations-durations-fast);
+
+	&:focus-within {
+		@include a11y.focusVisible($offset: 3px);
+		background-color: transparent;
+	}
+
+	@at-root ($atRoot) {
+		.timepicker-field {
+			position: relative;
+			display: inline-block;
+		}
+
+		.timepicker-field-input {
+			background-color: transparent;
+			border-radius: var(--commons-borderRadius-M);
+			text-align: center;
+			color: var(--palettes-grey-800);
+			width: var(--components-timepicker-input-width);
+			height: var(--components-timepicker-input-height);
+			border: 0;
+			padding: 0;
+			-moz-appearance: textfield;
+
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+			}
+
+			&:hover,
+			&:focus,
+			&:focus-visible {
+				background-color: var(--palettes-100, var(--palettes-primary-100));
+				outline: none;
+			}
+		}
+
+		.timepicker-field-increment {
+			cursor: pointer;
+			position: absolute;
+			bottom: calc(100% + 0.5rem + 1px);
+			left: 0;
+			border: 0;
+			height: 1.25rem;
+			background-color: transparent;
+			color: var(--palettes-grey-600);
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: var(--commons-borderRadius-M);
+			width: var(--components-timepicker-input-width);
+			padding: 0;
+
+			&:last-child {
+				top: calc(100% + 0.5rem + 1px);
+				bottom: auto;
+			}
+
+			&:hover {
+				background-color: var(--palettes-grey-50);
+				color: var(--palettes-grey-800);
+			}
+
+			&:focus {
+				background-color: var(--palettes-grey-100);
+				color: var(--palettes-grey-800);
+			}
+
+			.lucca-icon {
+				font-size: 1rem;
+			}
+		}
+
+		.timepicker-separator {
+			margin: 0 var(--spacings-XXS);
+			text-align: center;
+			width: 0.5rem;
+			line-height: var(--components-timepicker-input-height);
+		}
+	}
+}

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

@@ -1,14 +1,14 @@
-@use 'exports' as *;
-
-.timepicker {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-
-	&:is(.is-disabled, .disabled, [disabled]) {
-		@include disabled;
-	}
-}
+@use 'exports' as *;
+
+.timepicker {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&:is(.is-disabled, .disabled, [disabled]) {
+		@include disabled;
+	}
+}

package/src/components/timepicker/mods.scss

@@ -1,4 +1,4 @@
-@mixin S {
-  --components-timepicker-input-height: 1.5rem;
-  --components-timepicker-padding: var(--spacings-XXS);
-}
+@mixin S {
+  --components-timepicker-input-height: 1.5rem;
+  --components-timepicker-padding: var(--spacings-XXS);
+}

package/src/components/timepicker/states.scss

@@ -1,13 +1,13 @@
-@mixin disabled {
-  background-color: var(--palettes-grey-100);
-  color: var(--palettes-grey-600);
-
-  .timepicker-field-input {
-    background: transparent;
-    color: var(--palettes-grey-600);
-  }
-
-  .timepicker-field-increment {
-    display: none;
-  }
-}
+@mixin disabled {
+  background-color: var(--palettes-grey-100);
+  color: var(--palettes-grey-600);
+
+  .timepicker-field-input {
+    background: transparent;
+    color: var(--palettes-grey-600);
+  }
+
+  .timepicker-field-increment {
+    display: none;
+  }
+}

package/src/components/timepicker/vars.scss

@@ -1,5 +1,5 @@
-@mixin vars {
-  --components-timepicker-input-width: 1.25rem;
-  --components-timepicker-input-height: 2rem;
-  --components-timepicker-padding: var(--spacings-XXS) var(--spacings-XS);
-}
+@mixin vars {
+  --components-timepicker-input-width: 1.25rem;
+  --components-timepicker-input-height: 2rem;
+  --components-timepicker-padding: var(--spacings-XXS) var(--spacings-XS);
+}

package/src/components/title/component.scss

@@ -1,15 +1,15 @@
-@mixin component($suffix: '') {
-	// no suffix here
-	margin-top: 0;
-	color: var(--palettes-grey-900);
-	margin-bottom: var(--spacings-S);
-	text-rendering: geometricPrecision;
-	text-wrap: balance;
-
-	// suffix here
-	font-weight: var(--components-title-weight, 600) #{$suffix};
-	font-size: var(--sizes-fontSize) #{$suffix};
-	line-height: var(--sizes-lineHeight) #{$suffix};
-	padding-top: var(--sizes-verticalPadding) #{$suffix};
-	padding-bottom: var(--sizes-verticalPadding) #{$suffix};
-}
+@mixin component($suffix: '') {
+	// no suffix here
+	margin-top: 0;
+	color: var(--palettes-grey-900);
+	margin-bottom: var(--spacings-S);
+	text-rendering: geometricPrecision;
+	text-wrap: balance;
+
+	// suffix here
+	font-weight: var(--components-title-weight, 600) #{$suffix};
+	font-size: var(--sizes-fontSize) #{$suffix};
+	line-height: var(--sizes-lineHeight) #{$suffix};
+	padding-top: var(--sizes-verticalPadding) #{$suffix};
+	padding-bottom: var(--sizes-verticalPadding) #{$suffix};
+}

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

@@ -1,39 +1,39 @@
-@use 'exports' as *;
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	@include vars;
-	@include component;
-}
-
-h1 {
-	@include h1;
-
-	&.mod-XXXL {
-		@include XXXL;
-	}
-}
-
-h2 {
-	@include h2;
-}
-
-h3 {
-	@include h3;
-}
-
-h4 {
-	@include h4;
-}
-
-h5 {
-	@include h5;
-}
-
-h6 {
-	@include h6;
-}
+@use 'exports' as *;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@include vars;
+	@include component;
+}
+
+h1 {
+	@include h1;
+
+	&.mod-XXXL {
+		@include XXXL;
+	}
+}
+
+h2 {
+	@include h2;
+}
+
+h3 {
+	@include h3;
+}
+
+h4 {
+	@include h4;
+}
+
+h5 {
+	@include h5;
+}
+
+h6 {
+	@include h6;
+}

package/src/components/title/mods.scss

@@ -1,48 +1,48 @@
-@mixin XXXL {
-	--sizes-verticalPadding: var(--sizes-XXXL-verticalPadding);
-	--sizes-fontSize: var(--sizes-XXXL-fontSize);
-	--sizes-lineHeight: var(--sizes-XXXL-lineHeight);
-	--components-title-weight: 900;
-}
-
-@mixin h1 {
-	--sizes-verticalPadding: var(--sizes-XXL-verticalPadding);
-	--sizes-fontSize: var(--sizes-XXL-fontSize);
-	--sizes-lineHeight: var(--sizes-XXL-lineHeight);
-	--components-title-weight: 900;
-}
-
-@mixin h2 {
-	--sizes-verticalPadding: var(--sizes-XL-verticalPadding);
-	--sizes-fontSize: var(--sizes-XL-fontSize);
-	--sizes-lineHeight: var(--sizes-XL-lineHeight);
-	--components-title-weight: 700;
-}
-
-@mixin h3 {
-	--sizes-verticalPadding: var(--sizes-L-verticalPadding);
-	--sizes-fontSize: var(--sizes-L-fontSize);
-	--sizes-lineHeight: var(--sizes-L-lineHeight);
-	--components-title-weight: 700;
-}
-
-@mixin h4 {
-	--sizes-verticalPadding: var(--sizes-M-verticalPadding);
-	--sizes-fontSize: var(--sizes-M-fontSize);
-	--sizes-lineHeight: var(--sizes-M-lineHeight);
-	--components-title-weight: 600;
-}
-
-@mixin h5 {
-	--sizes-verticalPadding: var(--sizes-S-verticalPadding);
-	--sizes-fontSize: var(--sizes-S-fontSize);
-	--sizes-lineHeight: var(--sizes-S-lineHeight);
-	--components-title-weight: 600;
-}
-
-@mixin h6 {
-	--sizes-verticalPadding: var(--sizes-XS-verticalPadding);
-	--sizes-fontSize: var(--sizes-XS-fontSize);
-	--sizes-lineHeight: var(--sizes-XS-lineHeight);
-	--components-title-weight: 600;
-}
+@mixin XXXL {
+	--sizes-verticalPadding: var(--sizes-XXXL-verticalPadding);
+	--sizes-fontSize: var(--sizes-XXXL-fontSize);
+	--sizes-lineHeight: var(--sizes-XXXL-lineHeight);
+	--components-title-weight: 900;
+}
+
+@mixin h1 {
+	--sizes-verticalPadding: var(--sizes-XXL-verticalPadding);
+	--sizes-fontSize: var(--sizes-XXL-fontSize);
+	--sizes-lineHeight: var(--sizes-XXL-lineHeight);
+	--components-title-weight: 900;
+}
+
+@mixin h2 {
+	--sizes-verticalPadding: var(--sizes-XL-verticalPadding);
+	--sizes-fontSize: var(--sizes-XL-fontSize);
+	--sizes-lineHeight: var(--sizes-XL-lineHeight);
+	--components-title-weight: 700;
+}
+
+@mixin h3 {
+	--sizes-verticalPadding: var(--sizes-L-verticalPadding);
+	--sizes-fontSize: var(--sizes-L-fontSize);
+	--sizes-lineHeight: var(--sizes-L-lineHeight);
+	--components-title-weight: 700;
+}
+
+@mixin h4 {
+	--sizes-verticalPadding: var(--sizes-M-verticalPadding);
+	--sizes-fontSize: var(--sizes-M-fontSize);
+	--sizes-lineHeight: var(--sizes-M-lineHeight);
+	--components-title-weight: 600;
+}
+
+@mixin h5 {
+	--sizes-verticalPadding: var(--sizes-S-verticalPadding);
+	--sizes-fontSize: var(--sizes-S-fontSize);
+	--sizes-lineHeight: var(--sizes-S-lineHeight);
+	--components-title-weight: 600;
+}
+
+@mixin h6 {
+	--sizes-verticalPadding: var(--sizes-XS-verticalPadding);
+	--sizes-fontSize: var(--sizes-XS-fontSize);
+	--sizes-lineHeight: var(--sizes-XS-lineHeight);
+	--components-title-weight: 600;
+}

package/src/components/title/vars.scss

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

package/src/components/titleSection/component.scss

@@ -1,34 +1,34 @@
-@use '@lucca-front/scss/src/commons/config';
-
-@mixin component($atRoot: 'without: rule') {
-	margin-bottom: 1.2rem;
-
-	.titleSection-title,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		margin-bottom: 0;
-	}
-
-	.u-h1,
-	.u-h2,
-	.u-h3,
-	.u-h4,
-	.u-h5,
-	.u-h6 {
-		margin-bottom: 0 !important;
-	}
-
-	@at-root ($atRoot) {
-		.titleSection-sub {
-			color: var(--palettes-grey-600);
-			font-size: var(--sizes-M-fontSize);
-			line-height: var(--sizes-M-lineHeight);
-			font-weight: 400;
-			margin: 0;
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/config';
+
+@mixin component($atRoot: 'without: rule') {
+	margin-bottom: 1.2rem;
+
+	.titleSection-title,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin-bottom: 0;
+	}
+
+	.u-h1,
+	.u-h2,
+	.u-h3,
+	.u-h4,
+	.u-h5,
+	.u-h6 {
+		margin-bottom: 0 !important;
+	}
+
+	@at-root ($atRoot) {
+		.titleSection-sub {
+			color: var(--palettes-grey-600);
+			font-size: var(--sizes-M-fontSize);
+			line-height: var(--sizes-M-lineHeight);
+			font-weight: 400;
+			margin: 0;
+		}
+	}
+}

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

@@ -1,25 +1,25 @@
-@use '@lucca-front/scss/src/commons/config';
-@use 'exports' as *;
-
-.titleSection {
-	@include vars;
-	@include component;
-}
-
-.titleSection-sub {
-	:is(h1, h1.mod-XXXL) ~ & {
-		@include XXXL;
-	}
-
-	:is(.u-h1, .u-h1.mod-XXXL) ~ & {
-		@include XXXL('!important');
-	}
-
-	:is(h2, h3, h4, h5, h6) ~ & {
-		@include title;
-	}
-
-	:is(.u-h2, .u-h3, .u-h4, .u-h5, .u-h6) ~ & {
-		@include title('!important');
-	}
-}
+@use '@lucca-front/scss/src/commons/config';
+@use 'exports' as *;
+
+.titleSection {
+	@include vars;
+	@include component;
+}
+
+.titleSection-sub {
+	:is(h1, h1.mod-XXXL) ~ & {
+		@include XXXL;
+	}
+
+	:is(.u-h1, .u-h1.mod-XXXL) ~ & {
+		@include XXXL('!important');
+	}
+
+	:is(h2, h3, h4, h5, h6) ~ & {
+		@include title;
+	}
+
+	:is(.u-h2, .u-h3, .u-h4, .u-h5, .u-h6) ~ & {
+		@include title('!important');
+	}
+}