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

package/src/commons/utils/reset.scss

@@ -33,7 +33,7 @@
 @mixin clearfix($suffix: '') {
 	&::before,
 	&::after {
-		// stylelint-disable-next-line no-irregular-whitespace
+		/* stylelint-disable-next-line no-irregular-whitespace */
 		content: ' ' / '' #{$suffix};
 		display: table #{$suffix};
 	}

package/src/components/_sample/index.scss

@@ -6,22 +6,14 @@
 @use 'exports' as *;
 
 .sample {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-sampleModifierA {
-			@include sampleModifierA;
-		}
+	&.mod-sampleModifierA {
+		@include sampleModifierA;
 	}
 
-	@layer states {
-		&.is-sampleStateA {
-			@include sampleStateA;
-		}
+	&.is-sampleStateA {
+		@include sampleStateA;
 	}
-
-	color: blue;
 }

package/src/components/appLayout/index.scss

@@ -2,20 +2,16 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .appLayout {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
 
-		@include media.min('S') {
-			@include wide;
-		}
+	@include media.min('S') {
+		@include wide;
 	}
 
-	@layer mods {
-		@include media.max('S') {
-			&.mod-mobileNavSideBottom {
-				@include mobileNavSideBottom;
-			}
+	@include media.max('S') {
+		&.mod-mobileNavSideBottom {
+			@include mobileNavSideBottom;
 		}
 	}
 }

package/src/components/avatar/index.scss

@@ -1,41 +1,37 @@
 @use 'exports' as *;
 
-// lu-user-picture is deprecated
 .avatar,
 .lu-user-picture {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	// lu-user-picture is deprecated
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-XS {
-			@include XS;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-L {
-			@include L;
-		}
+	&.mod-L {
+		@include L;
+	}
 
-		&.mod-XL {
-			@include XL;
-		}
+	&.mod-XL {
+		@include XL;
+	}
 
-		&.mod-XXL {
-			@include XXL;
-		}
+	&.mod-XXL {
+		@include XXL;
+	}
 
-		&.mod-XXXL {
-			@include XXXL;
-		}
+	&.mod-XXXL {
+		@include XXXL;
+	}
 
-		&.mod-placeholder {
-			@include placeholder;
-		}
+	&.mod-placeholder {
+		@include placeholder;
 	}
 
 	&.mod-AI {
@@ -44,25 +40,21 @@
 }
 
 .avatarWrapper {
-	@layer components {
-		@include varsWrapper;
-	}
+	@include varsWrapper;
 
-	@layer mods {
-		&.mod-XL {
-			@include wrapperXL;
-		}
+	&.mod-XL {
+		@include wrapperXL;
+	}
 
-		&.mod-L {
-			@include wrapperL;
-		}
+	&.mod-L {
+		@include wrapperL;
+	}
 
-		&.mod-S {
-			@include wrapperS;
-		}
+	&.mod-S {
+		@include wrapperS;
+	}
 
-		&.mod-XS {
-			@include wrapperXS;
-		}
+	&.mod-XS {
+		@include wrapperXS;
 	}
 }

package/src/components/box/index.scss

@@ -1,31 +1,25 @@
 @use 'exports' as *;
 
 .box {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		// .mod-grey is deprecated
-		&.mod-neutral,
-		&.mod-grey {
-			@include neutral;
-		}
+	// .mod-grey is deprecated
+	&.mod-neutral,
+	&.mod-grey {
+		@include neutral;
+	}
 
-		&.mod-withArrow {
-			@include withArrow;
-		}
+	&.mod-withArrow {
+		@include withArrow;
+	}
 
-		// .mod-toggle is deprecated
-		&.mod-toggle {
-			@include toggle;
-		}
+	// .mod-toggle is deprecated
+	&.mod-toggle {
+		@include toggle;
 	}
 }
 
 .box-arrow {
-	@layer components {
-		@include arrow;
-	}
+	@include arrow;
 }

package/src/components/breadcrumbs/index.scss

@@ -1,26 +1,20 @@
 @use 'exports' as *;
 
 .breadcrumbs {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		// .mod-compact is deprecated
-		&.mod-compact {
-			@include compact;
-		}
+	// .mod-compact is deprecated
+	&.mod-compact {
+		@include compact;
 	}
 }
 
 .breadcrumbs-list-item-action {
-	@layer states {
-		// .active is deprecated
-		&.is-active,
-		&.active,
-		&[aria-current='page'] {
-			@include active;
-		}
+	// .active is deprecated
+	&.is-active,
+	&.active,
+	&[aria-current='page'] {
+		@include active;
 	}
 }

package/src/components/button/index.scss

@@ -1,201 +1,195 @@
 @use 'exports' as *;
 
 .button {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-AI {
-			@include AI;
+	@include vars;
+	@include component;
 
-			&.is-success {
-				@include successAI;
-			}
+	&.mod-AI {
+		@include AI;
 
-			&.is-loading {
-				@include loadingAI;
-			}
+		&.is-success {
+			@include successAI;
 		}
 
-		&.mod-block {
-			@include block;
+		&.is-loading {
+			@include loadingAI;
 		}
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-block {
+		@include block;
+	}
 
-		&.mod-XS {
-			@include XS;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-disclosure {
-			@include disclosure;
-		}
+	&.mod-XS {
+		@include XS;
+	}
 
-		// .mod-outline is deprecated
-		&.mod-outlined,
-		&.mod-outline {
-			&:where(:not(.is-success, .is-error)) {
-				@include outlined;
-			}
-		}
+	&.mod-disclosure {
+		@include disclosure;
+	}
 
-		// .mod-link .mod-text deprecated
-		&.mod-text,
-		&.mod-link,
-		&.mod-ghost {
-			&:where(:not(.is-success, .is-error)) {
-				@include ghost;
-			}
+	// .mod-outline is deprecated
+	&.mod-outlined,
+	&.mod-outline {
+		&:where(:not(.is-success, .is-error)) {
+			@include outlined;
 		}
+	}
 
-		&.mod-withIcon {
-			&.mod-iconOnLeft {
-				@include iconOnLeft;
-
-				&.mod-S {
-					@include iconOnLeftS;
-				}
-
-				&.mod-XS {
-					@include iconOnLeftXS;
-				}
-			}
-
-			&.mod-iconOnRight {
-				@include iconOnRight;
-
-				&.mod-S {
-					@include iconOnRightS;
-				}
-
-				&.mod-XS {
-					@include iconOnRightXS;
-				}
-			}
+	// .mod-link .mod-text deprecated
+	&.mod-text,
+	&.mod-link,
+	&.mod-ghost {
+		&:where(:not(.is-success, .is-error)) {
+			@include ghost;
 		}
+	}
 
-		&.mod-onlyIcon {
-			@include onlyIcon;
+	&.mod-withIcon {
+		&.mod-iconOnLeft {
+			@include iconOnLeft;
 
 			&.mod-S {
-				@include onlyIconS;
+				@include iconOnLeftS;
 			}
 
 			&.mod-XS {
-				@include onlyIconXS;
+				@include iconOnLeftXS;
 			}
 		}
 
-		&:has(.numericBadge) {
-			@include counter;
+		&.mod-iconOnRight {
+			@include iconOnRight;
 
 			&.mod-S {
-				@include counterS;
+				@include iconOnRightS;
 			}
 
 			&.mod-XS {
-				@include counterXS;
+				@include iconOnRightXS;
 			}
 		}
+	}
 
-		// .mod-delete is deprecated
-		&.mod-critical, &.mod-delete {
-			@include critical;
+	&.mod-onlyIcon {
+		@include onlyIcon;
 
-			// .mod-link is deprecated
-			&.mod-text,
-			&.mod-link {
-				@include criticalGhost;
-			}
+		&.mod-S {
+			@include onlyIconS;
+		}
 
-			// .mod-outline is deprecated
-			&.mod-outlined,
-			&.mod-outline {
-				@include criticalOutlined;
-			}
+		&.mod-XS {
+			@include onlyIconXS;
 		}
+	}
+
+	&:has(.numericBadge) {
+		@include counter;
 
-		// .mod-invert is deprecated
-		&.mod-inverted,
-		&.mod-invert {
-			@include inverted;
+		&.mod-S {
+			@include counterS;
 		}
 
-		&.mod-more {
-			@include more;
+		&.mod-XS {
+			@include counterXS;
+		}
+	}
 
-			&.mod-S {
-				@include moreS;
-			}
+	// .mod-delete is deprecated
+	&.mod-critical, &.mod-delete {
+		@include critical;
 
-			&.mod-XS {
-				@include moreXS;
-			}
+		// .mod-link is deprecated
+		&.mod-text,
+		&.mod-link {
+			@include criticalGhost;
+		}
+
+		// .mod-outline is deprecated
+		&.mod-outlined,
+		&.mod-outline {
+			@include criticalOutlined;
 		}
 	}
 
-	@layer states {
-		// .loading is deprecated
-		&.is-loading,
-		&.loading {
-			@include loading;
+	// .mod-invert is deprecated
+	&.mod-inverted,
+	&.mod-invert {
+		@include inverted;
+	}
 
-			&.mod-S {
-				@include loadingS;
-			}
+	&.mod-more {
+		@include more;
 
-			&.mod-XS {
-				@include loadingXS;
-			}
+		&.mod-S {
+			@include moreS;
+		}
 
-			&.mod-AI,
-			&.mod-outlined {
-				@include loadingOutlined;
-			}
+		&.mod-XS {
+			@include moreXS;
+		}
+	}
 
-			&.mod-ghost {
-				@include loadingGhost;
-			}
+	// .loading is deprecated
+	&.is-loading,
+	&.loading {
+		@include loading;
+
+		&.mod-S {
+			@include loadingS;
 		}
 
-		// .error is deprecated
-		&.is-error,
-		&.error {
-			@include error;
+		&.mod-XS {
+			@include loadingXS;
 		}
 
-		// .success is deprecated
-		&.is-success,
-		&.success {
-			@include success;
+		&.mod-AI,
+		&.mod-outlined {
+			@include loadingOutlined;
+		}
 
-			&.mod-AI,
-			&.mod-outlined {
-				@include successOutlined;
-			}
+		&.mod-ghost {
+			@include loadingGhost;
+		}
+	}
 
-			&.mod-ghost {
-				@include successGhost;
-			}
+	// .error is deprecated
+	&.is-error,
+	&.error {
+		@include error;
+	}
 
-			&.mod-S {
-				@include successS;
-			}
+	// .success is deprecated
+	&.is-success,
+	&.success {
+		@include success;
 
-			&.mod-XS {
-				@include successXS;
-			}
+		&.mod-AI,
+		&.mod-outlined {
+			@include successOutlined;
+		}
+
+		&.mod-ghost {
+			@include successGhost;
 		}
 
-		// .disabled is deprecated
-		&.is-disabled,
-		&.disabled,
-		&[aria-disabled] {
-			@include disabled;
+		&.mod-S {
+			@include successS;
 		}
+
+		&.mod-XS {
+			@include successXS;
+		}
+	}
+
+	// .disabled is deprecated
+	&.is-disabled,
+	&.disabled,
+	&[aria-disabled] {
+		@include disabled;
 	}
 }

package/src/components/button/mods.scss

@@ -129,23 +129,6 @@
 	}
 }
 
-@mixin moreInsideUl {
-	block-size: 100%;
-	min-block-size: 2.25rem;
-
-	&.mod-S {
-		min-block-size: 2rem;
-	}
-
-	&.mod-XS {
-		min-block-size: 1.5rem;
-	}
-
-	&::before {
-		content: none;
-	}
-}
-
 @mixin moreS {
 	--components-button-minWidth: 1.75rem;
 }

package/src/components/buttonGroup/index.scss

@@ -1,27 +1,15 @@
 @use 'exports' as *;
-@use '@lucca-front/scss/src/components/button/exports' as button;
 
 .button-group {
-	@layer components {
-		@include vars;
-		@include component;
-	}
-
-	@layer mods {
-		&.mod-outlined {
-			@include outlined;
-		}
+	@include vars;
+	@include component;
 
-		// .mod-text deprecated
-		&.mod-text,
-		&.mod-ghost {
-			@include ghost;
-		}
+	&.mod-outlined {
+		@include outlined;
+	}
 
-		&:is(ul) {
-			.button.mod-more {
-				@include button.moreInsideUl;
-			}
-		}
+	// .mod-text deprecated
+	&.mod-text, .mod-ghost {
+		@include ghost;
 	}
 }