@lucca-front/scss 20.2.2 → 20.3.0-rc.2

package/src/components/listboxOption/index.scss

@@ -1,182 +1,198 @@
 @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;
+	@layer states {
+		&[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 states {
+		&.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 states {
+		&[aria-busy="true"] {
+			@include busy;
+		}
 	}
 
-	&.mod-empty {
-		@include empty;
-	}
+	@layer mods {
+		&.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;
+		}
 	}
 }

package/src/components/loading/index.scss

@@ -1,34 +1,38 @@
 @use 'exports' as *;
 
 .loading {
-	@include vars;
-	@include component;
-
-	&.mod-L {
-		@include L;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-block {
-		@include block;
-	}
+	@layer mods {
+		&.mod-L {
+			@include L;
+		}
 
-	&[class~='mod-fullPage' i] {
-		@include fullPage;
-	}
+		&.mod-block {
+			@include block;
+		}
 
-	// .mod-dialog is deprecated
-	&.mod-popin,
-	&.mod-dialog {
-		@include popin;
-	}
+		&[class~='mod-fullPage' i] {
+			@include fullPage;
+		}
 
-	// .mod-sidePanel is deprecated
-	&.mod-drawer,
-	&.mod-sidePanel {
-		@include drawer;
-	}
+		// .mod-dialog is deprecated
+		&.mod-popin,
+		&.mod-dialog {
+			@include popin;
+		}
+
+		// .mod-sidePanel is deprecated
+		&.mod-drawer,
+		&.mod-sidePanel {
+			@include drawer;
+		}
 
-	&.mod-invert {
-		@include invert;
+		&.mod-invert {
+			@include invert;
+		}
 	}
 }

package/src/components/main/index.scss

@@ -1,27 +1,33 @@
 @use 'exports' as *;
 
 .main {
-	&:is(.is-notScrollable, .notScrollable) {
-		@include notScrollable;
+	@layer states {
+		&:is(.is-notScrollable, .notScrollable) {
+			@include notScrollable;
+		}
 	}
 }
 
 .main-content {
-	@include vars;
-	@include component;
-
-	&.mod-withStickyHeader {
-		@include stickyHeader;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-withBanner,
-	.navSide.mod-withBanner ~ &,
-	.mod-withBanner & {
-		@include banner;
-	}
+	@layer mods {
+		&.mod-withStickyHeader {
+			@include stickyHeader;
+		}
+
+		&.mod-withBanner,
+		.navSide.mod-withBanner ~ &,
+		.mod-withBanner & {
+			@include banner;
+		}
 
-	.navSide ~ &,
-	.mod-withMenu & {
-		@include menu;
+		.navSide ~ &,
+		.mod-withMenu & {
+			@include menu;
+		}
 	}
 }

package/src/components/mainLayout/index.scss

@@ -2,36 +2,42 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .mainLayout {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
 
-	@include media.min('S') {
-		@include wide;
+		@include media.min('S') {
+			@include wide;
+		}
 	}
 
-	&:has(.mainLayout-content-inside-header.mod-sticky) {
-		@include stickyHeader;
-		@include stickyTop;
-	}
+	@layer mods {
+		&:has(.mainLayout-content-inside-header.mod-sticky) {
+			@include stickyHeader;
+			@include stickyTop;
+		}
 
-	&:has(.mainLayout-content-inside-footer.mod-sticky) {
-		@include stickyFooter;
-		@include stickyBottom;
+		&:has(.mainLayout-content-inside-footer.mod-sticky) {
+			@include stickyFooter;
+			@include stickyBottom;
+		}
 	}
 }
 
 .mainLayout-content-inside {
-	&:has(.mainLayout-content-inside-block.mod-overflow) {
-		.mainLayout-content-inside-header {
-			@include stickyHeader;
-		}
+	@layer mods {
+		&:has(.mainLayout-content-inside-block.mod-overflow) {
+			.mainLayout-content-inside-header {
+				@include stickyHeader;
+			}
 
-		.mainLayout-content-inside-footer {
-			@include stickyFooter;
-		}
+			.mainLayout-content-inside-footer {
+				@include stickyFooter;
+			}
 
-		.mainLayout-content-inside-block:not(.mod-overflow) {
-			@include stickyBlock;
+			.mainLayout-content-inside-block:not(.mod-overflow) {
+				@include stickyBlock;
+			}
 		}
 	}
 }

package/src/components/mobileHeader/index.scss

@@ -1,10 +1,14 @@
 @use 'exports' as *;
 
 .mobileHeader {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	&.mod-largeTitle {
-		@include largeTitle;
+	@layer mods {
+		&.mod-largeTitle {
+			@include largeTitle;
+		}
 	}
 }

package/src/components/mobileNavigation/index.scss

@@ -1,6 +1,8 @@
 @use 'exports' as *;
 
 .mobileNavigation {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 }

package/src/components/mobilePush/index.scss

@@ -3,10 +3,14 @@
 @use 'exports' as *;
 
 .mobilePush-containerWrapper {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	@include container.max(30rem, $name: 'mobilePush') {
-		@include narrow;
+	@layer mods {
+		@include container.max(30rem, $name: 'mobilePush') {
+			@include narrow;
+		}
 	}
 }