@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/field/states.scss

@@ -1,184 +1,184 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/form';
-@use '@lucca-front/scss/src/commons/utils/loading';
-
-@mixin hover {
-	&::placeholder {
-		color: var(--palettes-grey-500);
-	}
-}
-
-@mixin focus {
-	&::placeholder {
-		color: var(--palettes-grey-200);
-	}
-}
-
-@mixin required {
-	.textfield-label,
-	.radiosfield-label,
-	.checkboxesfield-label,
-	~ .textfield-label,
-	~ .radiosfield-label,
-	~ .checkboxesfield-label {
-		&:not(:empty) {
-			&::after {
-				@include form.required;
-			}
-		}
-	}
-}
-
-@mixin inputDisabled {
-	color: var(--palettes-grey-500);
-	cursor: not-allowed;
-}
-
-@mixin inputState($state) {
-	&:not(:disabled, .is-disabled) {
-		background-color: var(--palettes-#{$state}-50);
-		box-shadow: 0 0 0 1px var(--palettes-#{$state}-600);
-
-		~ .textfield-label,
-		~ .checkboxesfield-label,
-		~ .radiosfield-label,
-		~ .textfield-suffix,
-		~ .checkboxesfield-suffix,
-		~ .radiosfield-suffix {
-			color: var(--palettes-#{$state}-700);
-		}
-
-		&::placeholder {
-			color: var(--palettes-#{$state}-400);
-		}
-
-		&:focus,
-		&.is-focused {
-			~ .textfield-label,
-			~ .checkboxesfield-label,
-			~ .radiosfield-label {
-				color: var(--palettes-#{$state}-700);
-			}
-		}
-
-		&:focus {
-			&::placeholder {
-				color: var(--palettes-#{$state}-400);
-			}
-		}
-	}
-}
-
-@mixin loading {
-	@include loading.spinner;
-
-	&::before,
-	&::after {
-		content: '' !important;
-		right: var(--spacings-XS) !important;
-		bottom: 0.7rem !important;
-		z-index: 2 !important;
-		left: inherit !important;
-		top: inherit !important;
-		position: absolute !important;
-	}
-
-	.textfield-input,
-	.radiosfield-input,
-	.checkboxesfield-input {
-		padding-right: var(--spacings-L);
-	}
-}
-
-@mixin success {
-	@keyframes success {
-		0% {
-			opacity: 0;
-			transform: scale(0);
-		}
-
-		5% {
-			opacity: 1;
-			transform: scale(1.2);
-		}
-
-		7% {
-			opacity: 1;
-			transform: scale(1);
-		}
-
-		93% {
-			opacity: 1;
-			transform: scale(1);
-		}
-
-		95% {
-			opacity: 1;
-			transform: scale(1.2);
-		}
-
-		100% {
-			opacity: 0;
-			transform: scale(0);
-		}
-	}
-
-	&::before {
-		@include icon.generate('sign_confirm');
-
-		color: var(--palettes-success-700);
-		position: absolute;
-		animation-fill-mode: forwards;
-		animation-name: success;
-		animation-duration: 3s;
-		border-radius: 50%;
-		bottom: 0.85rem;
-		font-size: 1.2rem;
-		height: 1rem;
-		right: 0.4rem;
-		z-index: 1;
-	}
-
-	.textfield-input,
-	.radiosfield-input,
-	.checkboxesfield-input {
-		padding-right: var(--spacings-L);
-	}
-}
-
-@mixin error {
-	.textfield-label,
-	.radiosfield-label,
-	.checkboxesfield-label {
-		color: var(--palettes-error-700);
-	}
-
-	.textfield-input,
-	.radiosfield-input,
-	.checkboxesfield-input {
-		@include state('error');
-	}
-}
-
-@mixin state($state) {
-	&:not(:disabled, .is-disabled) {
-		background-color: var(--palettes-#{$state}-50);
-
-		&::placeholder {
-			color: var(--palettes-#{$state}-400);
-		}
-
-		&:focus-visible,
-		&.is-focused {
-			~ .textfield-label,
-			~ .radiosfield-label,
-			~ .checkboxesfield-label {
-				color: var(--palettes-#{$state}-700);
-			}
-		}
-
-		@if $state == 'error' {
-			box-shadow: 0 0 0 1px var(--palettes-#{$state}-400);
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/form';
+@use '@lucca-front/scss/src/commons/utils/loading';
+
+@mixin hover {
+	&::placeholder {
+		color: var(--palettes-grey-500);
+	}
+}
+
+@mixin focus {
+	&::placeholder {
+		color: var(--palettes-grey-200);
+	}
+}
+
+@mixin required {
+	.textfield-label,
+	.radiosfield-label,
+	.checkboxesfield-label,
+	~ .textfield-label,
+	~ .radiosfield-label,
+	~ .checkboxesfield-label {
+		&:not(:empty) {
+			&::after {
+				@include form.required;
+			}
+		}
+	}
+}
+
+@mixin inputDisabled {
+	color: var(--palettes-grey-500);
+	cursor: not-allowed;
+}
+
+@mixin inputState($state) {
+	&:not(:disabled, .is-disabled) {
+		background-color: var(--palettes-#{$state}-50);
+		box-shadow: 0 0 0 1px var(--palettes-#{$state}-600);
+
+		~ .textfield-label,
+		~ .checkboxesfield-label,
+		~ .radiosfield-label,
+		~ .textfield-suffix,
+		~ .checkboxesfield-suffix,
+		~ .radiosfield-suffix {
+			color: var(--palettes-#{$state}-700);
+		}
+
+		&::placeholder {
+			color: var(--palettes-#{$state}-400);
+		}
+
+		&:focus,
+		&.is-focused {
+			~ .textfield-label,
+			~ .checkboxesfield-label,
+			~ .radiosfield-label {
+				color: var(--palettes-#{$state}-700);
+			}
+		}
+
+		&:focus {
+			&::placeholder {
+				color: var(--palettes-#{$state}-400);
+			}
+		}
+	}
+}
+
+@mixin loading {
+	@include loading.spinner;
+
+	&::before,
+	&::after {
+		content: '' !important;
+		right: var(--spacings-XS) !important;
+		bottom: 0.7rem !important;
+		z-index: 2 !important;
+		left: inherit !important;
+		top: inherit !important;
+		position: absolute !important;
+	}
+
+	.textfield-input,
+	.radiosfield-input,
+	.checkboxesfield-input {
+		padding-right: var(--spacings-L);
+	}
+}
+
+@mixin success {
+	@keyframes success {
+		0% {
+			opacity: 0;
+			transform: scale(0);
+		}
+
+		5% {
+			opacity: 1;
+			transform: scale(1.2);
+		}
+
+		7% {
+			opacity: 1;
+			transform: scale(1);
+		}
+
+		93% {
+			opacity: 1;
+			transform: scale(1);
+		}
+
+		95% {
+			opacity: 1;
+			transform: scale(1.2);
+		}
+
+		100% {
+			opacity: 0;
+			transform: scale(0);
+		}
+	}
+
+	&::before {
+		@include icon.generate('sign_confirm');
+
+		color: var(--palettes-success-700);
+		position: absolute;
+		animation-fill-mode: forwards;
+		animation-name: success;
+		animation-duration: 3s;
+		border-radius: 50%;
+		bottom: 0.85rem;
+		font-size: 1.2rem;
+		height: 1rem;
+		right: 0.4rem;
+		z-index: 1;
+	}
+
+	.textfield-input,
+	.radiosfield-input,
+	.checkboxesfield-input {
+		padding-right: var(--spacings-L);
+	}
+}
+
+@mixin error {
+	.textfield-label,
+	.radiosfield-label,
+	.checkboxesfield-label {
+		color: var(--palettes-error-700);
+	}
+
+	.textfield-input,
+	.radiosfield-input,
+	.checkboxesfield-input {
+		@include state('error');
+	}
+}
+
+@mixin state($state) {
+	&:not(:disabled, .is-disabled) {
+		background-color: var(--palettes-#{$state}-50);
+
+		&::placeholder {
+			color: var(--palettes-#{$state}-400);
+		}
+
+		&:focus-visible,
+		&.is-focused {
+			~ .textfield-label,
+			~ .radiosfield-label,
+			~ .checkboxesfield-label {
+				color: var(--palettes-#{$state}-700);
+			}
+		}
+
+		@if $state == 'error' {
+			box-shadow: 0 0 0 1px var(--palettes-#{$state}-400);
+		}
+	}
+}

package/src/components/field/vars.scss

@@ -1,37 +1,37 @@
-@mixin vars {
-	--components-field-font-size: var(--sizes-M-fontSize);
-	--components-field-horizontal-spacing: var(--spacings-M);
-	--components-field-input-color: var(--palettes-grey-800);
-	--components-field-input-inline-margin: 0.15rem;
-	--components-field-label-color: var(--palettes-grey-800);
-	--components-field-label-margin-bottom: var(--spacings-XXS);
-	--components-field-message-font-size: var(--sizes-XS-fontSize);
-	--components-field-message-margin-top: var(--spacings-XXS);
-
-	--components-field-sizes-default: 13rem;
-
-	--components-field-compact-padding: var(--spacings-XS);
-	--components-field-compact-label-font-size: var(--sizes-M-fontSize);
-	--components-field-compact-label-right-margin: 0.3rem;
-
-	--components-field-compact-label-sizes-shorter: 3rem;
-	--components-field-compact-label-sizes-short: 5rem;
-	--components-field-compact-label-sizes-default: 7rem;
-	--components-field-compact-label-sizes-long: 9rem;
-	--components-field-compact-label-sizes-longer: 11rem;
-
-	--components-field-framed-color50: var(--palettes-grey-50);
-	--components-field-framed-color: #9299b0;
-	--components-field-framed-border: var(--palettes-grey-200);
-	--components-field-framed-text: #4c5775;
-	--components-field-framed-side-padding: var(--spacings-S);
-	--components-field-framed-top-padding: var(--spacings-L);
-	--components-field-framed-bottom-padding: var(--spacings-S);
-	--components-field-framed-label-top-offset: var(--spacings-XS);
-	--components-field-framed-textarea-height: 8.5rem;
-	--components-field-framed-textarea-min-height: 5.5rem;
-	--components-field-framed-textarea-max-height: 80vh;
-	--components-field-framed-title-font-size: var(--sizes-L-fontSize);
-	--components-field-framed-title-line-height: var(--sizes-L-lineHeight);
-	--components-field-framed-suffix-padding-right: var(--spacings-XL);
-}
+@mixin vars {
+	--components-field-font-size: var(--sizes-M-fontSize);
+	--components-field-horizontal-spacing: var(--spacings-M);
+	--components-field-input-color: var(--palettes-grey-800);
+	--components-field-input-inline-margin: 0.15rem;
+	--components-field-label-color: var(--palettes-grey-800);
+	--components-field-label-margin-bottom: var(--spacings-XXS);
+	--components-field-message-font-size: var(--sizes-XS-fontSize);
+	--components-field-message-margin-top: var(--spacings-XXS);
+
+	--components-field-sizes-default: 13rem;
+
+	--components-field-compact-padding: var(--spacings-XS);
+	--components-field-compact-label-font-size: var(--sizes-M-fontSize);
+	--components-field-compact-label-right-margin: 0.3rem;
+
+	--components-field-compact-label-sizes-shorter: 3rem;
+	--components-field-compact-label-sizes-short: 5rem;
+	--components-field-compact-label-sizes-default: 7rem;
+	--components-field-compact-label-sizes-long: 9rem;
+	--components-field-compact-label-sizes-longer: 11rem;
+
+	--components-field-framed-color50: var(--palettes-grey-50);
+	--components-field-framed-color: #9299b0;
+	--components-field-framed-border: var(--palettes-grey-200);
+	--components-field-framed-text: #4c5775;
+	--components-field-framed-side-padding: var(--spacings-S);
+	--components-field-framed-top-padding: var(--spacings-L);
+	--components-field-framed-bottom-padding: var(--spacings-S);
+	--components-field-framed-label-top-offset: var(--spacings-XS);
+	--components-field-framed-textarea-height: 8.5rem;
+	--components-field-framed-textarea-min-height: 5.5rem;
+	--components-field-framed-textarea-max-height: 80vh;
+	--components-field-framed-title-font-size: var(--sizes-L-fontSize);
+	--components-field-framed-title-line-height: var(--sizes-L-lineHeight);
+	--components-field-framed-suffix-padding-right: var(--spacings-XL);
+}

package/src/components/fieldset/component.scss

@@ -1,48 +1,48 @@
-@use '@lucca-front/scss/src/components/title/exports' as title;
-
-@mixin component($atRoot: 'without: rule') {
-	border: 0;
-	margin: 0;
-	padding: 0;
-	display: grid;
-	gap: var(--components-fieldset-gap);
-	grid-template-columns: auto;
-
-	@at-root ($atRoot) {
-		.fieldset-title {
-			@include title.component;
-			@include title.h3;
-
-			padding: 0;
-			margin: 0;
-			width: 100%;
-			min-height: var(--spacings-M);
-			display: contents;
-		}
-
-		.fieldset-title-content {
-			border: 0;
-			padding: 0;
-			margin: 0;
-			width: 100%;
-			background-color: transparent;
-			text-align: left;
-			display: flex;
-			justify-content: space-between;
-			gap: var(--components-fieldset-gap);
-			max-width: var(--components-fieldset-contentMaxWidth);
-		}
-
-		.fieldset-title-content-text-helper {
-			font-size: var(--sizes-S-fontSize);
-			line-height: var(--sizes-S-lineHeight);
-			color: var(--palettes-grey-700);
-			font-weight: 400;
-			display: block;
-		}
-
-		.fieldset-content {
-			min-width: 0;
-		}
-	}
-}
+@use '@lucca-front/scss/src/components/title/exports' as title;
+
+@mixin component($atRoot: 'without: rule') {
+	border: 0;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	gap: var(--components-fieldset-gap);
+	grid-template-columns: auto;
+
+	@at-root ($atRoot) {
+		.fieldset-title {
+			@include title.component;
+			@include title.h3;
+
+			padding: 0;
+			margin: 0;
+			width: 100%;
+			min-height: var(--spacings-M);
+			display: contents;
+		}
+
+		.fieldset-title-content {
+			border: 0;
+			padding: 0;
+			margin: 0;
+			width: 100%;
+			background-color: transparent;
+			text-align: left;
+			display: flex;
+			justify-content: space-between;
+			gap: var(--components-fieldset-gap);
+			max-width: var(--components-fieldset-contentMaxWidth);
+		}
+
+		.fieldset-title-content-text-helper {
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+			color: var(--palettes-grey-700);
+			font-weight: 400;
+			display: block;
+		}
+
+		.fieldset-content {
+			min-width: 0;
+		}
+	}
+}

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

@@ -1,14 +1,14 @@
-@use 'exports' as *;
-
-.fieldset {
-	@include vars;
-	@include component;
-
-	&.mod-horizontal {
-		@include horizontal;
-	}
-
-	&.mod-expandable {
-		@include expandable;
-	}
-}
+@use 'exports' as *;
+
+.fieldset {
+	@include vars;
+	@include component;
+
+	&.mod-horizontal {
+		@include horizontal;
+	}
+
+	&.mod-expandable {
+		@include expandable;
+	}
+}

package/src/components/fieldset/mods.scss

@@ -1,17 +1,17 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin horizontal {
-	grid-template-columns: 1fr auto;
-}
-
-@mixin expandable {
-	.fieldset-title-content {
-		border-radius: var(--commons-borderRadius-M);
-		cursor: pointer;
-		font: inherit;
-
-		&:focus-visible {
-			@include a11y.focusVisible;
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin horizontal {
+	grid-template-columns: 1fr auto;
+}
+
+@mixin expandable {
+	.fieldset-title-content {
+		border-radius: var(--commons-borderRadius-M);
+		cursor: pointer;
+		font: inherit;
+
+		&:focus-visible {
+			@include a11y.focusVisible;
+		}
+	}
+}

package/src/components/fieldset/vars.scss

@@ -1,4 +1,4 @@
-@mixin vars {
-	--components-fieldset-gap: calc(var(--spacings-XS) + var(--spacings-XXS));
-	--components-fieldset-contentMaxWidth: 40rem;
-}
+@mixin vars {
+	--components-fieldset-gap: calc(var(--spacings-XS) + var(--spacings-XXS));
+	--components-fieldset-contentMaxWidth: 40rem;
+}