@lucca-front/scss 19.0.0 → 19.1.0

package/src/components/dataTable/mods.scss

@@ -0,0 +1,152 @@
+@use '@lucca-front/scss/src/commons/config';
+
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@use '@lucca-front/scss/src/components/button/exports' as button;
+@use '@lucca-front/scss/src/components/title/exports' as title;
+
+@mixin cellBorder {
+	--components-dataTable-cell-shadow: 0 1px inset var(--commons-border-200), 1px 0 inset var(--commons-border-200);
+
+	.dataTable-head-row {
+		&:first-child {
+			.dataTable-head-row-cell {
+				--components-dataTable-cell-shadow: 1px 0 inset var(--commons-border-200);
+			}
+		}
+	}
+}
+
+@mixin alignTop {
+	--components-dataTable-cell-verticalAlign: top;
+}
+
+@mixin buttonExpand {
+	--components-dataTable-tree-extraPadding: calc(1.5rem + var(--pr-t-spacings-100));
+
+	&:has(.dataTable-body-row-cell-expand-button.button) {
+		--components-dataTable-tree-extraPadding: 0rem; // unit is mandatory here
+	}
+
+	.dataTable-body-row-cell-expand-button.button {
+		@include button.S;
+		@include button.onlyIconS;
+		@include button.text;
+
+		--components-button-padding: var(--pr-t-spacings-25);
+		--components-button-color: var(--palettes-neutral-800);
+	}
+}
+
+@mixin group {
+	@include buttonExpand;
+
+	@include title.component;
+	@include title.h4;
+
+	--components-dataTable-cell-background: var(--palettes-neutral-25);
+}
+
+@mixin selectable {
+	--components-dataTable-cellFirst-width: 2.5rem;
+
+	&:has(input:checked) {
+		--components-dataTable-cell-background: var(--palettes-product-50);
+	}
+}
+
+@mixin draggable {
+	.dataTable-head-row-cell,
+	.dataTable-body-row-cell,
+	.dataTable-foot-row-cell {
+		&:first-child {
+			--components-dataTable-cellFirst-width: 2.5rem;
+
+			padding-inline: var(--pr-t-spacings-75);
+		}
+	}
+}
+
+@mixin tree {
+	@include buttonExpand;
+
+	--components-dataTable-cell-paddingInlineStart: calc(
+		var(--components-dataTable-cell-padding-inline) + var(--pr-t-spacings-300) * calc(var(--components-dataTable-treeLevel) - 1) +
+			var(--components-dataTable-tree-extraPadding)
+	);
+}
+
+@mixin editable {
+	--components-dataTable-cell-padding: var(--pr-t-spacings-100);
+	--components-dataTable-cell-paddingInlineStart: var(--components-dataTable-cell-padding);
+}
+
+@mixin actions {
+	padding: 0;
+	padding-inline-end: var(--pr-t-spacings-50);
+	text-align: right;
+	white-space: nowrap;
+
+	.button {
+		@include button.S;
+		@include button.onlyIcon;
+		@include button.onlyIconS;
+		@include button.text;
+	}
+
+	&:is(.dataTable-head-row-cell) {
+		.button {
+			position: relative;
+			bottom: var(--pr-t-spacings-50);
+		}
+	}
+}
+
+@mixin alignCenter {
+	--components-dataTable-cell-textAlign: center;
+}
+
+@mixin alignRight {
+	--components-dataTable-cell-textAlign: right;
+}
+
+@mixin layoutFixed {
+	--components-dataTable-tableLayout: fixed;
+}
+
+@mixin layoutFixedWithBreakpoint {
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.min($breakpoint) {
+			&.mod-layoutFixedAtMediaMin#{$breakpoint} {
+				--components-dataTable-tableLayout: fixed;
+			}
+		}
+	}
+}
+
+@mixin cellFixedWidth {
+	min-width: var(--dataTable-layoutFixed-width, auto);
+	width: var(--dataTable-layoutFixed-width, auto);
+}
+
+@mixin layoutFixedCells {
+	&.mod-layoutFixed {
+		.dataTable-head-row-cell,
+		.dataTable-body-row-cell,
+		.dataTable-foot-row-cell {
+			@include cellFixedWidth;
+		}
+	}
+
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.min($breakpoint) {
+			&.mod-layoutFixedAtMediaMin#{$breakpoint} {
+				.dataTable-head-row-cell,
+				.dataTable-body-row-cell,
+				.dataTable-foot-row-cell {
+					@include cellFixedWidth;
+				}
+			}
+		}
+	}
+}

