@lucca-front/scss 16.4.2 → 16.4.3

package/src/components/callout/mods.scss

@@ -1,21 +1,21 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-
-@mixin S {
-	font-size: var(--sizes-S-fontSize);
-	line-height: var(--sizes-S-lineHeight);
-	gap: .75rem;
-
-	.callout-icon {
-		line-height: var(--sizes-S-lineHeight);
-
-		.lucca-icon {
-			font-size: var(--sizes-S-lineHeight);
-		}
-	}
-}
-
-@mixin tiny {
-	display: inline-flex;
-	gap: .375rem;
-	padding: var(--spacings-XS);
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+
+@mixin S {
+	font-size: var(--sizes-S-fontSize);
+	line-height: var(--sizes-S-lineHeight);
+	gap: .75rem;
+
+	.callout-icon {
+		line-height: var(--sizes-S-lineHeight);
+
+		.lucca-icon {
+			font-size: var(--sizes-S-lineHeight);
+		}
+	}
+}
+
+@mixin tiny {
+	display: inline-flex;
+	gap: .375rem;
+	padding: var(--spacings-XS);
+}

package/src/components/callout/vars.scss

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

package/src/components/card/component.scss

@@ -1,48 +1,48 @@
-@mixin component($atRoot: 'without: rule') {
-	background-color: var(--components-card-background);
-	border-radius: var(--commons-borderRadius-L);
-	border-color: var(--commons-divider-color);
-	border-width: 1px;
-	display: block;
-	margin-bottom: var(--spacings-S);
-	border-style: solid;
-	flex-direction: row;
-	row-gap: var(--spacings-S);
-	position: relative;
-	transition-duration: var(--commons-animations-durations-fast);
-	transition-property: background-color, box-shadow, color;
-
-	@at-root ($atRoot) {
-		.card-content {
-			padding: var(--components-card-content-padding);
-		}
-
-		.card-title {
-			padding: 0;
-			margin-bottom: var(--spacings-XS);
-		}
-
-		.card-action {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-left: 1px solid var(--commons-border-200);
-			padding-left: var(--spacings-S);
-			margin-left: var(--spacings-S);
-		}
-
-		.card-footer {
-			padding: var(--components-card-footer-padding);
-			border-top-color: var(--components-card-border-color);
-			border-top-width: 1px;
-			border-top-style: solid;
-			align-items: center;
-			display: flex;
-			min-height: 3rem;
-		}
-
-		.card-footer-right {
-			margin-left: auto;
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	background-color: var(--components-card-background);
+	border-radius: var(--commons-borderRadius-L);
+	border-color: var(--commons-divider-color);
+	border-width: 1px;
+	display: block;
+	margin-bottom: var(--spacings-S);
+	border-style: solid;
+	flex-direction: row;
+	row-gap: var(--spacings-S);
+	position: relative;
+	transition-duration: var(--commons-animations-durations-fast);
+	transition-property: background-color, box-shadow, color;
+
+	@at-root ($atRoot) {
+		.card-content {
+			padding: var(--components-card-content-padding);
+		}
+
+		.card-title {
+			padding: 0;
+			margin-bottom: var(--spacings-XS);
+		}
+
+		.card-action {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-left: 1px solid var(--commons-border-200);
+			padding-left: var(--spacings-S);
+			margin-left: var(--spacings-S);
+		}
+
+		.card-footer {
+			padding: var(--components-card-footer-padding);
+			border-top-color: var(--components-card-border-color);
+			border-top-width: 1px;
+			border-top-style: solid;
+			align-items: center;
+			display: flex;
+			min-height: 3rem;
+		}
+
+		.card-footer-right {
+			margin-left: auto;
+		}
+	}
+}

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

@@ -1,26 +1,26 @@
-@use 'exports' as *;
-
-.card {
-	@include vars;
-	@include component;
-
-	&.mod-grey {
-		@include grey;
-	}
-
-	&.mod-clickable {
-		@include clickable;
-	}
-
-	&.mod-elevated {
-		@include elevated;
-	}
-
-	&.mod-action {
-		@include action;
-	}
-
-	&:is(.is-disabled, .disabled) {
-		@include disabled;
-	}
-}
+@use 'exports' as *;
+
+.card {
+	@include vars;
+	@include component;
+
+	&.mod-grey {
+		@include grey;
+	}
+
+	&.mod-clickable {
+		@include clickable;
+	}
+
+	&.mod-elevated {
+		@include elevated;
+	}
+
+	&.mod-action {
+		@include action;
+	}
+
+	&:is(.is-disabled, .disabled) {
+		@include disabled;
+	}
+}

package/src/components/card/mods.scss

@@ -1,42 +1,42 @@
-@mixin grey {
-	--components-card-background: var(--palettes-grey-50);
-}
-
-@mixin clickable {
-	color: var(--palettes-grey-800);
-	text-decoration: none;
-	cursor: pointer;
-
-	&:focus {
-		outline: none;
-	}
-
-	&:focus-visible,
-	&:hover {
-		border-color: var(--components-card-hover-border);
-		background-color: var(--components-card-hover-background);
-		outline: none;
-	}
-}
-
-@mixin elevated {
-	box-shadow: var(--commons-boxShadow-S);
-	border: 0;
-}
-
-@mixin action {
-	box-shadow: var(--commons-boxShadow-S);
-	border: 0;
-	cursor: pointer;
-	display: flex;
-	padding: var(--components-card-content-padding);
-
-	&:hover {
-		box-shadow: var(--commons-boxShadow-L);
-	}
-
-	.card-content {
-		flex: 1;
-		padding: 0;
-	}
-}
+@mixin grey {
+	--components-card-background: var(--palettes-grey-50);
+}
+
+@mixin clickable {
+	color: var(--palettes-grey-800);
+	text-decoration: none;
+	cursor: pointer;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible,
+	&:hover {
+		border-color: var(--components-card-hover-border);
+		background-color: var(--components-card-hover-background);
+		outline: none;
+	}
+}
+
+@mixin elevated {
+	box-shadow: var(--commons-boxShadow-S);
+	border: 0;
+}
+
+@mixin action {
+	box-shadow: var(--commons-boxShadow-S);
+	border: 0;
+	cursor: pointer;
+	display: flex;
+	padding: var(--components-card-content-padding);
+
+	&:hover {
+		box-shadow: var(--commons-boxShadow-L);
+	}
+
+	.card-content {
+		flex: 1;
+		padding: 0;
+	}
+}

package/src/components/card/states.scss

@@ -1,21 +1,21 @@
-@use '@lucca-front/scss/src/commons/config';
-
-@mixin disabled {
-	color: var(--commons-disabled-color);
-	background-color: var(--commons-disabled-background);
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6,
-	.u-h1,
-	.u-h2,
-	.u-h3,
-	.u-h4,
-	.u-h5,
-	.u-h6 {
-		color: var(--commons-disabled-color) !important;
-	}
-}
+@use '@lucca-front/scss/src/commons/config';
+
+@mixin disabled {
+	color: var(--commons-disabled-color);
+	background-color: var(--commons-disabled-background);
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	.u-h1,
+	.u-h2,
+	.u-h3,
+	.u-h4,
+	.u-h5,
+	.u-h6 {
+		color: var(--commons-disabled-color) !important;
+	}
+}

package/src/components/card/vars.scss

@@ -1,9 +1,9 @@
-@mixin vars {
-	--components-card-background: var(--colors-white-color);
-	--components-card-content-padding: .75rem var(--spacings-S);
-	--components-card-footer-padding: var(--spacings-XS) var(--spacings-M);
-	--components-card-border-radius: var(--commons-borderRadius-L);
-	--components-card-border-color: var(--commons-divider-color);
-	--components-card-hover-border: var(--palettes-grey-400);
-	--components-card-hover-background: var(--palettes-grey-100);
-}
+@mixin vars {
+	--components-card-background: var(--colors-white-color);
+	--components-card-content-padding: .75rem var(--spacings-S);
+	--components-card-footer-padding: var(--spacings-XS) var(--spacings-M);
+	--components-card-border-radius: var(--commons-borderRadius-L);
+	--components-card-border-color: var(--commons-divider-color);
+	--components-card-hover-border: var(--palettes-grey-400);
+	--components-card-hover-background: var(--palettes-grey-100);
+}

package/src/components/checkbox/component.scss

@@ -1,94 +1,94 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/a11y';
-
-@mixin component($atRoot: 'without: rule') {
-	display: block;
-	position: relative;
-	line-height: var(--sizes-M-lineHeight);
-
-	@at-root ($atRoot) {
-		.checkbox-label {
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: color;
-			display: inline-flex;
-			align-items: flex-start;
-			cursor: pointer;
-			gap: var(--spacings-XS);
-			vertical-align: top;
-
-			&::before {
-				@include icon.generate('sign_confirm');
-
-				background-color: var(--colors-white-color);
-				width: var(--components-checkbox-input-size);
-				height: var(--components-checkbox-input-size);
-				border-radius: 6px;
-				transition-duration: var(--commons-animations-durations-fast);
-				transition-property: box-shadow, color, background-color;
-				box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-grey-700);
-				line-height: var(--components-checkbox-input-size);
-				font-size: var(--components-checkbox-input-size);
-				flex-grow: 0;
-				flex-shrink: 0;
-				flex-basis: auto;
-				color: transparent;
-				display: block;
-				text-align: center;
-				margin-top: 2px;
-				transform: translate3d(0, 0, 0); // Fix box-shadow artifacts
-			}
-
-			&:hover {
-				&::before {
-					box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-grey-600);
-				}
-			}
-
-			&:active {
-				&::before {
-					box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-grey-800);
-				}
-			}
-		}
-
-		.checkbox-label-helper {
-			color: var(--palettes-grey-600);
-			font-size: var(--sizes-S-fontSize);
-			line-height: var(--sizes-S-lineHeight);
-		}
-
-		.checkbox-input {
-			@include a11y.mask;
-
-			&:checked ~ .checkbox-label {
-				&::before {
-					color: var(--colors-white-color);
-					background-color: var(--palettes-700, var(--palettes-primary-700));
-					box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-700, var(--palettes-primary-700));
-				}
-			}
-
-			&:not(:disabled):checked ~ .checkbox-label {
-				&:hover {
-					&::before {
-						background-color: var(--palettes-600, var(--palettes-primary-600));
-						box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-600, var(--palettes-primary-600));
-					}
-				}
-
-				&:active {
-					&::before {
-						background-color: var(--palettes-800, var(--palettes-primary-800));
-						box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-800, var(--palettes-primary-800));
-					}
-				}
-			}
-
-			&:focus-visible ~ .checkbox-label {
-				&::before {
-					@include a11y.focusVisible;
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+
+@mixin component($atRoot: 'without: rule') {
+	display: block;
+	position: relative;
+	line-height: var(--sizes-M-lineHeight);
+
+	@at-root ($atRoot) {
+		.checkbox-label {
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: color;
+			display: inline-flex;
+			align-items: flex-start;
+			cursor: pointer;
+			gap: var(--spacings-XS);
+			vertical-align: top;
+
+			&::before {
+				@include icon.generate('sign_confirm');
+
+				background-color: var(--colors-white-color);
+				width: var(--components-checkbox-input-size);
+				height: var(--components-checkbox-input-size);
+				border-radius: 6px;
+				transition-duration: var(--commons-animations-durations-fast);
+				transition-property: box-shadow, color, background-color;
+				box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-grey-700);
+				line-height: var(--components-checkbox-input-size);
+				font-size: var(--components-checkbox-input-size);
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: auto;
+				color: transparent;
+				display: block;
+				text-align: center;
+				margin-top: 2px;
+				transform: translate3d(0, 0, 0); // Fix box-shadow artifacts
+			}
+
+			&:hover {
+				&::before {
+					box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-grey-600);
+				}
+			}
+
+			&:active {
+				&::before {
+					box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-grey-800);
+				}
+			}
+		}
+
+		.checkbox-label-helper {
+			color: var(--palettes-grey-600);
+			font-size: var(--sizes-S-fontSize);
+			line-height: var(--sizes-S-lineHeight);
+		}
+
+		.checkbox-input {
+			@include a11y.mask;
+
+			&:checked ~ .checkbox-label {
+				&::before {
+					color: var(--colors-white-color);
+					background-color: var(--palettes-700, var(--palettes-primary-700));
+					box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-700, var(--palettes-primary-700));
+				}
+			}
+
+			&:not(:disabled):checked ~ .checkbox-label {
+				&:hover {
+					&::before {
+						background-color: var(--palettes-600, var(--palettes-primary-600));
+						box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-600, var(--palettes-primary-600));
+					}
+				}
+
+				&:active {
+					&::before {
+						background-color: var(--palettes-800, var(--palettes-primary-800));
+						box-shadow: inset 0 0 0 var(--components-checkbox-input-border-width) var(--palettes-800, var(--palettes-primary-800));
+					}
+				}
+			}
+
+			&:focus-visible ~ .checkbox-label {
+				&::before {
+					@include a11y.focusVisible;
+				}
+			}
+		}
+	}
+}

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

