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

package/src/components/navside/index.scss

@@ -1,6 +1,7 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/keyframe';
 @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';
 
 .navSide {
 	@include vars;
@@ -9,50 +10,6 @@
 	&.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 {
@@ -90,10 +47,108 @@
 	}
 }
 
-html {
-	&:is(.hasMenu, .withMenu) {
-		@include media.max('S') {
-			@include overlay;
+@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;
+				}
+			}
 		}
 	}
 }
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+	@include responsiveCompact;
+}

package/src/components/navside/mods.scss

@@ -102,47 +102,3 @@
 @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/responsive.scss

@@ -0,0 +1,56 @@
+@mixin overlay {
+	&,
+	body {
+		touch-action: none;
+		overscroll-behavior: none;
+		-webkit-overflow-scrolling: auto;
+	}
+
+	body {
+		overflow: hidden !important;
+	}
+}
+
+@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,16 +43,3 @@
 @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,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/notchBox/exports.scss

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

package/src/components/numericBadge/exports.scss

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

package/src/components/pageHeader/component.scss

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

package/src/components/pageHeader/exports.scss

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

package/src/components/pageHeader/index.scss

@@ -1,4 +1,6 @@
 @use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/commons/utils/container';
 
 .pageHeader {
 	@include vars;
@@ -16,3 +18,62 @@
 		@include sticky;
 	}
 }
+
+@mixin responsive(
+	$breakpoint: 'S',
+	$breakpoint2: null,
+	$inverted: true,
+	$at: 'media',
+	$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: 'media',
+	$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,5 +1,3 @@
-@use '@lucca-front/scss/src/commons/utils/media';
-
 @mixin menu {
 	padding-bottom: 0;
 }
@@ -19,9 +17,4 @@
 	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/pageHeader/responsive.scss

@@ -0,0 +1,17 @@
+@mixin stickyNarrow {
+	&.mod-sticky {
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+		left: 0 !important;
+	}
+}
+
+@mixin searchNarrow {
+	--components-pageHeader-padding: var(--pr-t-spacings-200) var(--pr-t-spacings-300);
+
+	.pageHeader-content-actions {
+		.textfield.mod-search {
+			width: 100%;
+			flex: auto;
+		}
+	}
+}

package/src/components/pagination/exports.scss

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

package/src/components/popover/exports.scss

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

package/src/components/progress/exports.scss

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

package/src/components/radio/exports.scss

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

package/src/components/radioButtons/exports.scss

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

package/src/components/radioField/exports.scss

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

package/src/components/scrollBox/exports.scss

@@ -1,4 +1,5 @@
 @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(--pr-t-elevation-surface-raised);
+	background-color: var(--components-section-background);
 	border-bottom: 1px solid #e5e5e5;
-	padding: var(--pr-t-spacings-600);
+	padding-inline: var(--components-section-paddingInline);
 }

package/src/components/section/exports.scss

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

package/src/components/section/index.scss

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

package/src/components/section/mods.scss

@@ -1,13 +1,3 @@
 @mixin neutral {
-	background-color: var(--pr-t-elevation-surface-default);
-}
-
-@mixin S {
-	padding-left: var(--pr-t-spacings-400);
-	padding-right: var(--pr-t-spacings-400);
-}
-
-@mixin XS {
-	padding-left: var(--pr-t-spacings-200);
-	padding-right: var(--pr-t-spacings-200);
+	--components-section-background: var(--pr-t-elevation-surface-default);
 }

package/src/components/section/responsive.scss

@@ -0,0 +1,7 @@
+@mixin narrow {
+	--components-section-paddingInline: var(--pr-t-spacings-400);
+}
+
+@mixin thin {
+	--components-section-paddingInline: var(--pr-t-spacings-200);
+}

package/src/components/section/vars.scss

@@ -1,2 +1,4 @@
 @mixin vars {
+	--components-section-paddingInline: var(--pr-t-spacings-600);
+	--components-section-background: var(--pr-t-elevation-surface-raised);
 }

package/src/components/segmentedControl/exports.scss

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