package/src/components/dataTable/states.scss

@@ -0,0 +1,7 @@
+@mixin collapsed {
+	--components-dataTable-row-display: none;
+}
+
+@mixin expanded {
+	--components-dataTable-expand-rotation: 0deg;
+}

package/src/components/dataTable/vars.scss

@@ -0,0 +1,16 @@
+@mixin vars {
+	--components-dataTable-cell-padding-inline: var(--pr-t-spacings-150);
+	--components-dataTable-cell-paddingInlineStart: var(--components-dataTable-cell-padding-inline);
+	--components-dataTable-cell-padding-block: var(--pr-t-spacings-100);
+	--components-dataTable-cell-padding: var(--components-dataTable-cell-padding-block) var(--components-dataTable-cell-padding-inline);
+	--components-dataTable-treeLevel: 1;
+	--components-dataTable-cell-verticalAlign: middle;
+	--components-dataTable-cell-shadow: 0 1px inset var(--commons-border-200);
+	--components-dataTable-cell-background: var(--pr-t-elevation-surface-raised);
+	--components-dataTable-cell-textAlign: left;
+	--components-dataTable-tableLayout: auto;
+	--components-dataTable-cellFirst-width: auto;
+	--components-dataTable-row-display: table-row;
+	--components-dataTable-overflow: hidden;
+	--components-dataTable-expand-rotation: 180deg;
+}

package/src/components/dataTableSticked/index.scss

@@ -0,0 +1,43 @@
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/scss/src/commons/utils/media';
+@use 'exports' as *;
+
+.dataTableWrapper {
+	@include vars;
+
+	&:has(.dataTable.mod-stickyHeader) {
+		@include stickyHeader;
+	}
+
+	&:has(.dataTable.mod-columnsOverflow) {
+		@include columnsOverflow;
+	}
+
+	&:has(.dataTable.is-firstColumnVisible) {
+		@include firstColumnVisible;
+	}
+
+	&:has(.dataTable.is-lastColumnVisible) {
+		@include lastColumnVisible;
+	}
+
+	&:has(.dataTable.mod-rowsOverflow) {
+		@include rowsOverflow;
+	}
+
+	&:has(.dataTable.is-firstRowVisible) {
+		@include firstRowVisible;
+	}
+
+	&:has(.dataTable.is-lastRowVisible) {
+		@include lastRowVisible;
+	}
+
+	&:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
+		@include stickyColumn;
+
+		&:has(.dataTable.mod-cellBorder) {
+			@include stickyColumnBorder;
+		}
+	}
+}

package/src/components/dataTableSticked/mods.scss