@@ -1,48 +1,48 @@
-@use 'exports' as *;
-
-.checkbox {
-	@include vars;
-	@include component;
-
-	&.mod-inline {
-		@include inline;
-	}
-
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-noLabel {
-		@include noLabel;
-	}
-
-	&:is(.is-required, .required) {
-		@include required;
-	}
-
-	&:is(.is-error, .error) {
-		@include state('error');
-	}
-
-	&:is(.is-warning, .warning) {
-		@include state('warning');
-	}
-
-	&:is(.is-success, .success) {
-		@include state('success');
-	}
-
-	.checkbox-input {
-		&:is(.is-incomplete, .incomplete) {
-			@include incomplete;
-		}
-
-		&:is([disabled], [read-only]) {
-			@include disabled;
-		}
-
-		&:is([aria-required]) {
-			@include required;
-		}
-	}
-}
+@use 'exports' as *;
+
+.checkbox {
+	@include vars;
+	@include component;
+
+	&.mod-inline {
+		@include inline;
+	}
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-noLabel {
+		@include noLabel;
+	}
+
+	&:is(.is-required, .required) {
+		@include required;
+	}
+
+	&:is(.is-error, .error) {
+		@include state('error');
+	}
+
+	&:is(.is-warning, .warning) {
+		@include state('warning');
+	}
+
+	&:is(.is-success, .success) {
+		@include state('success');
+	}
+
+	.checkbox-input {
+		&:is(.is-incomplete, .incomplete) {
+			@include incomplete;
+		}
+
+		&:is([disabled], [read-only]) {
+			@include disabled;
+		}
+
+		&:is([aria-required]) {
+			@include required;
+		}
+	}
+}