@lucca-front/scss 20.2.0-rc.1 → 20.2.0-rc.3

package/src/components/layout/index.scss

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

package/src/components/link/index.scss

@@ -1,24 +1,18 @@
 @use 'exports' as *;
 
 .link {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-icon {
-			@include icon;
-		}
+	&.mod-icon {
+		@include icon;
+	}
 
-		&.mod-decorationHover {
-			@include decorationHover;
-		}
+	&.mod-decorationHover {
+		@include decorationHover;
 	}
 
-	@layer states {
-		&:is(:disabled, .is-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,25 +1,21 @@
 @use 'exports' as *;
 
 .list {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }
 
 .list-item {
-	@layer mods {
-		&.mod-clickable {
-			@include clickable;
-		}
+	&.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/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/navside/index.scss

@@ -3,105 +3,87 @@
 @use 'exports' as *;
 
 .navSide {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
 
-		.appLayout-navSide & {
-			@include media.min('S') {
-				@include inAppLayoutWide;
-			}
+	.appLayout-navSide & {
+		@include media.min('S') {
+			@include inAppLayoutWide;
+		}
 
-			@include media.max('S') {
-				@include inAppLayoutNarrow;
-			}
+		@include media.max('S') {
+			@include inAppLayoutNarrow;
 		}
 	}
 
-	@layer mods {
-		&.mod-withBanner {
-			@include banner;
-		}
+	&.mod-withBanner {
+		@include banner;
+	}
 
-		&.mod-compact {
-			@include media.min('S') {
-				@include compact;
+	&.mod-compact {
+		@include media.min('S') {
+			@include compact;
 
-				.navSide-item-link {
-					&:hover {
-						@include compactHover;
-					}
+			.navSide-item-link {
+				&:hover {
+					@include compactHover;
+				}
 
-					&:is(.is-active, .active) {
-						@include compactActive;
-					}
+				&:is(.is-active, .active) {
+					@include compactActive;
 				}
 			}
 		}
 	}
 
-	@layer mods {
-		@include media.max('S') {
-			@include mobile;
-		}
-	}
+	@include media.max('S') {
+		@include mobile;
 
-	@layer states {
-		@include media.max('S') {
-			&:not(.is-open, .open) {
-				.navSide-item {
-					&:not(.mod-mobileToggle) {
-						@include mobileHidden;
-					}
+		&:not(.is-open, .open) {
+			.navSide-item {
+				&:not(.mod-mobileToggle) {
+					@include mobileHidden;
 				}
 			}
+		}
 
-			&:is(.is-open, .open) {
-				@include mobileOpen;
-
-				&.mod-withBanner {
-					@include mobileOpenBanner;
+		&.mod-withBanner {
+			.navSide-item {
+				&.mod-mobileToggle {
+					@include banner;
 				}
 			}
 		}
-	}
 
-	@layer mods {
-		@include media.max('S') {
+		&:is(.is-open, .open) {
+			@include mobileOpen;
+
 			&.mod-withBanner {
-				.navSide-item {
-					&.mod-mobileToggle {
-						@include banner;
-					}
-				}
+				@include mobileOpenBanner;
 			}
 		}
 	}
 }
 
 .navSide-item {
-	@layer mods {
-		&.mod-mobileToggle {
-			@include mobileToggle;
-		}
+	&:not(.is-open) {
+		@include notOpen;
 	}
 
-	@layer states {
-		&:not(.is-open) {
-			@include notOpen;
-		}
+	&.mod-mobileToggle {
+		@include mobileToggle;
+	}
 
-		&:is(.is-open, .open) {
-			@include expanded;
+	&:is(.is-open, .open) {
+		@include expanded;
 
-			.navSide-item-subMenu-link {
-				&:is(:hover) {
-					@include sublinkHover;
-				}
+		.navSide-item-subMenu-link {
+			&:is(:hover) {
+				@include sublinkHover;
+			}
 
-				&:is(.is-active, .active) {
-					@include sublinkActive;
-				}
+			&:is(.is-active, .active) {
+				@include sublinkActive;
 			}
 		}
 	}
@@ -109,23 +91,19 @@
 
 .navSide-item-subMenu-link,
 .navSide-item-link {
-	@layer states {
-		&:is(.is-active, .active) {
-			@include active;
-		}
+	&:is(.is-active, .active) {
+		@include active;
+	}
 
-		&:is([aria-expanded='true']) {
-			@include expanded;
-		}
+	&:is([aria-expanded='true']) {
+		@include expanded;
 	}
 }
 
 html {
-	@layer states {
-		&:is(.hasMenu, .withMenu) {
-			@include media.max('S') {
-				@include overlay;
-			}
+	&:is(.hasMenu, .withMenu) {
+		@include media.max('S') {
+			@include overlay;
 		}
 	}
 }

package/src/components/newBadge/index.scss

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