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

package/src/components/comment/index.scss

@@ -1,3 +1,4 @@
+@use '@lucca-front/scss/src/commons/utils/media';
 @use '@lucca-front/scss/src/commons/utils/container';
 
 @use 'exports' as *;
@@ -13,10 +14,6 @@
 	&.mod-noAvatar {
 		@include noAvatar;
 	}
-
-	@include container.max(25rem, $name: 'comment') {
-		@include narrow;
-	}
 }
 
 .commentWrapper {
@@ -38,3 +35,37 @@
 .commentWrapperChat {
 	@include chat;
 }
+
+@mixin responsive(
+	$breakpoint: 25rem,
+	$breakpoint2: null,
+	$inverted: true,
+	$at: 'container',
+	$containerName: 'comment',
+	$responsiveSelector: null,
+	$axis: 'width',
+	$selector: '.comment'
+) {
+	@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;
+		}
+	}
+}
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+}

package/src/components/comment/mods.scss

@@ -16,20 +16,6 @@
 	--components-comment-content-margin: 0;
 }
 
-@mixin narrow {
-	@at-root (namespace.$defaultAtRoot) {
-		.comment-infos-content {
-			--components-comment-info-content-display: flex;
-		}
-
-		.comment-infos-name + .comment-infos-date {
-			&::before {
-				--components-comment-info-separator: none;
-			}
-		}
-	}
-}
-
 @mixin wrapperCompact {
 	.commentWrapper-item {
 		&:not(:first-child) {

package/src/components/comment/responsive.scss

@@ -0,0 +1,5 @@
+@mixin narrow {
+	--components-comment-info-content-direction: column;
+	--components-comment-info-separator: none;
+	--components-comment-info-content-display: flex;
+}

package/src/components/container/exports.scss

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

package/src/components/contentSection/exports.scss

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

package/src/components/dialog/component.scss

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

package/src/components/dialog/exports.scss

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

package/src/components/dialog/index.scss

@@ -1,5 +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/components/button/exports' as button;
 
 .dialog {
@@ -40,13 +41,45 @@
 		&: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,4 +1,5 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
+@forward 'responsive';
 @forward 'component';

package/src/components/emptyState/component.scss

@@ -1,5 +1,4 @@
 @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) {
@@ -45,7 +44,6 @@
 		.emptyState-content-heading {
 			@include title.component;
 			@include title.h3;
-
 			margin-bottom: 0;
 		}
 

package/src/components/emptyState/exports.scss

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

package/src/components/emptyState/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';
 
 .emptyState {
 	@include vars;
@@ -12,3 +14,63 @@
 		@include center;
 	}
 }
+
+@mixin responsive(
+	$breakpoint: 'XXS',
+	$breakpoint2: null,
+	$inverted: true,
+	$at: 'media',
+	$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: 'media',
+	$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/commons/utils/media';
 @use '@lucca-front/scss/src/components/title/exports' as title;
+@use '@lucca-front/scss/src/commons/utils/media';
 
 @mixin page {
 	--components-emptyState-container-maxWidth: var(--commons-container-maxWidth);
@@ -13,38 +13,24 @@
 		bottom left,
 		top left var(--components-emptyState-illustration-top-right-offset-left),
 		top left var(--components-emptyState-illustration-top-right-offset-left);
-
-	@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;
-	}
+	background-size: var(--components-emptyState-illustration-backgroundSize);
 
 	.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;
+	}
 
-		@include media.max('XXS') {
-			@include title.h2;
-		}
+	.emptyState-content-text {
+		padding: 0;
 	}
 
 	.emptyState-actions {
 		.button {
-			@include media.max('XXS') {
-				flex-basis: 100%;
-			}
+			flex-basis: var(--components-emptyState-actions-width);
 		}
 	}
 }

package/src/components/emptyState/responsive.scss

@@ -0,0 +1,27 @@
+@use '@lucca-front/scss/src/components/title/exports' as title;
+
+@mixin pageNarrow {
+	&.mod-page {
+		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);
+
+		--components-emptyState-illustration-size: auto 10.875rem;
+	}
+}
+
+@mixin pageHeadingNarrow {
+	&.mod-page {
+		.emptyState-content-heading {
+			@include title.h2;
+		}
+	}
+}
+
+@mixin pageActionsNarrow {
+	&.mod-page {
+		--components-emptyState-actions-width: 100%;
+	}
+}

package/src/components/emptyState/vars.scss

@@ -11,13 +11,10 @@
 		calc(100% + 3.5rem),
 		calc(var(--components-emptyState-container-maxWidth) - 8.5rem)
 	);
-	--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);
+	--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;
 }

package/src/components/emptyStateDeprecated/exports.scss

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

package/src/components/errorPage/component.scss

@@ -1,64 +1,44 @@
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
-@mixin component {
+@mixin component($atRoot: 'without: rule') {
 	background-color: var(--components-errorPage-background);
 	height: 100vh;
-	width: 100vw;
 	line-height: 1.2;
 	overflow: hidden;
 
-	.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;
+	@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;
+		}
 	}
 }

package/src/components/errorPage/exports.scss

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

package/src/components/errorPage/index.scss

@@ -1,11 +1,42 @@
 @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);
+	}
 
-	@include media.max('S') {
-		@include compact;
+	#{if($responsiveSelector, $selector + '.rwd-' + $responsiveSelector, $selector)} {
+		@include media.query(
+			$breakpoint: $breakpoint,
+			$breakpoint2: $breakpoint2,
+			$inverted: $inverted,
+			$at: $at,
+			$containerName: $containerName,
+			$axis: $axis
+		) {
+			@include compact;
+		}
 	}
 }
+
+$defaultResponsive: true !default;
+
+@if $defaultResponsive {
+	@include responsive;
+}

package/src/components/errorPage/responsive.scss

@@ -0,0 +1,20 @@
+@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/field/exports.scss

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

package/src/components/fieldset/exports.scss

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

package/src/components/file/exports.scss

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

package/src/components/filterBar/component.scss

@@ -6,8 +6,6 @@
 	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']) {
@@ -24,10 +22,10 @@
 		.filterBar-footer {
 			border-block-start: var(--commons-divider-width) solid var(--commons-border-200);
 			display: flex;
-			flex-direction: column;
+			flex-direction: var(--components-filterBar-footer-direction);
 			flex-wrap: wrap;
 			gap: var(--pr-t-spacings-100);
-			justify-content: center;
+			justify-content: var(--components-filterBar-footer-justify);
 			margin-block-start: var(--pr-t-spacings-200);
 			padding-block-start: var(--pr-t-spacings-200);
 
@@ -38,11 +36,6 @@
 			&: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 {
@@ -66,20 +59,13 @@
 
 		.filterBar-footer-actions {
 			display: flex;
-			flex-direction: column;
+			flex-direction: var(--components-filterBar-footer-actions-direction);
 			flex-wrap: wrap;
 			gap: var(--pr-t-spacings-200);
 			justify-content: center;
 			text-align: center;
-
-			@include container.min('XS', $name: 'filterBar') {
-				align-items: center;
-				flex-direction: row;
-			}
-
-			@include container.min('S', $name: 'filterBar') {
-				margin-inline-start: auto;
-			}
+			align-items: var(--components-filterBar-footer-actions-align);
+			margin-inline-start: var(--components-filterBar-footer-actions-marginInlineStart);
 		}
 	}
 }

package/src/components/filterBar/exports.scss

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