@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/radioField/component.scss

@@ -1,99 +1,99 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component($atRoot: 'without: rule') {
-	position: relative;
-	display: grid;
-	grid-template-columns: auto 1fr;
-	grid-column-gap: var(--spacings-XS);
-
-	@at-root ($atRoot) {
-
-		.radioField-label {
-			display: contents;
-		}
-
-		.radioField-label-input {
-		  width: var(--component-radioField-label-input-size);
-		  height: var(--component-radioField-label-input-size);
-		  border: 2px solid var(--palettes-grey-700);
-		  border-radius: 50%;
-		  position: relative;
-		  top: .125rem;
-		  color: var(--colors-white-color);
-		  transition-property: color, border-color;
-		  transition-duration: var(--commons-animations-durations-fast);
-		  margin: var(--component-radioField-label-input-margin);
-		  display: flex;
-		  align-items: center;
-		  justify-content: center;
-		  background-color: var(--colors-white-color);
-		  cursor: pointer;
-
-		  @media (prefers-reduced-motion: reduce) {
-		    transition-property: none;
-		  }
-
-		  &::after {
-		    content: '';
-		    position: absolute;
-		    inset: -2px;
-		    outline-offset: 2px;
-		    border-radius: var(--component-radioField-label-input-borderRadius);
-		  }
-		}
-
-		.radioField-label-input-icon {
-		  display: flex;
-		  align-items: center;
-		  justify-content: center;
-		  width: calc(100% - 4px);
-		  height: calc(100% - 4px);
-			opacity: 0;
-		  transform: scale(0);
-		  transition-property: transform, background-color;
-		  transition-duration: var(--commons-animations-durations-fast);
-			transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 0);
-		  border-radius: 50%;
-		  background-color: var(--palettes-primary-700);
-
-		  @media (prefers-reduced-motion: reduce) {
-		    transition-property: none;
-		  }
-		}
-
-		.radioField-input {
-		  @include a11y.mask;
-
-		  &:focus-visible {
-		    ~ .radioField-label {
-		      .radioField-label-input {
-		        &::after {
-		          @include a11y.focusVisible();
-		        }
-		      }
-		    }
-		  }
-
-		  &:hover {
-		    ~ .radioField-label {
-		      .radioField-label-input {
-		        border-color: var(--palettes-grey-600);
-		      }
-		    }
-		  }
-
-		  &:active {
-		    ~ .radioField-label {
-		      .radioField-label-input {
-		        border-color: var(--palettes-grey-800);
-		      }
-		    }
-		  }
-		}
-
-		.inlineMessage {
-			grid-column: 2;
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	position: relative;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-column-gap: var(--spacings-XS);
+
+	@at-root ($atRoot) {
+
+		.radioField-label {
+			display: contents;
+		}
+
+		.radioField-label-input {
+		  width: var(--component-radioField-label-input-size);
+		  height: var(--component-radioField-label-input-size);
+		  border: 2px solid var(--palettes-grey-700);
+		  border-radius: 50%;
+		  position: relative;
+		  top: .125rem;
+		  color: var(--colors-white-color);
+		  transition-property: color, border-color;
+		  transition-duration: var(--commons-animations-durations-fast);
+		  margin: var(--component-radioField-label-input-margin);
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+		  background-color: var(--colors-white-color);
+		  cursor: pointer;
+
+		  @media (prefers-reduced-motion: reduce) {
+		    transition-property: none;
+		  }
+
+		  &::after {
+		    content: '';
+		    position: absolute;
+		    inset: -2px;
+		    outline-offset: 2px;
+		    border-radius: var(--component-radioField-label-input-borderRadius);
+		  }
+		}
+
+		.radioField-label-input-icon {
+		  display: flex;
+		  align-items: center;
+		  justify-content: center;
+		  width: calc(100% - 4px);
+		  height: calc(100% - 4px);
+			opacity: 0;
+		  transform: scale(0);
+		  transition-property: transform, background-color;
+		  transition-duration: var(--commons-animations-durations-fast);
+			transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 0);
+		  border-radius: 50%;
+		  background-color: var(--palettes-primary-700);
+
+		  @media (prefers-reduced-motion: reduce) {
+		    transition-property: none;
+		  }
+		}
+
+		.radioField-input {
+		  @include a11y.mask;
+
+		  &:focus-visible {
+		    ~ .radioField-label {
+		      .radioField-label-input {
+		        &::after {
+		          @include a11y.focusVisible();
+		        }
+		      }
+		    }
+		  }
+
+		  &:hover {
+		    ~ .radioField-label {
+		      .radioField-label-input {
+		        border-color: var(--palettes-grey-600);
+		      }
+		    }
+		  }
+
+		  &:active {
+		    ~ .radioField-label {
+		      .radioField-label-input {
+		        border-color: var(--palettes-grey-800);
+		      }
+		    }
+		  }
+		}
+
+		.inlineMessage {
+			grid-column: 2;
+		}
+	}
+}

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

