@lucca-front/ng 20.3.0-rc.3 → 20.3.0-rc.5

package/src/definitions/option/_option-item.scss

@@ -3,220 +3,196 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 @include namespace.appendRootVars {
-	@layer components {
-		--components-options-item-padding-vertical: var(--pr-t-spacings-50);
-		--components-options-item-padding-horizontal: var(--pr-t-spacings-100);
-		--components-options-item-multiple-padding: 2.25rem;
-		--components-options-item-icon-color: var(--palettes-neutral-800);
-		--components-options-checkbox-size: 1.25rem;
-		--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));
-		--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);
-		--components-options-checkbox-border-color: var(--palettes-neutral-700);
-		--components-options-establishment-multiple-padding: 2rem;
-	}
+	--components-options-item-padding-vertical: var(--pr-t-spacings-50);
+	--components-options-item-padding-horizontal: var(--pr-t-spacings-100);
+	--components-options-item-multiple-padding: 2.25rem;
+	--components-options-item-icon-color: var(--palettes-neutral-800);
+	--components-options-checkbox-size: 1.25rem;
+	--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));
+	--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);
+	--components-options-checkbox-border-color: var(--palettes-neutral-700);
+	--components-options-establishment-multiple-padding: 2rem;
 }
 
 @mixin optionItemStyle {
 	:host {
-		@layer components {
-			--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700)); // Allow palette override
+		--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700)); // Allow palette override
 
-			display: block;
-			scroll-margin: var(--pr-t-spacings-50);
+		display: block;
+		scroll-margin: var(--pr-t-spacings-50);
 
-			.lu-picker-content-group & {
-				scroll-margin-block-start: var(--pr-t-spacings-400);
-			}
+		&.withAddOption {
+			scroll-margin-block-end: var(--pr-t-spacings-600);
 		}
 
