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

package/src/components/inputFramed/index.scss

@@ -2,37 +2,41 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 .inputFramed {
-	@include vars;
-	@include component;
-
-	&:hover {
-		@include hover;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:has(.inputFramed-header-input:checked) {
-		@include checked;
-
+	@layer mods {
 		&:hover {
-			@include checkedHover;
+			@include hover;
 		}
-	}
 
-	&:has(.inputFramed-header-input:focus-visible) {
-		@include a11y.focusVisible;
-	}
+		&:has(.inputFramed-header-input:checked) {
+			@include checked;
 
-	&:has(.inputFramed-header-input[aria-invalid="true"]) {
-		@include critical;
+			&:hover {
+				@include checkedHover;
+			}
+		}
 
-		&:hover {
-			@include criticalHover;
+		&:has(.inputFramed-header-input:focus-visible) {
+			@include a11y.focusVisible;
 		}
-	}
 
-	&:has(.inputFramed-header-input:disabled) {
-		&,
-		&:hover {
-			@include disabled;
+		&:has(.inputFramed-header-input[aria-invalid="true"]) {
+			@include critical;
+
+			&:hover {
+				@include criticalHover;
+			}
+		}
+
+		&:has(.inputFramed-header-input:disabled) {
+			&,
+			&:hover {
+				@include disabled;
+			}
 		}
 	}
 
@@ -42,6 +46,8 @@
 }
 
 .inputFramedWrapper {
-	@include vars;
-	@include wrapper;
+	@layer components {
+		@include vars;
+		@include wrapper;
+	}
 }

package/src/components/label/index.scss

@@ -1,18 +1,22 @@
 @use 'exports' as *;
 
 .label {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-number {
-		@include number;
+	@layer mods {
+		&.mod-number {
+			@include number;
 
-		&.mod-S {
-			@include numberS;
-		}
+			&.mod-S {
+				@include numberS;
+			}
 
-		&.mod-XS {
-			@include numberXS;
+			&.mod-XS {
+				@include numberXS;
+			}
 		}
 	}
 }

package/src/components/layout/index.scss

@@ -1,68 +1,74 @@
 @use 'exports' as *;
 
 .layout {
-	@include vars;
-	@include component;
-
-	&.mod-navsideWithoutScrollbar {
-		@include navsideWithoutScrollbar;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-contentHeaderStatic {
-		@include contentHeaderStatic;
-	}
+	@layer mods {
+		&.mod-navsideWithoutScrollbar {
+			@include navsideWithoutScrollbar;
+		}
 
-	&.mod-contentSubheaderStatic {
-		@include contentSubheaderStatic;
-	}
+		&.mod-contentHeaderStatic {
+			@include contentHeaderStatic;
+		}
 
-	&.mod-navsideFooterStatic {
-		@include navsideFooterStatic;
-	}
+		&.mod-contentSubheaderStatic {
+			@include contentSubheaderStatic;
+		}
 
-	&.mod-asideFooterStatic {
-		@include asideFooterStatic;
-	}
+		&.mod-navsideFooterStatic {
+			@include navsideFooterStatic;
+		}
 
-	&.mod-contentFooterStatic {
-		@include contentFooterStatic;
-	}
+		&.mod-asideFooterStatic {
+			@include asideFooterStatic;
+		}
 
-	&.mod-asideBefore {
-		@include asideBefore;
-	}
+		&.mod-contentFooterStatic {
+			@include contentFooterStatic;
+		}
 
-	&.mod-headerRemoved {
-		@include headerRemoved;
-	}
+		&.mod-asideBefore {
+			@include asideBefore;
+		}
 
-	&.mod-subheaderRemoved {
-		@include subheaderRemoved;
-	}
+		&.mod-headerRemoved {
+			@include headerRemoved;
+		}
 
-	&.mod-asideRemoved {
-		@include asideRemoved;
-	}
+		&.mod-subheaderRemoved {
+			@include subheaderRemoved;
+		}
 
-	&.mod-asideFooterRemoved {
-		@include asideFooterRemoved;
-	}
+		&.mod-asideRemoved {
+			@include asideRemoved;
+		}
 
-	&.mod-contentFooterRemoved {
-		@include contentFooterRemoved;
-	}
+		&.mod-asideFooterRemoved {
+			@include asideFooterRemoved;
+		}
 
-	&.mod-navsideFooterRemoved {
-		@include navsideFooterRemoved;
-	}
+		&.mod-contentFooterRemoved {
+			@include contentFooterRemoved;
+		}
+
+		&.mod-navsideFooterRemoved {
+			@include navsideFooterRemoved;
+		}
 
-	&.mod-navsideLarge {
-		@include navsideLarge;
+		&.mod-navsideLarge {
+			@include navsideLarge;
+		}
 	}
 }
 
 html {
-	&:is(.has-overlay, .withOverlay) {
-		@include overlay;
+	@layer mods {
+		&:is(.has-overlay, .withOverlay) {
+			@include overlay;
+		}
 	}
 }

package/src/components/link/index.scss

@@ -1,18 +1,22 @@
 @use 'exports' as *;
 
 .link {
-	@include vars;
-	@include component;
-
-	&.mod-icon {
-		@include icon;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-decorationHover {
-		@include decorationHover;
-	}
+	@layer mods {
+		&.mod-icon {
+			@include icon;
+		}
+
+		&.mod-decorationHover {
+			@include decorationHover;
+		}
 
-	&:is(:disabled, .is-disabled) {
-		@include disabled;
+		&:is(:disabled, .is-disabled) {
+			@include disabled;
+		}
 	}
 }

package/src/components/link/mods.scss

@@ -27,7 +27,7 @@
 			white-space: nowrap;
 
 			&::before {
-				/* stylelint-disable-next-line no-irregular-whitespace */
+				// stylelint-disable-next-line no-irregular-whitespace
 				content: ' ' / '';
 			}
 		}

package/src/components/list/index.scss

@@ -1,21 +1,25 @@
 @use 'exports' as *;
 
 .list {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }
 
 .list-item {
-	&.mod-clickable {
-		@include clickable;
-	}
+	@layer mods {
+		&.mod-clickable {
+			@include clickable;
+		}
 
-	&.mod-draggable {
-		@include draggable;
-	}
+		&.mod-draggable {
+			@include draggable;
+		}
 
-	// .mod-actionsHidden is deprecated
-	&.mod-actionsHidden {
-		@include actionsHidden;
+		// .mod-actionsHidden is deprecated
+		&.mod-actionsHidden {
+			@include actionsHidden;
+		}
 	}
 }

package/src/components/listboxOption/index.scss

@@ -1,182 +1,194 @@
 @use 'exports' as *;
 
 .listboxOption {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-add {
-		@include add;
+	@layer mods {
+		&.mod-add {
+			@include add;
 
-		&:hover {
-			@include addHover;
-		}
+			&:hover {
+				@include addHover;
+			}
 
-		&:active {
-			@include addActive;
+			&:active {
+				@include addActive;
+			}
 		}
-	}
 
-	&.mod-select {
-		@include select;
+		&.mod-select {
+			@include select;
 
-		&:hover {
-			@include selectHover;
+			&:hover {
+				@include selectHover;
+			}
 		}
-	}
 
-	&[role="group"] {
-		@include group;
-
-		&:hover,
-		&:has(.is-hovered) {
-			@include groupHover;
-		}
+		&[role="group"] {
+			@include group;
 
-		> .listboxOption-content {
-			&:hover {
-				@include groupHoverReset;
+			&:hover,
+			&:has(.is-hovered) {
+				@include groupHover;
 			}
-		}
 
-		&:not(:has(.listboxOption.mod-select)) {
 			> .listboxOption-content {
-				@include groupHoverReset;
+				&:hover {
+					@include groupHoverReset;
+				}
+			}
+
+			&:not(:has(.listboxOption.mod-select)) {
+				> .listboxOption-content {
+					@include groupHoverReset;
+				}
 			}
 		}
-	}
 
-	&[aria-hidden="true"] {
-		@include empty;
-	}
+		&[aria-hidden="true"] {
+			@include empty;
+		}
 
-	&[aria-selected="true"],
-	&[aria-checked="true"] {
-		> .listboxOption-content {
-			@include selected;
+		&[aria-selected="true"],
+		&[aria-checked="true"] {
+			> .listboxOption-content {
+				@include selected;
 
-			&.is-hovered,
-			&:hover {
-				@include selectedHover;
-			}
+				&.is-hovered,
+				&:hover {
+					@include selectedHover;
+				}
 
-			&:active {
-				@include selectedActive;
+				&:active {
+					@include selectedActive;
+				}
 			}
 		}
-	}
 
-	&[aria-disabled="true"] {
-		> .listboxOption-content {
-			@include disabled;
+		&[aria-disabled="true"] {
+			> .listboxOption-content {
+				@include disabled;
 
-			&:hover {
-				@include disabledHover;
+				&:hover {
+					@include disabledHover;
+				}
 			}
-		}
 
-		&[aria-selected="true"],
-		&[aria-checked="true"] {
-			> .listboxOption-content {
-				@include selectedDisabled;
+			&[aria-selected="true"],
+			&[aria-checked="true"] {
+				> .listboxOption-content {
+					@include selectedDisabled;
+				}
 			}
 		}
 	}
 }
 
 .listboxOption-content {
-	@include varsContent;
-
-	&.is-hovered,
-	&:hover {
-		@include hover;
+	@layer components {
+		@include varsContent;
 	}
 
-	&:active {
-		@include active;
+	@layer mods {
+		&.is-hovered,
+		&:hover {
+			@include hover;
+		}
+
+		&:active {
+			@include active;
+		}
 	}
 }
 
 .listboxOptionWrapper {
-	@include varsWrapper;
-
-	.listboxOptionWrapper {
-		@include nestedWrapper;
-		@include nested;
+	@layer components {
+		@include varsWrapper;
 
 		.listboxOptionWrapper {
-			@include nested(2);
+			@include nestedWrapper;
+			@include nested;
+
+			.listboxOptionWrapper {
+				@include nested(2);
+			}
 		}
 	}
 
-	&[aria-busy="true"] {
-		@include busy;
-	}
+	@layer mods {
+		&[aria-busy="true"] {
+			@include busy;
+		}
 
-	&.mod-empty {
-		@include empty;
-	}
+		&.mod-empty {
+			@include empty;
+		}
 
-	&.mod-multiple {
-		&,
-		.listboxOptionWrapper {
-			@include multiple;
+		&.mod-multiple {
+			&,
+			.listboxOptionWrapper {
+				@include multiple;
 
-			.listboxOption {
-				&:hover,
-				&.is-hovered {
-					@include multipleHover;
-				}
+				.listboxOption {
+					&:hover,
+					&.is-hovered {
+						@include multipleHover;
+					}
 
-				&:active {
-					@include multipleActive;
-				}
+					&:active {
+						@include multipleActive;
+					}
 
-				&[aria-selected="true"],
-				&[aria-checked="true"] {
-					> .listboxOption-content {
-						@include multipleSelected;
+					&[aria-selected="true"],
+					&[aria-checked="true"] {
+						> .listboxOption-content {
+							@include multipleSelected;
 
-						&:hover,
-						&.is-hovered {
-							@include multipleSelectedHover;
-						}
+							&:hover,
+							&.is-hovered {
+								@include multipleSelectedHover;
+							}
 
-						&:active {
-							@include multipleSelectedActive;
+							&:active {
+								@include multipleSelectedActive;
+							}
 						}
 					}
-				}
 
-				&[aria-checked="mixed"] {
-					> .listboxOption-content {
-						@include multipleMixed;
+					&[aria-checked="mixed"] {
+						> .listboxOption-content {
+							@include multipleMixed;
 
-						&:hover,
-						&.is-hovered {
-							@include multipleMixedHover;
-						}
+							&:hover,
+							&.is-hovered {
+								@include multipleMixedHover;
+							}
 
-						&:active {
-							@include multipleMixedActive;
+							&:active {
+								@include multipleMixedActive;
+							}
 						}
 					}
-				}
 
-				&[aria-disabled="true"], {
-					> .listboxOption-content {
-						@include multipleDisabled;
-					}
-
-					&[aria-selected="true"],
-					&[aria-checked="true"] {
+					&[aria-disabled="true"], {
 						> .listboxOption-content {
-							@include multipleSelectedDisabled;
+							@include multipleDisabled;
 						}
-					}
 
-					&[aria-checked="mixed"] {
-						> .listboxOption-content {
-							@include multipleMixedDisabled;
+						&[aria-selected="true"],
+						&[aria-checked="true"] {
+							> .listboxOption-content {
+								@include multipleSelectedDisabled;
+							}
+						}
+
+						&[aria-checked="mixed"] {
+							> .listboxOption-content {
+								@include multipleMixedDisabled;
+							}
 						}
 					}
 				}

package/src/components/listing/index.scss

@@ -1,37 +1,41 @@
 @use 'exports' as *;
 
 .listing {
-	@include vars;
-	@include component;
-
-	&.mod-ordered,
-	&:is(ol) {
-		@include ordered;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	.listing {
-		@include nested;
-
+	@layer mods {
 		&.mod-ordered,
 		&:is(ol) {
-			@include nestedOrdered;
+			@include ordered;
 		}
 
 		.listing {
-			@include nested(2);
+			@include nested;
 
 			&.mod-ordered,
 			&:is(ol) {
-				@include nestedOrdered(2);
+				@include nestedOrdered;
+			}
+
+			.listing {
+				@include nested(2);
+
+				&.mod-ordered,
+				&:is(ol) {
+					@include nestedOrdered(2);
+				}
 			}
 		}
-	}
 
-	&.mod-icons {
-		@include icons;
-	}
+		&.mod-icons {
+			@include icons;
+		}
 
-	&.mod-checklist {
-		@include checklist;
+		&.mod-checklist {
+			@include checklist;
+		}
 	}
 }