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

package/src/components/inlineMessage/index.scss

@@ -1,28 +1,22 @@
 @use 'exports' as *;
 
 .inlineMessage {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 
-	@layer mods {
-		&.is-success {
-			@include success;
-		}
+	&.is-success {
+		@include success;
+	}
 
-		&.is-warning {
-			@include warning;
-		}
+	&.is-warning {
+		@include warning;
+	}
 
-		&.is-error {
-			@include error;
-		}
+	&.is-error {
+		@include error;
 	}
 }

package/src/components/inputFramed/index.scss

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

package/src/components/label/index.scss

@@ -1,22 +1,18 @@
 @use 'exports' as *;
 
 .label {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-number {
-			@include number;
+	&.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,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 mods {
-		&: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 mods {
-		&: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/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 mods {
-		&[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 mods {
-		&.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 mods {
-		&[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;
 						}
 					}
 				}