-		@layer mods {
-			&.withAddOption {
-				scroll-margin-block-end: var(--pr-t-spacings-600);
-			}
+		.lu-picker-content-group & {
+			scroll-margin-block-start: var(--pr-t-spacings-400);
 		}
 	}
 
 	.optionItem {
-		@layer components {
-			position: relative;
-		}
+		position: relative;
 	}
 
 	.optionItem-value {
-		@layer components {
-			position: relative;
-			border-radius: var(--pr-t-border-radius-default);
-			display: block;
-			padding-block: var(--components-options-item-padding-vertical);
-			padding-inline: var(--components-options-item-padding-horizontal);
-			transition: background-color 50ms;
-			cursor: pointer;
-		}
+		position: relative;
+		border-radius: var(--pr-t-border-radius-default);
+		display: block;
+		padding-block: var(--components-options-item-padding-vertical);
+		padding-inline: var(--components-options-item-padding-horizontal);
+		transition: background-color 50ms;
+		cursor: pointer;
+
+		&.is-selected, :host-context([aria-selected="true"]) & {
+			background-color: var(--palettes-50, var(--palettes-product-50));
+
+			&::before {
+				content: '';
+				position: absolute;
+				inset-block: 0;
+				inset-inline-start: calc(var(--pr-t-spacings-50) * -1);
+				inline-size: 2px;
+				background-color: var(--palettes-700, var(--palettes-product-700));
+				border-start-end-radius: var(--pr-t-border-radius-default);
+				border-end-end-radius: var(--pr-t-border-radius-default);
+			}
 
-		@layer mods {
-			&.is-selected, :host-context([aria-selected="true"]) & {
-				background-color: var(--palettes-50, var(--palettes-product-50));
+			&:hover {
+				background-color: var(--palettes-100, var(--palettes-product-100));
+			}
 
-				&::before {
-					content: '';
-					position: absolute;
-					inset-block: 0;
-					inset-inline-start: calc(var(--pr-t-spacings-50) * -1);
-					inline-size: 2px;
-					background-color: var(--palettes-700, var(--palettes-product-700));
-					border-start-end-radius: var(--pr-t-border-radius-default);
-					border-end-end-radius: var(--pr-t-border-radius-default);
-				}
+			&:active {
+				background-color: var(--palettes-200, var(--palettes-product-200));
+			}
 
-				&:hover {
-					background-color: var(--palettes-100, var(--palettes-product-100));
-				}
+			:host-context(.is-highlighted) & {
+				background-color: var(--palettes-100, var(--palettes-product-100));
 
-				&:active {
+				&:hover {
 					background-color: var(--palettes-200, var(--palettes-product-200));
 				}
+			}
+		}
 
-				:host-context(.is-highlighted) & {
-					background-color: var(--palettes-100, var(--palettes-product-100));
+		&:hover {
+			background-color: var(--palettes-neutral-50);
+		}
 
-					&:hover {
-						background-color: var(--palettes-200, var(--palettes-product-200));
-					}
-				}
-			}
+		:host-context(.is-highlighted) & {
+			background-color: var(--palettes-neutral-50);
 
 			&:hover {
 				background-color: var(--palettes-neutral-50);
 			}
 
-			:host-context(.is-highlighted) & {
-				background-color: var(--palettes-neutral-50);
-
-				&:hover {
-					background-color: var(--palettes-neutral-50);
-				}
-
-				&:active {
-					background-color: var(--palettes-neutral-100);
-				}
-			}
-
 			&:active {
 				background-color: var(--palettes-neutral-100);
 			}
 		}
+
+		&:active {
+			background-color: var(--palettes-neutral-100);
+		}
 	}
 
 	.optionItem-value-group {
-		@layer components {
-			color: var(--palettes-neutral-600);
-			font: var(--pr-t-font-body-S);
-		}
+		color: var(--palettes-neutral-600);
+		font: var(--pr-t-font-body-S);
 	}
 
 	:host-context(.lu-select-value) {
 		.optionItem-value {
-			@layer components {
-				padding: 0;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
+			padding: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
-			@layer mods {
-				&:hover,
-				:host-context(.is-highlighted) & {
-					background-color: inherit;
-				}
+			&:hover,
+			:host-context(.is-highlighted) & {
+				background-color: inherit;
 			}
 		}
 	}
 
-	:host-context(.mod-multiple),
-	.formerEmployeeDisplayer {
+	:host-context(.mod-multiple), .formerEmployeeDisplayer {
 		.optionItem-value {
-			@layer mods {
-				position: relative;
-				padding-inline-start: var(--components-options-item-multiple-padding);
+			position: relative;
+			padding-inline-start: var(--components-options-item-multiple-padding);
+
+			&::after,
+			&::before {
+				display: block;
+				position: absolute;
+				inset-inline-start: var(--pr-t-spacings-100);
+				inset-block-start: var(--pr-t-spacings-75);
+			}
 
-				&::after,
-				&::before {
-					display: block;
-					position: absolute;
-					inset-inline-start: var(--pr-t-spacings-100);
-					inset-block-start: var(--pr-t-spacings-75);
-				}
+			&::before {
+				content: '';
+				background-color: var(--palettes-neutral-0);
+				border-radius: var(--components-options-checkbox-border-radius);
+				box-shadow: inset 0 0 0 2px var(--components-options-checkbox-border-color);
+				display: block;
+				block-size: var(--components-options-checkbox-size);
+				transition-property: background-color, box-shadow;
+				transition-duration: var(--commons-animations-durations-fast);
+				inline-size: var(--components-options-checkbox-size);
+			}
+
+			&::after {
+				@include icon.generate('sign_confirm');
+
+				color: transparent;
+				font-size: var(--pr-t-font-body-S-lineHeight);
+				line-height: var(--components-options-checkbox-size);
+				position: absolute;
+				text-align: center;
+				transform: scale(0);
+				transition: all 100ms;
+				inline-size: var(--components-options-checkbox-size);
+			}
 
+			&.is-selected, :host-context([aria-selected="true"]) & {
 				&::before {
-					content: '';
-					background-color: var(--palettes-neutral-0);
-					border-radius: var(--components-options-checkbox-border-radius);
-					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-border-color);
-					display: block;
-					block-size: var(--components-options-checkbox-size);
-					transition-property: background-color, box-shadow;
-					transition-duration: var(--commons-animations-durations-fast);
-					inline-size: var(--components-options-checkbox-size);
+					background-color: var(--components-options-checkbox-color);
+					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
 				}
 
 				&::after {
-					@include icon.generate('sign_confirm');
-
-					color: transparent;
-					font-size: var(--pr-t-font-body-S-lineHeight);
-					line-height: var(--components-options-checkbox-size);
-					position: absolute;
-					text-align: center;
-					transform: scale(0);
-					transition: all 100ms;
-					inline-size: var(--components-options-checkbox-size);
+					color: var(--palettes-neutral-0);
+					transform: scale(1);
 				}
-			}
-
-			@layer mods {
-				&.is-selected, :host-context([aria-selected="true"]) & {
-					&::before {
-						background-color: var(--components-options-checkbox-color);
-						box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
-					}
 
-					&::after {
-						color: var(--palettes-neutral-0);
-						transform: scale(1);
-					}
-
-					&.is-disabled {
-						--components-options-checkbox-color: var(--commons-disabled-background);
+				&.is-disabled {
+					--components-options-checkbox-color: var(--commons-disabled-background);
 
-						background-color: transparent;
+					background-color: transparent;
 
-						&::after {
-							color: var(--palettes-neutral-500); // disabled token candidate
-						}
+					&::after {
+						color: var(--palettes-neutral-500); // disabled token candidate
 					}
 				}
 
-				&.is-disabled {
-					--components-options-checkbox-border-color: var(--palettes-neutral-500); // disabled token candidate
-				}
+			}
 
-				&:not(.is-disabled):hover {
-					&::before {
-						box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
-					}
+			&.is-disabled {
+				--components-options-checkbox-border-color: var(--palettes-neutral-500); // disabled token candidate
+			}
+
+			&:not(.is-disabled):hover {
+				&::before {
+					box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
 				}
 			}
 		}
 
 		&.establishmentOption {
-			@layer components {
-				.optionItem-value {
-					position: relative;
-					padding-inline-start: calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2);
+			.optionItem-value {
+				position: relative;
+				padding-inline-start: calc(var(--components-options-checkbox-size) + var(--pr-t-spacings-100) * 2);
 
-					&::before,
-					&::after {
-						inset-inline-start: var(--pr-t-spacings-100);
-					}
+				&::before,
+				&::after {
+					inset-inline-start: var(--pr-t-spacings-100);
 				}
 			}
 		}

package/src/definitions/option/_option-placeholder.scss

@@ -1,11 +1,9 @@
 @mixin optionPlaceholderStyle {
-	@layer components {
-		.optionPlaceholder {
-			display: block;
-			padding-block: var(--components-options-item-padding-vertical);
-			padding-inline: var(--components-options-item-padding-horizontal);
-			font-style: italic;
-			color: var(--palettes-neutral-600);
-		}
+	.optionPlaceholder {
+		display: block;
+		padding-block: var(--components-options-item-padding-vertical);
+		padding-inline: var(--components-options-item-padding-horizontal);
+		font-style: italic;
+		color: var(--palettes-neutral-600);
 	}
 }

package/src/definitions/option/_option-searcher.scss

@@ -1,19 +1,17 @@
 @mixin optionSearcherStyle {
-	@layer components {
-		.textfield.mod-search {
-			inline-size: 100%;
-		}
+	.textfield.mod-search {
+		inline-size: 100%;
+	}
 
-		.textfield-input {
-			outline: none;
-		}
+	.textfield-input {
+		outline: none;
+	}
 
-		.checkbox.mod-formerEmployee {
-			padding-block: var(--pr-t-spacings-50);
-			padding-inline: var(--components-options-item-padding-horizontal);
-			border-block-end: var(--commons-divider-width) solid var(--commons-divider-color);
-			background-color: var(--palettes-neutral-50);
-			font-style: italic;
-		}
+	.checkbox.mod-formerEmployee {
+		padding-block: var(--pr-t-spacings-50);
+		padding-inline: var(--components-options-item-padding-horizontal);
+		border-block-end: var(--commons-divider-width) solid var(--commons-divider-color);
+		background-color: var(--palettes-neutral-50);
+		font-style: italic;
 	}
 }

package/src/definitions/option/_option-selector.scss

@@ -1,13 +1,11 @@
 @mixin optionSelectorStyle {
-	@layer components {
-		.selectAll-button {
-			color: var(--palettes-neutral-600);
-			font-size: var(--pr-t-font-body-S-fontSize);
-			outline: none;
+	.selectAll-button {
+		color: var(--palettes-neutral-600);
+		font-size: var(--pr-t-font-body-S-fontSize);
+		outline: none;
 
-			&:hover {
-				color: var(--palettes-neutral-800);
-			}
+		&:hover {
+			color: var(--palettes-neutral-800);
 		}
 	}
 }

package/src/definitions/select/_select-clearer.scss

@@ -1,17 +1,14 @@
 @mixin selectClearerStyle {
-	@layer components {
-		:host {
-			display: none;
-		}
+	:host {
+		display: none;
 	}
 
-	@layer mods {
-		:host-context(.textfield-input.is-filled) {
-			display: block;
-		}
+	:host-context(.textfield-input.is-filled) {
+		display: block;
+	}
 
-		:host-context(.textfield-input.is-disabled, .textfield-input[disabled]) {
-			display: none;
-		}
+	// Disabled
+	:host-context(.textfield-input.is-disabled, .textfield-input[disabled]) {
+		display: none;
 	}
 }