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

package/src/components/dialog/component.scss

@@ -73,7 +73,7 @@
 				align-self: start;
 				justify-self: end;
 				grid-area: close;
-				display: var(--components-dialog-insideHeaderButtonDisplay);
+				display: var(--components-dialog-headerButtonDisplay);
 			}
 		}
 

package/src/components/dialog/exports.scss

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

package/src/components/dialog/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 '@lucca-front/scss/src/components/button/exports' as button;
 
 .dialog {
@@ -41,45 +40,13 @@
 		&:where(.mod-fromBottom) {
 			@include fromBottom;
 		}
+
+		@include media.max('XXS') {
+			@include fromBottom;
+		}
 	}
 
 	&.mod-fullScreen {
 		@include fullScreen;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'XXS',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'media',
-	$containerName: 'dialog',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.dialog'
-) {
-	@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
-		) {
-			&:where(.mod-drawer) {
-				@include fromBottom;
-			}
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-}

package/src/components/divider/exports.scss

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

package/src/components/emptyState/component.scss

@@ -1,4 +1,5 @@
 @use '@lucca-front/scss/src/components/title/exports' as title;
+@use '@lucca-front/scss/src/commons/utils/media';
 @use '@lucca-front/scss/src/commons/utils/namespace';
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
@@ -44,6 +45,7 @@
 		.emptyState-content-heading {
 			@include title.component;
 			@include title.h3;
+
 			margin-bottom: 0;
 		}
 

package/src/components/emptyState/exports.scss

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

package/src/components/emptyState/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';
 
 .emptyState {
 	@include vars;
@@ -14,63 +12,3 @@
 		@include center;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'XXS',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'emptyState',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.emptyState'
-) {
-	@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 pageActionsNarrow;
-			@include pageHeadingNarrow;
-		}
-	}
-}
-
-@mixin responsiveBackground(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'emptyState',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.emptyState'
-) {
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include pageNarrow;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-	@include responsiveBackground;
-}

package/src/components/emptyState/mods.scss

@@ -1,5 +1,5 @@
-@use '@lucca-front/scss/src/components/title/exports' as title;
 @use '@lucca-front/scss/src/commons/utils/media';
+@use '@lucca-front/scss/src/components/title/exports' as title;
 
 @mixin page {
 	--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);
@@ -13,24 +13,38 @@
 		bottom left,
 		top left var(--components-emptyState-illustration-top-right-offset-left),
 		top left var(--components-emptyState-illustration-top-right-offset-left);
-	background-size: var(--components-emptyState-illustration-backgroundSize);
+
+	@include media.max('S') {
+		background-position:
+			bottom left,
+			bottom left,
+			top left var(--components-emptyState-illustration-top-right-offset-left-S),
+			top left var(--components-emptyState-illustration-top-right-offset-left-S);
+		background-size: auto 10.875rem;
+	}
 
 	.emptyState-content {
 		background-color: var(--components-emptyState-background-color);
 		box-shadow: 0 0 8px 4px var(--components-emptyState-background-color);
 	}
 
+	.emptyState-content-text {
+		padding: 0;
+	}
+
 	.emptyState-content-heading {
 		@include title.h1;
-	}
 
-	.emptyState-content-text {
-		padding: 0;
+		@include media.max('XXS') {
+			@include title.h2;
+		}
 	}
 
 	.emptyState-actions {
 		.button {
-			flex-basis: var(--components-emptyState-actions-width);
+			@include media.max('XXS') {
+				flex-basis: 100%;
+			}
 		}
 	}
 }

package/src/components/emptyState/vars.scss

@@ -11,10 +11,13 @@
 		calc(100% + 3.5rem),
 		calc(var(--components-emptyState-container-maxWidth) - 8.5rem)
 	);