@@ -1,40 +1,40 @@
-@use 'exports' as *;
-
-.radioField {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-withArrow {
-		@include withArrow;
-
-		&.mod-S {
-			@include withArrowS;
-		}
-	}
-}
-
-.radioField-input {
-	&:checked {
-		@include checked;
-	}
-
-	&:disabled {
-		@include disabled;
-
-		&:checked {
-			@include checkedDisabled;
-		}
-	}
-
-	&[aria-invalid='true'] {
-		@include invalid;
-
-		&:checked {
-			@include checkedInvalid;
-		}
-	}
-}
+@use 'exports' as *;
+
+.radioField {
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-withArrow {
+		@include withArrow;
+
+		&.mod-S {
+			@include withArrowS;
+		}
+	}
+}
+
+.radioField-input {
+	&:checked {
+		@include checked;
+	}
+
+	&:disabled {
+		@include disabled;
+
+		&:checked {
+			@include checkedDisabled;
+		}
+	}
+
+	&[aria-invalid='true'] {
+		@include invalid;
+
+		&:checked {
+			@include checkedInvalid;
+		}
+	}
+}

package/src/components/radioField/mods.scss

@@ -1,41 +1,41 @@
-@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/box/exports' as box;
-
-@mixin S {
-	--component-radioField-label-input-size: 1rem;
-	--component-radioField-label-input-borderRadius: var(--commons-borderRadius-M);
-	--component-radioField-label-input-icon-fontSize: var(--sizes-XS-lineHeight);
-	--component-radioField-label-fontSize: var(--sizes-S-fontSize);
-	--component-radioField-label-lineHeight: var(--sizes-S-lineHeight);
-
-	.formLabel {
-		@include formLabel.S;
-	}
-
-	.inlineMessage {
-		@include inlineMessage.S;
-	}
-}
-
-@mixin withArrow {
-	padding-bottom: var(--spacings-S);
-
-	.radioField-arrow {
-		@include box.arrow;
-	}
-
-	.radioField-input:not(:checked) {
-		~ .radioField-arrow {
-			display: none;
-		}
-	}
-}
-
-@mixin withArrowS {
-	padding-bottom: var(--spacings-XS);
-
-	.radioField-arrow {
-		@include box.arrowS;
-	}
-}
+@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/box/exports' as box;
+
+@mixin S {
+	--component-radioField-label-input-size: 1rem;
+	--component-radioField-label-input-borderRadius: var(--commons-borderRadius-M);
+	--component-radioField-label-input-icon-fontSize: var(--sizes-XS-lineHeight);
+	--component-radioField-label-fontSize: var(--sizes-S-fontSize);
+	--component-radioField-label-lineHeight: var(--sizes-S-lineHeight);
+
+	.formLabel {
+		@include formLabel.S;
+	}
+
+	.inlineMessage {
+		@include inlineMessage.S;
+	}
+}
+
+@mixin withArrow {
+	padding-bottom: var(--spacings-S);
+
+	.radioField-arrow {
+		@include box.arrow;
+	}
+
+	.radioField-input:not(:checked) {
+		~ .radioField-arrow {
+			display: none;
+		}
+	}
+}
+
+@mixin withArrowS {
+	padding-bottom: var(--spacings-XS);
+
+	.radioField-arrow {
+		@include box.arrowS;
+	}
+}

package/src/components/radioField/states.scss

