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

package/src/components/section/mods.scss

@@ -1,3 +1,13 @@
 @mixin neutral {
-	--components-section-background: var(--pr-t-elevation-surface-default);
+	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);
 }

package/src/components/section/vars.scss

@@ -1,4 +1,2 @@
 @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,5 +1,4 @@
 @forward 'vars';
 @forward 'mods';
 @forward 'states';
-@forward 'responsive';
 @forward 'component';

package/src/components/segmentedControl/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 'exports' as *;
 
 // .viewTabs is deprecated
 .segmentedControl,
@@ -15,6 +14,10 @@
 	&.mod-vertical {
 		@include vertical;
 	}
+
+	@include media.max('XXS') {
+		@include vertical;
+	}
 }
 
 // .viewTabs-item-tab is deprecated
@@ -33,37 +36,3 @@
 		@include panelInactive;
 	}
 }
-
-@mixin responsive(
-	$breakpoint: 'XXS',
-	$breakpoint2: null,
-	$inverted: true,
-	$at: 'container',
-	$containerName: 'segmentedControl',
-	$responsiveSelector: null,
-	$axis: 'width',
-	$selector: '.segmentedControl'
-) {
-	@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 vertical;
-		}
-	}
-}
-
-$defaultResponsive: true !default;
-
-@if $defaultResponsive {
-	@include responsive;
-}

package/src/components/segmentedControl/mods.scss

@@ -10,3 +10,8 @@
 		@include numericBadge.S;
 	}
 }
+
+@mixin vertical {
+	--components-segmentedControl-direction: column;
+	--components-segmentedControl-width: auto;
+}

package/src/components/simpleSelect/exports.scss

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

package/src/components/skeleton/exports.scss

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

package/src/components/sortableList/exports.scss

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

package/src/components/statusBadge/exports.scss

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

package/src/components/switch/exports.scss

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

package/src/components/switchField/exports.scss

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

package/src/components/table/exports.scss

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

package/src/components/tableFixed/exports.scss

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

package/src/components/tableFixedDeprecated/exports.scss

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

package/src/components/tableOfContent/exports.scss

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

package/src/components/tableSortable/exports.scss

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

package/src/components/tableSticked/exports.scss

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

package/src/components/tableStickedDeprecated/exports.scss

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

package/src/components/tag/exports.scss

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

package/src/components/textField/exports.scss

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

package/src/components/textfields/exports.scss

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

package/src/components/timeline/exports.scss

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

package/src/components/timepicker/exports.scss

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

package/src/components/title/exports.scss

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

package/src/components/titleSection/exports.scss

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

package/src/components/toast/exports.scss

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

package/src/components/tooltip/exports.scss

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

package/src/components/userPopover/exports.scss

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

package/src/components/verticalNavigation/exports.scss

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

package/src/components/_sample/responsive.scss

@@ -1,7 +0,0 @@
-// All responsive behaviours are defined in this file through various mixins.
-// The file may be empty but must be present.
-// All property values modified by a responsive behaviour are modified through a CSS variable.
-
-@mixin sampleBehaviour {
-	--components-sample-property1: otherValue;
-}

package/src/components/comment/responsive.scss

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

package/src/components/emptyState/responsive.scss

@@ -1,27 +0,0 @@
-@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/errorPage/responsive.scss

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

@@ -1,10 +0,0 @@
-@mixin narrow {
-	--components-filterBar-footer-direction: row;
-	--components-filterBar-footer-justify: space-between;
-	--components-filterBar-footer-actions-marginInlineStart: auto;
-}
-
-@mixin actionsNarrow {
-	--components-filterBar-footer-actions-direction: row;
-	--components-filterBar-footer-actions-align: center;
-}

package/src/components/filters/responsive.scss

@@ -1,6 +0,0 @@
-@mixin stickyNarrow {
-	&.mod-sticky {
-		left: 0 !important;
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-	}
-}

package/src/components/footer/responsive.scss

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

package/src/components/header/responsive.scss

@@ -1,14 +0,0 @@
-@mixin stickyLeftNarrow {
-	&.mod-sticky {
-		.navSide ~ .main-content & {
-			top: var(--commons-navSide-mobile-toggle-height);
-		}
-	}
-}
-
-@mixin stickyNarrow {
-	&.mod-sticky {
-		top: calc(var(--commons-banner-height) + var(--commons-navSide-mobile-toggle-height));
-		left: 0 !important;
-	}
-}

package/src/components/indexTable/responsive.scss

@@ -1,175 +0,0 @@
-@mixin cardList {
-	&.mod-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 selectableCardList {
-	&.mod-selectable {
-		&.mod-responsiveCardList {
-			.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;
-			}
-		}
-	}
-}
-
-// The stack apparence is put on the row instead of the cells
-@mixin stackableCardList {
-	&.mod-stackable {
-		&.mod-responsiveCardList {
-			.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 selectableStackableCardList {
-	&.mod-selectable {
-		&.mod-stackable {
-			&.mod-responsiveCardList {
-				.indexTable-body-row {
-					--components-indexTable-cell-inset-x-left: var(--components-indexTable-row-cell-transparent-width);
-				}
-			}
-		}
-	}
-}