@lucca-front/scss 18.3.0-rc.1 → 18.3.0-rc.2

package/src/components/layout/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/link/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/list/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/loading/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/main/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/main/index.scss

@@ -1,6 +1,10 @@
 @use 'exports' as *;
-@use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/container';
+
+.main {
+	&:is(.is-notScrollable, .notScrollable) {
+		@include notScrollable;
+	}
+}
 
 .main-content {
 	@include vars;
@@ -21,39 +25,3 @@
 		@include menu;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'media',
-	$containerName: 'mainContent',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.main-content'
-) {
-	@if ($at == 'container') {
-		@include container.auto($containerName);
-	}
-
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include narrow;
-			@include bannerNarrow;
-			@include notScrollable;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-}

package/src/components/main/mods.scss

@@ -1,9 +1,15 @@
+@use '@lucca-front/scss/src/commons/utils/media';
+
 @mixin menu {
 	margin-left: var(--commons-navSide-width);
 }
 
 @mixin banner {
 	margin-top: var(--commons-banner-height);
+
+	@include media.max('S') {
+		margin-top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+	}
 }
 
 @mixin stickyHeader {

package/src/components/main/states.scss

@@ -0,0 +1,8 @@
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin notScrollable {
+	@include media.max('S') {
+		height: 100vh;
+		overflow: hidden;
+	}
+}

package/src/components/menu/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/mobileHeader/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/mobileNavigation/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/multiSelect/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/navside/component.scss

@@ -213,14 +213,14 @@
 			}
 
 			&::before {
-				background-color: color.transparentize(var(--palettes-neutral-0), 0.15);
+				background-color: color.transparentize(var(--palettes-neutral-900), 0.15);
 				border-radius: 1em;
 				height: 1em;
 				width: 1em;
 			}
 
 			&::after {
-				@include loading.gradient($color: color.transparentize(var(--palettes-neutral-0), 0.1));
+				@include loading.gradient;
 
 				border-radius: var(--commons-borderRadius-M);
 				flex: 1 1 auto;

package/src/components/navside/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/navside/index.scss

@@ -1,7 +1,6 @@
-@use 'exports' as *;
 @use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/container';
-@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/keyframe';
+@use 'exports' as *;
 
 .navSide {
 	@include vars;
@@ -10,6 +9,50 @@
 	&.mod-withBanner {
 		@include banner;
 	}
+
+	&.mod-compact {
+		@include media.min('S') {
+			@include compact;
+
+			.navSide-item-link {
+				&:hover {
+					@include compactHover;
+				}
+
+				&:is(.is-active, .active) {
+					@include compactActive;
+				}
+			}
+		}
+	}
+
+	@include media.max('S') {
+		@include mobile;
+
+		&: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;
+			}
+		}
+	}
 }
 
 .navSide-item {
@@ -47,108 +90,10 @@
 	}
 }
 
-@mixin responsiveCompact(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: false,
-	$at: 'media',
-	$containerName: 'navSide',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.navSide.mod-compact'
-) {
-	@if ($at == 'container') {
-		@include container.auto($containerName);
-	}
-
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include compact;
-
-			.navSide-item-link {
-				&:hover {
-					@include compactHover;
-				}
-
-				&:is(.is-active, .active) {
-					@include compactActive;
-				}
-			}
-		}
-	}
-}
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'media',
-	$containerName: 'navSide',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.navSide'
-) {
-	@if ($at == 'container') {
-		@include container.auto($containerName);
-	}
-
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include mobile;
-
-			@at-root {
-				@include namespace.appendRootVars {
-					&.hasMenu,
-					&.withMenu {
-						@include overlay;
-					}
-				}
-			}
-
-			&: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;
-				}
-			}
+html {
+	&:is(.hasMenu, .withMenu) {
+		@include media.max('S') {
+			@include overlay;
 		}
 	}
 }
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-	@include responsiveCompact;
-}

package/src/components/navside/mods.scss

@@ -102,3 +102,47 @@
 @mixin mobileToggle {
 	display: none;
 }
