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

package/src/components/footer/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';
 
 .footer {
 	@include vars;
@@ -15,7 +14,6 @@
 	}
 
 	// default mod
-	// .mod-narrowAtMediaMaxXXX are deprecated
 	&:not([class*='mod-narrow']),
 	&.mod-narrowAtMediaMaxXXS {
 		@include media.max('XXS') {
@@ -41,37 +39,3 @@
 		}
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'XXS',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'footer',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.footer'
-) {
-	@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/footer/mods.scss

@@ -1,3 +1,9 @@
 @mixin sticky {
 	--components-footer-position: sticky;
 }
+
+@mixin narrow {
+	--components-footer-direction: column;
+	--components-footer-alignItems: stretch;
+	--components-footer-actions-margin: 0;
+}

package/src/components/form/exports.scss

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

package/src/components/formLabel/exports.scss

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

package/src/components/gauge/exports.scss

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

package/src/components/grid/component.scss

@@ -15,7 +15,10 @@
 	max-width: var(--grid-max-width, var(--grid-maxWidth));
 
 	@at-root ($atRoot) {
-		@include container.auto('grid');
+		.grid-containerWrapper {
+			container-type: inline-size;
+			container-name: grid;
+		}
 
 		.grid-column {
 			align-self: var(--grid-align, var(--grid-column-align));
@@ -68,7 +71,7 @@
 					}
 				}
 
-				@include container.min($breakpoint, $containerName: grid) {
+				@include container.min($breakpoint, $name: grid) {
 					&[style*='grid-colspanAtContainerMin#{$breakpoint}'] {
 						grid-column-end: span var(--grid-colspanAtContainerMin#{$breakpoint});
 					}

package/src/components/grid/exports.scss

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

package/src/components/grid/index.scss

@@ -23,7 +23,7 @@
 		&.mod-autoAtContainerMin#{$breakpoint} {
 			@include autoAt;
 
-			@include container.min($breakpoint, $containerName: grid) {
+			@include container.min($breakpoint, $name: grid) {
 				@include auto;
 			}
 		}

package/src/components/gridLegacy/exports.scss

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

package/src/components/header/exports.scss

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

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

package/src/components/header/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') {
+		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
+		left: 0 !important;
+	}
 }
 
 @mixin nav {
@@ -14,4 +21,8 @@
 
 @mixin left {
 	left: var(--commons-navSide-width);
+
+	@include media.max('S') {
+		top: var(--commons-navSide-mobile-toggle-height);
+	}
 }

package/src/components/index.scss

@@ -1,132 +1,96 @@
-// no responsive components
-@use 'box';
-@use 'tag';
-@use 'code';
-@use 'link';
-@use 'chip';
-@use 'title';
-@use 'label';
-@use 'divider';
-@use 'collapse';
-@use 'container';
-@use 'pagination';
-@use 'titleSection';
-@use 'contentSection';
-@use 'tableOfContent';
-@use 'list';
-@use 'card';
-@use 'gauge';
-@use 'callout';
-@use 'loading';
-@use 'progress';
-@use 'breadcrumbs';
-@use 'buttonGroup';
-@use 'actionIcon';
-@use 'menu';
-@use 'radioField';
-@use 'switchField';
-@use 'file';
-@use 'layout';
-@use 'radioButtons';
-@use 'table';
-@use 'checkboxField';
-@use 'timeline';
-@use 'button';
-@use 'textField';
-@use 'form';
-@use 'tableFixed';
-@use 'skipLinks';
-@use 'grid';
-@use 'tableSticked';
-@use 'timepicker';
-@use 'notchBox';
-@use 'statusBadge';
-@use 'mobileHeader';
-@use 'clear';
-@use 'newBadge';
-@use 'inlineMessage';
-@use 'numericBadge';
-@use 'mobileNavigation';
-@use 'formLabel';
-@use 'verticalNavigation';
-@use 'sortableList';
-@use 'fieldset';
-@use 'skeleton';
-@use 'calloutDisclosure';
-@use 'calloutPopover';
-@use 'calloutFeedbackList';
-@use 'simpleSelect';
-@use 'multiSelect';
-@use 'avatar';
-@use 'tableSortable';
-@use 'tooltip';
-@use 'userPopover';
-@use 'scrollBox';
-@use 'toast';
-@use 'popover';
-@use 'userTile';
-@use 'plgPush';
-@use 'calendar';
+@forward 'field'; //
+@forward 'box'; // 1 Ko
+@forward 'tag'; // 1 Ko
+@forward 'main'; // 1 Ko
+@forward 'code'; // 1 Ko
+@forward 'link'; // 1 Ko
+@forward 'chip'; // 1 Ko
+@forward 'title'; // 1 Ko
+@forward 'label'; // 1 Ko
+@forward 'filterBar'; // 1 Ko
+@forward 'filters'; // 1 Ko
+@forward 'divider'; // 1 Ko
+@forward 'section'; // 1 Ko
+@forward 'collapse'; // 1 Ko
+@forward 'container'; // 1 Ko
+@forward 'errorPage'; // 1 Ko
+@forward 'pageHeader'; // 1 Ko
+@forward 'pagination'; // 1 Ko
+@forward 'titleSection'; // 1 Ko
+@forward 'contentSection'; // 1 Ko
+@forward 'tableOfContent'; // 1 Ko
+@forward 'list'; // 2 Ko
+@forward 'card'; // 2 Ko
+@forward 'gauge'; // 2 Ko
+@forward 'callout'; // 2 Ko
+@forward 'loading'; // 2 Ko
+@forward 'progress'; // 2 Ko
+@forward 'breadcrumbs'; // 2 Ko
+@forward 'buttonGroup'; // 2 Ko
+@forward 'header'; // 3 Ko
+@forward 'actionIcon'; // 3 Ko
+@forward 'menu'; // 4 Ko
+@forward 'radio'; // 4 Ko
+@forward 'radioField'; // new component for radio
+@forward 'switch'; // 4 Ko
+@forward 'switchField'; // new component for switch
+@forward 'file'; // 5 Ko
+@forward 'layout'; // 5 Ko
+@forward 'radioButtons'; // 5 Ko
+@forward 'table'; // 7 Ko
+@forward 'checkbox'; // 7 Ko
+@forward 'checkboxField'; // new component for checkbox
+@forward 'timeline'; // 10 Ko
+@forward 'button'; // 12 Ko
+@forward 'textfields'; // 13 Ko
+@forward 'textField'; // new component for checkbox
+@forward 'navside'; // 15 Ko
+@forward 'form'; // 25 Ko
+@forward 'tableFixed'; // 33 Ko
+@forward 'segmentedControl';
+@forward 'calendar';
+@forward 'skipLinks';
 
-// deprecated components, no responsive
-@use 'field';
-@use 'radio';
-@use 'switch';
-@use 'checkbox';
-@use 'textfields';
+// caution: the two components cannot be loaded at the same time
+@forward 'grid';
+@forward 'tableSticked'; // 8 Ko
+@forward 'timepicker'; //
+@forward 'notchBox';
+@forward 'statusBadge';
+@forward 'mobileHeader';
+@forward 'clear';
+@forward 'newBadge';
+@forward 'inlineMessage';
+@forward 'numericBadge';
+@forward 'mobileNavigation';
+@forward 'footer';
+@forward 'formLabel';
+@forward 'verticalNavigation';
+@forward 'sortableList';
+@forward 'fieldset';
+@forward 'skeleton';
+@forward 'calloutDisclosure';
+@forward 'calloutPopover';
+@forward 'calloutFeedbackList';
+@forward 'simpleSelect';
+@forward 'multiSelect';
+@forward 'emptyState';
+@forward 'dialog';
+@forward 'avatar';
+@forward 'indexTable';
+@forward 'tableSortable';
+@forward 'tooltip';
+@forward 'userPopover';
+@forward 'scrollBox';
+@forward 'comment';
+@forward 'toast'; // 5 Ko
+@forward 'popover';
+@forward 'userTile';
+@forward 'plgPush';
 
-// responsive components with media queries
-@use 'dialog';
-@use 'filters';
-@use 'header';
-@use 'errorPage';
-@use 'main';
-@use 'navside';
+// Deprecated CSS components
+// @forward 'gridLegacy'; // 40 Ko
+// @forward 'emptyStateDeprecated';
 
-// responsive components with container queries
-@use 'comment';
-@use 'filterBar';
-// @use 'segmentedControl';
-// @use 'section'; // deprecated
-// @use 'emptyState';
-// @use 'pageHeader';
-// @use 'footer';
-// @use 'indexTable';
-
-// responsive components with default behaviours disabled
-@use 'segmentedControl' with (
-	$defaultResponsive: false
-);
-@use 'section' with (
-	$defaultResponsive: false
-);
-@use 'emptyState' with (
-	$defaultResponsive: false
-);
-@use 'pageHeader' with (
-	$defaultResponsive: false
-);
-@use 'footer' with (
-	$defaultResponsive: false
-);
-@use 'indexTable' with (
-	$defaultResponsive: false
-);
-
-// responsive behaviors reactivated with media queries to avoid breakings
-@include segmentedControl.responsive($at: 'media');
-@include segmentedControl.responsive($at: 'media', $selector: '.viewTabs'); // deprecated
-@include section.responsive($at: 'media');
-@include section.responsiveThin($at: 'media');
-@include emptyState.responsive($at: 'media');
-@include emptyState.responsiveBackground($at: 'media');
-@include pageHeader.responsive($at: 'media');
-@include pageHeader.responsiveSearch($at: 'media');
-@include footer.responsive($at: 'media');
-@include indexTable.responsive($at: 'media');
-
-// deprecated components not loaded by default
-// @use 'gridLegacy'; // caution: grid and gridLegacy cannot be loaded at the same time
-// @use 'emptyStateDeprecated';
-// @use 'tableFixedDeprecated';
-// @use 'tableStickedDeprecated';
+// @forward 'tableFixedDeprecated'; // 33 Ko
+// @forward 'tableStickedDeprecated'; // 67 Ko

package/src/components/indexTable/exports.scss

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

package/src/components/indexTable/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';
 
 .indexTable {
 	@include vars;
@@ -45,6 +44,25 @@
 		}
 	}
 
+	// Responsive
+	@include media.max('S') {
+		&.mod-responsiveCardList {
+			@include responsiveCardList;
+		}
+
+		&.mod-selectable.mod-responsiveCardList {
+			@include selectableResponsiveCardList;
+		}
+
+		&.mod-stackable.mod-responsiveCardList {
+			@include stackableResponsiveCardList;
+		}
+
+		&.mod-selectable.mod-stackable.mod-responsiveCardList {
+			@include selectableStackableResponsiveCardList;
+		}
+	}
+
 	// generic states, non tied to a mod
 	&:not(:has(.indexTable-head[inert='inert'])) {
 		// focus-within
@@ -57,40 +75,3 @@
 	// nested open / closed row
 	@include openClosedRow;
 }
-
-@mixin responsive(
-	$breakpoint: 'S',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'indexTable',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.indexTable'
-) {
-	@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 cardList;
-			@include selectableCardList;
-			@include stackableCardList;
-			@include selectableStackableCardList;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-}

package/src/components/indexTable/mods.scss

@@ -101,6 +101,155 @@
 	}
 }
 
