@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/errorPage/index.scss

@@ -1,11 +1,11 @@
-@use 'exports' as *;
-@use '@lucca-front/scss/src/commons/utils/media';
-
-.errorPage {
-	@include vars;
-	@include component;
-
-	@include media.max('S') {
-		@include compact;
-	}
-}
+@use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+
+.errorPage {
+	@include vars;
+	@include component;
+
+	@include media.max('S') {
+		@include compact;
+	}
+}

package/src/components/errorPage/vars.scss

@@ -1,4 +1,4 @@
-@mixin vars {
-	--components-errorPage-background: var(--colors-white-color);
-	--components-errorPage-header-color: #ff7a1a;
-}
+@mixin vars {
+	--components-errorPage-background: var(--colors-white-color);
+	--components-errorPage-header-color: #ff7a1a;
+}

package/src/components/field/component.scss

@@ -1,112 +1,112 @@
-@mixin component($atRoot: 'without: rule') {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	position: relative;
-	border: 0;
-	padding: 0;
-	margin: 0;
-	max-width: 100%;
-
-	.textfield-input,
-	.radiosfield-input,
-	.checkboxesfield-input {
-		display: flex;
-		flex-direction: column;
-
-		&.palette-error {
-			box-shadow: 0 0 0 1px var(--palettes-700);
-		}
-	}
-
-	.radiosfield-input,
-	.checkboxesfield-input {
-		row-gap: var(--spacings-XXS);
-	}
-
-	.textfield-label,
-	.radiosfield-label,
-	.checkboxesfield-label {
-		color: var(--components-field-label-color);
-	}
-
-	@at-root ($atRoot) {
-		.textfield-input,
-		.radiosfield-input,
-		.checkboxesfield-input {
-			font-family: inherit;
-			font-size: var(--components-field-font-size);
-			color: var(--components-field-input-color);
-			outline: none;
-			position: relative;
-			width: 100%;
-
-			&::placeholder {
-				color: var(--palettes-grey-200);
-			}
-		}
-
-		.textfield-label,
-		.radiosfield-label,
-		.checkboxesfield-label {
-			color: var(--components-field-label-color);
-			font-size: var(--sizes-M-fontSize);
-			line-height: var(--sizes-M-lineHeight);
-			min-height: var(--spacings-S);
-			margin-bottom: var(--components-field-label-margin-bottom);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: all;
-			overflow: hidden;
-			position: relative;
-			text-overflow: ellipsis;
-			word-break: break-word;
-			white-space: nowrap;
-			order: -1;
-		}
-
-		.textfield-messages,
-		.radiosfield-messages,
-		.checkboxesfield-messages {
-			font-size: var(--sizes-S-fontSize);
-			line-height: var(--sizes-S-lineHeight);
-			margin-top: var(--components-field-message-margin-top);
-
-			> * {
-				margin: 0;
-			}
-		}
-
-		.textfield-messages-error,
-		.radiosfield-messages-error,
-		.checkboxesfield-messages-error {
-			color: var(--palettes-error-700);
-
-			.lucca-icon {
-				font-size: var(--sizes-XS-lineHeight);
-				line-height: var(--sizes-S-lineHeight);
-				vertical-align: top;
-			}
-		}
-
-		.textfield-messages-warning,
-		.radiosfield-messages-warning,
-		.checkboxesfield-messages-warning {
-			color: var(--palettes-warning-700);
-		}
-
-		.textfield-messages-valid,
-		.radiosfield-messages-valid,
-		.checkboxesfield-messages-valid,
-		.textfield-messages-success,
-		.radiosfield-messages-success,
-		.checkboxesfield-messages-success {
-			color: var(--palettes-success-700);
-		}
-
-		.textfield-messages-helper,
-		.radiosfield-messages-helper,
-		.checkboxesfield-messages-helper {
-			color: var(--palettes-grey-700);
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	position: relative;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	max-width: 100%;
+
+	.textfield-input,
+	.radiosfield-input,
+	.checkboxesfield-input {
+		display: flex;
+		flex-direction: column;
+
+		&.palette-error {
+			box-shadow: 0 0 0 1px var(--palettes-700);
+		}
+	}
+
+	.radiosfield-input,
+	.checkboxesfield-input {
+		row-gap: var(--spacings-XXS);
+	}
+
+	.textfield-label,
+	.radiosfield-label,
+	.checkboxesfield-label {
+		color: var(--components-field-label-color);
+	}
+
+	@at-root ($atRoot) {
+		.textfield-input,
+		.radiosfield-input,
+		.checkboxesfield-input {
+			font-family: inherit;
+			font-size: var(--components-field-font-size);
+			color: var(--components-field-input-color);
+			outline: none;
+			position: relative;
+			width: 100%;
+
+			&::placeholder {
+				color: var(--palettes-grey-200);
+			}
+		}
+
+		.textfield-label,
+		.radiosfield-label,
+		.checkboxesfield-label {
+			color: var(--components-field-label-color);
+			font-size: var(--sizes-M-fontSize);
+			line-height: var(--sizes-M-lineHeight);
+			min-height: var(--spacings-S);
+			margin-bottom: var(--components-field-label-margin-bottom);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: all;
+			overflow: hidden;
+			position: relative;
+			text-overflow: ellipsis;
+			word-break: break-word;
+			white-space: nowrap;
+			order: -1;
+		}
+
+		.textfield-messages,
+		.radiosfield-messages,
+		.checkboxesfield-messages {
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+			margin-top: var(--components-field-message-margin-top);
+
+			> * {
+				margin: 0;
+			}
+		}
+
+		.textfield-messages-error,
+		.radiosfield-messages-error,
+		.checkboxesfield-messages-error {
+			color: var(--palettes-error-700);
+
+			.lucca-icon {
+				font-size: var(--sizes-XS-lineHeight);
+				line-height: var(--sizes-S-lineHeight);
+				vertical-align: top;
+			}
+		}
+
+		.textfield-messages-warning,
+		.radiosfield-messages-warning,
+		.checkboxesfield-messages-warning {
+			color: var(--palettes-warning-700);
+		}
+
+		.textfield-messages-valid,
+		.radiosfield-messages-valid,
+		.checkboxesfield-messages-valid,
+		.textfield-messages-success,
+		.radiosfield-messages-success,
+		.checkboxesfield-messages-success {
+			color: var(--palettes-success-700);
+		}
+
+		.textfield-messages-helper,
+		.radiosfield-messages-helper,
+		.checkboxesfield-messages-helper {
+			color: var(--palettes-grey-700);
+		}
+	}
+}

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

@@ -1,125 +1,125 @@
-@use 'exports' as *;
-
-.form.mod-framed {
-	.textfield,
-	.radiosfield,
-	.checkboxesfield {
-		@include framed;
-	}
-}
-
-.textfield,
-.radiosfield,
-.checkboxesfield {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
-	}
-
-	&.mod-block {
-		@include block;
-	}
-
-	&:is(.is-required, .required) {
-		@include required;
-	}
-
-	&:is(.is-loading, .loading) {
-		@include loading;
-	}
-
-	&:is(.is-success, .success, .is-valid, .valid) {
-		@include success;
-	}
-
-	&:is(.is-error, .error, .is-invalid, .invalid) {
-		@include error;
-	}
-
-	&.mod-compact {
-		@include compact;
-
-		&.mod-block {
-			@include compactBlock;
-		}
-	}
-
-	&.mod-framed {
-		@include framed;
-
-		&.mod-search {
-			@include framedSearch;
-		}
-
-		&.is-error {
-			@include fieldFramedState('error');
-			@include fieldFramedError('textfield');
-			@include fieldFramedError('radiosfield');
-			@include fieldFramedError('checkboxesfield');
-		}
-
-		&.is-warning {
-			@include fieldFramedState('warning');
-		}
-
-		&.is-valid,
-		&.is-success {
-			@include fieldFramedState('success');
-		}
-
-		@at-root {
-			.form.mod-framed {
-				.is-error {
-					@include fieldFramedState('error');
-					@include fieldFramedError('textfield');
-					@include fieldFramedError('radiosfield');
-					@include fieldFramedError('checkboxesfield');
-				}
-
-				.is-warning {
-					@include fieldFramedState('warning');
-				}
-
-				.is-valid,
-				.is-success {
-					@include fieldFramedState('success');
-				}
-			}
-		}
-	}
-
-	.textfield-input,
-	.radiosfield-input,
-	.checkboxesfield-input {
-		&:is([disabled], [readonly]) {
-			@include inputDisabled;
-		}
-
-		&:is(.is-valid, .valid, .is-success, .success) {
-			@include inputState('success');
-		}
-
-		&:is(.is-warning, .warning) {
-			@include inputState('warning');
-		}
-
-		&:is(.is-invalid, .invalid, .is-error, .error) {
-			@include inputState('error');
-		}
-
-		&.mod-row {
-			@include inputRow;
-		}
-	}
-}
-
-.textfield-input,
-.radiosfield-input,
-.checkboxesfield-input {
-	&:is([required]),
-	&:is([aria-required='true']) {
-		@include required;
-	}
-}
+@use 'exports' as *;
+
+.form.mod-framed {
+	.textfield,
+	.radiosfield,
+	.checkboxesfield {
+		@include framed;
+	}
+}
+
+.textfield,
+.radiosfield,
+.checkboxesfield {
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
+	}
+
+	&.mod-block {
+		@include block;
+	}
+
+	&:is(.is-required, .required) {
+		@include required;
+	}
+
+	&:is(.is-loading, .loading) {
+		@include loading;
+	}
+
+	&:is(.is-success, .success, .is-valid, .valid) {
+		@include success;
+	}
+
+	&:is(.is-error, .error, .is-invalid, .invalid) {
+		@include error;
+	}
+
+	&.mod-compact {
+		@include compact;
+
+		&.mod-block {
+			@include compactBlock;
+		}
+	}
+
+	&.mod-framed {
+		@include framed;
+
+		&.mod-search {
+			@include framedSearch;
+		}
+
+		&.is-error {
+			@include fieldFramedState('error');
+			@include fieldFramedError('textfield');
+			@include fieldFramedError('radiosfield');
+			@include fieldFramedError('checkboxesfield');
+		}
+
+		&.is-warning {
+			@include fieldFramedState('warning');
+		}
+
+		&.is-valid,
+		&.is-success {
+			@include fieldFramedState('success');
+		}
+
+		@at-root {
+			.form.mod-framed {
+				.is-error {
+					@include fieldFramedState('error');
+					@include fieldFramedError('textfield');
+					@include fieldFramedError('radiosfield');
+					@include fieldFramedError('checkboxesfield');
+				}
+
+				.is-warning {
+					@include fieldFramedState('warning');
+				}
+
+				.is-valid,
+				.is-success {
+					@include fieldFramedState('success');
+				}
+			}
+		}
+	}
+
+	.textfield-input,
+	.radiosfield-input,
+	.checkboxesfield-input {
+		&:is([disabled], [readonly]) {
+			@include inputDisabled;
+		}
+
+		&:is(.is-valid, .valid, .is-success, .success) {
+			@include inputState('success');
+		}
+
+		&:is(.is-warning, .warning) {
+			@include inputState('warning');
+		}
+
+		&:is(.is-invalid, .invalid, .is-error, .error) {
+			@include inputState('error');
+		}
+
+		&.mod-row {
+			@include inputRow;
+		}
+	}
+}
+
+.textfield-input,
+.radiosfield-input,
+.checkboxesfield-input {
+	&:is([required]),
+	&:is([aria-required='true']) {
+		@include required;
+	}
+}