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

package/src/components/numericBadge/index.scss

@@ -1,36 +1,30 @@
 @use 'exports' as *;
 
 .numericBadge {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&.mod-S {
+		@include S;
+	}
+
+	&.mod-XS {
+		@include XS;
 	}
 
-	@layer mods {
+	&.is-loading {
+		@include loading;
+
 		&.mod-S {
-			@include S;
+			@include loadingS;
 		}
 
 		&.mod-XS {
-			@include XS;
+			@include loadingXS;
 		}
 	}
 
-	@layer states {
-		&.is-loading {
-			@include loading;
-
-			&.mod-S {
-				@include loadingS;
-			}
-
-			&.mod-XS {
-				@include loadingXS;
-			}
-		}
-
-		&:focus-within {
-			@include focusVisible;
-		}
+	&:focus-within {
+		@include focusVisible;
 	}
 }

package/src/components/pageHeader/index.scss

@@ -2,38 +2,34 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .pageHeader {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		// .mod-withMenu is deprecated
-		&.mod-withHorizontalNavigation,
-		&:has(.horizontalNavigation),
-		&.mod-withMenu {
-			@include horizontalNavigation;
-		}
+	// .mod-withMenu is deprecated
+	&.mod-withHorizontalNavigation,
+	&:has(.horizontalNavigation),
+	&.mod-withMenu {
+		@include horizontalNavigation;
+	}
 
-		&:has(.breadcrumbs),
-		&.mod-withBreadcrumbs {
-			@include breadcrumbs;
-		}
+	&:has(.breadcrumbs),
+	&.mod-withBreadcrumbs {
+		@include breadcrumbs;
+	}
 
-		&.mod-sticky {
-			@include sticky;
-
-			@include media.min('S') {
-				@include stickyWide;
-			}
-		}
+	&.mod-sticky {
+		@include sticky;
 
 		@include media.min('S') {
-			@include wide;
+			@include stickyWide;
 		}
+	}
 
-		&:has(.pageHeader-containerOptional) {
-			@include withContainer;
-		}
+	@include media.min('S') {
+		@include wide;
+	}
+
+	&:has(.pageHeader-containerOptional) {
+		@include withContainer;
 	}
 }

package/src/components/pagination/index.scss

@@ -1,22 +1,16 @@
 @use 'exports' as *;
 
 .pagination {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer components {
-		&.mod-mods {
-			@include compact;
-		}
+	&.mod-compact {
+		@include compact;
 	}
 }
 
 .pagination-navigation-item {
-	@layer states {
-		&:is(.is-ellipsis, .ellipsis) {
-			@include ellipsis;
-		}
+	&:is(.is-ellipsis, .ellipsis) {
+		@include ellipsis;
 	}
 }

package/src/components/plgPush/index.scss

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

package/src/components/popover/component.scss

@@ -36,23 +36,6 @@
 		.popover-contentOptional {
 			padding: var(--components-popover-padding);
 		}
-
-		.popover-close {
-			@include button.outlined;
-			@include button.XS;
-			@include button.onlyIconXS;
-
-			padding: 0;
-			border-radius: 50%;
-			position: absolute;
-			inset-inline-start: calc(var(--pr-t-spacings-100) * -1);
-			inset-block-start: calc(var(--pr-t-spacings-100) * -1);
-			z-index: 2;
-
-			&:not(:focus-visible) {
-				@include a11y.mask;
-			}
-		}
 	}
 
 	@keyframes popup {

package/src/components/popover/index.scss

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

package/src/components/progress/index.scss

@@ -1,24 +1,18 @@
 @use 'exports' as *;
 
 .progress {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-indeterminate {
-			@include indeterminate;
-		}
+	&.mod-indeterminate {
+		@include indeterminate;
 	}
 
-	@layer states {
-		&:is(.is-success, .success, .palette-success) {
-			@include success;
-		}
+	&:is(.is-success, .success, .palette-success) {
+		@include success;
+	}
 
-		&:is(.is-error, .error, .palette-error) {
-			@include error;
-		}
+	&:is(.is-error, .error, .palette-error) {
+		@include error;
 	}
 }

package/src/components/radio/index.scss

@@ -1,31 +1,25 @@
 @use 'exports' as *;
 
 .radio {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-inline {
-			@include inline;
-		}
+	&.mod-inline {
+		@include inline;
+	}
 
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 }
 
 .radio-input {
-	@layer states {
-		&[disabled],
-		&[read-only] {
-			@include disabled;
+	&[disabled],
+	&[read-only] {
+		@include disabled;
 
-			&:checked {
-				@include disabledChecked;
-			}
+		&:checked {
+			@include disabledChecked;
 		}
 	}
 }

package/src/components/radioButtons/index.scss

@@ -1,26 +1,20 @@
 @use 'exports' as *;
 
 .radioButtons {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-XS {
-			@include XS;
-		}
+	&.mod-XS {
+		@include XS;
 	}
 }
 
 .radioButtons-item-input {
-	@layer states {
-		&:is(:disabled, .is-disabled, .disabled) {
-			@include disabled;
-		}
+	&:is(:disabled, .is-disabled, .disabled) {
+		@include disabled;
 	}
 }

package/src/components/radioField/index.scss

@@ -1,76 +1,70 @@
 @use 'exports' as *;
 
 .radioField {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
 	}
 }
 
 .radioField-input {
-	@layer states {
-		&:focus-visible {
-			@include focusVisible;
-		}
+	&:focus-visible {
+		@include focusVisible;
+	}
+
+	&:hover {
+		@include hover;
+	}
+
+	&:active {
+		@include active;
+	}
+
+	&[aria-invalid='true'] {
+		@include invalid;
 
 		&:hover {
-			@include hover;
+			@include invalidHover;
 		}
 
 		&:active {
-			@include active;
+			@include invalidActive;
 		}
+	}
 
-		&[aria-invalid='true'] {
-			@include invalid;
+	&:disabled {
+		&,
+		&:hover {
+			@include disabled;
+		}
+	}
 
-			&:hover {
-				@include invalidHover;
-			}
+	&:checked {
+		@include checked;
 
-			&:active {
-				@include invalidActive;
-			}
+		&:hover {
+			@include checkedHover;
+		}
+
+		&:active {
+			@include checkedActive;
 		}
 
 		&:disabled {
-			&,
-			&:hover {
-				@include disabled;
-			}
+			@include checkedDisabled;
 		}
 
-		&:checked {
-			@include checked;
+		&[aria-invalid='true'] {
+			@include checkedInvalid;
 
 			&:hover {
-				@include checkedHover;
+				@include checkedInvalidHover;
 			}
 
 			&:active {
-				@include checkedActive;
-			}
-
-			&:disabled {
-				@include checkedDisabled;
-			}
-
-			&[aria-invalid='true'] {
-				@include checkedInvalid;
-
-				&:hover {
-					@include checkedInvalidHover;
-				}
-
-				&:active {
-					@include checkedInvalidActive;
-				}
+				@include checkedInvalidActive;
 			}
 		}
 	}

package/src/components/readMore/index.scss

@@ -1,34 +1,28 @@
 @use 'exports' as *;
 
 .readMore {
-	@layer components {
-		@include vars;
-		@include component;
+	@include vars;
+	@include component;
+
+	&:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
+		@include expanded;
 	}
 
-	@layer states {
-		&:has(.readMore-link[aria-expanded='true'], .readMore-content:focus-within) {
-			@include expanded;
-		}
+	&.is-disabled {
+		@include disabled;
+	}
 
-		&.is-disabled {
+	&.mod-openOnly {
+		&:has(.readMore-link[aria-expanded='true']) {
 			@include disabled;
 		}
 	}
 
-	@layer mods {
-		&.mod-openOnly {
-			&:has(.readMore-link[aria-expanded='true']) {
-				@include disabled;
-			}
-		}
-
-		&.mod-default {
-			@include default;
-		}
+	&.mod-default {
+		@include default;
+	}
 
-		&.mod-sunken {
-			@include sunken;
-		}
+	&.mod-sunken {
+		@include sunken;
 	}
 }

package/src/components/richText/index.scss

@@ -1,32 +1,26 @@
 @use 'exports' as *;
 
 .richTextField {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer states {
-		&:hover {
-			@include hover;
-		}
+	&:hover {
+		@include hover;
+	}
 
-		&:has(.richTextField-content[aria-invalid='true']) {
-			@include error;
+	&.mod-autoResize {
+		@include autoResize;
+	}
 
-			&:hover {
-				@include errorHover;
-			}
-		}
+	&:has(.richTextField-content[aria-invalid='true']) {
+		@include error;
 
-		&.is-disabled {
-			@include disabled;
+		&:hover {
+			@include errorHover;
 		}
 	}
 
-	@layer mods {
-		&.mod-autoResize {
-			@include autoResize;
-		}
+	&.is-disabled {
+		@include disabled;
 	}
 }

package/src/components/scrollBox/index.scss

@@ -1,22 +1,18 @@
 @use 'exports' as *;
 
 .scrollBox {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer states {
-		&.is-firstVisible {
-			@include firstVisible;
-		}
+	&.is-firstVisible {
+		@include firstVisible;
+	}
 
-		&.is-lastVisible {
-			@include lastVisible;
-		}
+	&.is-lastVisible {
+		@include lastVisible;
+	}
 
-		&.is-disabled {
-			@include disabled;
-		}
+	&.is-disabled {
+		@include disabled;
 	}
 }

package/src/components/section/index.scss

@@ -2,24 +2,20 @@
 @use 'exports' as *;
 
 .section {
-	@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;
+	}
 
-		@include media.max('S') {
-			@include S;
-		}
+	@include media.max('S') {
+		@include S;
+	}
 
-		@include media.max('XS') {
-			@include XS;
-		}
+	@include media.max('XS') {
+		@include XS;
 	}
 }

package/src/components/segmentedControl/index.scss

@@ -4,50 +4,40 @@
 // .viewTabs is deprecated
 .segmentedControl,
 .viewTabs {
-	@layer components {
-		@include vars;
-		@include component;
-	}
+	@include vars;
+	@include component;
 
-	@layer mods {
-		&.mod-S {
-			@include S;
-		}
+	&.mod-S {
+		@include S;
+	}
 
-		&.mod-vertical {
-			@include vertical;
-		}
+	&.mod-vertical {
+		@include vertical;
+	}
 
-		@include media.max('XXS') {
-			@include vertical;
-		}
+	@include media.max('XXS') {
+		@include vertical;
 	}
 }
 
 // .viewTabs-item-tab is deprecated
 .segmentedControl-item-action,
 .viewTabs-item-tab {
-	@layer states {
-		.segmentedControl-item-input:checked + &,
-		&[aria-selected='true'] {
-			@include selected;
-		}
+	.segmentedControl-item-input:checked + &,
+	&[aria-selected='true'] {
+		@include selected;
 	}
 }
 
 .segmentedControl-item-action:disabled,
 .segmentedControl-item-input:disabled ~ .segmentedControl-item-action {
-	@layer states {
 		@include disabled;
-	}
 }
 
 // .viewTabs_panel is deprecated
 .segmentedControl_panel,
 .viewTabs_panel {
-	@layer states {
-		&:not(.is-active, .active) {
-			@include panelInactive;
-		}
+	&:not(.is-active, .active) {
+		@include panelInactive;
 	}
 }