+
+@mixin mobile {
+	padding-top: var(--commons-navSide-mobile-toggle-height);
+	width: 100%;
+	bottom: auto;
+
+	.navSide-mainSection,
+	.navSide-scrollWrapper {
+		width: 100%;
+		height: auto;
+	}
+
+	.navSide-scrollWrapper {
+		padding: 0;
+	}
+
+	.navSide-item {
+		&.mod-mobileToggle {
+			height: var(--commons-navSide-mobile-toggle-height);
+			background-color: var(--palettes-product-800);
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 1;
+			display: block;
+			position: fixed;
+			cursor: pointer;
+
+			.navSide-item-link {
+				border-radius: 0;
+
+				&:focus-visible {
+					box-shadow: 0 0 0 2px var(--components-navSide-fullwidth-palette-selected-text) inset;
+				}
+			}
+		}
+	}
+
+	.navSide-bottomSection {
+		background-color: transparent;
+		width: auto;
+		height: auto;
+	}
+}

package/src/components/navside/states.scss

@@ -43,3 +43,16 @@
 @mixin mobileHidden {
 	display: none;
 }
+
+@mixin overlay {
+	&,
+	body {
+		touch-action: none;
+		overscroll-behavior: none;
+		-webkit-overflow-scrolling: auto;
+	}
+
+	body {
+		overflow: hidden !important;
+	}
+}

package/src/components/newBadge/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/notchBox/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/numericBadge/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/pageHeader/component.scss

@@ -36,7 +36,17 @@
 
 			.button {
 				margin: 0;
-				flex-grow: 1;
+
+				@include media.max('XS') {
+					flex: 1;
+				}
+			}
+
+			.textfield.mod-search {
+				@include media.max('XS') {
+					width: 100%;
+					flex: auto;
+				}
 			}
 		}
 

package/src/components/pageHeader/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/pageHeader/index.scss

@@ -1,6 +1,4 @@
 @use 'exports' as *;
-@use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/container';
 
 .pageHeader {
 	@include vars;
@@ -18,62 +16,3 @@
 		@include sticky;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'pageHeader',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.pageHeader'
-) {
-	@if ($at == 'container') {
-		@include container.auto($containerName);
-	}
-
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include stickyNarrow;
-		}
-	}
-}
-
-@mixin responsiveSearch(
-	$breakpoint: 'XS',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'pageHeader',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.pageHeader'
-) {
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include searchNarrow;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-	@include responsiveSearch;
-}

package/src/components/pageHeader/mods.scss

@@ -1,3 +1,5 @@
+@use '@lucca-front/scss/src/commons/utils/media';
+
 @mixin menu {
 	padding-bottom: 0;
 }
@@ -17,4 +19,9 @@
 	left: 0;
 	right: 0;
 	z-index: 99;
+
+	@include media.max('S') {
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+		left: 0 !important;
+	}
 }

package/src/components/pagination/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/popover/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/progress/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/radio/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/radioButtons/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/radioField/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/scrollBox/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/section/component.scss

@@ -1,5 +1,5 @@
 @mixin component {
-	background-color: var(--components-section-background);
+	background-color: var(--pr-t-elevation-surface-raised);
 	border-bottom: 1px solid #e5e5e5;
-	padding-inline: var(--components-section-paddingInline);
+	padding: var(--pr-t-spacings-600);
 }

package/src/components/section/exports.scss

@@ -1,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/section/index.scss

@@ -1,6 +1,5 @@
-@use 'exports' as *;
 @use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/container';
+@use 'exports' as *;
 
 .section {
 	@include vars;
@@ -11,67 +10,12 @@
 	&.mod-grey {
 		@include neutral;
 	}
-}
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'section',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.section'
-) {
-	@if ($at == 'container') {
-		@include container.auto($containerName);
-	}
 
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include narrow;
-		}
+	@include media.max('S') {
+		@include S;
 	}
-}
 
-@mixin responsiveThin(
-	$breakpoint: 'XS',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'section',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.section'
-) {
-	@if ($at == 'container') {
-		@include container.auto($containerName);
+	@include media.max('XS') {
+		@include XS;
 	}
-
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include thin;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-	@include responsiveThin;
 }