-	--components-emptyState-illustration-background-bottom-left: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg');
-	--components-emptyState-illustration-foreground-bottom-left: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg');
-	--components-emptyState-illustration-background-top-right: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg');
-	--components-emptyState-illustration-foreground-top-right: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg');
-	--components-emptyState-illustration-size: auto;
-	--components-emptyState-actions-width: auto;
+	--background-left-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-bottom-left-01.svg');
+	--foreground-left-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/core-hr-01.svg');
+	--background-right-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/poplee/bubbles-top-right-01.svg');
+	--foreground-right-01: url('https://cdn.lucca.fr/lucca-front/assets/empty-states/generic/coffee-01.svg');
+
+	--components-emptyState-illustration-background-bottom-left: var(--background-left-01);
+	--components-emptyState-illustration-foreground-bottom-left: var(--foreground-left-01);
+	--components-emptyState-illustration-background-top-right: var(--background-right-01);
+	--components-emptyState-illustration-foreground-top-right: var(--foreground-right-01);
 }

package/src/components/emptyStateDeprecated/exports.scss

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

package/src/components/errorPage/component.scss

@@ -1,44 +1,64 @@
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
-@mixin component($atRoot: 'without: rule') {
+@mixin component {
 	background-color: var(--components-errorPage-background);
 	height: 100vh;
+	width: 100vw;
 	line-height: 1.2;
 	overflow: hidden;
 
-	@at-root ($atRoot) {
-		.errorPage-section {
-			height: 100%;
-			max-width: 1200px;
-			padding: 0 var(--pr-t-spacings-400);
-			margin: 0 auto;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-		}
-
-		.errorPage-section-info {
-			margin-top: 10vh;
-			max-width: 90vw;
-			width: 450px;
-			padding-right: var(--pr-t-spacings-400);
-		}
-
-		.errorPage-section-info-title {
-			@include title.component;
-			@include title.XXXL;
-		}
-
-		.errorPage-section-info-text {
-			font-size: var(--sizes-L-fontSize);
-			line-height: var(--sizes-L-lineHeight);
-		}
-
-		.errorPage-section-image {
-			margin-top: 10vh;
-			width: 50%;
-			max-width: 580px;
-			min-width: 350px;
-		}
+	.errorPage-section {
+		height: 100%;
+		max-width: 1200px;
+		padding: 0 var(--pr-t-spacings-400);
+		width: 100vw;
+		margin: 0 auto;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.errorPage-section-info {
+		margin-top: 10vh;
+		max-width: 90vw;
+		width: 450px;
+		padding-right: var(--pr-t-spacings-400);
+	}
+
+	.errorPage-section-info-title {
+		@include title.component;
+		@include title.XXXL;
+	}
+
+	.errorPage-section-info-text {
+		font-size: var(--sizes-L-fontSize);
+		line-height: var(--sizes-L-lineHeight);
+	}
+
+	.errorPage-section-image {
+		margin-top: 10vh;
+		width: 50%;
+		max-width: 580px;
+		min-width: 350px;
+	}
+}
+
+@mixin compact {
+	overflow-y: auto;
+
+	.errorPage-section {
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.errorPage-section-info {
+		margin-top: var(--pr-t-spacings-400);
+		margin-bottom: var(--pr-t-spacings-400);
+		order: 1;
+		padding: 0;
+	}
+	.errorPage-section-image {
+		margin-top: var(--pr-t-spacings-400);
+		order: 0;
 	}
 }

package/src/components/errorPage/exports.scss

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

package/src/components/errorPage/index.scss

@@ -1,42 +1,11 @@
 @use 'exports' as *;
 @use '@lucca-front/scss/src/commons/utils/media';
-@use '@lucca-front/scss/src/commons/utils/container';
 
 .errorPage {
 	@include vars;
 	@include component;
-}
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'media',
-	$containerName: 'errorPage',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.errorPage'
-) {
-	@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;
-		}
+	@include media.max('S') {
+		@include compact;
 	}
 }
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-}

package/src/components/field/exports.scss

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

package/src/components/fieldset/exports.scss

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

package/src/components/file/exports.scss

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

package/src/components/filterBar/component.scss

@@ -6,6 +6,8 @@
 	background-color: var(--components-filterBar-backgroundColor);
 	border-radius: var(--commons-borderRadius-L);
 	border: var(--commons-divider-width) solid var(--commons-border-200);
+	container-name: filterBar;
+	container-type: inline-size;
 	padding: var(--pr-t-spacings-200);
 
 	&:has(.filterBar-footer-toggleButton[aria-expanded='false']) {
@@ -22,10 +24,10 @@
 		.filterBar-footer {
 			border-block-start: var(--commons-divider-width) solid var(--commons-border-200);
 			display: flex;
-			flex-direction: var(--components-filterBar-footer-direction);
+			flex-direction: column;
 			flex-wrap: wrap;
 			gap: var(--pr-t-spacings-100);
-			justify-content: var(--components-filterBar-footer-justify);
+			justify-content: center;
 			margin-block-start: var(--pr-t-spacings-200);
 			padding-block-start: var(--pr-t-spacings-200);
 
@@ -36,6 +38,11 @@
 			&:has(.filterBar-footer-actions:only-child:empty) {
 				display: none;
 			}
+
+			@include container.min('S', $name: 'filterBar') {
+				flex-direction: row;
+				justify-content: space-between;
+			}
 		}
 
 		.filterBar-footer-toggleButton {
@@ -59,13 +66,20 @@
 
 		.filterBar-footer-actions {
 			display: flex;
-			flex-direction: var(--components-filterBar-footer-actions-direction);
+			flex-direction: column;
 			flex-wrap: wrap;
 			gap: var(--pr-t-spacings-200);
 			justify-content: center;
 			text-align: center;
-			align-items: var(--components-filterBar-footer-actions-align);
-			margin-inline-start: var(--components-filterBar-footer-actions-marginInlineStart);
+
+			@include container.min('XS', $name: 'filterBar') {
+				align-items: center;
+				flex-direction: row;
+			}
+
+			@include container.min('S', $name: 'filterBar') {
+				margin-inline-start: auto;
+			}
 		}
 	}
 }

package/src/components/filterBar/exports.scss

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

package/src/components/filterBar/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';
 
 .filterBar {
 	@include vars;
@@ -10,62 +8,3 @@
 		@include neutral;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: false,
-	$at: 'container',
-	$containerName: 'filterBar',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.filterBar'
-) {
-	@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;
-		}
-	}
-}
-
-@mixin responsiveActions(
-	$breakpoint: 'XS',
-	$breakpoint2: null,
-	$inverted: false,
-	$at: 'container',
-	$containerName: 'filterBar',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.filterBar'
-) {
-	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
-		@include media.query(
-			$breakpoint: $breakpoint,
-			$breakpoint2: $breakpoint2,
-			$inverted: $inverted,
-			$at: $at,
-			$containerName: $containerName,
-			$axis: $axis
-		) {
-			@include actionsNarrow;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-	@include responsiveActions;
-}

package/src/components/filterBar/vars.scss

@@ -1,8 +1,3 @@
 @mixin vars {
 	--components-filterBar-backgroundColor: var(--pr-t-elevation-surface-raised);
-	--components-filterBar-footer-direction: column;
-	--components-filterBar-footer-actions-direction: column;
-	--components-filterBar-footer-justify: center;
-	--components-filterBar-footer-actions-align: stretch;
-	--components-filterBar-footer-actions-marginInlineStart: 0;
 }

package/src/components/filters/exports.scss

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

package/src/components/filters/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';
 
 .filters {
 	@include vars;
@@ -17,37 +15,3 @@
 		@include stickyNavSide;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'media',
-	$containerName: 'filters',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.filters'
-) {
-	@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;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-}

package/src/components/filters/mods.scss

@@ -1,8 +1,15 @@
+@use '@lucca-front/scss/src/commons/utils/media';
+
 @mixin sticky {
 	top: var(--commons-banner-height);
 	position: fixed;
 	left: 0;
 	right: 0;
+
+	@include media.max('S') {
+		left: 0 !important;
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+	}
 }
 
 @mixin stickyNavSide {

package/src/components/footer/component.scss

@@ -8,9 +8,9 @@
 	gap: var(--pr-t-spacings-200);
 	align-items: var(--components-footer-alignItems);
 	box-shadow: var(--pr-t-elevation-shadow-overflow);
-	flex-direction: var(--components-footer-direction);
 	bottom: 0;
 	position: var(--components-footer-position);
+	flex-direction: var(--components-footer-direction);
 
 	@at-root ($atRoot) {
 		.footer-content {

package/src/components/footer/exports.scss

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