@lucca-front/scss 21.1.2 → 21.2.0-rc.1

package/src/components/sortableList/index.scss

@@ -28,8 +28,8 @@
 // drag and drop preview
 :not(.sortableList) {
 	> .sortableList-item {
-			@layer components {
-				@include vars;
-			}
+		@layer components {
+			@include vars;
+		}
 	}
 }

package/src/components/sortableList/vars.scss

@@ -1,8 +1,8 @@
 @mixin vars {
-  --components-sortableList-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
-  --components-sortableList-handler-size: var(--pr-t-font-body-M-lineHeight);
-  --components-sortableList-description-font: var(--pr-t-font-body-M);
-  --components-sortableList-helper-font: var(--pr-t-font-body-S);
+	--components-sortableList-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
+	--components-sortableList-handler-size: var(--pr-t-font-body-M-lineHeight);
+	--components-sortableList-description-font: var(--pr-t-font-body-M);
+	--components-sortableList-helper-font: var(--pr-t-font-body-S);
 
 	// Deprecated
 	--components-sortableList-description-fontSize: var(--pr-t-font-body-M-fontSize);

package/src/components/statusBadge/component.scss

@@ -19,7 +19,6 @@
 	&::before {
 		background-color: var(--palettes-700, var(--palettes-product-700));
 		border-radius: var(--pr-t-border-radius-full);
-		/* stylelint-disable-next-line no-irregular-whitespace */
 		content: ' ' / ''; // Unbreakable space to avoid vertical alignement issues with inline-flex in some contexts like tables
 		display: block;
 		block-size: var(--components-statusBadge-dot-size);

package/src/components/switch/states.scss

@@ -12,9 +12,12 @@
 		}
 
 		&::after {
-			inset-inline-start: calc(
-				var(--components-switch-width) - var(--components-switch-slider-size) - var(--components-switch-handler-offset)
-			);
+			inset-inline-start:
+				calc(
+					var(--components-switch-width)
+					- var(--components-switch-slider-size)
+					- var(--components-switch-handler-offset)
+				);
 		}
 	}
 }

package/src/components/switchField/vars.scss

@@ -1,6 +1,6 @@
 @mixin vars {
-  --component-switchField-label-input-height: 1.25rem;
-  --component-switchField-label-input-width: 2.25rem;
-  --component-switchField-label-input-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);
-  --component-switchField-label-font: var(--pr-t-font-body-M);
+	--component-switchField-label-input-height: 1.25rem;
+	--component-switchField-label-input-width: 2.25rem;
+	--component-switchField-label-input-icon-fontSize: var(--pr-t-font-body-XS-lineHeight);
+	--component-switchField-label-font: var(--pr-t-font-body-M);
 }

package/src/components/tableOfContent/component.scss

@@ -13,7 +13,8 @@
 		}
 
 		// Second selector to get rid of tableOfContent-list-item-action on angular component
