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

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,64 +1,56 @@
 @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;
 	}
 }
 
 .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,12 +1,9 @@
 @use 'exports' as *;
 
 .box {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
 	// .mod-grey is deprecated
 	&.mod-neutral,
 	&.mod-grey {
@@ -21,11 +18,8 @@
 	&.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,174 +1,180 @@
 @use 'exports' as *;
 
 .button {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.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-S {
-					@include iconOnLeftS;
-				}
+	&.mod-withIcon {
+		&.mod-iconOnLeft {
+			@include iconOnLeft;
 
-				&.mod-XS {
-					@include iconOnLeftXS;
-				}
+			&.mod-S {
+				@include iconOnLeftS;
 			}
 
-			&.mod-iconOnRight {
-				@include iconOnRight;
-
-				&.mod-S {
-					@include iconOnRightS;
-				}
-
-				&.mod-XS {
-					@include iconOnRightXS;
-				}
+			&.mod-XS {
+				@include iconOnLeftXS;
 			}
 		}
 
-		&.mod-onlyIcon {
-			@include onlyIcon;
+		&.mod-iconOnRight {
+			@include iconOnRight;
 
 			&.mod-S {
-				@include onlyIconS;
+				@include iconOnRightS;
 			}
 
 			&.mod-XS {
-				@include onlyIconXS;
+				@include iconOnRightXS;
 			}
 		}
+	}
 
-		&:has(.numericBadge) {
-			@include counter;
+	&.mod-onlyIcon {
+		@include onlyIcon;
 
-			&.mod-S {
-				@include counterS;
-			}
+		&.mod-S {
+			@include onlyIconS;
+		}
 
-			&.mod-XS {
-				@include counterXS;
-			}
+		&.mod-XS {
+			@include onlyIconXS;
 		}
+	}
 
-		// .mod-delete is deprecated
-		&.mod-critical, &.mod-delete {
-			@include critical;
+	&:has(.numericBadge) {
+		@include counter;
 
-			// .mod-link is deprecated
-			&.mod-text,
-			&.mod-link {
-				@include criticalGhost;
-			}
+		&.mod-S {
+			@include counterS;
+		}
 
-			// .mod-outline is deprecated
-			&.mod-outlined,
-			&.mod-outline {
-				@include criticalOutlined;
-			}
+		&.mod-XS {
+			@include counterXS;
 		}
+	}
 
-		// .mod-invert is deprecated
-		&.mod-inverted,
-		&.mod-invert {
-			@include inverted;
+	// .mod-delete is deprecated
+	&.mod-critical, &.mod-delete {
+		@include critical;
+
+		// .mod-link is deprecated
+		&.mod-text,
+		&.mod-link {
+			@include criticalGhost;
 		}
 
-		&.mod-more {
-			@include more;
+		// .mod-outline is deprecated
+		&.mod-outlined,
+		&.mod-outline {
+			@include criticalOutlined;
+		}
+	}
 
-			&.mod-S {
-				@include moreS;
-			}
+	// .mod-invert is deprecated
+	&.mod-inverted,
+	&.mod-invert {
+		@include inverted;
+	}
 
-			&.mod-XS {
-				@include moreXS;
-			}
+	&.mod-more {
+		@include more;
+
+		&.mod-S {
+			@include moreS;
+		}
+
+		&.mod-XS {
+			@include moreXS;
 		}
 	}
 
-	@layer states {
-		// .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-outlined {
-				@include loadingOutlined;
-			}
+		&.mod-XS {
+			@include loadingXS;
+		}
 
-			&.mod-ghost {
-				@include loadingGhost;
-			}
+		&.mod-outlined {
+			@include loadingOutlined;
 		}
 
-		// .error is deprecated
-		&.is-error,
-		&.error {
-			@include error;
+		&.mod-ghost {
+			@include loadingGhost;
 		}
+	}
 
-		// .success is deprecated
-		&.is-success,
-		&.success {
-			@include success;
+	// .error is deprecated
+	&.is-error,
+	&.error {
+		@include error;
+	}
 
-			&.mod-outlined {
-				@include successOutlined;
-			}
+	// .success is deprecated
+	&.is-success,
+	&.success {
+		@include success;
 
-			&.mod-ghost {
-				@include successGhost;
-			}
+		&.mod-outlined {
+			@include successOutlined;
 		}
 
-		// .disabled is deprecated
-		&.is-disabled,
-		&.disabled {
-			@include disabled;
+		&.mod-ghost {
+			@include successGhost;
 		}
+
+		&.mod-S {
+			@include successS;
+		}
+
+		&.mod-XS {
+			@include successXS;
+		}
+	}
+
+	// .disabled is deprecated
+	&.is-disabled,
+	&.disabled {
+		@include disabled;
 	}
 }

package/src/components/button/mods.scss

@@ -95,7 +95,7 @@
 	}
 
 	&:disabled {
-		--components-button-backgroundColor: var(--palettes-neutral-0);
+		--components-button-backgroundColor: transparent;
 		--components-button-color: var(--pr-t-color-text-disabled);
 	}
 }
@@ -126,23 +126,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/button/states.scss

@@ -32,6 +32,11 @@
 	@include loading.spinner(var(--pr-t-font-body-S-lineHeight));
 }
 
+@mixin loadingXS {
+	@include loading.spinner(var(--pr-t-font-body-XS-lineHeight));
+	--commons-loading-borderWidth: 2px;
+}
+
 @mixin loadingOutlined {
 	--components-button-backgroundColor: var(--palettes-neutral-0);
 	--commons-loading-frontground: var(--palettes-neutral-300);
@@ -68,6 +73,19 @@
 	}
 }
 
+@mixin successS {
+	&::after {
+		font-size: var(--pr-t-font-body-S-lineHeight);
+		block-size: var(--pr-t-font-body-S-lineHeight);
+	}
+}
+
+@mixin successXS {
+	&::after {
+		font-size: var(--pr-t-font-body-XS-lineHeight);
+		block-size: var(--pr-t-font-body-XS-lineHeight);
+	}
+}
 
 @mixin successOutlined {
 	--components-button-backgroundColor: var(--palettes-neutral-0);

package/src/components/buttonGroup/component.scss

@@ -66,5 +66,22 @@
 
 	&: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;
+			}
+
+			&::before {
+				content: none;
+			}
+		}
 	}
 }

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;
 	}
 }