@lucca-front/scss 22.0.0-rc.4 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "22.0.0-rc.4",
+  "version": "22.0.0",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -24,7 +24,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "22.0.0-rc.4",
-    "@lucca/prisme": "22.0.0-rc.4"
+    "@lucca-front/icons": "22.0.0",
+    "@lucca/prisme": "22.0.0"
   }
 }

package/src/commons/utils/highlight-prisme.scss

@@ -97,6 +97,7 @@
 	.filterBar,
 	.grid,
 	.highlightData,
+	.highlightSection,
 	.mobileHeader,
 	.pageHeader,
 	.resourceCard,
@@ -233,6 +234,7 @@
 	lu-filter-bar,
 	lu-grid,
 	lu-highlight-data,
+	lu-highlight-section,
 	lu-mobile-header,
 	lu-page-header,
 	lu-resource-card,

package/src/commons/utils/index.scss

@@ -653,14 +653,6 @@
 			.pr-u-#{$direction}Reset {
 				#{$direction}: 0 !important;
 			}
-		} @else {
-			@each $boxModel in core.$boxModel {
-				@if $boxModel != 'border' {
-					.pr-u-#{$boxModel}#{transform.capitalize($direction)}0 {
-						#{$boxModel}-#{$direction}: 0 !important;
-					}
-				}
-			}
 		}
 	}
 
