@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/filters/component.scss

@@ -1,38 +1,38 @@
-@mixin component($atRoot: 'without: rule') {
-	background-color: var(--components-filters-background);
-	box-shadow: 0 1px 0 0 var(--commons-border-200);
-	min-height: var(--components-filters-height);
-	align-items: center;
-	display: flex;
-	position: relative;
-	z-index: 99;
-
-	@at-root ($atRoot) {
-		.filters-sectionLeft {
-			align-items: center;
-			display: flex;
-			padding-right: var(--spacings-L);
-		}
-
-		.filters-sectionRight {
-			align-items: center;
-			display: flex;
-			margin-left: auto;
-			padding-left: var(--spacings-L);
-
-			.textfield.mod-framed {
-				border-left: var(--commons-divider-width) solid var(--commons-divider-color);
-				border-right: 0 !important;
-			}
-		}
-	}
-
-	.textfield.mod-framed {
-		border-right: var(--commons-divider-width) solid var(--commons-divider-color);
-		max-width: 16rem;
-
-		.textfield-input {
-			box-shadow: none !important;
-		}
-	}
-}
+@mixin component($atRoot: 'without: rule') {
+	background-color: var(--components-filters-background);
+	box-shadow: 0 1px 0 0 var(--commons-border-200);
+	min-height: var(--components-filters-height);
+	align-items: center;
+	display: flex;
+	position: relative;
+	z-index: 99;
+
+	@at-root ($atRoot) {
+		.filters-sectionLeft {
+			align-items: center;
+			display: flex;
+			padding-right: var(--spacings-L);
+		}
+
+		.filters-sectionRight {
+			align-items: center;
+			display: flex;
+			margin-left: auto;
+			padding-left: var(--spacings-L);
+
+			.textfield.mod-framed {
+				border-left: var(--commons-divider-width) solid var(--commons-divider-color);
+				border-right: 0 !important;
+			}
+		}
+	}
+
+	.textfield.mod-framed {
+		border-right: var(--commons-divider-width) solid var(--commons-divider-color);
+		max-width: 16rem;
+
+		.textfield-input {
+			box-shadow: none !important;
+		}
+	}
+}

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

@@ -1,24 +1,24 @@
-@use 'exports' as *;
-
-.filters {
-	@include vars;
-	@include component;
-
-	&.mod-sticky {
-		@include sticky;
-	}
-}
-
-.navSide ~ .main-content,
-.mod-withMenu .main-content {
-	.filters.mod-sticky {
-		@include stickyNavSide;
-	}
-}
-
-.navSide.mod-compact ~ .main-content,
-.mod-withMenuCompact .main-content {
-	.filters.mod-sticky {
-		@include stickyNavSideCompact;
-	}
-}
+@use 'exports' as *;
+
+.filters {
+	@include vars;
+	@include component;
+
+	&.mod-sticky {
+		@include sticky;
+	}
+}
+
+.navSide ~ .main-content,
+.mod-withMenu .main-content {
+	.filters.mod-sticky {
+		@include stickyNavSide;
+	}
+}
+
+.navSide.mod-compact ~ .main-content,
+.mod-withMenuCompact .main-content {
+	.filters.mod-sticky {
+		@include stickyNavSideCompact;
+	}
+}

package/src/components/filters/mods.scss

