@lucca-front/scss 20.3.0-rc.10 → 20.3.0-rc.12

package/src/components/loading/index.scss

@@ -1,34 +1,38 @@
 @use 'exports' as *;
 
 .loading {
-	@include vars;
-	@include component;
-
-	&.mod-L {
-		@include L;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-block {
-		@include block;
-	}
+	@layer mods {
+		&.mod-L {
+			@include L;
+		}
 
-	&[class~='mod-fullPage' i] {
-		@include fullPage;
-	}
+		&.mod-block {
+			@include block;
+		}
 
-	// .mod-dialog is deprecated
-	&.mod-popin,
-	&.mod-dialog {
-		@include popin;
-	}
+		&[class~='mod-fullPage' i] {
+			@include fullPage;
+		}
 
-	// .mod-sidePanel is deprecated
-	&.mod-drawer,
-	&.mod-sidePanel {
-		@include drawer;
-	}
+		// .mod-dialog is deprecated
+		&.mod-popin,
+		&.mod-dialog {
+			@include popin;
+		}
+
+		// .mod-sidePanel is deprecated
+		&.mod-drawer,
+		&.mod-sidePanel {
+			@include drawer;
+		}
 
-	&.mod-invert {
-		@include invert;
+		&.mod-invert {
+			@include invert;
+		}
 	}
 }

package/src/components/main/index.scss

@@ -1,27 +1,33 @@
 @use 'exports' as *;
 
 .main {
-	&:is(.is-notScrollable, .notScrollable) {
-		@include notScrollable;
+	@layer mods {
+		&:is(.is-notScrollable, .notScrollable) {
+			@include notScrollable;
+		}
 	}
 }
 
 .main-content {
-	@include vars;
-	@include component;
-
-	&.mod-withStickyHeader {
-		@include stickyHeader;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-withBanner,
-	.navSide.mod-withBanner ~ &,
-	.mod-withBanner & {
-		@include banner;
-	}
+	@layer mods {
+		&.mod-withStickyHeader {
+			@include stickyHeader;
+		}
+
+		&.mod-withBanner,
+		.navSide.mod-withBanner ~ &,
+		.mod-withBanner & {
+			@include banner;
+		}
 
-	.navSide ~ &,
-	.mod-withMenu & {
-		@include menu;
+		.navSide ~ &,
+		.mod-withMenu & {
+			@include menu;
+		}
 	}
 }

package/src/components/mainLayout/component.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/media';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/components/container/exports' as container;
 
@@ -7,6 +8,20 @@
 	flex-direction: var(--components-mainLayout-flexDirection);
 	block-size: 100%;
 
+	&:target {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			z-index: 5;
+			pointer-events: none;
+
+			@include a11y.focusVisible($offset: -4px, $borderRadius: var(--pr-t-border-radius-default));
+		}
+	}
+
 	@at-root ($atRoot) {
 		.mainLayout-sidebar {
 			overflow-x: hidden;
@@ -56,6 +71,18 @@
 			inset-inline-start: 0;
 			position: var(--components-mainLayout-content-inside-block-position);
 
+			@include media.min(XS) {
+				--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-300);
+			}
+
+			&:first-of-type {
+				margin-block-start: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
+			}
+
+			&:last-of-type {
+				margin-block-end: var(--components-mainLayout-content-inside-block-firstLastOfType-marginBlock);
+			}
+
 			&.mod-overflow {
 				.container {
 					@include container.overflow;

package/src/components/mainLayout/index.scss

@@ -2,36 +2,42 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 .mainLayout {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
 
-	@include media.min('S') {
-		@include wide;
-	}
-
-	&:has(.mainLayout-content-inside-header.mod-sticky) {
-		@include stickyHeader;
-		@include stickyTop;
-	}
-
-	&:has(.mainLayout-content-inside-footer.mod-sticky) {
-		@include stickyFooter;
-		@include stickyBottom;
+		@include media.min('S') {
+			@include wide;
+		}
 	}
-}
 
-.mainLayout-content-inside {
-	&:has(.mainLayout-content-inside-block.mod-overflow) {
-		.mainLayout-content-inside-header {
+	@layer mods {
+		&:has(.mainLayout-content-inside-header.mod-sticky) {
 			@include stickyHeader;
+			@include stickyTop;
 		}
 
-		.mainLayout-content-inside-footer {
+		&:has(.mainLayout-content-inside-footer.mod-sticky) {
 			@include stickyFooter;
+			@include stickyBottom;
 		}
+	}
+}
+
+@layer mods {
+	.mainLayout-content-inside {
+		&:has(.mainLayout-content-inside-block.mod-overflow) {
+			.mainLayout-content-inside-header {
+				@include stickyHeader;
+			}
+
+			.mainLayout-content-inside-footer {
+				@include stickyFooter;
+			}
 
-		.mainLayout-content-inside-block:not(.mod-overflow) {
-			@include stickyBlock;
+			.mainLayout-content-inside-block:not(.mod-overflow) {
+				@include stickyBlock;
+			}
 		}
 	}
 }

package/src/components/mainLayout/vars.scss

@@ -6,4 +6,5 @@
 	--components-mainLayout-content-inside-block-position: static;
 	--components-mainLayout-content-inside-header-insetBlockStart: auto;
 	--components-mainLayout-content-inside-footer-insetBlockEnd: auto;
+	--components-mainLayout-content-inside-block-firstLastOfType-marginBlock: var(--pr-t-spacings-200);
 }

package/src/components/mobileHeader/index.scss

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

package/src/components/mobileNavigation/index.scss

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

package/src/components/mobilePush/index.scss

@@ -3,10 +3,14 @@
 @use 'exports' as *;
 
 .mobilePush-containerWrapper {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
+	}
 
-	@include container.max(30rem, $name: 'mobilePush') {
-		@include narrow;
+	@layer mods {
+		@include container.max(30rem, $name: 'mobilePush') {
+			@include narrow;
+		}
 	}
 }

package/src/components/multiSelect/index.scss

@@ -1,61 +1,79 @@
 @use 'exports' as *;
 
 .multiSelect {
-	@include vars;
-	@include component;
-
-	&.mod-S {
-		@include S;
-	}
-
-	&:has(.multipleSelect-displayer-search:focus-visible) {
-		@include focused;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
-		@include invalid;
-	}
+	@layer mods {
+		&.mod-S {
+			@include S;
+		}
 
-	&:has(.multipleSelect-displayer-search:disabled) {
-		@include disabled;
-	}
+		&.mod-filterPill {
+			@include filterPill;
 
-	&:has([aria-expanded='true']) {
-		@include expanded;
-	}
+			&:has(.multipleSelect-displayer-search:focus-visible) {
+				@include filterPillFocused;
+			}
 
-	&:not(.mod-noClueIcon) {
-		&:has(.multipleSelect-displayer-search:focus-visible),
-		&:has([aria-expanded='true']) {
-			&:not(:has(.multipleSelect-displayer-search:read-only)) {
-				@include searchable;
+			.multipleSelect-displayer {
+				&:has(.multipleSelect-displayer-search:focus-visible) {
+					@include filterPillDisplayerFocused;
+				}
 			}
 		}
-	}
 
-	&.is-selected {
-		@include selected;
-	}
+		&.is-selected {
+			@include selected;
+		}
+
+		&:has(.multipleSelect-displayer-search:focus-visible) {
+			@include focused;
+		}
 
-	&.mod-filterPill {
-		@include filterPill;
+		&:has(.multipleSelect-displayer-search[aria-invalid='true']) {
+			@include invalid;
+		}
+
+		&:has(.multipleSelect-displayer-search:disabled) {
+			@include disabled;
+		}
+
+		&:has([aria-expanded='true']) {
+			@include expanded;
+		}
+
+		&:not(.mod-noClueIcon) {
+			&:has(.multipleSelect-displayer-search:focus-visible),
+			&:has([aria-expanded='true']) {
+				&:not(:has(.multipleSelect-displayer-search:read-only)) {
+					@include searchable;
+				}
+			}
+		}
 	}
 }
 
-.multipleSelect-displayer-filter {
-	min-inline-size: 0;
+@layer components {
+	.multipleSelect-displayer-filter {
+		min-inline-size: 0;
+	}
 }
 
-.multipleSelect-displayer {
-	&.mod-filter {
-		@include displayerFilter;
+@layer mods {
+	.multipleSelect-displayer {
+		&.mod-filter {
+			@include displayerFilter;
 
-		&.is-filled {
-			@include displayerFilterFilled;
-		}
+			&.is-filled {
+				@include displayerFilterFilled;
+			}
 
-		&:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
-			@include displayerFilterExpanded;
+			&:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
+				@include displayerFilterExpanded;
+			}
 		}
 	}
 }

package/src/components/multiSelect/mods.scss

@@ -73,20 +73,12 @@
 	inline-size: 21rem;
 	max-inline-size: calc(100vw - 2.5rem);
 
-	&:has(.multipleSelect-displayer-search:focus-visible) {
-		outline: none;
-	}
-
 	.multipleSelect-displayer {
 		box-shadow: 0 0 0 1px var(--components-multiSelect-border-color);
 		border-radius: var(--pr-t-border-radius-input);
 		padding: var(--components-multiSelect-padding);
 		z-index: 1;
 		position: relative;
-
-		&:has(.multipleSelect-displayer-search:focus-visible) {
-			@include a11y.focusVisible($offset: 3px);
-		}
 	}
 
 	.lu-picker-content {

package/src/components/multiSelect/states.scss

@@ -59,3 +59,11 @@
 		}
 	}
 }
+
+@mixin filterPillFocused {
+	outline: none;
+}
+
+@mixin filterPillDisplayerFocused {
+	@include a11y.focusVisible($offset: 3px);
+}

package/src/components/navside/index.scss

@@ -3,107 +3,117 @@
 @use 'exports' as *;
 
 .navSide {
-	@include vars;
-	@include component;
+	@layer components {
+		@include vars;
+		@include component;
 
-	.appLayout-navSide & {
-		@include media.min('S') {
-			@include inAppLayoutWide;
-		}
+		.appLayout-navSide & {
+			@include media.min('S') {
+				@include inAppLayoutWide;
+			}
 
-		@include media.max('S') {
-			@include inAppLayoutNarrow;
+			@include media.max('S') {
+				@include inAppLayoutNarrow;
+			}
 		}
 	}
 
-	&.mod-withBanner {
-		@include banner;
-	}
+	@layer mods {
+		&.mod-withBanner {
+			@include banner;
+		}
 
-	&.mod-compact {
-		@include media.min('S') {
-			@include compact;
+		&.mod-compact {
+			@include media.min('S') {
+				@include compact;
 
-			.navSide-item-link {
-				&:hover {
-					@include compactHover;
-				}
+				.navSide-item-link {
+					&:hover {
+						@include compactHover;
+					}
 
-				&:is(.is-active, .active) {
-					@include compactActive;
+					&:is(.is-active, .active) {
+						@include compactActive;
+					}
 				}
 			}
 		}
-	}
 
-	@include media.max('S') {
-		@include mobile;
+		@include media.max('S') {
+			@include mobile;
+		}
 
-		&:not(.is-open, .open) {
-			.navSide-item {
-				&:not(.mod-mobileToggle) {
-					@include mobileHidden;
+		@include media.max('S') {
+			&:not(.is-open, .open) {
+				.navSide-item {
+					&:not(.mod-mobileToggle) {
+						@include mobileHidden;
+					}
 				}
 			}
-		}
 
-		&.mod-withBanner {
-			.navSide-item {
-				&.mod-mobileToggle {
-					@include banner;
+			&:is(.is-open, .open) {
+				@include mobileOpen;
+
+				&.mod-withBanner {
+					@include mobileOpenBanner;
 				}
 			}
 		}
 
-		&:is(.is-open, .open) {
-			@include mobileOpen;
-
+		@include media.max('S') {
 			&.mod-withBanner {
-				@include mobileOpenBanner;
+				.navSide-item {
+					&.mod-mobileToggle {
+						@include banner;
+					}
+				}
 			}
 		}
 	}
 }
 
-.navSide-item {
-	&:not(.is-open) {
-		@include notOpen;
-	}
+@layer mods {
+	.navSide-item {
+		&.mod-mobileToggle {
+			@include mobileToggle;
+		}
 
-	&.mod-mobileToggle {
-		@include mobileToggle;
-	}
+		&:not(.is-open) {
+			@include notOpen;
+		}
 
-	&:is(.is-open, .open) {
-		@include expanded;
+		&:is(.is-open, .open) {
+			@include expanded;
 
-		.navSide-item-subMenu-link {
-			&:is(:hover) {
-				@include sublinkHover;
-			}
+			.navSide-item-subMenu-link {
+				&:is(:hover) {
+					@include sublinkHover;
+				}
 
-			&:is(.is-active, .active) {
-				@include sublinkActive;
+				&:is(.is-active, .active) {
+					@include sublinkActive;
+				}
 			}
 		}
 	}
-}
 
-.navSide-item-subMenu-link,
-.navSide-item-link {
-	&:is(.is-active, .active) {
-		@include active;
-	}
+	.navSide-item-subMenu-link,
+	.navSide-item-link {
+		&:is(.is-active, .active) {
+			@include active;
+		}
 
-	&:is([aria-expanded='true']) {
-		@include expanded;
+		&:is([aria-expanded='true']) {
+			@include expanded;
+		}
 	}
-}
 
-html {
-	&:is(.hasMenu, .withMenu) {
-		@include media.max('S') {
-			@include overlay;
+	html {
+		&:is(.hasMenu, .withMenu) {
+			@include media.max('S') {
+				@include overlay;
+			}
 		}
 	}
 }

package/src/components/newBadge/index.scss

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

package/src/components/notchBox/index.scss

@@ -1,22 +1,26 @@
 @use 'exports' as *;
 
 .notchBox {
-	@include vars;
-	@include component;
-
-	&.mod-notchTop {
-		@include notchTop;
+	@layer components {
+		@include vars;
+		@include component;
 	}
 
-	&.mod-notchLeft {
-		@include notchLeft;
-	}
+	@layer mods {
+		&.mod-notchTop {
+			@include notchTop;
+		}
 
-	&.mod-notchRight {
-		@include notchRight;
-	}
+		&.mod-notchLeft {
+			@include notchLeft;
+		}
+
+		&.mod-notchRight {
+			@include notchRight;
+		}
 
-	&.mod-notchBottom {
-		@include notchBottom;
+		&.mod-notchBottom {
+			@include notchBottom;
+		}
 	}
 }