-		.tableOfContent-list-item-action, .tableOfContent-list-item > a {
+		.tableOfContent-list-item-action,
+		.tableOfContent-list-item > a {
 			@include reset.button;
 
 			border-radius: var(--pr-t-border-radius-default);

package/src/components/tableOfContent/index.scss

@@ -8,7 +8,8 @@
 }
 
 // Second selector to get rid of tableOfContent-list-item-action on angular component
-.tableOfContent-list-item-action, .tableOfContent-list-item > a  {
+.tableOfContent-list-item-action,
+.tableOfContent-list-item > a {
 	@layer mods {
 		&:not(.disabled, .is-disabled, [disabled]) {
 			&:is(:hover) {

package/src/components/tableSortable/index.scss

@@ -32,7 +32,7 @@
 		}
 
 		&[aria-sort='ascending'] {
-			.tableSortable{
+			.tableSortable {
 				@include sortAscending;
 			}
 		}

package/src/components/tableSticked/mods.scss

@@ -22,9 +22,11 @@
 		// left sticked columns shadow
 		&.mod-stickyColumn-shadow,
 		.stickyColumn-shadow-wrapper::before {
-			inset-inline-start: calc(
-				var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width)
-			);
+			inset-inline-start:
+				calc(
+					var(--components-tableSticked-column-sticky-offset)
+					- var(--components-tableSticked-column-sticky-shadow-width)
+				);
 		}
 
 		.stickyColumn-shadow-wrapper::after {
@@ -46,9 +48,11 @@
 
 		&.mod-stickyColumn-shadow,
 		.stickyColumn-shadow-wrapper::before {
-			inset-inline-end: calc(
-				var(--components-tableSticked-column-sticky-offset) - var(--components-tableSticked-column-sticky-shadow-width)
-			);
+			inset-inline-end:
+				calc(
+					var(--components-tableSticked-column-sticky-offset)
+					- var(--components-tableSticked-column-sticky-shadow-width)
+				);
 		}
 
 		.stickyColumn-shadow-wrapper::after {
@@ -124,9 +128,12 @@
 	}
 
 	.mod-stickyHeader-shadow .table-body-row-cell {
-		inset-block-start: calc(
-			var(--table-stickyHeader-shadow-offset) + var(--commons-banner-height) + var(--components-tableSticked-column-sticky-shadow-width)
-		);
+		inset-block-start:
+			calc(
+				var(--table-stickyHeader-shadow-offset)
+				+ var(--commons-banner-height)
+				+ var(--components-tableSticked-column-sticky-shadow-width)
+			);
 	}
 }
 

package/src/components/tableStickedDeprecated/mods.scss

@@ -195,15 +195,21 @@
 
 	.table-body-row-cell,
 	.table-foot-row-cell {
-		inset-block-start: calc(
-			var(commons-banner-height) + var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width)
-		);
+		inset-block-start:
+			calc(
+				var(commons-banner-height)
+				+ var(--sticky-header-shadow-offset-top)
+				+ var(--components-tableFixed-column-sticky-shadow-width)
+			);
 
 		.stickyHeader-shadow-wrapper {
 			&::after {
-				inset-block-start: calc(
-					var(commons-banner-height) + var(--sticky-header-shadow-offset-top) + var(--components-tableFixed-column-sticky-shadow-width)
-				);
+				inset-block-start:
+					calc(
+						var(commons-banner-height)
+						+ var(--sticky-header-shadow-offset-top)
+						+ var(--components-tableFixed-column-sticky-shadow-width)
+					);
 			}
 		}
 	}

package/src/components/tag/component.scss

@@ -6,6 +6,8 @@
 	border-radius: var(--pr-t-border-radius-small);
 	padding-block: 0;
 	padding-inline: var(--pr-t-spacings-50);
+
+	/* autoprefixer: off */
 	text-decoration: var(--components-tag-decoration);
 	box-shadow: 0 0 0 1px var(--components-tag-shadow);
 	gap: var(--components-tag-gap);
@@ -34,6 +36,8 @@
 	@at-root ($atRoot) {
 		.tag-content {
 			outline: none;
+
+			/* autoprefixer: off */
 			text-decoration: var(--components-tag-decoration);
 		}
 	}

package/src/components/textField/component.scss

@@ -67,6 +67,8 @@
 			padding-inline: var(--component-textField-padding) var(--component-textField-affix-padding);
 			background-color: transparent;
 			color: var(--component-textField-color);
+
+			/* autoprefixer: off */
 			text-decoration: var(--component-textField-textDecoration);
 			text-overflow: ellipsis;
 

package/src/components/textField/mods.scss

@@ -77,7 +77,6 @@
 		visibility: hidden;
 
 		&::after {
-			// stylelint-disable-next-line no-irregular-whitespace
 			content: ' ' / '';
 		}
 	}

package/src/components/textfields/index.scss

@@ -13,7 +13,6 @@
 			}
 		}
 
-
 		&:is(.is-open, .open) {
 			@include open;
 		}

package/src/components/textfields/mods.scss

@@ -320,9 +320,12 @@
 
 @mixin compact {
 	.textfield-options {
-		inline-size: calc(
-			100% - var(--components-textfield-compact-label-right-margin) - var(--components-textfield-compact-label-sizes-default)
-		);
+		inline-size:
+			calc(
+				100%
+				- var(--components-textfield-compact-label-right-margin)
+				- var(--components-textfield-compact-label-sizes-default)
+			);
 		inset-inline-start: auto;
 		inset-inline-end: 0;
 	}
@@ -338,10 +341,12 @@
 }
 
 @mixin compactSize($size) {
-	inline-size: calc(
-		var(--components-textfield-sizes-#{$size}) + var(--components-textfield-compact-label-right-margin) +
-			var(--components-textfield-compact-label-sizes-default)
-	);
+	inline-size:
+		calc(
+			var(--components-textfield-sizes-#{$size})
+			+ var(--components-textfield-compact-label-right-margin)
+			+ var(--components-textfield-compact-label-sizes-default)
+		);
 
 	.textfield-options {
 		// inline-size: $input-width; // todo: récupérer la bonne taille

package/src/components/textfields/states.scss

@@ -201,11 +201,12 @@
 }
 
 @mixin materialInputDisabled {
-	background-image: linear-gradient(
-		to right,
-		var(--components-textfield-material-border-color) 33%,
-		color.transparentize(var(--palettes-neutral-0), 0) 0%
-	);
+	background-image:
+		linear-gradient(
+			to right,
+			var(--components-textfield-material-border-color) 33%,
+			color.transparentize(var(--palettes-neutral-0), 0) 0%
+		);
 	background-size: 3px 1px;
 	background-color: transparent;
 	background-position: bottom;

package/src/components/timeline/mods.scss

@@ -148,11 +148,12 @@
 			block-size: unset;
 			inline-size: 2px;
 			border: none;
-			background: linear-gradient(
-				180deg,
-				var(--palettes-700, var(--palettes-product-700)) var(--progress),
-				var(--palettes-neutral-200) var(--progress)
-			);
+			background:
+				linear-gradient(
+					180deg,
+					var(--palettes-700, var(--palettes-product-700)) var(--progress),
+					var(--palettes-neutral-200) var(--progress)
+				);
 		}
 	}
 }
@@ -166,7 +167,7 @@
 
 			&::before {
 				content: counter(timeline) / '';
-        font-size: var(--pr-t-font-body-XS-fontSize);
+				font-size: var(--pr-t-font-body-XS-fontSize);
 				line-height: 1;
 			}
 		}
@@ -224,16 +225,17 @@
 	.timeline-step {
 		&:nth-last-child(2)::after {
 			background-color: transparent;
-			background-image: linear-gradient(
-				90deg,
-				transparent 25%,
-				var(--palettes-neutral-200) 25%,
-				var(--palettes-neutral-200) 50%,
-				transparent 50%,
-				transparent 75%,
-				var(--palettes-neutral-200) 75%,
-				var(--palettes-neutral-200) 100%
-			);
+			background-image:
+				linear-gradient(
+					90deg,
+					transparent 25%,
+					var(--palettes-neutral-200) 25%,
+					var(--palettes-neutral-200) 50%,
+					transparent 50%,
+					transparent 75%,
+					var(--palettes-neutral-200) 75%,
+					var(--palettes-neutral-200) 100%
+				);
 			background-size: var(--pr-t-spacings-100) var(--pr-t-spacings-100);
 		}
 
@@ -279,16 +281,17 @@
 	.timeline-step {
 		&:nth-last-child(2)::after {
 			background-color: transparent;
-			background-image: linear-gradient(
-				0deg,
-				transparent 25%,
-				var(--palettes-neutral-200) 25%,
-				var(--palettes-neutral-200) 50%,
-				transparent 50%,
-				transparent 75%,
-				var(--palettes-neutral-200) 75%,
-				var(--palettes-neutral-200) 100%
-			);
+			background-image:
+				linear-gradient(
+					0deg,
+					transparent 25%,
+					var(--palettes-neutral-200) 25%,
+					var(--palettes-neutral-200) 50%,
+					transparent 50%,
+					transparent 75%,
+					var(--palettes-neutral-200) 75%,
+					var(--palettes-neutral-200) 100%
+				);
 			background-size: var(--pr-t-spacings-100) var(--pr-t-spacings-100);
 		}
 	}
@@ -373,11 +376,12 @@
 		&::after {
 			border: none;
 			block-size: 2px;
-			background: linear-gradient(
-				90deg,
-				var(--palettes-700, var(--palettes-product-700)) var(--progress),
-				var(--palettes-neutral-200) var(--progress)
-			);
+			background:
+				linear-gradient(
+					90deg,
+					var(--palettes-700, var(--palettes-product-700)) var(--progress),
+					var(--palettes-neutral-200) var(--progress)
+				);
 		}
 	}
 }

