@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/radio/component.scss

@@ -1,93 +1,93 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component {
-	position: relative;
-	display: flex;
-
-	.radio-input {
-		@include a11y.mask;
-
-		&:not(:disabled) ~ .radio-label {
-			&:hover {
-				&::before {
-					border-color: var(--palettes-grey-600);
-				}
-			}
-
-			&:active {
-				&::before {
-					border-color: var(--palettes-grey-800);
-				}
-			}
-		}
-
-		&:checked ~ .radio-label {
-			&::before {
-				border-color: var(--palettes-700, var(--palettes-primary-700));
-			}
-
-			&::after {
-				transform: scale(0.6);
-				background-color: var(--palettes-700, var(--palettes-primary-700));
-			}
-		}
-
-		&:not(:disabled):checked ~ .radio-label {
-			&:hover {
-				&::before {
-					border-color: var(--palettes-700, var(--palettes-primary-700));
-				}
-
-				&::after {
-					background-color: var(--palettes-700, var(--palettes-primary-700));
-				}
-			}
-		}
-
-		&:focus-visible ~ .radio-label:before {
-			@include a11y.focusVisible;
-		}
-	}
-
-	.radio-label {
-		color: var(--palettes-grey-800);
-		line-height: var(--sizes-M-lineHeight);
-		min-height: var(--sizes-M-lineHeight);
-		padding: var(--components-radio-label-padding);
-		transition-duration: var(--commons-animations-durations-fast);
-		transition-property: color;
-		display: block;
-		cursor: pointer;
-
-		&::before,
-		&::after {
-			top: var(--components-radio-input-top);
-			height: var(--components-radio-input-size);
-			width: var(--components-radio-input-size);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: background-color, color, transform, border;
-			position: absolute;
-			border-radius: 50%;
-			left: 0;
-			content: '';
-		}
-
-		&::before {
-			background-color: var(--colors-white-color);
-			border-color: var(--palettes-grey-700);
-			border-width: 2px;
-			border-style: solid;
-		}
-
-		&::after {
-			color: transparent;
-			transform: scale(0);
-		}
-	}
-
-	.radio-label-helper {
-		color: var(--palettes-grey-700);
-		font-size: var(--sizes-S-fontSize);
-		line-height: var(--sizes-S-lineHeight);
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component {
+	position: relative;
+	display: flex;
+
+	.radio-input {
+		@include a11y.mask;
+
+		&:not(:disabled) ~ .radio-label {
+			&:hover {
+				&::before {
+					border-color: var(--palettes-grey-600);
+				}
+			}
+
+			&:active {
+				&::before {
+					border-color: var(--palettes-grey-800);
+				}
+			}
+		}
+
+		&:checked ~ .radio-label {
+			&::before {
+				border-color: var(--palettes-700, var(--palettes-primary-700));
+			}
+
+			&::after {
+				transform: scale(0.6);
+				background-color: var(--palettes-700, var(--palettes-primary-700));
+			}
+		}
+
+		&:not(:disabled):checked ~ .radio-label {
+			&:hover {
+				&::before {
+					border-color: var(--palettes-700, var(--palettes-primary-700));
+				}
+
+				&::after {
+					background-color: var(--palettes-700, var(--palettes-primary-700));
+				}
+			}
+		}
+
+		&:focus-visible ~ .radio-label:before {
+			@include a11y.focusVisible;
+		}
+	}
+
+	.radio-label {
+		color: var(--palettes-grey-800);
+		line-height: var(--sizes-M-lineHeight);
+		min-height: var(--sizes-M-lineHeight);
+		padding: var(--components-radio-label-padding);
+		transition-duration: var(--commons-animations-durations-fast);
+		transition-property: color;
+		display: block;
+		cursor: pointer;
+
+		&::before,
+		&::after {
+			top: var(--components-radio-input-top);
+			height: var(--components-radio-input-size);
+			width: var(--components-radio-input-size);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: background-color, color, transform, border;
+			position: absolute;
+			border-radius: 50%;
+			left: 0;
+			content: '';
+		}
+
+		&::before {
+			background-color: var(--colors-white-color);
+			border-color: var(--palettes-grey-700);
+			border-width: 2px;
+			border-style: solid;
+		}
+
+		&::after {
+			color: transparent;
+			transform: scale(0);
+		}
+	}
+
+	.radio-label-helper {
+		color: var(--palettes-grey-700);
+		font-size: var(--sizes-S-fontSize);
+		line-height: var(--sizes-S-lineHeight);
+	}
+}

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

@@ -1,25 +1,25 @@
-@use 'exports' as *;
-
-.radio {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
-	}
-
-	&.mod-S {
-		@include S;
-	}
-}
-
-.radio-input {
-	&[disabled],
-	&[read-only] {
-		@include disabled;
-
-		&:checked {
-			@include disabledChecked;
-		}
-	}
-}
+@use 'exports' as *;
+
+.radio {
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
+	}
+
+	&.mod-S {
+		@include S;
+	}
+}
+
+.radio-input {
+	&[disabled],
+	&[read-only] {
+		@include disabled;
+
+		&:checked {
+			@include disabledChecked;
+		}
+	}
+}

