@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/switch/states.scss

@@ -1,91 +1,91 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin checked {
-	~ .switch-label {
-		&::before {
-			@include icon.generate('sign_confirm');
-
-			display: flex;
-			background-color: var(--palettes-700, var(--palettes-primary-700));
-			padding-left: var(--components-switch-handler-offset);
-		}
-
-		&::after {
-			left: calc(var(--components-switch-width) - var(--components-switch-slider-size) - var(--components-switch-handler-offset));
-		}
-	}
-}
-
-@mixin checkedHover {
-	&:not([disabled], [readonly]) {
-		~ .switch-label {
-			&::before {
-				background-color: var(--palettes-600, var(--palettes-primary-600));
-			}
-		}
-	}
-}
-
-@mixin checkedActive {
-	&:not([disabled], [readonly]) {
-		~ .switch-label {
-			&::before {
-				background-color: var(--palettes-800, var(--palettes-primary-800));
-			}
-		}
-	}
-}
-
-@mixin hover {
-	~ .switch-label {
-		&::before {
-			background-color: var(--palettes-grey-400);
-		}
-	}
-}
-
-@mixin active {
-	&:not([disabled], [readonly]) {
-		~ .switch-label {
-			&::before {
-				background-color: var(--palettes-grey-600);
-			}
-		}
-	}
-}
-
-@mixin focus {
-	&:not([disabled], [readonly]) {
-		~ .switch-label {
-			&::before {
-				@include a11y.focusVisible;
-			}
-		}
-	}
-}
-
-@mixin disabled {
-	~ .switch-label {
-		color: var(--palettes-grey-500);
-		cursor: default;
-
-		&::before {
-			background-color: var(--palettes-grey-100);
-			color: var(--palettes-grey-500);
-		}
-
-		&::after {
-			background-color: var(--palettes-grey-500);
-			box-shadow: none;
-		}
-	}
-}
-
-@mixin disabledChecked {
-	~ .switch-label {
-		&::before {
-			background-color: var(--palettes-grey-100);
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin checked {
+	~ .switch-label {
+		&::before {
+			@include icon.generate('sign_confirm');
+
+			display: flex;
+			background-color: var(--palettes-700, var(--palettes-primary-700));
+			padding-left: var(--components-switch-handler-offset);
+		}
+
+		&::after {
+			left: calc(var(--components-switch-width) - var(--components-switch-slider-size) - var(--components-switch-handler-offset));
+		}
+	}
+}
+
+@mixin checkedHover {
+	&:not([disabled], [readonly]) {
+		~ .switch-label {
+			&::before {
+				background-color: var(--palettes-600, var(--palettes-primary-600));
+			}
+		}
+	}
+}
+
+@mixin checkedActive {
+	&:not([disabled], [readonly]) {
+		~ .switch-label {
+			&::before {
+				background-color: var(--palettes-800, var(--palettes-primary-800));
+			}
+		}
+	}
+}
+
+@mixin hover {
+	~ .switch-label {
+		&::before {
+			background-color: var(--palettes-grey-400);
+		}
+	}
+}
+
+@mixin active {
+	&:not([disabled], [readonly]) {
+		~ .switch-label {
+			&::before {
+				background-color: var(--palettes-grey-600);
+			}
+		}
+	}
+}
+
+@mixin focus {
+	&:not([disabled], [readonly]) {
+		~ .switch-label {
+			&::before {
+				@include a11y.focusVisible;
+			}
+		}
+	}
+}
+
+@mixin disabled {
+	~ .switch-label {
+		color: var(--palettes-grey-500);
+		cursor: default;
+
+		&::before {
+			background-color: var(--palettes-grey-100);
+			color: var(--palettes-grey-500);
+		}
+
+		&::after {
+			background-color: var(--palettes-grey-500);
+			box-shadow: none;
+		}
+	}
+}
+
+@mixin disabledChecked {
+	~ .switch-label {
+		&::before {
+			background-color: var(--palettes-grey-100);
+		}
+	}
+}

package/src/components/switch/vars.scss

@@ -1,12 +1,12 @@
-@mixin vars {
-	--components-switch-offset-top: 2px;
-	--components-switch-handler-offset: 2px;
-	--components-switch-height: 1.25rem;
-	--components-switch-width: 2.25rem;
-	--components-switch-slider-size: 1rem;
-	--components-switch-icon-size: var(--sizes-XS-lineHeight);
-	--components-switch-lineHeight: var(--sizes-M-lineHeight);
-	--components-switch-fontSize: var(--sizes-M-fontSize);
-	--components-switch-helper-lineHeight: var(--sizes-S-lineHeight);
-	--components-switch-helper-fontSize: var(--sizes-S-fontSize);
-}
+@mixin vars {
+	--components-switch-offset-top: 2px;
+	--components-switch-handler-offset: 2px;
+	--components-switch-height: 1.25rem;
+	--components-switch-width: 2.25rem;
+	--components-switch-slider-size: 1rem;
+	--components-switch-icon-size: var(--sizes-XS-lineHeight);
+	--components-switch-lineHeight: var(--sizes-M-lineHeight);
+	--components-switch-fontSize: var(--sizes-M-fontSize);
+	--components-switch-helper-lineHeight: var(--sizes-S-lineHeight);
+	--components-switch-helper-fontSize: var(--sizes-S-fontSize);
+}

package/src/components/switchField/component.scss

@@ -1,95 +1,95 @@
-@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
-@use '@lucca-front/scss/src/components/box/exports' as box;
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component($atRoot: 'without: rule') {
-	position: relative;
-
-	@at-root ($atRoot) {
-		.switchField-icon {
-			display: block;
-			width: var(--component-switchField-label-input-width);
-			height: var(--component-switchField-label-input-height);
-			border: 2px solid var(--palettes-grey-500);
-			border-radius: var(--component-switchField-label-input-height);
-			position: relative;
-			top: 0.125rem;
-			color: var(--colors-white-color);
-			transition-property: color, border-color, background-color;
-			transition-duration: var(--commons-animations-durations-fast);
-			background-color: var(--palettes-grey-500);
-			cursor: pointer;
-
-			&::after {
-				content: '';
-				position: absolute;
-				inset: -2px;
-				outline-offset: 2px;
-				border-radius: var(--component-switchField-label-input-height);
-			}
-
-			&::before {
-				content: '';
-				position: absolute;
-				width: 50%;
-				aspect-ratio: 1;
-				background-color: var(--colors-white-color);
-				border-radius: 50%;
-				left: 0;
-				top: 0;
-				transition-property: left;
-				transition-duration: var(--commons-animations-durations-fast);
-				transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
-				box-shadow: var(--commons-boxShadow-XS);
-			}
-		}
-
-		.switchField-icon-check {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			height: 100%;
-
-			&::before {
-				@include icon.generate('confirm');
-				font-size: var(--component-switchField-label-input-icon-fontSize);
-			}
-
-			&::after {
-				@include icon.generate('cross');
-				font-size: var(--component-switchField-label-input-icon-fontSize);
-			}
-		}
-
-		.switchField-input {
-			position: absolute;
-			z-index: 1;
-			width: var(--component-switchField-label-input-width);
-			height: var(--component-switchField-label-input-height);
-			opacity: 0;
-			cursor: pointer;
-
-			&:hover {
-				~ .switchField-icon {
-					border-color: var(--palettes-grey-400);
-					background-color: var(--palettes-grey-400);
-				}
-			}
-
-			&:active {
-				~ .switchField-icon {
-					border-color: var(--palettes-grey-600);
-					background-color: var(--palettes-grey-600);
-				}
-			}
-
-			&:focus-visible {
-				~ .switchField-icon {
-					@include a11y.focusVisible();
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
+@use '@lucca-front/scss/src/components/box/exports' as box;
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	position: relative;
+
+	@at-root ($atRoot) {
+		.switchField-icon {
+			display: block;
+			width: var(--component-switchField-label-input-width);
+			height: var(--component-switchField-label-input-height);
+			border: 2px solid var(--palettes-grey-500);
+			border-radius: var(--component-switchField-label-input-height);
+			position: relative;
+			top: 0.125rem;
+			color: var(--colors-white-color);
+			transition-property: color, border-color, background-color;
+			transition-duration: var(--commons-animations-durations-fast);
+			background-color: var(--palettes-grey-500);
+			cursor: pointer;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: -2px;
+				outline-offset: 2px;
+				border-radius: var(--component-switchField-label-input-height);
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				width: 50%;
+				aspect-ratio: 1;
+				background-color: var(--colors-white-color);
+				border-radius: 50%;
+				left: 0;
+				top: 0;
+				transition-property: left;
+				transition-duration: var(--commons-animations-durations-fast);
+				transition-timing-function: cubic-bezier(0.5, 1, 0.5, 1.5);
+				box-shadow: var(--commons-boxShadow-XS);
+			}
+		}
+
+		.switchField-icon-check {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+
+			&::before {
+				@include icon.generate('confirm');
+				font-size: var(--component-switchField-label-input-icon-fontSize);
+			}
+
+			&::after {
+				@include icon.generate('cross');
+				font-size: var(--component-switchField-label-input-icon-fontSize);
+			}
+		}
+
+		.switchField-input {
+			position: absolute;
+			z-index: 1;
+			width: var(--component-switchField-label-input-width);
+			height: var(--component-switchField-label-input-height);
+			opacity: 0;
+			cursor: pointer;
+
+			&:hover {
+				~ .switchField-icon {
+					border-color: var(--palettes-grey-400);
+					background-color: var(--palettes-grey-400);
+				}
+			}
+
+			&:active {
+				~ .switchField-icon {
+					border-color: var(--palettes-grey-600);
+					background-color: var(--palettes-grey-600);
+				}
+			}
+
+			&:focus-visible {
+				~ .switchField-icon {
+					@include a11y.focusVisible();
+				}
+			}
+		}
+	}
+}

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

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

package/src/components/switchField/mods.scss

@@ -1,35 +1,11 @@
-@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-switchField-label-input-height: 1rem;
-	--component-switchField-label-input-width: 1.75rem;
-	--component-switchField-label-input-icon-fontSize: 0.75rem;
-	--component-switchField-label-fontSize: var(--sizes-S-fontSize);
-	--component-switchField-label-lineHeight: var(--sizes-S-lineHeight);
-}
-
-@mixin withArrow {
-	padding-bottom: var(--spacings-S);
-
-	.switchField-arrow {
-		@include box.arrow;
-		@include box.arrowSwitch;
-	}
-
-	.switchField-input:not(:checked) {
-		~ .switchField-arrow {
-			display: none;
-		}
-	}
-}
-
-@mixin withArrowS {
-	padding-bottom: var(--spacings-XS);
-
-	.switchField-arrow {
-		@include box.arrowS;
-		@include box.arrowSwitchS;
-	}
-}
+@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-switchField-label-input-height: 1rem;
+	--component-switchField-label-input-width: 1.75rem;
+	--component-switchField-label-input-icon-fontSize: 0.75rem;
+	--component-switchField-label-fontSize: var(--sizes-S-fontSize);
+	--component-switchField-label-lineHeight: var(--sizes-S-lineHeight);
+}

package/src/components/switchField/states.scss

@@ -1,80 +1,80 @@
-@mixin checked {
-	~ .switchField-icon {
-		background-color: var(--palettes-primary-700);
-		border-color: var(--palettes-primary-700);
-
-		&::before {
-			left: 50%;
-		}
-	}
-
-	&:hover {
-		~ .switchField-icon {
-			background-color: var(--palettes-primary-600);
-			border-color: var(--palettes-primary-600);
-		}
-	}
-
-	&:active {
-		~ .switchField-icon {
-			background-color: var(--palettes-primary-800);
-			border-color: var(--palettes-primary-800);
-		}
-	}
-}
-
-@mixin disabled {
-	~ .switchField-icon {
-		background-color: var(--palettes-grey-100);
-		border-color: var(--palettes-grey-100);
-		color: var(--palettes-grey-500);
-
-		&::before {
-			background-color: var(--palettes-grey-500);
-		}
-	}
-}
-
-@mixin checkedDisabled {
-	&:disabled {
-		~ .switchField-icon {
-			background-color: var(--palettes-grey-100);
-			border-color: var(--palettes-grey-100);
-			color: var(--palettes-grey-500);
-
-			&::before {
-				background-color: var(--palettes-grey-500);
-			}
-		}
-	}
-}
-
-@mixin invalid {
-	~ .switchField-icon {
-		background-color: var(--palettes-error-700);
-		border-color: var(--palettes-error-700);
-	}
-
-	&:hover {
-		~ .switchField-icon {
-			background-color: var(--palettes-error-600);
-			border-color: var(--palettes-error-600);
-		}
-	}
-
-	&:active {
-		~ .switchField-icon {
-			background-color: var(--palettes-error-800);
-			border-color: var(--palettes-error-800);
-		}
-	}
-}
-
-@mixin checkedInvalid {
-	&:checked {
-		~ .switchField-icon {
-			background-color: var(--palettes-error-700);
-			border-color: var(--palettes-error-700);
-		}
-	}
-}
+@mixin checked {
+	~ .switchField-icon {
+		background-color: var(--palettes-primary-700);
+		border-color: var(--palettes-primary-700);
+
+		&::before {
+			left: 50%;
+		}
+	}
+
+	&:hover {
+		~ .switchField-icon {
+			background-color: var(--palettes-primary-600);
+			border-color: var(--palettes-primary-600);
+		}
+	}
+
+	&:active {
+		~ .switchField-icon {
+			background-color: var(--palettes-primary-800);
+			border-color: var(--palettes-primary-800);
+		}
+	}
+}
+
+@mixin disabled {
+	~ .switchField-icon {
+		background-color: var(--palettes-grey-100);
+		border-color: var(--palettes-grey-100);
+		color: var(--palettes-grey-500);
+
+		&::before {
+			background-color: var(--palettes-grey-500);
+		}
+	}
+}
+
+@mixin checkedDisabled {
+	&:disabled {
+		~ .switchField-icon {
+			background-color: var(--palettes-grey-100);
+			border-color: var(--palettes-grey-100);
+			color: var(--palettes-grey-500);
+
+			&::before {
+				background-color: var(--palettes-grey-500);
+			}
+		}
+	}
+}
+
+@mixin invalid {
+	~ .switchField-icon {
+		background-color: var(--palettes-error-700);
+		border-color: var(--palettes-error-700);
+	}
+
+	&:hover {
+		~ .switchField-icon {
+			background-color: var(--palettes-error-600);
+			border-color: var(--palettes-error-600);
+		}
+	}
+
+	&:active {
+		~ .switchField-icon {
+			background-color: var(--palettes-error-800);
+			border-color: var(--palettes-error-800);
+		}
+	}
+}
+
+@mixin checkedInvalid {
+	&:checked {
+		~ .switchField-icon {
+			background-color: var(--palettes-error-700);
+			border-color: var(--palettes-error-700);
+		}
+	}
+}