package/src/components/timepicker/component.scss

@@ -144,7 +144,7 @@
 				content: '';
 				position: absolute;
 				inset: var(--components-timepicker-display-padding-inline) var(--components-timepicker-display-padding-block);
-				border-radius:var(--pr-t-border-radius-50);
+				border-radius: var(--pr-t-border-radius-50);
 				display: grid;
 				place-items: center;
 				text-align: end;

package/src/components/timepickerDeprecated/vars.scss

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

package/src/components/title/mods.scss

@@ -25,12 +25,12 @@
 
 // Deprecated
 @mixin h5 {
-	--components-title-font: 600 var(--pr-t-font-fontSize-175)/var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);
+	--components-title-font: 600 var(--pr-t-font-fontSize-175) / var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);
 	--sizes-verticalPadding: var(--sizes-S-verticalPadding);
 }
 
 @mixin h6 {
-	--components-title-font: 600 var(--pr-t-font-fontSize-150)/var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);
+	--components-title-font: 600 var(--pr-t-font-fontSize-150) / var(--pr-t-font-lineHeight-200) var(--pr-t-font-family);
 	--sizes-verticalPadding: var(--sizes-XS-verticalPadding);
 }
 

package/src/components/titleSection/component.scss

@@ -13,13 +13,13 @@
 	}
 
 	:is(.pr-u-h1, .pr-u-h2, .pr-u-h3, .pr-u-h4, .pr-u-h5, .pr-u-h6) {
-		@extend %marginBlockEnd0important
+		@extend %marginBlockEnd0important;
 	}
 
 	// Deprecated .u- utilities
 	@if config.$deprecatedUtilityPrefix {
 		:is(.u-h1, .u-h2, .u-h3, .u-h4, .u-h5, .u-h6) {
-			@extend %marginBlockEnd0important
+			@extend %marginBlockEnd0important;
 		}
 	}
 