package/src/components/radio/mods.scss

@@ -1,32 +1,32 @@
-@mixin inline {
-	display: inline-block;
-	margin-right: var(--spacings-M);
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-@mixin S {
-	.radio-label {
-		line-height: var(--sizes-S-lineHeight);
-		min-height: var(--sizes-S-lineHeight);
-		font-size: var(--sizes-S-fontSize);
-		padding: var(--components-radio-S-label-padding);
-
-		&::before,
-		&::after {
-			height: var(--components-radio-S-input-size);
-			width: var(--components-radio-S-input-size);
-		}
-	}
-
-	.radio-label-helper {
-		line-height: var(--sizes-XS-lineHeight);
-		font-size: var(--sizes-XS-fontSize);
-	}
-
-	.radio-input:checked ~ .radio-label {
-		&::after {
-			transform: scale(.5);
-		}
-	}
-}
+@mixin inline {
+	display: inline-block;
+	margin-right: var(--spacings-M);
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+@mixin S {
+	.radio-label {
+		line-height: var(--sizes-S-lineHeight);
+		min-height: var(--sizes-S-lineHeight);
+		font-size: var(--sizes-S-fontSize);
+		padding: var(--components-radio-S-label-padding);
+
+		&::before,
+		&::after {
+			height: var(--components-radio-S-input-size);
+			width: var(--components-radio-S-input-size);
+		}
+	}
+
+	.radio-label-helper {
+		line-height: var(--sizes-XS-lineHeight);
+		font-size: var(--sizes-XS-fontSize);
+	}
+
+	.radio-input:checked ~ .radio-label {
+		&::after {
+			transform: scale(.5);
+		}
+	}
+}

package/src/components/radio/states.scss

@@ -1,30 +1,30 @@
-@mixin disabled {
-	~ .radio-label {
-		color: var(--palettes-grey-500);
-		cursor: default;
-
-		&::before {
-			border-color: var(--palettes-grey-500);
-			border-width: 2px;
-			border-style: solid;
-		}
-
-		.radio-label-helper {
-			color: var(--palettes-grey-500);
-		}
-	}
-}
-
-@mixin disabledChecked {
-	~ .radio-label {
-		&::before {
-			border-color: var(--palettes-grey-500);
-			border-width: 2px;
-			border-style: solid;
-		}
-
-		&::after {
-			background-color: var(--palettes-grey-500);
-		}
-	}
-}
+@mixin disabled {
+	~ .radio-label {
+		color: var(--palettes-grey-500);
+		cursor: default;
+
+		&::before {
+			border-color: var(--palettes-grey-500);
+			border-width: 2px;
+			border-style: solid;
+		}
+
+		.radio-label-helper {
+			color: var(--palettes-grey-500);
+		}
+	}
+}
+
+@mixin disabledChecked {
+	~ .radio-label {
+		&::before {
+			border-color: var(--palettes-grey-500);
+			border-width: 2px;
+			border-style: solid;
+		}
+
+		&::after {
+			background-color: var(--palettes-grey-500);
+		}
+	}
+}

package/src/components/radio/vars.scss

@@ -1,7 +1,7 @@
-@mixin vars {
-	--components-radio-label-padding: 0 0 0 1.75rem;
-	--components-radio-input-top: 2px;
-	--components-radio-input-size: 1.25rem;
-	--components-radio-S-label-padding: 0 0 0 1.5rem;
-	--components-radio-S-input-size: 1rem;
-}
+@mixin vars {
+	--components-radio-label-padding: 0 0 0 1.75rem;
+	--components-radio-input-top: 2px;
+	--components-radio-input-size: 1.25rem;
+	--components-radio-S-label-padding: 0 0 0 1.5rem;
+	--components-radio-S-input-size: 1rem;
+}

package/src/components/radioButtons/component.scss

@@ -1,84 +1,84 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component($atRoot: 'without: rule') {
-	display: flex;
-
-	@at-root ($atRoot) {
-		.radioButtons-item {
-			position: relative;
-			margin-left: -1px;
-
-			&:first-child {
-				margin-left: 0;
-
-				.radioButtons-item-label {
-					border-radius: var(--commons-borderRadius-M) 0 0 var(--commons-borderRadius-M);
-				}
-			}
-
-			&:last-child {
-				.radioButtons-item-label {
-					border-radius: 0 var(--commons-borderRadius-M) var(--commons-borderRadius-M) 0;
-				}
-			}
-		}
-
-		.radioButtons-item-input {
-			@include a11y.mask;
-
-			&:checked,
-			&:focus {
-				~ .radioButtons-item-label {
-					z-index: 2;
-				}
-			}
-		}
-
-		.radioButtons-item-label {
-			display: flex;
-			align-items: center;
-			gap: var(--spacings-XS);
-			background-color: var(--colors-white-color);
-			padding: var(--components-radioButtons-padding);
-			font-size: var(--components-radioButtons-font-size);
-			line-height: var(--components-radioButtons-line-height);
-			color: var(--palettes-grey-700);
-			box-shadow: inset 0 0 0 var(--commons-divider-width) var(--palettes-grey-200);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: background-color, color, box-shadow;
-			overflow: hidden;
-			position: relative;
-			height: 100%;
-			cursor: pointer;
-		}
-
-		.radioButtons-item-input {
-			&:not(:disabled, .is-disabled) {
-				~ .radioButtons-item-label {
-					&:hover {
-						background-color: var(--palettes-grey-50);
-					}
-				}
-
-				&:focus-visible {
-					~ .radioButtons-item-label {
-						@include a11y.focusVisible;
-					}
-				}
-
-				&:checked {
-					~ .radioButtons-item-label {
-						background-color: var(--palettes-primary-50);
-						box-shadow: inset 0 0 0 var(--commons-divider-width) var(--palettes-primary-500);
-						color: var(--palettes-primary-800);
-
-						.numericBadge {
-							--components-numericBadge-background: var(--palettes-primary-200);
-							--components-numericBadge-color: var(--palettes-primary-800);
-						}
-					}
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	display: flex;
+
+	@at-root ($atRoot) {
+		.radioButtons-item {
+			position: relative;
+			margin-left: -1px;
+
+			&:first-child {
+				margin-left: 0;
+
+				.radioButtons-item-label {
+					border-radius: var(--commons-borderRadius-M) 0 0 var(--commons-borderRadius-M);
+				}
+			}
+
+			&:last-child {
+				.radioButtons-item-label {
+					border-radius: 0 var(--commons-borderRadius-M) var(--commons-borderRadius-M) 0;
+				}
+			}
+		}
+
+		.radioButtons-item-input {
+			@include a11y.mask;
+
+			&:checked,
+			&:focus {
+				~ .radioButtons-item-label {
+					z-index: 2;
+				}
+			}
+		}
+
+		.radioButtons-item-label {
+			display: flex;
+			align-items: center;
+			gap: var(--spacings-XS);
+			background-color: var(--colors-white-color);
+			padding: var(--components-radioButtons-padding);
+			font-size: var(--components-radioButtons-font-size);
+			line-height: var(--components-radioButtons-line-height);
+			color: var(--palettes-grey-700);
+			box-shadow: inset 0 0 0 var(--commons-divider-width) var(--palettes-grey-200);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: background-color, color, box-shadow;
+			overflow: hidden;
+			position: relative;
+			height: 100%;
+			cursor: pointer;
+		}
+
+		.radioButtons-item-input {
+			&:not(:disabled, .is-disabled) {
+				~ .radioButtons-item-label {
+					&:hover {
+						background-color: var(--palettes-grey-50);
+					}
+				}
+
+				&:focus-visible {
+					~ .radioButtons-item-label {
+						@include a11y.focusVisible;
+					}
+				}
+
+				&:checked {
+					~ .radioButtons-item-label {
+						background-color: var(--palettes-primary-50);
+						box-shadow: inset 0 0 0 var(--commons-divider-width) var(--palettes-primary-500);
+						color: var(--palettes-primary-800);
+
+						.numericBadge {
+							--components-numericBadge-background: var(--palettes-primary-200);
+							--components-numericBadge-color: var(--palettes-primary-800);
+						}
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,20 +1,20 @@
-@use 'exports' as *;
-
-.radioButtons {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-XS {
-		@include XS;
-	}
-}
-
-.radioButtons-item-input {
-	&:is(:disabled, .is-disabled, .disabled) {
-		@include disabled;
-	}
-}
+@use 'exports' as *;
+
+.radioButtons {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-XS {
+		@include XS;
+	}
+}
+
+.radioButtons-item-input {
+	&:is(:disabled, .is-disabled, .disabled) {
+		@include disabled;
+	}
+}

package/src/components/radioButtons/mods.scss

@@ -1,11 +1,11 @@
-@mixin S {
-	--components-radioButtons-font-size: var(--sizes-S-fontSize);
-	--components-radioButtons-line-height: var(--sizes-S-lineHeight);
-	--components-radioButtons-padding: .375rem .75rem;
-}
-
-@mixin XS {
-	--components-radioButtons-font-size: var(--sizes-XS-fontSize);
-	--components-radioButtons-line-height: var(--sizes-XS-lineHeight);
-	--components-radioButtons-padding: var(--spacings-XXS) var(--spacings-XS);
-}
+@mixin S {
+	--components-radioButtons-font-size: var(--sizes-S-fontSize);
+	--components-radioButtons-line-height: var(--sizes-S-lineHeight);
+	--components-radioButtons-padding: .375rem .75rem;
+}
+
+@mixin XS {
+	--components-radioButtons-font-size: var(--sizes-XS-fontSize);
+	--components-radioButtons-line-height: var(--sizes-XS-lineHeight);
+	--components-radioButtons-padding: var(--spacings-XXS) var(--spacings-XS);
+}

package/src/components/radioButtons/states.scss

@@ -1,13 +1,13 @@
-@mixin disabled {
-	~ .radioButtons-item-label {
-		box-shadow: inset 0 0 0 1px var(--palettes-grey-200);
-		color: var(--palettes-grey-500);
-		cursor: default;
-	}
-
-	&:checked {
-		~ .radioButtons-item-label {
-			background-color: var(--palettes-grey-100);
-		}
-	}
-}
+@mixin disabled {
+	~ .radioButtons-item-label {
+		box-shadow: inset 0 0 0 1px var(--palettes-grey-200);
+		color: var(--palettes-grey-500);
+		cursor: default;
+	}
+
+	&:checked {
+		~ .radioButtons-item-label {
+			background-color: var(--palettes-grey-100);
+		}
+	}
+}

package/src/components/radioButtons/vars.scss

@@ -1,5 +1,5 @@
-@mixin vars {
-	--components-radioButtons-padding: var(--spacings-XS) var(--spacings-S);
-	--components-radioButtons-font-size: var(--sizes-M-fontSize);
-	--components-radioButtons-line-height: var(--sizes-M-lineHeight); 
-}
+@mixin vars {
+	--components-radioButtons-padding: var(--spacings-XS) var(--spacings-S);
+	--components-radioButtons-font-size: var(--sizes-M-fontSize);
+	--components-radioButtons-line-height: var(--sizes-M-lineHeight); 
+}