@lucca-front/scss 20.3.0-rc.5 → 20.3.0

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,14 +6,20 @@
 @use 'exports' as *;
 
 .sample {
-	@include vars;
-	@include component;
-
-	&.mod-sampleModifierA {
-		@include sampleModifierA;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.is-sampleStateA {
-		@include sampleStateA;
+	@layer mods {
+		&.mod-sampleModifierA {
+			@include sampleModifierA;
+		}
+
+		&.is-sampleStateA {
+			@include sampleStateA;
+		}
 	}
+
+	color: blue;
 }

package/src/components/appLayout/component.scss

@@ -7,6 +7,7 @@
 	inline-size: var(--components-appLayout-inlineSize);
 	grid-template: var(--components-appLayout-gridTemplate);
 	display: grid;
+	isolation: isolate;
 
 	@at-root ($atRoot) {
 		.appLayout-banner {

package/src/components/appLayout/index.scss

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

package/src/components/avatar/index.scss

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

package/src/components/box/index.scss

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

package/src/components/breadcrumbs/index.scss

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

package/src/components/button/index.scss

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

package/src/components/button/mods.scss

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

package/src/components/button/states.scss

@@ -41,7 +41,9 @@
 @mixin loadingXS {
 	@include loading.spinner(var(--pr-t-font-body-XS-lineHeight));
 
-	--commons-loading-borderWidth: 2px;
+	& {
+		--commons-loading-borderWidth: 2px;
+	}
 }
 
 @mixin loadingOutlined {
@@ -135,8 +137,6 @@
 
 
 @mixin error {
-	@include keyframe.shake;
-
 	animation-name: shake;
 	animation-iteration-count: 1;
 	animation-duration: var(--commons-animations-durations-standard);

package/src/components/buttonGroup/component.scss

@@ -66,22 +66,5 @@
 
 	&:is(ul) {
 		flex-wrap: wrap;
-
-		.button.mod-more {
-			block-size: 100%;
-			min-block-size: 2.25rem;
-
-			&.mod-S {
-				min-block-size: 2rem;
-			}
-
-			&.mod-XS {
-				min-block-size: 1.5rem;
-			}
-
-			&::after {
-				content: none;
-			}
-		}
 	}
 }