package/src/components/toast/vars.scss

@@ -1,7 +1,7 @@
 @mixin vars {
 	--components-toasts-color: var(--pr-t-color-text-reverse);
 	--components-toasts-top: var(--pr-t-spacings-300);
-	--components-toasts-right: var(--pr-t-spacings-300);
+	--components-toasts-right: calc(var(--pr-t-spacings-300) + var(--commons-pushPanel-width));
 	--components-toasts-left: var(--pr-t-spacings-300);
 	--components-toasts-bottom: var(--pr-t-spacings-300);
 	--components-toasts-margin-bottom: var(--pr-t-spacings-50);

package/src/components/userTile/mods.scss

@@ -1,45 +1,45 @@
 @use '@lucca-front/scss/src/components/avatar/exports' as avatar;
 
 @mixin XS {
-  --components-userTile-gap: var(--pr-t-spacings-100);
-  --components-userTile-title-fontSize: var(--pr-t-font-body-S-fontSize);
-  --components-userTile-title-lineHeight: var(--pr-t-font-body-S-lineHeight);
-  --components-userTile-info-fontSize: var(--pr-t-font-body-XS-fontSize);
-  --components-userTile-info-lineHeight: var(--pr-t-font-body-XS-lineHeight);
-
-  .avatar {
-    @include avatar.XS;
-  }
+	--components-userTile-gap: var(--pr-t-spacings-100);
+	--components-userTile-title-fontSize: var(--pr-t-font-body-S-fontSize);
+	--components-userTile-title-lineHeight: var(--pr-t-font-body-S-lineHeight);
+	--components-userTile-info-fontSize: var(--pr-t-font-body-XS-fontSize);
+	--components-userTile-info-lineHeight: var(--pr-t-font-body-XS-lineHeight);
+
+	.avatar {
+		@include avatar.XS;
+	}
 }
 
 @mixin S {
-  --components-userTile-gap: var(--pr-t-spacings-100);
+	--components-userTile-gap: var(--pr-t-spacings-100);
 
-  .avatar {
-    @include avatar.S;
-  }
+	.avatar {
+		@include avatar.S;
+	}
 }
 
 @mixin L {
-  .avatar {
-    @include avatar.L;
-  }
+	.avatar {
+		@include avatar.L;
+	}
 }
 
 @mixin XL { // Deprecated
-  .avatar {
-    @include avatar.XL;
-  }
+	.avatar {
+		@include avatar.XL;
+	}
 }
 
 @mixin XXL { // Deprecated
-  .avatar {
-    @include avatar.XXL;
-  }
+	.avatar {
+		@include avatar.XXL;
+	}
 }
 
 @mixin XXXL { // Deprecated
-  .avatar {
-    @include avatar.XXXL;
-  }
+	.avatar {
+		@include avatar.XXXL;
+	}
 }

package/src/components/userTile/vars.scss

@@ -1,7 +1,7 @@
 @mixin vars {
-  --components-userTile-title-fontSize: var(--pr-t-font-body-M-fontSize);
-  --components-userTile-title-lineHeight: var(--pr-t-font-body-M-lineHeight);
-  --components-userTile-info-fontSize: var(--pr-t-font-body-S-fontSize);
-  --components-userTile-info-lineHeight: var(--pr-t-font-body-S-lineHeight);
-  --components-userTile-gap: var(--pr-t-spacings-150);
+	--components-userTile-title-fontSize: var(--pr-t-font-body-M-fontSize);
+	--components-userTile-title-lineHeight: var(--pr-t-font-body-M-lineHeight);
+	--components-userTile-info-fontSize: var(--pr-t-font-body-S-fontSize);
+	--components-userTile-info-lineHeight: var(--pr-t-font-body-S-lineHeight);
+	--components-userTile-gap: var(--pr-t-spacings-150);
 }

package/src/components/verticalNavigation/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
-  --components-verticalNavigation-link-background: transparent;
-  --components-verticalNavigation-link-color: var(--pr-t-color-text);
-  --components-verticalNavigation-horizontalPadding: var(--pr-t-spacings-150);
+	--components-verticalNavigation-link-background: transparent;
+	--components-verticalNavigation-link-color: var(--pr-t-color-text);
+	--components-verticalNavigation-horizontalPadding: var(--pr-t-spacings-150);
 }