+@mixin responsiveCardList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--components-indexTable-row-spacing);
+	padding: var(--components-indexTable-padding);
+
+	.indexTable-head {
+		display: none;
+	}
+
+	.indexTable-body {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.indexTable-body-row,
+	.indexTable-foot-row {
+		position: relative;
+		display: grid;
+		// Grid layout by default is a basic one column template.
+		// The user can override this and build a specific layout by using --components-indexTable-row-responsive-grid-template-columns, --components-indexTable-row-responsive-grid-template-rows and --components-indexTable-row-responsive-grid-template-areas
+		grid-template-columns: var(--components-indexTable-row-responsive-grid-template-columns, 1fr);
+		grid-template-rows: var(--components-indexTable-row-responsive-grid-template-rows, none);
+		grid-auto-rows: auto;
+		grid-template-areas: var(--components-indexTable-row-responsive-grid-template-areas, none);
+		align-items: center;
+		padding: var(--components-indexTable-row-spacing-responsive) 0;
+		margin-bottom: var(--components-indexTable-row-spacing-responsive);
+		// "Title" lines that do not contain "card" cells are smaller
+		&:not(:has(.indexTable-body-row-cell)) {
+			padding: 0;
+			margin-bottom: 0;
+		}
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	// checkbox, title and subtotal need to stay on the same row
+	.indexTable-body-row-transparentCell {
+		grid-row: 1;
+	}
+
+	// We only need one ::before for the card apparence and one ::after for the possible outline
+	.indexTable-body-row-cell {
+		position: static;
+		grid-column-start: 1;
+		padding: 0 var(--components-indexTable-cell-padding);
+
+		&::before {
+			--components-indexTable-cell-border-radius-left: var(--components-indexTable-cell-border-radius);
+			--components-indexTable-cell-border-radius-right: var(--components-indexTable-cell-border-radius);
+		}
+		&::after {
+			--components-indexTable-outline-border-width-left: var(--components-indexTable-outline-border-width);
+			--components-indexTable-outline-border-width-right: var(--components-indexTable-outline-border-width);
+			--components-indexTable-outline-border-radius-left: var(--components-indexTable-outline-border-radius);
+			--components-indexTable-outline-border-radius-right: var(--components-indexTable-outline-border-radius);
+		}
+		~ .indexTable-body-row-cell {
+			&::before,
+			&::after {
+				display: none;
+			}
+		}
+	}
+
+	.indexTable-body-row-cell-content[data-label] {
+		display: flex;
+		flex-direction: column;
+		margin-top: var(--pr-t-spacings-50);
+		&::before {
+			content: attr(data-label);
+			font-weight: 600;
+		}
+	}
+
+	.indexTable-head-row-cell-checkbox,
+	.indexTable-body-row-cell-checkbox {
+		margin-block: 0;
+	}
+}
+
+@mixin selectableResponsiveCardList {
+	.indexTable-body-row {
+		grid-template-columns: var(--components-indexTable-row-cell-transparent-width) var(
+				--components-indexTable-row-responsive-grid-template-columns,
+				1fr
+			);
+	}
+	.indexTable-body-row-transparentCell {
+		width: auto;
+		// we add a padding-left to keep a correct indent between lvl 1 and lvl 2 titles in nested tables. * .75 is just for cosmetic
+		&:first-child[colspan='2'] + .indexTable-body-row-transparentCell {
+			padding-left: calc(var(--components-indexTable-row-cell-transparent-width) * 0.75);
+		}
+	}
+	.indexTable-body-row-cell {
+		--components-indexTable-cell-inset-x-left: var(--components-indexTable-row-cell-transparent-width);
+		grid-column-start: 2;
+	}
+}
+
+@mixin selectableStackableResponsiveCardList {
+	.indexTable-body-row {
+		--components-indexTable-cell-inset-x-left: var(--components-indexTable-row-cell-transparent-width);
+	}
+}
+
+// The stack apparence is put on the row instead of the cells
+@mixin stackableResponsiveCardList {
+	.indexTable-body-row[class*='mod-stack'] {
+		border: 0;
+		border-bottom-width: var(--components-indexTable-row-stack-border-bottom);
+		border-style: solid;
+		border-color: transparent;
+		&::before,
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			bottom: calc((var(--components-indexTable-row-spacing-responsive) + var(--components-indexTable-stack3-row-spacing)) * -1);
+			background-image: var(--components-indexTable-row-stack2-background-image, none),
+				var(--components-indexTable-row-stack3-background-image, none);
+			background-position: var(--components-indexTable-row-stack2-background-position, 0 0),
+				var(--components-indexTable-row-stack3-background-position, 0 0);
+			background-repeat: no-repeat, no-repeat;
+			transition-property: background-image, background-position;
+			transition-duration: var(--commons-animations-durations-fast);
+		}
+		&::before {
+			left: var(--components-indexTable-cell-inset-x-left, 0);
+			right: 50%;
+			--components-indexTable-row-stack2-background-position: left -2px bottom 6px;
+			--components-indexTable-row-stack3-background-position: left 1px bottom 2px;
+		}
+		&::after {
+			left: 50%;
+			right: 0;
+			--components-indexTable-row-stack2-background-position: right -2px bottom 6px;
+			--components-indexTable-row-stack3-background-position: right 1px bottom 2px;
+		}
+	}
+	.indexTable-body-row-cell {
+		border-bottom: 0;
+		background-image: none;
+	}
+}
+
 @mixin actions {
 	// ~ equivalent to width: min-content for a table-cell but prevent line-break;
 	width: 1%;

package/src/components/inlineMessage/exports.scss

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

package/src/components/label/exports.scss

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