@@ -0,0 +1,164 @@
+@use '@lucca-front/scss/src/commons/utils/color';
+
+@mixin stickyHeader {
+	--components-dataTable-overflow: auto;
+
+	.dataTable-head {
+		position: sticky;
+		top: -1px;
+		z-index: 1;
+
+		&::after {
+			content: '';
+			left: 0;
+			right: 0;
+			height: var(--pr-t-spacings-100);
+			position: absolute;
+			background-image: linear-gradient(#{color.transparentize(var(--palettes-neutral-400), 0.24)}, transparent);
+			pointer-events: none;
+			box-shadow: 0 1px var(--commons-border-200) inset;
+		}
+	}
+}
+
+@mixin columnsOverflow {
+	--components-dataTable-overflow: auto;
+
+	display: flex;
+
+	&::before,
+	&::after {
+		content: '';
+		position: sticky;
+		width: var(--pr-t-spacings-100);
+		background-image: linear-gradient(to right, #{color.transparentize(var(--palettes-neutral-400), 0.24)}, transparent);
+		flex-shrink: 0;
+		margin-left: calc(var(--pr-t-spacings-100) * -1);
+		top: 0;
+		pointer-events: none;
+		z-index: 3;
+	}
+
+	&::before {
+		left: 0;
+		opacity: var(--components-dataTable-shadow-firstColumnOpacity);
+	}
+
+	&::after {
+		right: 0;
+		transform: scaleX(-1);
+		opacity: var(--components-dataTable-shadow-lastColumnOpacity);
+	}
+}
+
+@mixin rowsOverflow {
+	--components-dataTable-overflow: auto;
+
+	.dataTableShadows {
+		display: flex;
+		flex-direction: column;
+
+		&::before,
+		&::after {
+			content: '';
+			position: sticky;
+			display: block;
+			height: var(--pr-t-spacings-100);
+			background-image: linear-gradient(to bottom, #{color.transparentize(var(--palettes-neutral-400), 0.24)}, transparent);
+			margin-top: calc(var(--pr-t-spacings-100) * -1);
+			flex-shrink: 0;
+			pointer-events: none;
+			z-index: 2;
+		}
+
+		&::before {
+			top: 0;
+			opacity: var(--components-dataTable-shadow-firstRowOpacity);
+		}
+
+		&::after {
+			bottom: 0;
+			transform: scaleY(-1);
+			opacity: var(--components-dataTable-shadow-lastRowOpacity);
+		}
+	}
+}
+
+@mixin stickyColumn {
+	--components-dataTable-overflow: auto;
+
+	%addShadow {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 100%;
+		width: var(--pr-t-spacings-100);
+		pointer-events: none;
+		background-image: linear-gradient(to right, #{color.transparentize(var(--palettes-neutral-400), 0.24)}, transparent);
+	}
+
+	%removeShadow {
+		content: none;
+	}
+
+	:is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell) {
+		&.mod-stickyColumn {
+			&:has(~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell):not(.mod-stickyColumn)) {
+				transform: translateX(-1px);
+
+				&:not(:has(+ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
+					&::after {
+						@extend %addShadow;
+					}
+				}
+			}
+		}
+
+		&:not(.mod-stickyColumn) {
+			~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell).mod-stickyColumn {
+				&::after {
+					@extend %addShadow;
+
+					left: auto;
+					right: 100%;
+					transform: scaleX(-1);
+				}
+
+				& ~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell).mod-stickyColumn {
+					&::after {
+						@extend %removeShadow;
+					}
+				}
+			}
+		}
+	}
+
+	:is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
+		&.mod-stickyColumn {
+			position: sticky;
+
+			&:first-child {
+				left: 0;
+			}
+
+			&:last-child {
+				right: 0;
+			}
+		}
+	}
+}
+
+@mixin stickyColumnBorder {
+	:is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell) {
+		&.mod-stickyColumn {
+			&:has(~ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell):not(.mod-stickyColumn)) {
+				&:not(:has(+ :is(.dataTable-body-row-cell, .dataTable-head-row-cell, .dataTable-foot-row-cell).mod-stickyColumn)) {
+					&::after {
+						box-shadow: 1px 0 var(--commons-border-200) inset;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/dataTableSticked/states.scss

@@ -0,0 +1,15 @@
+@mixin firstColumnVisible {
+	--components-dataTable-shadow-firstColumnOpacity: 0;
+}
+
+@mixin lastColumnVisible {
+	--components-dataTable-shadow-lastColumnOpacity: 0;
+}
+
+@mixin firstRowVisible {
+	--components-dataTable-shadow-firstRowOpacity: 0;
+}
+
+@mixin lastRowVisible {
+	--components-dataTable-shadow-lastRowOpacity: 0;
+}

package/src/components/dataTableSticked/vars.scss

@@ -0,0 +1,6 @@
+@mixin vars {
+	--components-dataTable-shadow-firstColumnOpacity: 1;
+	--components-dataTable-shadow-lastColumnOpacity: 1;
+	--components-dataTable-shadow-firstRowOpacity: 1;
+	--components-dataTable-shadow-lastRowOpacity: 1;
+}

package/src/components/dateField/component.scss

@@ -0,0 +1,6 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	max-width: var(--components-dateField-maxWidth);
+	display: block;
+}

package/src/components/dateField/index.scss

@@ -0,0 +1,32 @@
+@use 'exports' as *;
+
+.dateField {
+	@include vars;
+	@include component;
+
+	&:not(.mod-auto) {
+		&.mod-day {
+			@include day;
+
+			.form-field.mod-S & {
+				@include dayS;
+			}
+		}
+
+		&.mod-month {
+			@include month;
+
+			.form-field.mod-S & {
+				@include monthS;
+			}
+		}
+
+		&.mod-year {
+			@include year;
+
+			.form-field.mod-S & {
+				@include yearS;
+			}
+		}
+	}
+}

package/src/components/dateField/mods.scss

@@ -0,0 +1,23 @@
+@mixin day {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthDay);
+}
+
+@mixin month {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthMonth);
+}
+
+@mixin year {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthYear);
+}
+
+@mixin dayS {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthDayS);
+}
+
+@mixin monthS {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthMonthS);
+}
+
+@mixin yearS {
+	--components-dateField-maxWidth: var(--components-dateField-maxWidthYearS);
+}

