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

package/src/components/timeline/index.scss

@@ -1,114 +1,108 @@
 @use 'exports' as *;
 
 .timeline-step {
-	@layer states {
-		&:is([aria-current='step']) {
-			@include current;
-		}
+	&:is([aria-current='step']) {
+		@include current;
 	}
 }
 
 .timeline {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-number {
+		@include number;
+
+		&.mod-L {
+			@include numberL;
+		}
+	}
+
+	&.mod-S {
+		@include S;
 	}
 
-	@layer mods {
-		&.mod-number {
-			@include number;
+	&.mod-L {
+		@include L;
+	}
 
-			&.mod-L {
-				@include numberL;
-			}
+	&.mod-vertical {
+		@include vertical;
+
+		&:not(.mod-S, .mod-L) {
+			@include verticalNotSNotL;
 		}
 
 		&.mod-S {
-			@include S;
+			@include verticalS;
 		}
 
 		&.mod-L {
-			@include L;
+			@include verticalL;
 		}
 
-		&.mod-vertical {
-			@include vertical;
-
-			&:not(.mod-S, .mod-L) {
-				@include verticalNotSNotL;
-			}
-
-			&.mod-S {
-				@include verticalS;
-			}
+		&.mod-progress {
+			@include verticalProgress;
+		}
+	}
 
-			&.mod-L {
-				@include verticalL;
-			}
+	&.mod-addStep {
+		@include addStep;
 
-			&.mod-progress {
-				@include verticalProgress;
-			}
+		&.mod-L {
+			@include addStepL;
 		}
 
-		&.mod-addStep {
-			@include addStep;
+		&.mod-vertical {
+			@include addStepVertical;
 
-			&.mod-L {
-				@include addStepL;
+			&:not(.mod-L) {
+				@include addStepVerticalNotL;
 			}
 
-			&.mod-vertical {
-				@include addStepVertical;
-
-				&:not(.mod-L) {
-					@include addStepVerticalNotL;
-				}
-
-				&.mod-L {
-					@include addStepVerticalL;
-				}
+			&.mod-L {
+				@include addStepVerticalL;
 			}
 		}
+	}
 
-		&.mod-checkedPastStep {
-			@include checkedPastStep;
-
-			&.mod-L {
-				@include checkedPastStepL;
-			}
+	&.mod-checkedPastStep {
+		@include checkedPastStep;
 
-			&.mod-vertical:not(.mod-L) {
-				@include checkedPastStepVerticalNotL;
-			}
+		&.mod-L {
+			@include checkedPastStepL;
 		}
 
-		&.mod-addBetweenStep {
-			@include addBetweenStep;
+		&.mod-vertical:not(.mod-L) {
+			@include checkedPastStepVerticalNotL;
+		}
+	}
 
-			&.mod-vertical:not(.mod-L) {
-				@include addBetweenStepVerticalNotL;
-			}
+	&.mod-addBetweenStep {
+		@include addBetweenStep;
 
-			&.mod-L {
-				@include addBetweenStepL;
-			}
+		&.mod-vertical:not(.mod-L) {
+			@include addBetweenStepVerticalNotL;
 		}
 
-		&.mod-progress {
-			@include progress;
+		&.mod-L {
+			@include addBetweenStepL;
 		}
+	}
 
-		&.mod-dashed {
-			@include dashed;
+	&.mod-progress {
+		@include progress;
+	}
 
-			&.mod-vertical {
-				@include dashedVertical;
-			}
-		}
+	&.mod-dashed {
+		@include dashed;
 
-		&:not(.mod-checkedPastStep) {
-			@include notPastChecked;
+		&.mod-vertical {
+			@include dashedVertical;
 		}
 	}
+
+	&:not(.mod-checkedPastStep) {
+		@include notPastChecked;
+	}
 }

package/src/components/timepicker/index.scss

@@ -2,32 +2,26 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 
 .timePicker {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-stepper {
-			@include stepper;
-		}
+	&.mod-stepper {
+		@include stepper;
+	}
 
-		&.mod-stepperHover {
-			@include stepperHover;
-		}
+	&.mod-stepperHover {
+		@include stepperHover;
 	}
 
-	@layer states {
-		&:has([aria-invalid='true']) {
-			@include invalid;
-		}
+	&:has([aria-invalid='true']) {
+		@include invalid;
+	}
 
-		&:has([disabled]) {
-			@include disabled;
-		}
+	&:has([disabled]) {
+		@include disabled;
 	}
 }

package/src/components/title/index.scss

@@ -1,56 +1,43 @@
 @use 'exports' as *;
 
-@layer base {
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		@include vars;
-		@include component;
-	}
-
-	h1 {
-		@include h1;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@include vars;
+	@include component;
+
+	&.mod-elementAfterText {
+		@include elementAfterText;
 	}
+}
 
-	h2 {
-		@include h2;
-	}
+h1 {
+	@include h1;
 
-	h3 {
-		@include h3;
+	&.mod-XXXL {
+		@include XXXL;
 	}
+}
 
-	h4 {
-		@include h4;
-	}
+h2 {
+	@include h2;
+}
 
-	h5 {
-		@include h5;
-	}
+h3 {
+	@include h3;
+}
 
-	h6 {
-		@include h6;
-	}
+h4 {
+	@include h4;
 }
 
-@layer mods {
-	h1 {
-		&.mod-XXXL {
-			@include XXXL;
-		}
-	}
+h5 {
+	@include h5;
+}
 
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		&.mod-elementAfterText {
-			@include elementAfterText;
-		}
-	}
+h6 {
+	@include h6;
 }

package/src/components/title/mods.scss

@@ -23,7 +23,7 @@
 	--sizes-verticalPadding: var(--sizes-M-verticalPadding); // Deprecated
 }
 
-// Deprecated
+/* Deprecated */
 @mixin h5 {
 	--components-title-font: 600 var(--pr-t-font-fontSize-175)/var(--pr-t-font-lineHeight-250) var(--pr-t-font-family);
 	--sizes-verticalPadding: var(--sizes-S-verticalPadding);

package/src/components/titleSection/index.scss

@@ -2,51 +2,43 @@
 @use 'exports' as *;
 
 .titleSection {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }
 
 %titleXXXL {
-	@layer components {
-		@include XXXL('!important');
-	}
+	@include XXXL('!important');
 }
 
 %titleImportant {
-	@layer components {
-		@include title('!important');
-	}
+	@include title('!important');
 }
 
 .titleSection-sub {
-	@layer components {
-		:is(h1, h1.mod-XXXL) ~ & {
-			@include XXXL;
-		}
+	:is(h1, h1.mod-XXXL) ~ & {
+		@include XXXL;
+	}
 
-		:is(.pr-u-h1, .pr-u-h1.mod-XXXL) ~ & {
-			@extend %titleXXXL;
-		}
+	:is(.pr-u-h1, .pr-u-h1.mod-XXXL) ~ & {
+		@extend %titleXXXL;
+	}
 
-		:is(h2, h3, h4, h5, h6) ~ & {
-			@include title;
-		}
+	:is(h2, h3, h4, h5, h6) ~ & {
+		@include title;
+	}
 
-		:is(.pr-u-h2, .pr-u-h3, .pr-u-h4, .pr-u-h5, .pr-u-h6) ~ & {
-			@extend %titleImportant;
-		}
+	:is(.pr-u-h2, .pr-u-h3, .pr-u-h4, .pr-u-h5, .pr-u-h6) ~ & {
+		@extend %titleImportant;
+	}
 
-		// Deprecated .u- utilities
-		@if config.$deprecatedUtilityPrefix {
-			:is(.u-h1, .u-h1.mod-XXXL) ~ & {
-				@extend %titleXXXL;
-			}
+	// Deprecated .u- utilities
+	@if config.$deprecatedUtilityPrefix {
+		:is(.u-h1, .u-h1.mod-XXXL) ~ & {
+			@extend %titleXXXL;
+		}
 
-			:is(.u-h2, .u-h3, .u-h4, .u-h5, .u-h6) ~ & {
-				@extend %titleImportant;
-			}
+		:is(.u-h2, .u-h3, .u-h4, .u-h5, .u-h6) ~ & {
+			@extend %titleImportant;
 		}
 	}
 }

package/src/components/toast/index.scss

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

package/src/components/tooltip/index.scss

@@ -1,42 +1,38 @@
 @use 'exports' as *;
 
 .tooltip {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.is-above {
+		@include above;
+	}
+
+	&.is-below {
+		@include below;
 	}
 
-	@layer states {
+	&.is-before {
+		@include before;
+
 		&.is-above {
-			@include above;
+			@include beforeAbove;
 		}
 
 		&.is-below {
-			@include below;
+			@include beforeBelow;
 		}
+	}
 
-		&.is-before {
-			@include before;
-
-			&.is-above {
-				@include beforeAbove;
-			}
+	&.is-after {
+		@include after;
 
-			&.is-below {
-				@include beforeBelow;
-			}
+		&.is-above {
+			@include afterAbove;
 		}
 
-		&.is-after {
-			@include after;
-
-			&.is-above {
-				@include afterAbove;
-			}
-
-			&.is-below {
-				@include afterBelow;
-			}
+		&.is-below {
+			@include afterBelow;
 		}
 	}
 }

package/src/components/userPopover/index.scss

@@ -1,8 +1,6 @@
 @use 'exports' as *;
 
 .userPopover {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 }

package/src/components/userTile/index.scss

@@ -1,37 +1,33 @@
 @use 'exports' as *;
 
 .userTile {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@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 is deprecated
-		&.mod-XL {
-			@include XL;
-		}
+	// .mod-XL is deprecated
+	&.mod-XL {
+		@include XL;
+	}
 
-		// .mod-XXL is deprecated
-		&.mod-XXL {
-			@include XXL;
-		}
+	// .mod-XXL is deprecated
+	&.mod-XXL {
+		@include XXL;
+	}
 
-		// .mod-XXXL is deprecated
-		&.mod-XXXL {
-			@include XXXL;
-		}
+	// .mod-XXXL is deprecated
+	&.mod-XXXL {
+		@include XXXL;
 	}
 }

package/src/components/verticalNavigation/index.scss

@@ -1,45 +1,35 @@
 @use 'exports' as *;
 
 .verticalNavigation {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-iconless {
-			@include iconless;
-		}
+	&.mod-iconless {
+		@include iconless;
 	}
 }
 
 .verticalNavigation-list {
-	@layer mods {
-		&.mod-child {
-			@include child;
-		}
+	&.mod-child {
+		@include child;
 	}
 }
 
 .verticalNavigation-list-item-link {
-	@layer states {
-		&[aria-expanded='true'] {
-			@include expanded;
-		}
+	&[aria-expanded='true'] {
+		@include expanded;
+	}
 
-		&[aria-current='page'] {
-			@include active;
-		}
+	&[aria-current='page'] {
+		@include active;
+	}
 
-		&[disabled],
-		&.is-disabled {
-			@include disabled;
-		}
+	&[disabled],
+	&.is-disabled {
+		@include disabled;
 	}
 }
 
 span.verticalNavigation-list-item-link {
-	@layer states {
-		@include disabled;
-	}
+	@include disabled;
 }