@@ -1,122 +1,122 @@
-@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
-@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
-
-@mixin checked {
-  ~ .radioField-label {
-    .radioField-label-input {
-      border-color: var(--palettes-primary-700);
-    }
-
-    .radioField-label-input-icon {
-      transform: scale(1);
-      opacity: 1;
-      transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
-    }
-  }
-
-  &:hover {
-    ~ .radioField-label {
-      .radioField-label-input {
-        border-color: var(--palettes-primary-600);
-      }
-
-      .radioField-label-input-icon {
-        background-color: var(--palettes-primary-600);
-      }
-    }
-  }
-
-  &:active {
-    ~ .radioField-label {
-      .radioField-label-input {
-        border-color: var(--palettes-primary-800);
-      }
-
-      .radioField-label-input-icon {
-        background-color: var(--palettes-primary-800);
-      }
-    }
-  }
-}
-
-@mixin disabled {
-  ~ .radioField-label {
-    color: var(--palettes-grey-500);
-
-    .formLabel {
-			@include formLabel.disabled;
-		}
-  }
-
-  ~ .radioField-label {
-    .radioField-label-input {
-      border-color: var(--palettes-grey-500);
-    }
-
-    .radioField-label-input,
-    .formLabel {
-      cursor: default;
-    }
-  }
-
-  ~ .inlineMessage {
-    @include inlineMessage.disabled;
-  }
-}
-
-@mixin checkedDisabled {
-  ~ .radioField-label {
-    .radioField-label-input {
-      border-color: var(--palettes-grey-500);
-      color: var(--palettes-grey-500);
-    }
-
-    .radioField-label-input-icon {
-      background-color: var(--palettes-grey-500);
-    }
-  }
-}
-
-@mixin invalid {
-  ~ .radioField-label {
-    .radioField-label-input {
-      border-color: var(--palettes-error-700) !important;
-    }
-
-    .formLabel {
-      @include formLabel.error;
-    }
-  }
-
-  &:hover {
-    ~ .radioField-label {
-      .radioField-label-input {
-        border-color: var(--palettes-error-600);
-      }
-
-      .radioField-label-input-icon {
-        background-color: var(--palettes-error-600);
-      }
-    }
-  }
-
-  &:active {
-    ~ .radioField-label {
-      .radioField-label-input {
-        border-color: var(--palettes-error-800);
-      }
-
-      .radioField-label-input-icon {
-        background-color: var(--palettes-error-800);
-      }
-    }
-  }
-}
-
-@mixin checkedInvalid {
-  ~ .radioField-label {
-    .radioField-label-input-icon {
-      background-color: var(--palettes-error-700);
-    }
-  }
-}
+@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+
+@mixin checked {
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-primary-700);
+    }
+
+    .radioField-label-input-icon {
+      transform: scale(1);
+      opacity: 1;
+      transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
+    }
+  }
+
+  &:hover {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-primary-600);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-primary-600);
+      }
+    }
+  }
+
+  &:active {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-primary-800);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-primary-800);
+      }
+    }
+  }
+}
+
+@mixin disabled {
+  ~ .radioField-label {
+    color: var(--palettes-grey-500);
+
+    .formLabel {
+			@include formLabel.disabled;
+		}
+  }
+
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-grey-500);
+    }
+
+    .radioField-label-input,
+    .formLabel {
+      cursor: default;
+    }
+  }
+
+  ~ .inlineMessage {
+    @include inlineMessage.disabled;
+  }
+}
+
+@mixin checkedDisabled {
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-grey-500);
+      color: var(--palettes-grey-500);
+    }
+
+    .radioField-label-input-icon {
+      background-color: var(--palettes-grey-500);
+    }
+  }
+}
+
+@mixin invalid {
+  ~ .radioField-label {
+    .radioField-label-input {
+      border-color: var(--palettes-error-700) !important;
+    }
+
+    .formLabel {
+      @include formLabel.error;
+    }
+  }
+
+  &:hover {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-error-600);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-error-600);
+      }
+    }
+  }
+
+  &:active {
+    ~ .radioField-label {
+      .radioField-label-input {
+        border-color: var(--palettes-error-800);
+      }
+
+      .radioField-label-input-icon {
+        background-color: var(--palettes-error-800);
+      }
+    }
+  }
+}
+
+@mixin checkedInvalid {
+  ~ .radioField-label {
+    .radioField-label-input-icon {
+      background-color: var(--palettes-error-700);
+    }
+  }
+}

package/src/components/radioField/vars.scss

@@ -1,7 +1,7 @@
-@mixin vars {
-  --component-radioField-label-input-size: 1.25rem;
-  --component-radioField-label-input-borderRadius: 6px;
-  --component-radioField-label-input-icon-fontSize: var(--sizes-S-lineHeight);
-  --component-radioField-label-fontSize: var(--sizes-M-fontSize);
-  --component-radioField-label-lineHeight: var(--sizes-M-lineHeight);
-}
+@mixin vars {
+  --component-radioField-label-input-size: 1.25rem;
+  --component-radioField-label-input-borderRadius: 6px;
+  --component-radioField-label-input-icon-fontSize: var(--sizes-S-lineHeight);
+  --component-radioField-label-fontSize: var(--sizes-M-fontSize);
+  --component-radioField-label-lineHeight: var(--sizes-M-lineHeight);
+}

package/src/components/section/component.scss

@@ -1,5 +1,5 @@
-@mixin component {
-	background-color: var(--colors-white-color);
-	border-bottom: 1px solid #e5e5e5;
-	padding: var(--spacings-XL);
-}
+@mixin component {
+	background-color: var(--colors-white-color);
+	border-bottom: 1px solid #e5e5e5;
+	padding: var(--spacings-XL);
+}

package/src/components/section/exports.scss

@@ -1,4 +1,4 @@
-@forward 'vars';
-@forward 'mods';
-@forward 'states';
-@forward 'component';
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';