@@ -841,7 +833,7 @@
 			} @else {
 				@each $boxModel in core.$boxModel {
 					@if $boxModel != 'border' {
-						.u-#{$boxModel}#{transform.capitalize($direction)}0 {
+						.u-#{$boxModel}#{transform.capitalize(transform.camelize($direction))}0 {
 							#{$boxModel}-#{$direction}: 0 !important;
 						}
 					}

package/src/commons/vars.scss

@@ -109,7 +109,8 @@
 
 	--commons-divider-color: var(--palettes-neutral-200);
 
-	--commons-container-padding: 0 var(--pr-t-spacings-200);
+	--commons-container-paddingInline: var(--pr-t-spacings-200);
+	--commons-container-padding: 0 var(--commons-container-paddingInline);
 	--commons-container-maxWidth: 100rem; // 100 + 0 = 100
 
 	--commons-navSide-width: 0px;
@@ -131,7 +132,7 @@
 	}
 
 	@include media.min('S') {
-		--commons-container-padding: 0 var(--pr-t-spacings-400);
+		--commons-container-paddingInline: var(--pr-t-spacings-400);
 	}
 
 	&:has(.navSide) {

package/src/components/appLayout/vars.scss

@@ -1,5 +1,5 @@
 @mixin vars {
-	--components-appLayout-blockSize: 100dvh;
+	--components-appLayout-blockSize: 100dvb;
 	--components-appLayout-inlineSize: 100%;
 	--components-appLayout-navSide-overflowX: hidden;
 	--components-appLayout-navSide-overflowY: auto;

package/src/components/approbationInbox/component.scss

@@ -0,0 +1,457 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/scss/src/commons/utils/reset';
+@use '@lucca-front/scss/src/commons/utils/a11y';
+@use '@lucca-front/scss/src/commons/utils/text';
+
+@use '@lucca-front/scss/src/components/avatar/exports' as avatar;
+@use '@lucca-front/scss/src/components/button/exports' as button;
+@use '@lucca-front/scss/src/components/title/exports' as title;
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	@at-root ($atRoot) {
+		.approbationInbox-list {
+			inline-size: var(--components-approbationInbox-list-inlineSize);
+			block-size: calc(100% - var(--pr-t-spacings-300) * 2);
+			margin-block: var(--pr-t-spacings-300);
+			margin-inline: var(--components-approbationInbox-list-marginInlineStart) var(--components-approbationInbox-list-marginInlineEnd);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-50);
+		}
+
+		.approbationInbox-list-formSelectionOptional {
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-50);
+			min-block-size: 0;
+		}
+
+		.approbationInbox-list-content {
+			background-color: var(--pr-t-elevation-surface-sunken);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+			padding: var(--pr-t-spacings-100);
+			border-radius: var(--pr-t-border-radius-structure);
+			overflow: auto;
+			flex-grow: 1;
+
+			&:focus-visible {
+				@include a11y.focusVisible;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.approbationInbox-list-content-empty {
+			display: flex;
+			flex-direction: column;
+			margin: auto;
+			gap: var(--pr-t-spacings-200);
+			padding: var(--pr-t-spacings-200);
+			align-items: center;
+			text-align: center;
+			text-wrap: balance;
+		}
+
+		.approbationInbox-list-footer {
+			background-color: var(--components-approbationInbox-list-footer-backgroundColor);
+			border-radius: var(--components-approbationInbox-list-footer-borderRadius);
+			padding-block: var(--components-approbationInbox-list-footer-paddingBlock);
+			margin-block: var(--components-approbationInbox-list-footer-marginBlock);
+			margin-inline: var(--components-approbationInbox-list-footer-marginInline);
+			padding-inline: var(--components-approbationInbox-list-footer-paddingInline);
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+
+			.button {
+				@include button.block;
+
+				&:last-child {
+					@include button.outlined;
+				}
+			}
+		}
+
+		.approbationInbox-list-footer-title {
+			@include title.h3;
+		}
+
+		.approbationInbox-list-header {
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+		}
+
+		.approbationInbox-list-header-title {
+			@include title.h3;
+
+			.numericBadge {
+				vertical-align: center;
+			}
+		}
+
+		.approbationInbox-list-header-filterBar {
+			margin-block-end: var(--pr-t-spacings-100);
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.approbationInbox-detail {
+			display: flex;
+			flex-direction: column;
+			gap: var(--components-approbationInbox-detail-gap);
+			flex-grow: 1;
+		}
+
+		.approbationInbox-detail-container.container {
+			display: var(--components-approbationInbox-detail-container-display);
+			flex-direction: column;
+			gap: var(--pr-t-spacings-50);
+			margin-block: var(--pr-t-spacings-300);
+			flex-grow: 1;
+
+			--commons-container-maxWidth: calc(100rem - 22.5rem - var(--pr-t-spacings-400));
+		}
+
+		.approbationInbox-detail-empty {
+			margin: auto;
+			inline-size: 9rem;
+			aspect-ratio: 1;
+			display: var(--components-approbationInbox-detail-empty-display);
+
+			svg {
+				margin: auto;
+				inline-size: 100%;
+				block-size: 100%;
+			}
+		}
+
+		.approbationInbox-detail-header,
+		.approbationInbox-detail-main {
+			background-color: var(--pr-t-elevation-surface-raised);
+			padding: var(--components-approbationInbox-detail-headerMain-padding);
+			margin: var(--components-approbationInbox-detail-headerMain-margin);
+			border-radius: var(--pr-t-border-radius-structure);
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.approbationInbox-detail-main {
+			display: flex;
+			flex-direction: column;
+			gap: var(--components-approbationInbox-detail-main-gap);
+			flex-grow: 1;
+		}
+
+		.approbationInbox-detail-header {
+			display: flex;
+			gap: var(--pr-t-spacings-150);
+			min-block-size: var(--components-approbationInbox-detail-header-minBlockSize);
+		}
+
+		.approbationInbox-detail-header-main-actions {
+			display: var(--components-approbationInbox-detail-header-main-actions-display);
+			gap: var(--pr-t-spacings-100);
+
+			.button {
+				&:nth-child(2) {
+					@include button.outlined;
+				}
+
+				&:nth-child(3) {
+					@include button.ghost;
+				}
+			}
+		}
+
+		.approbationInbox-detail-header-main {
+			display: flex;
+			flex-grow: 1;
+			gap: var(--pr-t-spacings-200);
+			align-items: center;
+			justify-content: space-between;
+			flex-wrap: var(--components-approbationInbox-detail-header-main-flexWrap);
+			min-inline-size: 0;
+		}
+
+		.approbationInbox-detail-header-main-infos {
+			min-inline-size: 0;
+		}
+
+		.approbationInbox-detail-header-main-infos-description {
+			&:empty {
+				display: none;
+			}
+		}
+
+		.approbationInbox-detail-header-main-infos-title {
+			@include title.h2;
+		}
+
+		.approbationInbox-detail-header-main-infos-title-content {
+			@include text.ellipsis;
+
+			display: block;
+
+			&:focus-visible {
+				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-small));
+			}
+		}
+
+		.approbationInbox-detail-header-illustration {
+			padding-block: var(--pr-t-spacings-25);
+			align-self: start;
+
+			&:empty {
+				display: none;
+			}
+
+			.avatar {
+				@include avatar.L;
+			}
+		}
+
+		.approbationInbox-detail-header-main-delegation {
+			margin-block-start: var(--components-approbationInbox-detail-header-main-delegation-marginBlockStart);
+		}
+
+		.approbationInbox-detail-main-block {
+			display: block;
+		}
+
+		.approbationInbox-detail-main-block-content {
+			padding-block-end: var(--components-approbationInbox-detail-header-main-block-content-paddingBlockEnd);
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		.approbationInbox-detail-main-block-title {
+			@include title.h3;
+		}
+
+		.approbationInbox-list-content-items {
+			@include reset.list;
+
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+		}
+
+		.approbationInbox-list-content-items-item {
+			display: flex;
+			gap: var(--pr-t-spacings-150);
+			align-items: center;
+		}
+
+		.approbationInbox-list-content-items-item-content {
+			flex-grow: 1;
+			position: relative;
+			padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);
+
+			&::before {
+				content: '';
+				position: absolute;
+				inset: 0;
+				border-radius: var(--pr-t-border-radius-default);
+				background-color: var(--components-approbationInbox-list-content-items-item-content-before-background);
+				box-shadow: var(--components-approbationInbox-list-content-items-item-content-before-boxShadow);
+				transition-property: inset;
+				transition-duration: var(--commons-animations-durations-fast);
+			}
+
+			&:hover {
+				&::before {
+					inset: calc(var(--pr-t-spacings-50) * -1);
+				}
+			}
+		}
+
+		.approbationInbox-list-content-items-item-content-info {
+			position: relative;
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+			align-items: var(--components-approbationInbox-list-content-items-item-content-info-alignItems);
+
+			[tabindex] {
+				position: relative;
+			}
+		}
+
+		.approbationInbox-list-content-items-item-content-info-visual,
+		.approbationInbox-list-content-items-item-content-info-rightContent {
+			&:empty {
+				display: none;
+			}
+		}
+
+		.approbationInbox-list-content-items-item-content-info-rightContent {
+			display: flex;
+			flex-direction: column;
+			align-items: end;
+			text-align: end;
+		}
+
+		.approbationInbox-list-content-items-item-content-info-rightContent-subtle {
+			color: var(--pr-t-color-text-subtle);
+			font: var(--pr-t-font-body-S);
+			line-height: var(--pr-t-font-lineHeight-300);
+		}
+
+		.approbationInbox-list-content-items-item-content-info-rightContent-icons {
+			@include reset.list;
+
+			display: flex;
+			gap: var(--pr-t-spacings-75);
+			color: var(--pr-t-color-text-subtle);
+		}
+
+		.approbationInbox-list-content-items-item-content-info-rightContent-icons-icon {
+			border-radius: var(--pr-t-border-radius-small);
+
+			&:focus-visible {
+				@include a11y.focusVisible(1px);
+			}
+		}
+
+		.approbationInbox-list-content-items-item-content-info-visual {
+			padding-block: 8px;
+
+			.avatar {
+				@include avatar.S;
+			}
+		}
+
+		.approbationInbox-list-content-items-item-content-info-main {
+			flex-grow: 1;
+			font: var(--pr-t-font-body-S);
+			color: var(--pr-t-color-text-subtle);
+			line-height: var(--pr-t-font-lineHeight-300);
+		}
+
+		.approbationInbox-list-content-items-item-content-info-main-title {
+			@include title.component;
+			@include title.h4;
+		}
+
+		.approbationInbox-list-content-items-item-content-action {
+			@include reset.button;
+
+			color: inherit;
+			text-decoration: none;
+			outline: none;
+			inline-size: fit-content;
+			display: inline-block;
+
+			&::after {
+				content: '';
+				position: absolute;
+				inset: calc(var(--pr-t-spacings-150) * -1) calc(var(--pr-t-spacings-200) * -1);
+			}
+		}
+
+		.approbationInbox-list-formSelectionOptional-formfield {
+			padding-inline-start: var(--pr-t-spacings-25);
+			margin-block-start: var(--pr-t-spacings-50);
+		}
+
+		.approbationInbox-list-content-groupOptional-header-formfieldOptional {
+			padding-inline-start: var(--pr-t-spacings-25);
+			margin-block-start: calc(var(--pr-t-spacings-50) * -1);
+		}
+
+		.approbationInbox-list-content-items-item-formfieldOptional {
+			padding-inline-start: var(--pr-t-spacings-25);
+			margin-block-start: calc(var(--pr-t-spacings-50) * -1);
+		}
+
+		.approbationInbox-list-content-groupOptional {
+			display: flex;
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+			margin-block-start: var(--components-approbationInbox-list-content-groupOptional-marginBlockStart);
+
+			&:first-child {
+				--components-approbationInbox-list-content-groupOptional-marginBlockStart: 0;
+			}
+		}
+
+		.approbationInbox-list-content-groupOptional-header {
+			display: flex;
+			gap: var(--pr-t-spacings-150);
+			align-items: center;
+
+			&:has(.approbationInbox-list-content-groupOptional-header-action[aria-expanded='true']) {
+				.approbationInbox-list-content-groupOptional-header-action-icon .lucca-icon {
+					--components-approbationInbox-list-content-groupOptional-header-action-icon-backgroundColor-transform: rotate(180deg);
+				}
+			}
+
+			&:has(.approbationInbox-list-content-groupOptional-header-action[aria-expanded='false']) {
+				+ .approbationInbox-list-content-groupOptional-content {
+					--components-approbationInbox-list-content-groupOptional-content-display: none;
+				}
+			}
+		}
+
+		.approbationInbox-list-content-groupOptional-content {
+			@include reset.list;
+
+			display: var(--components-approbationInbox-list-content-groupOptional-content-display);
+			flex-direction: column;
+			gap: var(--pr-t-spacings-100);
+		}
+
+		.approbationInbox-list-content-groupOptional-header-action {
+			@include reset.button;
+
+			inline-size: fit-content;
+			display: flex;
+			gap: var(--pr-t-spacings-100);
+			font: var(--pr-t-font-body-M);
+			font-weight: var(--pr-t-font-fontWeight-semibold);
+			color: var(--pr-t-color-text);
+			padding-inline-end: var(--pr-t-spacings-75);
+			border-radius: var(--pr-t-border-radius-small);
+			align-items: center;
+
+			&:hover {
+				.approbationInbox-list-content-groupOptional-header-action-icon {
+					--components-approbationInbox-list-content-groupOptional-header-action-icon-backgroundColor: var(--palettes-100, var(--palettes-neutral-100));
+				}
+			}
+
+			&:active {
+				.approbationInbox-list-content-groupOptional-header-action-icon {
+					--components-approbationInbox-list-content-groupOptional-header-action-icon-backgroundColor: var(--palettes-200, var(--palettes-neutral-200));
+				}
+			}
+		}
+
+		.approbationInbox-list-content-groupOptional-header-action-icon {
+			border-radius: var(--pr-t-border-radius-small);
+			background-color: var(--components-approbationInbox-list-content-groupOptional-header-action-icon-backgroundColor);
+			inline-size: var(--pr-t-spacings-300);
+			block-size: var(--pr-t-spacings-300);
+			display: grid;
+			place-items: center;
+			flex-shrink: 0;
+
+			.lucca-icon {
+				transition-property: transform;
+				transition-duration: var(--commons-animations-durations-fast);
+				transform: var(--components-approbationInbox-list-content-groupOptional-header-action-icon-backgroundColor-transform);
+			}
+		}
+	}
+}

package/src/components/approbationInbox/exports.scss

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

package/src/components/approbationInbox/index.scss

@@ -0,0 +1,119 @@
+@use 'exports' as *;
+@use '@lucca-front/scss/src/commons/utils/media';
+
+.approbationInbox-detail,
+.approbationInbox-list {
+	@layer components {
+		@include vars;
+	}
+}
+
+.approbationInbox-list {
+	@layer components {
+		@include component;
+
+		.mainLayout-sidebar:has(&) {
+			@include mainLayoutSidebar;
+
+			@include media.max('M') {
+				@include mainLayoutSidebarMediaMaxM;
+			}
+		}
+	}
+}
+
+.approbationInbox-detail {
+	@layer components {
+		@include vars;
+	}
+
+	@layer mods {
+		&:has(.approbationInbox-detail-header-main-infos-description:empty),
+		&:not(:has(.approbationInbox-detail-header-main-infos-description)) {
+			@include noDescription;
+		}
+
+		&.mod-insideDialog {
+			@include insideDialog;
+		}
+
+		&:not(.mod-insideDialog) {
+			@include media.max('M') {
+				@include outsideDialogMediaMaxM;
+			}
+		}
+
+		&:not(:has(.approbationInbox-detail-header)) {
+			&:has(.approbationInbox-detail-main:empty) {
+				@include empty;
+			}
+		}
+
+		@include media.max('L') {
+			@include detailMediaMaxL;
+		}
+	}
+}
+
+.approbationInbox-list-content-items-item {
+	@layer mods {
+		&:has(.checkboxField-input:checked) {
+			@include selected;
+		}
+	}
+}
+
+.approbationInbox-list-content-items-item {
+	@layer mods {
+		&:has(.approbationInbox-list-content-items-item-content-action[aria-current='page']),
+		&:has(.approbationInbox-list-content-items-item-content-action.is-current) {
+			@include current;
+		}
+	}
+}
+
+.approbationInbox-list-content-items-item-content {
+	@layer mods {
+		&:has(.approbationInbox-list-content-items-item-content-action:focus-visible) {
+			@include focusVisible;
+		}
+	}
+}
+
+.approbationInbox-detail-main-block:last-child {
+	@layer mods {
+		@include blockLastChild;
+	}
+}
+
+.approbationInbox-list {
+	@layer mods {
+		@include media.min('S') {
+			@include listMediaMinS;
+		}
+
+		@include media.min('M') {
+			@include listMediaMinM;
+		}
+
+		@include media.min('L') {
+			@include listMediaMinL;
+		}
+
+		@include media.max('M') {
+			@include listMediaMaxM;
+		}
+
+		@include media.max('S') {
+			@include listMediaMaxM;
+		}
+	}
+}
+
+.approbationInbox-list-content-items-item-content-info {
+	@layer mods {
+		&.mod-center {
+			@include center;
+		}
+	}
+}