@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/form/mods.scss

@@ -1,231 +1,266 @@
-@use 'sass:math';
-@use '@lucca-front/scss/src/commons/utils/form';
-@use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/loading';
-@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
-@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
-@use '@lucca-front/scss/src/components/textField/exports' as textField;
-@use '@lucca-front/scss/src/components/switchField/exports' as switchField;
-@use '@lucca-front/scss/src/components/checkboxField/exports' as checkboxField;
-
-@mixin S {
-	.formLabel {
-		@include formLabel.S;
-	}
-
-	.textField {
-		@include textField.S;
-	}
-
-	.checkboxField {
-		@include checkboxField.S;
-	}
-
-	.switchField {
-		@include switchField.S;
-	}
-}
-
-@mixin XS {
-	.formLabel {
-		@include formLabel.XS;
-	}
-
-	.textField {
-		@include textField.XS;
-	}
-
-	.inlineMessage {
-		@include inlineMessage.S;
-	}
-}
-
-@mixin checkable {
-	display: grid;
-	grid-template-columns: auto 1fr;
-	gap: 0 var(--spacings-XS);
-
-	.checkboxField {
-		order: -1;
-		top: var(--component-checkboxField-top);
-	}
-
-	.switchField {
-		order: -1;
-	}
-}
-
-// deprecated
-
-@mixin overlay {
-	&:focus-within {
-		.textfield-input {
-			box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color)), 0 0 0 4px var(--components-field-framed-color50);
-			z-index: 4;
-		}
-
-		.is-error {
-			.textfield-input {
-				background-color: var(--colors-white-color) !important;
-			}
-		}
-
-		.is-warning {
-			.textfield-input {
-				background-color: #444242;
-				box-shadow: form.fakeBorderOverlay(var(--palettes-warning-700)), 0 0 0 4px var(--palettes-warning-50);
-			}
-		}
-
-		.is-valid,
-		.is-success {
-			.textfield-input {
-				background-color: var(--colors-white-color);
-				box-shadow: form.fakeBorderOverlay(var(--palettes-success-700)), 0 0 0 4px var(--palettes-success-50);
-			}
-		}
-	}
-
-	.textfield,
-	.checkbox,
-	.radio,
-	.select {
-		+ .textfield,
-		+ .checkbox,
-		+ .radio,
-		+ .select {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			z-index: 10;
-			padding: var(--components-field-framed-label-top-offset) var(--components-field-framed-side-padding)
-				var(--components-field-framed-bottom-padding);
-		}
-	}
-}
-
-@mixin overlayTop {
-	.textfield,
-	.checkbox,
-	.radio,
-	.select {
-		+ .textfield,
-		+ .checkbox,
-		+ .radio,
-		+ .select {
-			top: 0;
-			bottom: auto;
-		}
-	}
-}
-
-@mixin breakpoint($breakpoint, $i) {
-	flex-basis: 100%;
-	flex-grow: 0;
-
-	@include media.min($breakpoint) {
-		flex-basis: (math.div(100%, 12) * $i);
-	}
-}
-
-@mixin framed {
-	margin-bottom: 0;
-	background-color: var(--colors-white-color);
-	padding: 0;
-	box-shadow: form.fakeBorderOverlay(var(--palettes-grey-200));
-	transition: background-color var(--commons-animations-durations-standard);
-	margin-bottom: 0 !important;
-
-	&::before,
-	&::after {
-		content: ' ';
-		display: table;
-	}
-
-	&::after {
-		clear: both;
-	}
-
-	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
-		&:hover,
-		&:focus {
-			position: relative;
-			z-index: 1;
-			background-color: var(--colors-white-color);
-			box-shadow: form.fakeBorderOverlay(var(--palettes-grey-600));
-		}
-
-		&:focus {
-			z-index: 4;
-			box-shadow: form.fakeBorderOverlay(var(--palettes-grey-600)), 0 0 0 4px var(--palettes-grey-50);
-		}
-	}
-
-	.radiosfield,
-	.checkboxesfield {
-		display: block;
-		margin-top: var(--components-field-framed-side-padding);
-		margin-bottom: 0;
-		padding: 0 var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
-	}
-
-	&.is-disabled,
-	&.is-readonly {
-		background-color: var(--commons-disabled-background);
-	}
-
-	&.is-loading {
-		@include loading.spinner;
-
-		&::before,
-		&::after {
-			left: auto !important;
-			bottom: auto !important;
-			right: var(--components-field-framed-side-padding) !important;
-			top: var(--components-field-framed-side-padding) !important;
-		}
-	}
-}
-
-@mixin fieldMaterialState($fieldname, $state) {
-	&:focus {
-		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
-	}
-
-	@if ($state == 'error') {
-		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
-	}
-
-	~ .#{$fieldname}-label {
-		color: var(--palettes-#{$state}-700);
-	}
-
-	&:focus ~ .#{$fieldname}-label {
-		color: var(--palettes-#{$state}-700);
-	}
-}
-
-@mixin fieldMaterialError($fieldname) {
-	@include fieldMaterialState($fieldname, 'error');
-}
-
-@mixin fieldMaterialFilled($fieldname) {
-	~ .#{$fieldname}-label {
-		font-size: var(--sizes-S-fontSize);
-		top: 0;
-	}
-}
-
-%isRequired {
-	color: var(--palettes-error-700);
-	display: inline-block;
-	margin-left: 0.2em;
-
-	@supports (content: '*' / '') {
-		content: '*' / '';
-	}
-
-	@supports not (content: '*' / '') {
-		content: '*';
-	}
-}
+@use 'sass:math';
+@use '@lucca-front/scss/src/commons/utils/form';
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/loading';
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/textField/exports' as textField;
+@use '@lucca-front/scss/src/components/switchField/exports' as switchField;
+@use '@lucca-front/scss/src/components/checkboxField/exports' as checkboxField;
+@use '@lucca-front/scss/src/components/box/exports' as box;
+
+@mixin S {
+	.formLabel {
+		@include formLabel.S;
+	}
+
+	.textField {
+		@include textField.S;
+	}
+
+	.checkboxField {
+		@include checkboxField.S;
+	}
+
+	.switchField {
+		@include switchField.S;
+	}
+}
+
+@mixin XS {
+	.formLabel {
+		@include formLabel.XS;
+	}
+
+	.textField {
+		@include textField.XS;
+	}
+
+	.inlineMessage {
+		@include inlineMessage.S;
+	}
+}
+
+@mixin checkable {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 0 var(--spacings-XS);
+
+	.checkboxField {
+		order: -1;
+		top: var(--component-checkboxField-top);
+	}
+
+	.switchField {
+		order: -1;
+	}
+}
+
+@mixin withArrow {
+	padding-bottom: var(--spacings-S);
+
+	.form-field-arrow {
+		@include box.arrow;
+	}
+
+	&:has(.switchField) {
+		.form-field-arrow {
+			@include box.arrowSwitch; // Arrow position for switch
+		}
+	}
+
+	&:not(:has(:checked)) {
+		.form-field-arrow {
+			display: none;
+		}
+	}
+}
+
+@mixin withArrowS {
+	padding-bottom: var(--spacings-XS);
+
+	.form-field-arrow {
+		@include box.arrowS;
+	}
+
+	&:has(.switchField) {
+		.form-field-arrow {
+			@include box.arrowSwitchS; // Arrow position for switch
+		}
+	}
+}
+
+// deprecated
+
+@mixin overlay {
+	&:focus-within {
+		.textfield-input {
+			box-shadow: form.fakeBorderOverlay(var(--components-field-framed-color)), 0 0 0 4px var(--components-field-framed-color50);
+			z-index: 4;
+		}
+
+		.is-error {
+			.textfield-input {
+				background-color: var(--colors-white-color) !important;
+			}
+		}
+
+		.is-warning {
+			.textfield-input {
+				background-color: #444242;
+				box-shadow: form.fakeBorderOverlay(var(--palettes-warning-700)), 0 0 0 4px var(--palettes-warning-50);
+			}
+		}
+
+		.is-valid,
+		.is-success {
+			.textfield-input {
+				background-color: var(--colors-white-color);
+				box-shadow: form.fakeBorderOverlay(var(--palettes-success-700)), 0 0 0 4px var(--palettes-success-50);
+			}
+		}
+	}
+
+	.textfield,
+	.checkbox,
+	.radio,
+	.select {
+		+ .textfield,
+		+ .checkbox,
+		+ .radio,
+		+ .select {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			z-index: 10;
+			padding: var(--components-field-framed-label-top-offset) var(--components-field-framed-side-padding)
+				var(--components-field-framed-bottom-padding);
+		}
+	}
+}
+
+@mixin overlayTop {
+	.textfield,
+	.checkbox,
+	.radio,
+	.select {
+		+ .textfield,
+		+ .checkbox,
+		+ .radio,
+		+ .select {
+			top: 0;
+			bottom: auto;
+		}
+	}
+}
+
+@mixin breakpoint($breakpoint, $i) {
+	flex-basis: 100%;
+	flex-grow: 0;
+
+	@include media.min($breakpoint) {
+		flex-basis: (math.div(100%, 12) * $i);
+	}
+}
+
+@mixin framed {
+	margin-bottom: 0;
+	background-color: var(--colors-white-color);
+	padding: 0;
+	box-shadow: form.fakeBorderOverlay(var(--palettes-grey-200));
+	transition: background-color var(--commons-animations-durations-standard);
+	margin-bottom: 0 !important;
+
+	&::before,
+	&::after {
+		content: ' ';
+		display: table;
+	}
+
+	&::after {
+		clear: both;
+	}
+
+	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
+		&:hover,
+		&:focus {
+			position: relative;
+			z-index: 1;
+			background-color: var(--colors-white-color);
+			box-shadow: form.fakeBorderOverlay(var(--palettes-grey-600));
+		}
+
+		&:focus {
+			z-index: 4;
+			box-shadow: form.fakeBorderOverlay(var(--palettes-grey-600)), 0 0 0 4px var(--palettes-grey-50);
+		}
+	}
+
+	.radiosfield,
+	.checkboxesfield {
+		display: block;
+		margin-top: var(--components-field-framed-side-padding);
+		margin-bottom: 0;
+		padding: 0 var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
+	}
+
+	&.is-disabled,
+	&.is-readonly {
+		background-color: var(--commons-disabled-background);
+	}
+
+	&.is-loading {
+		@include loading.spinner;
+
+		&::before,
+		&::after {
+			left: auto !important;
+			bottom: auto !important;
+			right: var(--components-field-framed-side-padding) !important;
+			top: var(--components-field-framed-side-padding) !important;
+		}
+	}
+}
+
+@mixin fieldMaterialState($fieldname, $state) {
+	&:focus {
+		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
+	}
+
+	@if ($state == 'error') {
+		box-shadow: 0 2px 0 0 var(--palettes-#{$state}-700);
+	}
+
+	~ .#{$fieldname}-label {
+		color: var(--palettes-#{$state}-700);
+	}
+
+	&:focus ~ .#{$fieldname}-label {
+		color: var(--palettes-#{$state}-700);
+	}
+}
+
+@mixin fieldMaterialError($fieldname) {
+	@include fieldMaterialState($fieldname, 'error');
+}
+
+@mixin fieldMaterialFilled($fieldname) {
+	~ .#{$fieldname}-label {
+		font-size: var(--sizes-S-fontSize);
+		top: 0;
+	}
+}
+
+%isRequired {
+	color: var(--palettes-error-700);
+	display: inline-block;
+	margin-left: 0.2em;
+
+	@supports (content: '*' / '') {
+		content: '*' / '';
+	}
+
+	@supports not (content: '*' / '') {
+		content: '*';
+	}
+}

