@lucca-front/ng 16.1.1-rc.1 → 16.2.0-rc.2

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

@@ -4,15 +4,15 @@
 :root {
 	--components-options-item-padding-vertical: var(--spacings-XS);
 	--components-options-item-padding-horizontal: var(--spacings-XS);
-	--components-options-item-multiple-padding: var(--spacings-L);
+	--components-options-item-multiple-padding: 2.25rem;
 	--components-options-item-icon-color: var(--palettes-grey-800);
 
 	--components-options-checkbox-left: 0.5rem;
-	--components-options-checkbox-size: 1rem;
+	--components-options-checkbox-size: 1.25rem;
 	--components-options-checkbox-color: var(--palettes-primary-700);
-	--components-options-checkbox-border-radius: var(--commons-borderRadius-M);
+	--components-options-checkbox-border-radius: 6px;
 	--components-options-checkbox-border-color: var(--palettes-grey-700);
-	--components-options-establishment-multiple-padding: var(--spacings-M);
+	--components-options-establishment-multiple-padding: 2rem;
 }
 
 @mixin optionItemStyle {
@@ -25,6 +25,7 @@
 	}
 
 	.optionItem-value {
+		border-radius: var(--commons-borderRadius-M);
 		display: block;
 		padding: var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);
 		transition: background-color 50ms;
@@ -32,12 +33,39 @@
 
 		&.is-selected {
 			background-color: var(--palettes-primary-50);
+
+			&:hover {
+				background-color: var(--palettes-primary-100);
+			}
+
+			&:active {
+				background-color: var(--palettes-primary-200);
+			}
+
+			&.is-highlighted {
+				background-color: var(--palettes-primary-100);
+			}
+		}
+
+		&:hover {
+			background-color: var(--palettes-grey-50);
 		}
 
-		&:hover,
 		&.is-highlighted,
 		&.is-focus {
 			background-color: var(--palettes-grey-50);
+
+			&:hover {
+				background-color: var(--palettes-grey-50);
+			}
+
+			&:active {
+				background-color: var(--palettes-grey-100);
+			}
+		}
+
+		&:active {
+			background-color: var(--palettes-grey-100);
 		}
 	}
 
@@ -75,17 +103,17 @@
 				box-shadow: inset 0 0 0 2px var(--components-options-checkbox-border-color);
 				display: block;
 				height: var(--components-options-checkbox-size);
-				transition: all 100ms;
+				transition-property: background-color, box-shadow;
+				transition-duration: var(--commons-animations-durations-fast);
 				width: var(--components-options-checkbox-size);
 			}
 
 			&::after {
-				@include icon.generate('tick');
+				@include icon.generate('confirm');
 
 				color: transparent;
-				font-size: 1rem;
+				font-size: var(--sizes-S-lineHeight);
 				line-height: var(--components-options-checkbox-size);
-				padding-top: 0.05rem;
 				position: absolute;
 				text-align: center;
 				transform: translateY(-50%) scale(0);
@@ -115,14 +143,13 @@
 		&.establishmentOption {
 			.optionItem-value {
 				position: relative;
-				padding-left: calc(
-					2 * var(--components-options-item-padding-horizontal) + var(--components-options-checkbox-size) + var(--spacings-XS)
-				);
+				padding-left: calc(var(--components-options-checkbox-size) + var(--spacings-XS) * 2);
 			}
+
 			.optionItem-value {
 				&::before,
 				&::after {
-					left: calc(2 * var(--components-options-item-padding-horizontal));
+					left: var(--spacings-XS);
 				}
 			}
 		}

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

@@ -4,20 +4,7 @@
 	}
 
 	.textfield-input {
-		border-radius: 0;
-		box-shadow: none;
-		background-color: var(--colors-white-color);
-		border-bottom: var(--commons-divider-width) solid var(--commons-divider-color);
 		outline: none;
-
-		&:hover {
-			background-color: var(--palettes-grey-50);
-		}
-
-		&:focus {
-			background-color: var(--colors-white-color);
-			border-bottom-color: var(--palettes-primary-600);
-		}
 	}
 
 	.checkbox.mod-formerEmployee {

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

@@ -7,42 +7,8 @@
 		display: block;
 	}
 
-	.clearer {
-		display: block;
-		width: 1rem;
-		height: 1rem;
-		background-color: var(--palettes-grey-700);
-		color: var(--colors-white-color);
-		padding: 0;
-		border-radius: 50%;
-		transition: background-color var(--commons-animations-durations-fast) ease;
-
-		.lucca-icon {
-			font-size: var(--sizes-XS-lineHeight);
-		}
-
-		&:hover {
-			background-color: var(--palettes-grey-600);
-		}
-	}
-
-	.lucca-icon {
-		display: block;
-	}
-
 	// Disabled
 	:host-context(.textfield-input.is-disabled, .textfield-input[disabled]) {
 		display: none;
 	}
-
-	:host-context(.textfield.mod-S) {
-		.clearer {
-			width: .75rem;
-			height: .75rem;
-
-			.lucca-icon {
-				font-size: .75rem;
-			}
-		}
-	}
 }

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

@@ -79,25 +79,9 @@
 	}
 
 	.lu-select-clearer {
-		display: block;
 		position: absolute;
-		width: 1rem;
-		height: 1rem;
-		background-color: var(--palettes-grey-700);
 		bottom: .75rem;
 		right: 2.25rem;
-		color: var(--colors-white-color);
-		padding: 0;
-		border-radius: 50%;
-		transition: background-color var(--commons-animations-durations-fast) ease;
-
-		.lucca-icon {
-			font-size: var(--sizes-XS-lineHeight);
-		}
-
-		&:hover {
-			background-color: var(--palettes-grey-600);
-		}
 	}
 
 	::ng-deep .lu-select-value {

package/src/definitions/tooltip/_tooltip.scss

@@ -2,17 +2,14 @@
 	.lu-tooltip-panel {
 		--components-tooltip-background-color: var(--palettes-grey-900);
 		--components-tooltip-color: var(--colors-white-color);
-		--components-tooltip-padding: var(--spacings-XXS) var(--spacings-XS);
 		--components-tooltip-max-width: 15rem;
 
 		background: var(--components-tooltip-background-color);
 		color: var(--components-tooltip-color);
-		padding: var(--components-tooltip-padding);
+		padding: var(--spacings-XXS) var(--spacings-XS);
 		max-width: var(--components-tooltip-max-width);
 		border-radius: var(--commons-borderRadius-M);
-		font-size: var(--sizes-S-fontSize);
-
-		font-weight: 600;
+		font-size: var(--sizes-XS-fontSize);
 		line-height: var(--sizes-XS-lineHeight);
 		display: block;