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

package/src/components/listboxOption/index.scss

@@ -1,198 +1,182 @@
 @use 'exports' as *;
 
 .listboxOption {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-add {
-			@include add;
+	&.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;
+	&[role="group"] {
+		@include group;
 
-			&:hover,
-			&:has(.is-hovered) {
-				@include groupHover;
-			}
+		&:hover,
+		&:has(.is-hovered) {
+			@include groupHover;
+		}
 
-			> .listboxOption-content {
-				&:hover {
-					@include groupHoverReset;
-				}
+		> .listboxOption-content {
+			&:hover {
+				@include groupHoverReset;
 			}
+		}
 
-			&:not(:has(.listboxOption.mod-select)) {
-				> .listboxOption-content {
-					@include groupHoverReset;
-				}
+		&:not(:has(.listboxOption.mod-select)) {
+			> .listboxOption-content {
+				@include groupHoverReset;
 			}
 		}
+	}
 
-		&[aria-hidden="true"] {
-			@include empty;
-		}
+	&[aria-hidden="true"] {
+		@include empty;
 	}
 
-	@layer states {
-		&[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 {
-	@layer components {
-		@include varsContent;
-	}
+	@include varsContent;
 
-	@layer states {
-		&.is-hovered,
-		&:hover {
-			@include hover;
-		}
+	&.is-hovered,
+	&:hover {
+		@include hover;
+	}
 
-		&:active {
-			@include active;
-		}
+	&:active {
+		@include active;
 	}
 }
 
 .listboxOptionWrapper {
-	@layer components {
-		@include varsWrapper;
+	@include varsWrapper;
 
-		.listboxOptionWrapper {
-			@include nestedWrapper;
-			@include nested;
+	.listboxOptionWrapper {
+		@include nestedWrapper;
+		@include nested;
 
-			.listboxOptionWrapper {
-				@include nested(2);
-			}
+		.listboxOptionWrapper {
+			@include nested(2);
 		}
 	}
 
-	@layer states {
-		&[aria-busy="true"] {
-			@include busy;
-		}
+	&[aria-busy="true"] {
+		@include busy;
 	}
 
-	@layer mods {
-		&.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-disabled="true"], {
+					> .listboxOption-content {
+						@include multipleDisabled;
+					}
 
-						&[aria-selected="true"],
-						&[aria-checked="true"] {
-							> .listboxOption-content {
-								@include multipleSelectedDisabled;
-							}
+					&[aria-selected="true"],
+					&[aria-checked="true"] {
+						> .listboxOption-content {
+							@include multipleSelectedDisabled;
 						}
+					}
 
-						&[aria-checked="mixed"] {
-							> .listboxOption-content {
-								@include multipleMixedDisabled;
-							}
+					&[aria-checked="mixed"] {
+						> .listboxOption-content {
+							@include multipleMixedDisabled;
 						}
 					}
 				}

package/src/components/listing/index.scss

@@ -1,41 +1,37 @@
 @use 'exports' as *;
 
 .listing {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-ordered,
+	&:is(ol) {
+		@include ordered;
 	}
 
-	@layer mods {
+	.listing {
+		@include nested;
+
 		&.mod-ordered,
 		&:is(ol) {
-			@include ordered;
+			@include nestedOrdered;
 		}
 
 		.listing {
-			@include nested;
+			@include nested(2);
 
 			&.mod-ordered,
 			&:is(ol) {
-				@include nestedOrdered;
-			}
-
-			.listing {
-				@include nested(2);
-
-				&.mod-ordered,
-				&:is(ol) {
-					@include nestedOrdered(2);
-				}
+				@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,38 +1,34 @@
 @use 'exports' as *;
 
 .loading {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-L {
-			@include L;
-		}
+	&.mod-L {
+		@include L;
+	}
 
-		&.mod-block {
-			@include block;
-		}
+	&.mod-block {
+		@include block;
+	}
 
-		&[class~='mod-fullPage' i] {
-			@include fullPage;
-		}
+	&[class~='mod-fullPage' i] {
+		@include fullPage;
+	}
 
-		// .mod-dialog is deprecated
-		&.mod-popin,
-		&.mod-dialog {
-			@include popin;
-		}
+	// .mod-dialog is deprecated
+	&.mod-popin,
+	&.mod-dialog {
+		@include popin;
+	}
 
-		// .mod-sidePanel is deprecated
-		&.mod-drawer,
-		&.mod-sidePanel {
-			@include drawer;
-		}
+	// .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,33 +1,27 @@
 @use 'exports' as *;
 
 .main {
-	@layer states {
-		&:is(.is-notScrollable, .notScrollable) {
-			@include notScrollable;
-		}
+	&:is(.is-notScrollable, .notScrollable) {
+		@include notScrollable;
 	}
 }
 
 .main-content {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-withStickyHeader {
-			@include stickyHeader;
-		}
+	&.mod-withStickyHeader {
+		@include stickyHeader;
+	}
 
-		&.mod-withBanner,
-		.navSide.mod-withBanner ~ &,
-		.mod-withBanner & {
-			@include banner;
-		}
+	&.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,42 +2,36 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .mainLayout {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
 
-		@include media.min('S') {
-			@include wide;
-		}
+	@include media.min('S') {
+		@include wide;
 	}
 
-	@layer mods {
-		&:has(.mainLayout-content-inside-header.mod-sticky) {
-			@include stickyHeader;
-			@include stickyTop;
-		}
+	&: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 {
-	@layer mods {
-		&:has(.mainLayout-content-inside-block.mod-overflow) {
-			.mainLayout-content-inside-header {
-				@include stickyHeader;
-			}
+	&: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,14 +1,10 @@
 @use 'exports' as *;
 
 .mobileHeader {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-largeTitle {
-			@include largeTitle;
-		}
+	&.mod-largeTitle {
+		@include largeTitle;
 	}
 }

package/src/components/mobileNavigation/index.scss

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

package/src/components/mobilePush/index.scss

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