@lucca-front/scss 20.3.0-rc.10 → 20.3.0-rc.12

package/src/components/filterPill/index.scss

@@ -1,55 +1,39 @@
 @use 'exports' as *;
 
 .filterPill {
-	@include vars;
-	@include component;
-
-	&:not(.is-filled) {
-		@include notFilled;
-	}
-
-	&:hover {
-		@include hover;
-	}
-
-	&:active,
-	&:has(:active) {
-		@include active;
-	}
-
-	&.is-comboboxHidden {
-		@include comboboxHidden;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:has(.filterPill-combobox:focus-visible) {
-		@include focusVisible;
-	}
-
-	&:has(.filterPill-combobox[aria-expanded='true']) {
-		@include opened;
-	}
-
-	&.is-filled {
-		@include filled;
+	@layer mods {
+		&:not(.is-filled) {
+			@include notFilled;
+		}
 
 		&:hover {
-			@include filledHover;
+			@include hover;
 		}
 
-		&:has(.filterPill-combobox:active) {
-			@include filledActive;
+		&:active,
+		&:has(:active) {
+			@include active;
 		}
-	}
 
-	&.mod-checkbox {
-		@include checkbox;
+		&.is-comboboxHidden {
+			@include comboboxHidden;
+		}
 
-		&:has(.filterPill-checkbox-input:focus-visible) {
+		&:has(.filterPill-combobox:focus-visible) {
 			@include focusVisible;
 		}
 
-		&:has(.filterPill-checkbox-input:checked) {
-			@include checkboxChecked;
+		&:has(.filterPill-combobox[aria-expanded='true']) {
+			@include opened;
+		}
+
+		&.is-filled {
+			@include filled;
 
 			&:hover {
 				@include filledHover;
@@ -60,24 +44,44 @@
 			}
 		}
 
-		&:has(.filterPill-checkbox-input:disabled) {
-			@include checkboxDisabled;
+		&.mod-checkbox {
+			@include checkbox;
+
+			&:has(.filterPill-checkbox-input:focus-visible) {
+				@include focusVisible;
+			}
 
 			&:has(.filterPill-checkbox-input:checked) {
-				@include checkboxCheckedDisabled;
+				@include checkboxChecked;
+
+				&:hover {
+					@include filledHover;
+				}
+
+				&:has(.filterPill-combobox:active) {
+					@include filledActive;
+				}
+			}
+
+			&:has(.filterPill-checkbox-input:disabled) {
+				@include checkboxDisabled;
+
+				&:has(.filterPill-checkbox-input:checked) {
+					@include checkboxCheckedDisabled;
+				}
 			}
 		}
-	}
 
-	&.mod-button {
-		@include button;
-	}
+		&.mod-button {
+			@include button;
+		}
 
-	&:has(.filterPill-combobox:disabled) {
-		@include disabled;
-	}
+		&:has(.filterPill-combobox:disabled) {
+			@include disabled;
+		}
 
-	&.is-hidden {
-		@include hidden;
+		&.is-hidden {
+			@include hidden;
+		}
 	}
 }

package/src/components/filters/index.scss

@@ -1,17 +1,23 @@
 @use 'exports' as *;
 
 .filters {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-sticky {
-		@include sticky;
+	@layer mods {
+		&.mod-sticky {
+			@include sticky;
+		}
 	}
 }
 
-.navSide ~ .main-content,
-.mod-withMenu .main-content {
-	.filters.mod-sticky {
-		@include stickyNavSide;
+@layer mods {
+	.navSide ~ .main-content,
+	.mod-withMenu .main-content {
+		.filters.mod-sticky {
+			@include stickyNavSide;
+		}
 	}
 }

package/src/components/footer/index.scss

@@ -2,53 +2,57 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .footer {
-	@include vars;
-	@include component;
-
-	&.mod-sticky {
-		@include sticky;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-narrow {
-		@include narrow;
-	}
+	@layer mods {
+		&.mod-sticky {
+			@include sticky;
+		}
 
-	// default mod
-	&:not([class*='mod-narrow']),
-	&.mod-narrowAtMediaMaxXXS {
-		@include media.max('XXS') {
+		&.mod-narrow {
 			@include narrow;
 		}
-	}
 
-	&.mod-narrowAtMediaMaxXS {
-		@include media.max('XS') {
-			@include narrow;
+		// default mod
+		&:not([class*='mod-narrow']),
+		&.mod-narrowAtMediaMaxXXS {
+			@include media.max('XXS') {
+				@include narrow;
+			}
 		}
-	}
 
-	&.mod-narrowAtMediaMaxS {
-		@include media.max('S') {
-			@include narrow;
+		&.mod-narrowAtMediaMaxXS {
+			@include media.max('XS') {
+				@include narrow;
+			}
 		}
-	}
 
-	&.mod-narrowAtMediaMaxM {
-		@include media.max('M') {
-			@include narrow;
+		&.mod-narrowAtMediaMaxS {
+			@include media.max('S') {
+				@include narrow;
+			}
 		}
-	}
 
-	@include media.min('S') {
-		@include wide;
-	}
+		&.mod-narrowAtMediaMaxM {
+			@include media.max('M') {
+				@include narrow;
+			}
+		}
 
-	.dialog &,
-	.lu-modal-panel & {
-		@include insideDialog;
-	}
+		@include media.min('S') {
+			@include wide;
+		}
+
+		.dialog &,
+		.lu-modal-panel & {
+			@include insideDialog;
+		}
 
-	&:has(.footer-containerOptional) {
-		@include withContainer;
+		&:has(.footer-containerOptional) {
+			@include withContainer;
+		}
 	}
 }

package/src/components/form/index.scss

@@ -6,94 +6,100 @@
 @use 'exports' as *;
 
 .form {
-	@include component;
+	@layer components {
+		@include component;
+	}
 
-	&.mod-maxWidth {
-		@include maxWidth;
+	@layer mods {
+		&.mod-maxWidth {
+			@include maxWidth;
+		}
 	}
 }
 
-.form-fieldset {
-	&.mod-inline {
-		@include inline;
-	}
+@layer mods {
+	.form-fieldset {
+		&.mod-inline {
+			@include inline;
+		}
 
-	&.mod-S {
-		@include S;
-	}
+		&.mod-S {
+			@include S;
+		}
 
-	&:has(~ .box) {
-		.form-field {
-			&.mod-withArrow {
-				@include withArrow;
+		&:has(~ .box) {
+			.form-field {
+				&.mod-withArrow {
+					@include withArrow;
 
-				&.mod-S {
-					@include withArrowS;
+					&.mod-S {
+						@include withArrowS;
+					}
 				}
 			}
 		}
-	}
-
-	&:has(.radioField-input[aria-invalid='true']),
-	&:has(.checkboxField-input[aria-invalid='true']) {
-		@include legendInvalid;
-	}
-}
 
-.form-field {
-	&.mod-S {
-		@include S;
-	}
-
-	&.mod-XS {
-		@include XS;
+		&:has(.radioField-input[aria-invalid='true']),
+		&:has(.checkboxField-input[aria-invalid='true']) {
+			@include legendInvalid;
+		}
 	}
 
-	@each $value in config.$fieldsWidth {
-		&.mod-width#{$value} {
-			@include width($value);
+	.form-field {
+		&.mod-S {
+			@include S;
 		}
-	}
 
-	&.mod-checkable,
-	&:has(.radioField),
-	&:has(.checkboxField),
-	&:has(.switchField) {
-		@include checkable;
-	}
+		&.mod-XS {
+			@include XS;
+		}
 
-	&:not(lu-form-field) {
-		&:has(
-				.textField-input-value[aria-invalid='true'],
-				.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
-				.simpleSelect-field-input[aria-invalid='true'],
-				.multipleSelect-displayer-search[aria-invalid='true']
-			) {
-			@include invalid;
+		@each $value in config.$fieldsWidth {
+			&.mod-width#{$value} {
+				@include width($value);
+			}
 		}
-	}
 
-	&:has(.radioField-input:disabled),
-	&:has(.checkboxField-input:disabled),
-	&:has(.switchField-input:disabled) {
-		.formLabel {
-			@include formLabel.disabled;
+		&.mod-checkable,
+		&:has(.radioField),
+		&:has(.checkboxField),
+		&:has(.switchField) {
+			@include checkable;
 		}
 
-		.formLabel-tag {
-			@include tag.disabled;
+		&:not(lu-form-field) {
+			&:has(
+					.textField-input-value[aria-invalid='true'],
+					.timePicker-fieldset-group-textfield-input[aria-invalid='true'],
+					.simpleSelect-field-input[aria-invalid='true'],
+					.multipleSelect-displayer-search[aria-invalid='true']
+				) {
+				@include invalid;
+			}
 		}
 
-		.inlineMessage {
-			@include inlineMessage.disabled;
+		&:has(.radioField-input:disabled),
+		&:has(.checkboxField-input:disabled),
+		&:has(.switchField-input:disabled) {
+			.formLabel {
+				@include formLabel.disabled;
+			}
+
+			.inlineMessage {
+				@include inlineMessage.disabled;
+			}
+
+			.formLabel-tag {
+				@include tag.disabled;
+			}
 		}
-	}
 
-	&.mod-withArrow {
-		@include withArrow;
+		&.mod-withArrow {
+			@include withArrow;
 
-		&.mod-S {
-			@include withArrowS;
+			&.mod-S {
+				@include withArrowS;
+			}
 		}
 	}
 }
@@ -102,71 +108,77 @@
 
 // stylelint-disable no-duplicate-selectors -- deprecated
 .form {
-	@include vars;
+	@layer components {
+		@include vars;
+	}
 }
 
 .form-group {
-	@include vars;
-	@include componentDeprecated;
+	@layer components {
+		@include vars;
+		@include componentDeprecated;
+	}
 }
 
-.form-group-line-col {
-	&[class*='mod-overlay'] {
-		@include overlay;
-	}
+@layer mods {
+	.form-group-line-col {
+		&[class*='mod-overlay'] {
+			@include overlay;
+		}
 
-	&.mod-overlay-top {
-		@include overlayTop;
-	}
+		&.mod-overlay-top {
+			@include overlayTop;
+		}
 
-	@each $breakpoint, $value in config.$breakpoints {
-		@for $i from 1 through 12 {
-			&.mod-#{$i}\@mediaMin#{$breakpoint} {
-				@include breakpoint($breakpoint, $i);
+		@each $breakpoint, $value in config.$breakpoints {
+			@for $i from 1 through 12 {
+				&.mod-#{$i}\@mediaMin#{$breakpoint} {
+					@include breakpoint($breakpoint, $i);
+				}
 			}
 		}
 	}
-}
 
-.form-group-label,
-.radiosfield-label,
-.checkboxesfield-label,
-.textfield-label {
-	&:is(.is-required, .required) {
-		@include required;
+	.form-group-label,
+	.radiosfield-label,
+	.checkboxesfield-label,
+	.textfield-label {
+		&:is(.is-required, .required) {
+			@include required;
+		}
 	}
-}
 
-.checkboxesfield.mod-framed,
-.radiosfield.mod-framed,
-.form.mod-framed .fieldsetWrapper {
-	@include framed;
-}
+	.checkboxesfield.mod-framed,
+	.radiosfield.mod-framed,
+	.form.mod-framed .fieldsetWrapper {
+		@include framed;
+	}
 
-.checkboxesfield.mod-framed,
-.radiosfield.mod-framed {
-	margin-block-start: 0;
-	padding-block: var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
-	padding-inline: var(--components-field-framed-side-padding);
-}
+	.checkboxesfield.mod-framed,
+	.radiosfield.mod-framed {
+		margin-block-start: 0;
+		padding-block: var(--components-field-framed-side-padding) var(--components-field-framed-bottom-padding);
+		padding-inline: var(--components-field-framed-side-padding);
+	}
 
-.form-group-label {
-	&.is-required {
-		&:not(:empty) {
-			&::after {
-				@extend %isRequired;
+	.form-group-label {
+		&.is-required {
+			&:not(:empty) {
+				&::after {
+					@extend %isRequired;
+				}
 			}
 		}
 	}
-}
 
-.radiosfield-label,
-.checkboxesfield-label,
-.textfield-label {
-	&.is-required {
-		&:not(:empty) {
-			&::after {
-				@extend %isRequired;
+	.radiosfield-label,
+	.checkboxesfield-label,
+	.textfield-label {
+		&.is-required {
+			&:not(:empty) {
+				&::after {
+					@extend %isRequired;
+				}
 			}
 		}
 	}

package/src/components/form/mods.scss

@@ -281,7 +281,7 @@
 
 	&::before,
 	&::after {
-		/* stylelint-disable-next-line no-irregular-whitespace */
+		// stylelint-disable-next-line no-irregular-whitespace
 		content: ' ' / '';
 		display: table;
 	}
@@ -362,8 +362,10 @@
 }
 
 %isRequired {
-	color: var(--palettes-error-700);
-	display: inline-block;
-	margin-inline-start: 0.2em;
-	content: '*' / '';
+	@layer mods {
+		color: var(--palettes-error-700);
+		display: inline-block;
+		margin-inline-start: 0.2em;
+		content: '*' / '';
+	}
 }

package/src/components/formLabel/index.scss

@@ -1,23 +1,27 @@
 @use 'exports' as *;
 
 .formLabel {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-XS {
-		@include XS;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&.mod-counter {
-		@include counter;
-	}
+		&.mod-XS {
+			@include XS;
+		}
+
+		&.mod-counter {
+			@include counter;
+		}
 
-	&.is-error {
-		// To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
-		@include error;
+		&.is-error {
+			// To replace by :has as soon as it is implemented in Firefox to cover usage as legend for checkboxes and radio states.
+			@include error;
+		}
 	}
 }

package/src/components/gauge/component.scss

@@ -23,6 +23,8 @@
 
 	@at-root ($atRoot) {
 		.gauge-bar {
+			position: absolute;
+
 			@extend %gaugeBar;
 		}
 
@@ -37,7 +39,7 @@
 			stroke-width: var(--components-gauge-circle-strokeWidth);
 			stroke-linecap: round;
 			stroke-dashoffset: 0;
-			transform: rotate(-1/4 * 1turn);
+			transform: rotate(-0.25turn);
 			transform-origin: 50% 50%;
 			stroke-dasharray: calc(var(--components-gauge-circleP) / 100 * var(--components-gauge-value)), 9999;
 			stroke: currentColor;
@@ -61,21 +63,23 @@
 }
 
 %gaugeBar {
-	color: currentColor;
-	transition-duration: var(--commons-animations-durations-standard);
-	transition-property: background-color, inline-size, block-size;
-	block-size: var(--components-gauge-blockSize);
-	inline-size: var(--components-gauge-value);
-	background-color: currentColor;
-	border-radius: var(--pr-t-border-radius-full);
-	min-inline-size: var(--components-gauge-before-minInlineSize);
-	min-block-size: var(--components-gauge-before-minInlineSize);
-	animation-name: var(--components-gauge-animationName);
-	animation-duration: var(--components-gauge-animationDuration);
-	animation-timing-function: var(--components-gauge-animationTimingFunction);
+	@layer components {
+		color: currentColor;
+		transition-duration: var(--commons-animations-durations-standard);
+		transition-property: background-color, inline-size, block-size;
+		block-size: var(--components-gauge-blockSize);
+		inline-size: var(--components-gauge-value);
+		background-color: currentColor;
+		border-radius: var(--pr-t-border-radius-full);
+		min-inline-size: var(--components-gauge-before-minInlineSize);
+		min-block-size: var(--components-gauge-before-minInlineSize);
+		animation-name: var(--components-gauge-animationName);
+		animation-duration: var(--components-gauge-animationDuration);
+		animation-timing-function: var(--components-gauge-animationTimingFunction);
 
-	@media (prefers-reduced-motion: reduce) {
-		--components-gauge-animationDuration: var(--commons-animations-durations-fast);
-		--components-gauge-animationTimingFunction: ease;
+		@media (prefers-reduced-motion: reduce) {
+			--components-gauge-animationDuration: var(--commons-animations-durations-fast);
+			--components-gauge-animationTimingFunction: ease;
+		}
 	}
 }