package/src/components/form/states.scss

@@ -1,24 +1,24 @@
-@use '@lucca-front/scss/src/commons/utils/form';
-@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
-@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
-@use '@lucca-front/scss/src/components/textField/exports' as textField;
-
-@mixin invalid {
-	.formLabel {
-		@include formLabel.error;
-	}
-
-	.inlineMessage {
-		@include inlineMessage.error;
-	}
-}
-
-// deprecated
-
-@mixin required {
-	&:not(:empty) {
-		&::after {
-			@include form.required;
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/form';
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/textField/exports' as textField;
+
+@mixin invalid {
+	.formLabel {
+		@include formLabel.error;
+	}
+
+	.inlineMessage {
+		@include inlineMessage.error;
+	}
+}
+
+// deprecated
+
+@mixin required {
+	&:not(:empty) {
+		&::after {
+			@include form.required;
+		}
+	}
+}

package/src/components/form/vars.scss

@@ -1,19 +1,19 @@
-@mixin vars {
-	--components-form-group-margin-bottom: 1.2rem;
-
-	--components-form-field-margin-bottom: var(--spacings-S);
-
-	--components-form-label-font-size: var(--sizes-M-fontSize);
-	--components-form-label-margin-bottom: var(--spacings-XXS);
-
-	--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: 1.125rem;
-	--components-field-framed-title-line-height: var(--sizes-M-lineHeight);
-	--components-field-framed-suffix-padding-right: var(--spacings-XL);
-}
+@mixin vars {
+	--components-form-group-margin-bottom: 1.2rem;
+
+	--components-form-field-margin-bottom: var(--spacings-S);
+
+	--components-form-label-font-size: var(--sizes-M-fontSize);
+	--components-form-label-margin-bottom: var(--spacings-XXS);
+
+	--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: 1.125rem;
+	--components-field-framed-title-line-height: var(--sizes-M-lineHeight);
+	--components-field-framed-suffix-padding-right: var(--spacings-XL);
+}

package/src/components/formLabel/component.scss

@@ -1,21 +1,21 @@
-@mixin component($atRoot: 'without: rule') {
-  color: var(--components-formLabel-color);
-  display: inline-block;
-  font-size: var(--components-formLabel-fontSize);
-  line-height: var(--components-formLabel-lineHeight);
-  width: fit-content;
-
-  .lucca-icon {
-    color: var(--palettes-grey-600);
-    font-size: var(--components-formLabel-help-fontSize);
-    line-height: var(--components-formLabel-help-lineHeight);
-    margin-left: .125rem;
-    vertical-align: top;
-  }
-
-	@at-root ($atRoot) {
-    .formLabel-required {
-      color: var(--palettes-error-700);
-    }
-  }
-}
+@mixin component($atRoot: 'without: rule') {
+  color: var(--components-formLabel-color);
+  display: inline-block;
+  font-size: var(--components-formLabel-fontSize);
+  line-height: var(--components-formLabel-lineHeight);
+  width: fit-content;
+
+  .lucca-icon {
+    color: var(--palettes-grey-600);
+    font-size: var(--components-formLabel-help-fontSize);
+    line-height: var(--components-formLabel-help-lineHeight);
+    margin-left: .125rem;
+    vertical-align: top;
+  }
+
+	@at-root ($atRoot) {
+    .formLabel-required {
+      color: var(--palettes-error-700);
+    }
+  }
+}

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

@@ -1,18 +1,18 @@
-@use 'exports' as *;
-
-.formLabel {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-XS {
-		@include XS;
-	}
-
-	&.is-error { // To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
-		@include error;
-	}
-}
+@use 'exports' as *;
+
+.formLabel {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-XS {
+		@include XS;
+	}
+
+	&.is-error { // To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
+		@include error;
+	}
+}