package/src/components/dateField/vars.scss

@@ -0,0 +1,10 @@
+@mixin vars {
+	--components-dateField-maxWidth: auto;
+	--components-dateField-maxWidthDay: 10rem;
+	--components-dateField-maxWidthMonth: var(--components-dateField-maxWidthDay);
+	--components-dateField-maxWidthYear: var(--components-dateField-maxWidthDay);
+
+	--components-dateField-maxWidthDayS: 9rem;
+	--components-dateField-maxWidthMonthS: var(--components-dateField-maxWidthDayS);
+	--components-dateField-maxWidthYearS: var(--components-dateField-maxWidthDayS);
+}

package/src/components/dateRangeField/component.scss

@@ -0,0 +1,74 @@
+@use '@lucca-front/scss/src/commons/utils/namespace';
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
+@mixin component($atRoot: namespace.$defaultAtRoot) {
+	display: block;
+	max-width: var(--components-dateRangeField-maxWidth);
+
+	@at-root ($atRoot) {
+		.dateRangeField-fieldset {
+			margin: 0;
+			padding: 0;
+			border: 0;
+		}
+
+		.dateRangeField-fieldset-content {
+			position: relative;
+			width: var(--components-dateRangeField-content-width);
+
+			&::before {
+				content: '';
+				position: absolute;
+				background-color: var(--components-dateRangeField-content-background);
+				border-radius: var(--commons-borderRadius-M);
+				pointer-events: none;
+				inset: var(--pr-t-spacings-50);
+				inset-inline-end: calc(var(--components-dateRangeField-content-inlineEnd) - var(--pr-t-spacings-50));
+			}
+
+			&.is-highlighted {
+				--components-dateRangeField-content-background: var(--palettes-product-100);
+				--components-dateRangeField-content-placeholderColor: var(--palettes-product-400);
+
+				.form-field:has(.dateRangeField-fieldset-input-value[aria-invalid='true']) & {
+					--components-dateRangeField-content-background: var(--palettes-critical-100);
+				}
+			}
+
+			.form-field:has(.dateRangeField-fieldset-input-value[aria-invalid='true']) & {
+				--components-dateRangeField-content-placeholderColor: var(--palettes-critical-400);
+			}
+
+			&.mod-start {
+				--components-dateRangeField-content-width: calc(50% - var(--pr-t-spacings-300) - var(--pr-t-spacings-50));
+				--components-dateRangeField-content-inlineEnd: calc(var(--pr-t-spacings-200) + var(--pr-t-spacings-50));
+			}
+		}
+
+		.dateRangeField-fieldset-input-value {
+			&.textField-input-value {
+				position: relative;
+				padding-left: var(--components-dateRangeField-content-inlineStart);
+				padding-right: var(--components-dateRangeField-content-inlineEnd);
+
+				&::placeholder {
+					color: var(--components-dateRangeField-content-placeholderColor);
+				}
+
+				.form-field.mod-S & {
+					--components-dateRangeField-content-inlineStart: var(--pr-t-spacings-100);
+				}
+			}
+		}
+
+		.dateRangeField-fieldset-arrow {
+			position: absolute;
+			left: calc(50% - calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-150)));
+			color: var(--palettes-neutral-700);
+			pointer-events: none;
+			border-radius: var(--commons-borderRadius-M);
+
+			@include icon.S;
+		}
+	}
+}

