@lucca-front/scss 19.3.0-rc.2 → 19.3.0-rc.4

package/src/components/timeline/index.scss

@@ -28,15 +28,19 @@
 
 	&.mod-vertical {
 		@include vertical;
-		&:not(.mod-S):not(.mod-L) {
-			@include verticalNotSNotL();
+
+		&:not(.mod-S, .mod-L) {
+			@include verticalNotSNotL;
 		}
+
 		&.mod-S {
 			@include verticalS;
 		}
+
 		&.mod-L {
 			@include verticalL;
 		}
+
 		&.mod-progress {
 			@include verticalProgress;
 		}
@@ -44,14 +48,18 @@
 
 	&.mod-addStep {
 		@include addStep;
+
 		&.mod-L {
 			@include addStepL;
 		}
+
 		&.mod-vertical {
 			@include addStepVertical;
+
 			&:not(.mod-L) {
 				@include addStepVerticalNotL;
 			}
+
 			&.mod-L {
 				@include addStepVerticalL;
 			}
@@ -72,9 +80,11 @@
 
 	&.mod-addBetweenStep {
 		@include addBetweenStep;
+
 		&.mod-vertical:not(.mod-L) {
-			@include addBetweenStepVerticalNotL();
+			@include addBetweenStepVerticalNotL;
 		}
+
 		&.mod-L {
 			@include addBetweenStepL;
 		}

package/src/components/timeline/mods.scss

@@ -6,6 +6,7 @@
 	.timeline-step-title {
 		--components-timeline-title-fontSize: var(--sizes-S-fontSize);
 		--components-timeline-title-lineHeight: var(--sizes-M-lineHeight);
+
 		padding-inline-start: 1.25rem;
 
 		&::before {
@@ -26,6 +27,7 @@
 		}
 	}
 
+	// stylelint-disable-next-line selector-not-notation
 	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon {
 		&::before {
 			inset-inline-start: var(--pr-t-spacings-100);
@@ -77,7 +79,7 @@
 		min-block-size: var(--pr-t-spacings-300);
 		min-inline-size: 0;
 
-		&:before {
+		&::before {
 			inset-block-start: var(--pr-t-spacings-150);
 		}
 	}
@@ -93,7 +95,7 @@
 
 @mixin verticalNotSNotL {
 	.timeline-step-title {
-		&:before {
+		&::before {
 			inset-inline-start: 0;
 		}
 	}
@@ -113,6 +115,7 @@
 			}
 		}
 	}
+
 	.timeline-step-description {
 		padding-inline-start: var(--pr-t-spacings-300);
 	}
@@ -132,6 +135,7 @@
 			}
 		}
 	}
+
 	.timeline-step-description {
 		padding-inline-start: 2.5rem;
 		min-block-size: var(--pr-t-spacings-400);
@@ -155,6 +159,7 @@
 
 @mixin number {
 	counter-reset: timeline;
+
 	.timeline-step:not(.timeline-stepAddBetweenStep) {
 		.timeline-step-title {
 			counter-increment: timeline;
@@ -175,9 +180,11 @@
 }
 
 @mixin checkedPastStep {
+	// stylelint-disable-next-line selector-not-notation
 	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step):not(.timeline-stepAddBetweenStep) {
 		.timeline-step-title {
-			&:before {
+			&::before {
+				background-color: var(--palettes-100, var(--palettes-product-100));
 				content: '';
 			}
 
@@ -189,9 +196,6 @@
 				background-color: transparent;
 				color: var(--palettes-700, var(--palettes-product-700));
 			}
-			&::before {
-				background-color: var(--palettes-100, var(--palettes-product-100));
-			}
 		}
 
 		&::after {
@@ -206,6 +210,7 @@
 }
 
 @mixin checkedPastStepVerticalNotL {
+	// stylelint-disable-next-line selector-not-notation
 	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) {
 		.timeline-step-title {
 			.timeline-step-title-icon::before {
@@ -234,11 +239,13 @@
 
 		&:last-child {
 			.timeline-step-title {
-				&:before {
+				&::before {
 					display: none;
 				}
+
 				.timeline-step-title-icon::before {
 					@include icon.generate('maths_plus');
+
 					display: flex;
 				}
 			}
@@ -312,13 +319,15 @@
 		.timeline-step-title {
 			padding-inline-start: 0;
 
-			&:before {
+			&::before {
 				display: none;
 			}
 		}
 	}
+
 	.timeline-stepAddBetweenStep-title {
 		@include reset.button;
+
 		inline-size: auto;
 
 		&:hover {
@@ -333,20 +342,25 @@
 			}
 		}
 	}
+
+	// stylelint-disable-next-line selector-not-notation
 	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
 		@include icon.generate('maths_plus');
+
 		display: flex;
 		transition: background-color var(--commons-animations-durations-fast);
 	}
 }
 
 @mixin addBetweenStepVerticalNotL {
+	// stylelint-disable-next-line selector-not-notation
 	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
 		inset-inline-start: 0;
 	}
 }
 
 @mixin addBetweenStepL {
+	// stylelint-disable-next-line selector-not-notation
 	.timeline-step:not([aria-current='step']):not([aria-current='step'] ~ .timeline-step) .timeline-step-title-icon::before {
 		inline-size: 1.5rem;
 		block-size: 1.5rem;

package/src/components/timepicker/component.scss

@@ -60,7 +60,6 @@
 			align-items: center;
 			justify-content: center;
 			border: 0;
-			text-align: center;
 			block-size: var(--components-timepicker-input-height);
 			inline-size: var(--components-timepicker-input-width);
 			outline: none;

package/src/components/timepickerDeprecated/component.scss

@@ -12,6 +12,7 @@
 
 	&:focus-within {
 		@include a11y.focusVisible($offset: 3px);
+
 		background-color: transparent;
 	}
 
@@ -30,11 +31,11 @@
 			block-size: var(--components-timepicker-input-height);
 			border: 0;
 			padding: 0;
-			-moz-appearance: textfield;
+			appearance: textfield;
 
 			&::-webkit-outer-spin-button,
 			&::-webkit-inner-spin-button {
-				-webkit-appearance: none;
+				appearance: none;
 				margin: 0;
 			}
 

package/src/components/title/component.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/config';
+
 @mixin component($suffix: '') {
 	// no suffix here
 	margin-block-start: 0;

package/src/components/tooltip/component.scss

@@ -17,6 +17,7 @@
 	animation-name: scaleIn;
 	animation-duration: var(--commons-animations-durations-fast);
 	animation-iteration-count: 1;
+	hyphens: auto;
 
 	@include keyframe.scaleIn;
 

package/src/components/verticalNavigation/component.scss

@@ -7,6 +7,7 @@
 	@at-root ($atRoot) {
 		.verticalNavigation-sectionTitle {
 			@include title.h5;
+
 			color: var(--palettes-neutral-600);
 			padding-block: 0;
 			padding-inline: var(--components-verticalNavigation-horizontalPadding);
@@ -15,6 +16,7 @@
 
 		.verticalNavigation-list {
 			@include reset.list;
+
 			background-color: var(--pr-t-elevation-surface-raised);
 			margin-block-end: var(--pr-t-spacings-200);
 		}
@@ -26,6 +28,7 @@
 
 		.verticalNavigation-list-item-link {
 			@include reset.button;
+
 			display: flex;
 			padding-block: var(--pr-t-spacings-100);
 			padding-inline: var(--components-verticalNavigation-horizontalPadding);
@@ -38,11 +41,12 @@
 
 			&:hover {
 				--components-verticalNavigation-link-background: var(--palettes-neutral-50);
+
 				color: var(--components-verticalNavigation-link-color);
 			}
 
 			&:focus-visible {
-				@include a11y.focusVisible();
+				@include a11y.focusVisible;
 			}
 
 			&:active {

package/src/components/verticalNavigation/states.scss

@@ -1,5 +1,6 @@
 @mixin active {
 	--components-verticalNavigation-link-background: var(--palettes-product-100);
+
 	color: var(--components-verticalNavigation-link-color);
 
 	&:hover {
@@ -13,6 +14,7 @@
 
 @mixin disabled {
 	--components-verticalNavigation-link-background: transparent;
+
 	color: var(--palettes-neutral-500); // disabled token candidate
 	pointer-events: none;
 }