@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/status/component.scss

@@ -1,47 +1,47 @@
-@mixin component($atRoot: 'without: rule') {
-	display: inline-flex;
-	align-items: center;
-	white-space: nowrap;
-
-	@at-root ($atRoot) {
-		.status-dot {
-			aspect-ratio: 1;
-			width: var(--spacings-XS);
-			border-radius: 50%;
-			background-color: currentColor;
-			margin: calc(var(--spacings-XXS) / 2);
-			margin-right: var(--spacings-XS);
-			position: relative;
-			z-index: 1;
-			display: inline-flex;
-		}
-
-		.status-dot-important {
-			@keyframes status {
-				0% {
-					transform: scale(1);
-					opacity: 1;
-				}
-				70% {
-					transform: scale(2.25);
-					opacity: 0;
-				}
-				100% {
-					transform: scale(2.25);
-					opacity: 0;
-				}
-			}
-
-			inset: 0;
-			position: absolute;
-			border-radius: 50%;
-			animation: status 2s infinite;
-			background-color: currentColor;
-		}
-
-		.status-label {
-			font-size: var(--sizes-S-fontSize);
-			color: var(--palettes-grey-800);
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	display: inline-flex;
+	align-items: center;
+	white-space: nowrap;
+
+	@at-root ($atRoot) {
+		.status-dot {
+			aspect-ratio: 1;
+			width: var(--spacings-XS);
+			border-radius: 50%;
+			background-color: currentColor;
+			margin: calc(var(--spacings-XXS) / 2);
+			margin-right: var(--spacings-XS);
+			position: relative;
+			z-index: 1;
+			display: inline-flex;
+		}
+
+		.status-dot-important {
+			@keyframes status {
+				0% {
+					transform: scale(1);
+					opacity: 1;
+				}
+				70% {
+					transform: scale(2.25);
+					opacity: 0;
+				}
+				100% {
+					transform: scale(2.25);
+					opacity: 0;
+				}
+			}
+
+			inset: 0;
+			position: absolute;
+			border-radius: 50%;
+			animation: status 2s infinite;
+			background-color: currentColor;
+		}
+
+		.status-label {
+			font-size: var(--sizes-S-fontSize);
+			color: var(--palettes-grey-800);
+		}
+	}
+}

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

@@ -1,18 +1,18 @@
-@use 'exports' as *;
-
-.status {
-	@include vars;
-	@include component;
-
-	&:is(.success, .is-success) {
-		@include success;
-	}
-
-	&:is(.warning, .is-warning) {
-		@include warning;
-	}
-
-	&:is(.error, .is-error) {
-		@include error;
-	}
-}
+@use 'exports' as *;
+
+.status {
+	@include vars;
+	@include component;
+
+	&:is(.success, .is-success) {
+		@include success;
+	}
+
+	&:is(.warning, .is-warning) {
+		@include warning;
+	}
+
+	&:is(.error, .is-error) {
+		@include error;
+	}
+}

package/src/components/status/states.scss

@@ -1,17 +1,17 @@
-@mixin success {
-	.status-dot {
-		color: var(--palettes-success-700);
-	}
-}
-
-@mixin error {
-	.status-dot {
-		color: var(--palettes-error-700);
-	}
-}
-
-@mixin warning {
-	.status-dot {
-		color: var(--palettes-warning-700);
-	}
-}
+@mixin success {
+	.status-dot {
+		color: var(--palettes-success-700);
+	}
+}
+
+@mixin error {
+	.status-dot {
+		color: var(--palettes-error-700);
+	}
+}
+
+@mixin warning {
+	.status-dot {
+		color: var(--palettes-warning-700);
+	}
+}

package/src/components/status/vars.scss

@@ -1,2 +1,2 @@
-@mixin vars {
-}
+@mixin vars {
+}

package/src/components/statusBadge/component.scss

@@ -1,27 +1,27 @@
-@mixin component($atRoot: 'without: rule') {
-	align-items: flex-start;
-	background-color: var(--palettes-100, var(--palettes-primary-100));
-	border-radius: var(--commons-borderRadius-L);
-	display: inline-flex;
-	font-size: var(--components-statusBadge-fontSize);
-	gap: var(--spacings-XXS);
-	line-height: var(--components-statusBadge-lineHeight);
-	padding: calc(var(--spacings-XXS) / 2) var(--spacings-XS) calc(var(--spacings-XXS) / 2) .375rem;
-	white-space: nowrap;
-	font-weight: normal;
-
-	&::before {
-		background-color: var(--palettes-700, var(--palettes-primary-700));
-		border-radius: 50%;
-		content: '';
-		display: block;
-		height: var(--components-statusBadge-dot-size);
-		flex-shrink: 0;
-		width: var(--components-statusBadge-dot-size);
-		top: var(--components-statusBadge-dot-top);
-		position: relative;
-	}
-
-	@at-root ($atRoot) {
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	align-items: flex-start;
+	background-color: var(--palettes-100, var(--palettes-primary-100));
+	border-radius: var(--commons-borderRadius-L);
+	display: inline-flex;
+	font-size: var(--components-statusBadge-fontSize);
+	gap: var(--spacings-XXS);
+	line-height: var(--components-statusBadge-lineHeight);
+	padding: calc(var(--spacings-XXS) / 2) var(--spacings-XS) calc(var(--spacings-XXS) / 2) .375rem;
+	white-space: nowrap;
+	font-weight: normal;
+
+	&::before {
+		background-color: var(--palettes-700, var(--palettes-primary-700));
+		border-radius: 50%;
+		content: '';
+		display: block;
+		height: var(--components-statusBadge-dot-size);
+		flex-shrink: 0;
+		width: var(--components-statusBadge-dot-size);
+		top: var(--components-statusBadge-dot-top);
+		position: relative;
+	}
+
+	@at-root ($atRoot) {
+	}
+}

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

@@ -1,10 +1,10 @@
-@use 'exports' as *;
-
-.statusBadge {
-	@include vars;
-	@include component;
-
-	&.mod-L {
-		@include l;
-	}
-}
+@use 'exports' as *;
+
+.statusBadge {
+	@include vars;
+	@include component;
+
+	&.mod-L {
+		@include l;
+	}
+}

package/src/components/statusBadge/mods.scss

@@ -1,6 +1,6 @@
-@mixin l {
-  --components-statusBadge-fontSize: var(--sizes-M-fontSize);
-  --components-statusBadge-lineHeight: var(--sizes-S-lineHeight);
-  --components-statusBadge-dot-size: .625rem;
-  --components-statusBadge-dot-top: .325rem;
-}
+@mixin l {
+  --components-statusBadge-fontSize: var(--sizes-M-fontSize);
+  --components-statusBadge-lineHeight: var(--sizes-S-lineHeight);
+  --components-statusBadge-dot-size: .625rem;
+  --components-statusBadge-dot-top: .325rem;
+}

package/src/components/statusBadge/vars.scss

@@ -1,6 +1,6 @@
-@mixin vars {
-  --components-statusBadge-fontSize: var(--sizes-S-fontSize);
-  --components-statusBadge-lineHeight: var(--sizes-XS-lineHeight);
-  --components-statusBadge-dot-size: .5rem;
-  --components-statusBadge-dot-top: var(--spacings-XXS);
-}
+@mixin vars {
+  --components-statusBadge-fontSize: var(--sizes-S-fontSize);
+  --components-statusBadge-lineHeight: var(--sizes-XS-lineHeight);
+  --components-statusBadge-dot-size: .5rem;
+  --components-statusBadge-dot-top: var(--spacings-XXS);
+}

package/src/components/switch/component.scss

@@ -1,67 +1,67 @@
-@use '@lucca-front/scss/src/commons/utils/a11y';
-@use '@lucca-front/icons/src/commons/utils/icon';
-
-@mixin component($atRoot: 'without: rule') {
-	display: block;
-	position: relative;
-	line-height: var(--components-switch-lineHeight);
-
-	@at-root ($atRoot) {
-		.switch-input {
-			@include a11y.mask;
-		}
-
-		.switch-label {
-			padding: 0;
-			padding-left: calc(var(--components-switch-width) + var(--spacings-XS));
-			color: var(--palettes-grey-800);
-			transition: color var(--commons-animations-durations-fast);
-			display: inline-block;
-			font-size: var(--components-switch-fontSize);
-			position: relative;
-			vertical-align: top;
-			cursor: pointer;
-
-			&::before {
-				@include icon.generate('sign_close');
-
-				align-items: center;
-				background-color: var(--palettes-grey-500);
-				border-radius: 9999px;
-				color: var(--colors-white-color);
-				display: flex;
-				font-size: var(--components-switch-icon-size);
-				height: var(--components-switch-height);
-				left: 0;
-				line-height: var(--components-switch-icon-size);
-				padding-left: calc(var(--components-switch-handler-offset) + var(--components-switch-slider-size));
-				position: absolute;
-				top: var(--components-switch-offset-top);
-				transition-duration: var(--commons-animations-durations-fast);
-				transition-timing-function: ease;
-				transition-property: background-color, box-shadow;
-				width: var(--components-switch-width);
-			}
-
-			&::after {
-				background-color: var(--colors-white-color);
-				box-shadow: var(--commons-boxShadow-XXS);
-				border-radius: 50%;
-				content: '';
-				display: block;
-				height: var(--components-switch-slider-size);
-				left: var(--components-switch-handler-offset);
-				position: absolute;
-				top: calc(var(--components-switch-offset-top) + var(--components-switch-handler-offset));
-				transition: all var(--commons-animations-durations-fast) ease;
-				width: var(--components-switch-slider-size);
-			}
-		}
-
-		.switch-label-helper {
-			color: var(--palettes-grey-600);
-			font-size: var(--components-switch-helper-fontSize);
-			line-height: var(--components-switch-helper-lineHeight);
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/icons/src/commons/utils/icon';
+
+@mixin component($atRoot: 'without: rule') {
+	display: block;
+	position: relative;
+	line-height: var(--components-switch-lineHeight);
+
+	@at-root ($atRoot) {
+		.switch-input {
+			@include a11y.mask;
+		}
+
+		.switch-label {
+			padding: 0;
+			padding-left: calc(var(--components-switch-width) + var(--spacings-XS));
+			color: var(--palettes-grey-800);
+			transition: color var(--commons-animations-durations-fast);
+			display: inline-block;
+			font-size: var(--components-switch-fontSize);
+			position: relative;
+			vertical-align: top;
+			cursor: pointer;
+
+			&::before {
+				@include icon.generate('sign_close');
+
+				align-items: center;
+				background-color: var(--palettes-grey-500);
+				border-radius: 9999px;
+				color: var(--colors-white-color);
+				display: flex;
+				font-size: var(--components-switch-icon-size);
+				height: var(--components-switch-height);
+				left: 0;
+				line-height: var(--components-switch-icon-size);
+				padding-left: calc(var(--components-switch-handler-offset) + var(--components-switch-slider-size));
+				position: absolute;
+				top: var(--components-switch-offset-top);
+				transition-duration: var(--commons-animations-durations-fast);
+				transition-timing-function: ease;
+				transition-property: background-color, box-shadow;
+				width: var(--components-switch-width);
+			}
+
+			&::after {
+				background-color: var(--colors-white-color);
+				box-shadow: var(--commons-boxShadow-XXS);
+				border-radius: 50%;
+				content: '';
+				display: block;
+				height: var(--components-switch-slider-size);
+				left: var(--components-switch-handler-offset);
+				position: absolute;
+				top: calc(var(--components-switch-offset-top) + var(--components-switch-handler-offset));
+				transition: all var(--commons-animations-durations-fast) ease;
+				width: var(--components-switch-slider-size);
+			}
+		}
+
+		.switch-label-helper {
+			color: var(--palettes-grey-600);
+			font-size: var(--components-switch-helper-fontSize);
+			line-height: var(--components-switch-helper-lineHeight);
+		}
+	}
+}

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

@@ -1,48 +1,48 @@
-@use 'exports' as *;
-
-.switch {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
-	}
-
-	&.mod-S {
-		@include S;
-	}
-}
-
-.switch-input {
-	&:is(:checked) {
-		@include checked;
-
-		&:hover {
-			@include checkedHover;
-		}
-
-		&:active {
-			@include checkedActive;
-		}
-	}
-
-	&:is(:hover) {
-		@include hover;
-	}
-
-	&:is(:focus-visible) {
-		@include focus;
-	}
-
-	&:is(:active) {
-		@include active;
-	}
-
-	&:is([disabled], [readonly]) {
-		@include disabled;
-
-		&:is(:checked) {
-			@include disabledChecked;
-		}
-	}
-}
+@use 'exports' as *;
+
+.switch {
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
+	}
+
+	&.mod-S {
+		@include S;
+	}
+}
+
+.switch-input {
+	&:is(:checked) {
+		@include checked;
+
+		&:hover {
+			@include checkedHover;
+		}
+
+		&:active {
+			@include checkedActive;
+		}
+	}
+
+	&:is(:hover) {
+		@include hover;
+	}
+
+	&:is(:focus-visible) {
+		@include focus;
+	}
+
+	&:is(:active) {
+		@include active;
+	}
+
+	&:is([disabled], [readonly]) {
+		@include disabled;
+
+		&:is(:checked) {
+			@include disabledChecked;
+		}
+	}
+}

package/src/components/switch/mods.scss

@@ -1,15 +1,15 @@
-@mixin inline {
-	display: inline-block;
-	margin-right: var(--spacings-M);
-}
-
-@mixin S {
-	--components-switch-height: 1rem;
-	--components-switch-width: 1.75rem;
-	--components-switch-slider-size: .75rem;
-	--components-switch-icon-size: .75rem;
-	--components-switch-lineHeight: var(--sizes-S-lineHeight);
-	--components-switch-fontSize: var(--sizes-S-fontSize);
-	--components-switch-helper-lineHeight: var(--sizes-XS-lineHeight);
-	--components-switch-helper-fontSize: var(--sizes-XS-fontSize);
-}
+@mixin inline {
+	display: inline-block;
+	margin-right: var(--spacings-M);
+}
+
+@mixin S {
+	--components-switch-height: 1rem;
+	--components-switch-width: 1.75rem;
+	--components-switch-slider-size: .75rem;
+	--components-switch-icon-size: .75rem;
+	--components-switch-lineHeight: var(--sizes-S-lineHeight);
+	--components-switch-fontSize: var(--sizes-S-fontSize);
+	--components-switch-helper-lineHeight: var(--sizes-XS-lineHeight);
+	--components-switch-helper-fontSize: var(--sizes-XS-fontSize);
+}