package/src/components/dateRangeField/exports.scss

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

package/src/components/dateRangeField/index.scss

@@ -0,0 +1,36 @@
+@use 'exports' as *;
+
+.dateRangeField {
+	@include vars;
+	@include component;
+
+	.form-field.mod-S & {
+		@include S;
+	}
+
+	&:not(.mod-auto) {
+		&.mod-day {
+			@include day;
+
+			.form-field.mod-S & {
+				@include dayS;
+			}
+		}
+
+		&.mod-month {
+			@include month;
+
+			.form-field.mod-S & {
+				@include monthS;
+			}
+		}
+
+		&.mod-year {
+			@include year;
+
+			.form-field.mod-S & {
+				@include yearS;
+			}
+		}
+	}
+}

package/src/components/dateRangeField/mods.scss

@@ -0,0 +1,31 @@
+@use '@lucca-front/icons/src/icon/exports' as icon;
+
+@mixin day {
+	--components-dateRangeField-maxWidth: var(--components-dateRangeField-maxWidthDay);
+}
+
+@mixin month {
+	--components-dateRangeField-maxWidth: var(--components-dateRangeField-maxWidthMonth);
+}
+
+@mixin year {
+	--components-dateRangeField-maxWidth: var(--components-dateRangeField-maxWidthYear);
+}
+
+@mixin dayS {
+	--components-dateRangeField-maxWidth: var(--components-dateRangeField-maxWidthDayS);
+}
+
+@mixin monthS {
+	--components-dateRangeField-maxWidth: var(--components-dateRangeField-maxWidthMonthS);
+}
+
+@mixin yearS {
+	--components-dateRangeField-maxWidth: var(--components-dateRangeField-maxWidthYearS);
+}
+
+@mixin S {
+	.dateRangeField-fieldset-arrow {
+		@include icon.XS;
+	}
+}

package/src/components/dateRangeField/vars.scss

@@ -0,0 +1,16 @@
+@mixin vars {
+	--components-dateRangeField-maxWidth: auto;
+	--components-dateRangeField-maxWidthDay: 18rem;
+	--components-dateRangeField-maxWidthMonth: 16rem;
+	--components-dateRangeField-maxWidthYear: 12rem;
+
+	--components-dateRangeField-maxWidthDayS: 16.5rem;
+	--components-dateRangeField-maxWidthMonthS: 13.5rem; // 12.75rem;
+	--components-dateRangeField-maxWidthYearS: 10.25rem; //9.75rem;
+
+	--components-dateRangeField-content-inlineStart: calc(var(--pr-t-spacings-100) + var(--pr-t-spacings-25));
+	--components-dateRangeField-content-width: calc(50% + var(--pr-t-spacings-300) + var(--pr-t-spacings-50));
+	--components-dateRangeField-content-inlineEnd: calc(var(--pr-t-spacings-800) + var(--pr-t-spacings-150));
+	--components-dateRangeField-content-background: transparent;
+	--components-dateRangeField-content-placeholderColor: var(--palettes-neutral-400);
+}