@@ -1,21 +1,21 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin sticky {
-	top: var(--commons-banner-height);
-	position: fixed;
-	left: 0;
-	right: 0;
-
-	@include media.max('S') {
-		left: 0 !important;
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-	}
-}
-
-@mixin stickyNavSide {
-	left: var(--commons-navSide-width);
-}
-
-@mixin stickyNavSideCompact {
-	left: var(--commons-navSide-compact-width);
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin sticky {
+	top: var(--commons-banner-height);
+	position: fixed;
+	left: 0;
+	right: 0;
+
+	@include media.max('S') {
+		left: 0 !important;
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+	}
+}
+
+@mixin stickyNavSide {
+	left: var(--commons-navSide-width);
+}
+
+@mixin stickyNavSideCompact {
+	left: var(--commons-navSide-compact-width);
+}

package/src/components/filters/vars.scss

@@ -1,5 +1,5 @@
-@mixin vars {
-	--components-filters-background: var(--colors-white-color);
-	--components-filters-padding: var(--spacings-XS) var(--spacings-S);
-	--components-filters-height: 3.75rem;
-}
+@mixin vars {
+	--components-filters-background: var(--colors-white-color);
+	--components-filters-padding: var(--spacings-XS) var(--spacings-S);
+	--components-filters-height: 3.75rem;
+}

package/src/components/footer/component.scss

@@ -1,36 +1,36 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
-@mixin component($atRoot: 'without: rule') {
-	background-color: var(--colors-white-color);
-	padding: var(--spacings-S) var(--spacings-M);
-	display: flex;
-	gap: var(--spacings-S);
-	align-items: center;
-	box-shadow: var(--commons-boxShadow-L);
-
-	@include media.max("XXS") {
-		flex-direction: column;
-	}
-
-	@at-root ($atRoot) {
-		.footer-actions {
-			display: flex;
-			margin-left: auto;
-			gap: var(--spacings-S);
-
-			.button {
-				margin: 0;
-			}
-
-			@include media.max("XXS") {
-				flex-direction: column;
-				margin-left: inherit;
-				width: 100%;
-
-				.button {
-					width: 100%;
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin component($atRoot: 'without: rule') {
+	background-color: var(--colors-white-color);
+	padding: var(--spacings-S) var(--spacings-M);
+	display: flex;
+	gap: var(--spacings-S);
+	align-items: center;
+	box-shadow: var(--commons-boxShadow-L);
+
+	@include media.max("XXS") {
+		flex-direction: column;
+	}
+
+	@at-root ($atRoot) {
+		.footer-actions {
+			display: flex;
+			margin-left: auto;
+			gap: var(--spacings-S);
+
+			.button {
+				margin: 0;
+			}
+
+			@include media.max("XXS") {
+				flex-direction: column;
+				margin-left: inherit;
+				width: 100%;
+
+				.button {
+					width: 100%;
+				}
+			}
+		}
+	}
+}

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

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

package/src/components/footer/mods.scss

@@ -1,4 +1,4 @@
-@mixin sticky {
-  position: sticky;
-  bottom: 0;
-}
+@mixin sticky {
+  position: sticky;
+  bottom: 0;
+}

package/src/components/footer/vars.scss

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

package/src/components/form/component.scss

@@ -1,96 +1,97 @@
-@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 component($atRoot: 'without: rule') {
-	padding: 0;
-	border: 0;
-	margin: 0 0 var(--components-form-group-margin-bottom);
-	position: relative;
-
-	@at-root ($atRoot) {
-		.form-field {
-			display: flex;
-			flex-direction: column;
-			gap: var(--spacings-XXS);
-
-			.formLabel {
-				cursor: pointer;
-			}
-		}
-
-		// deprecated
-
-		.form-group-label,
-		.form-group-legend,
-		.form-group-title {
-			display: block;
-			font-weight: 600;
-			font-size: var(--components-form-label-font-size);
-			margin: 0;
-			padding: 0 0 var(--components-form-label-margin-bottom);
-			width: 100%;
-			text-align: left;
-		}
-
-		.form-group-legend,
-		.form-group-title {
-			font-size: var(--components-field-framed-title-font-size);
-			line-height: var(--components-field-framed-title-line-height);
-			padding-bottom: var(--spacings-XXS);
-		}
-
-		.form-actions {
-			text-align: right;
-		}
-
-		.form {
-			.textfield,
-			.radiosfield,
-			.checkboxesfield,
-			.checkbox.mod-field {
-				margin-bottom: var(--components-form-field-margin-bottom);
-			}
-		}
-
-		.form-group-line {
-			display: flex;
-			flex-wrap: wrap;
-			position: relative;
-		}
-
-		.form-group-line-col {
-			flex-basis: 0;
-			flex-grow: 1;
-			display: flex;
-			flex-direction: column;
-
-			> * {
-				flex-grow: 1;
-			}
-		}
-
-		.form-group-label {
-			&.is-required {
-				&:not(:empty) {
-					&::after {
-						@include form.required;
-					}
-				}
-			}
-		}
-
-		.radiosfield-label,
-		.checkboxesfield-label,
-		.textfield-label {
-			&.is-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 component($atRoot: 'without: rule') {
+	padding: 0;
+	border: 0;
+	margin: 0 0 var(--components-form-group-margin-bottom);
+	position: relative;
+
+	@at-root ($atRoot) {
+		.form-field {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			gap: var(--spacings-XXS);
+
+			.formLabel {
+				cursor: pointer;
+			}
+		}
+
+		// deprecated
+
+		.form-group-label,
+		.form-group-legend,
+		.form-group-title {
+			display: block;
+			font-weight: 600;
+			font-size: var(--components-form-label-font-size);
+			margin: 0;
+			padding: 0 0 var(--components-form-label-margin-bottom);
+			width: 100%;
+			text-align: left;
+		}
+
+		.form-group-legend,
+		.form-group-title {
+			font-size: var(--components-field-framed-title-font-size);
+			line-height: var(--components-field-framed-title-line-height);
+			padding-bottom: var(--spacings-XXS);
+		}
+
+		.form-actions {
+			text-align: right;
+		}
+
+		.form {
+			.textfield,
+			.radiosfield,
+			.checkboxesfield,
+			.checkbox.mod-field {
+				margin-bottom: var(--components-form-field-margin-bottom);
+			}
+		}
+
+		.form-group-line {
+			display: flex;
+			flex-wrap: wrap;
+			position: relative;
+		}
+
+		.form-group-line-col {
+			flex-basis: 0;
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+
+			> * {
+				flex-grow: 1;
+			}
+		}
+
+		.form-group-label {
+			&.is-required {
+				&:not(:empty) {
+					&::after {
+						@include form.required;
+					}
+				}
+			}
+		}
+
+		.radiosfield-label,
+		.checkboxesfield-label,
+		.textfield-label {
+			&.is-required {
+				&:not(:empty) {
+					&::after {
+						@include form.required;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/form/exports.scss

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