@lucca-front/scss 8.2.2 → 9.0.0-alpha.1

package/src/components/tableSorted/states.scss

@@ -0,0 +1,162 @@
+@use '../../../../icons/src/mixins' as icon;
+
+@mixin sortedLegacy {
+	color: var(--palettes-grey-900);
+
+	&::after {
+		@include icon.makeIcon('arrow_full_north');
+
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	&:hover {
+		&::after {
+			opacity: 1;
+		}
+	}
+}
+
+@mixin sortedLegacyAlignRight {
+	&::before {
+		@include icon.makeIcon('arrow_full_north');
+
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	&::after {
+		content: none;
+	}
+
+	&:hover {
+		&::before {
+			opacity: 1;
+		}
+	}
+}
+
+@mixin descendingLegacy {
+	@include sortedLegacy;
+
+	&::after {
+		@include icon.makeIcon('arrow_full_south');
+	}
+}
+
+@mixin ascendingLegacy {
+	@include sortedLegacy;
+
+	&::after {
+		@include icon.makeIcon('arrow_full_north');
+	}
+}
+
+@mixin descendingLegacyAlignRight {
+	@include sortedLegacyAlignRight;
+
+	&::after {
+		@include icon.makeIcon('arrow_full_south');
+	}
+}
+
+@mixin ascendingLegacyAlignRight {
+	@include sortedLegacyAlignRight;
+
+	&::after {
+		@include icon.makeIcon('arrow_full_north');
+	}
+}
+
+@mixin sorted {
+	padding: 0;
+
+	.table-head-row-cell-sortableButton {
+		color: var(--palettes-grey-900);
+		padding: var(--spacings-small);
+
+		&::after {
+			@include icon.makeIcon('arrow_full_north');
+
+			opacity: 1;
+			transform: translateY(0);
+		}
+
+		&:focus {
+			outline: none;
+		}
+
+		&:hover,
+		&:focus-visible {
+			outline: none;
+
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin sortedAlignRight {
+	.table-head-row-cell-sortableButton {
+		text-align: right;
+
+		&::before {
+			@include icon.makeIcon('arrow_full_north');
+
+			opacity: 1;
+			transform: translateY(0);
+		}
+
+		&::after {
+			content: none;
+		}
+
+		&:hover,
+		&:focus {
+			&::before {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin descending {
+	@include sorted;
+
+	.table-head-row-cell-sortableButton {
+		&::after {
+			@include icon.makeIcon('arrow_full_south');
+		}
+	}
+}
+
+@mixin ascending {
+	@include sorted;
+
+	.table-head-row-cell-sortableButton {
+		&::after {
+			@include icon.makeIcon('arrow_full_north');
+		}
+	}
+}
+
+@mixin descendingAlignRight {
+	@include sortedAlignRight;
+
+	.table-head-row-cell-sortableButton {
+		&::before {
+			@include icon.makeIcon('arrow_full_south');
+		}
+	}
+}
+
+@mixin ascendingAlignRight {
+	@include sortedAlignRight;
+
+	.table-head-row-cell-sortableButton {
+		&::before {
+			@include icon.makeIcon('arrow_full_north');
+		}
+	}
+}

package/src/components/tableSticked/exports.scss

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

package/src/components/tableSticked/index.scss

@@ -0,0 +1,72 @@
+@use '../../commons/config';
+@use '../../commons/utils/media';
+@use 'exports' as *;
+
+.table {
+	@include vars;
+
+	&.mod-stickyColumn {
+		@include stickyColumn;
+	}
+
+	@each $breakpoint, $value in config.$breakpoints {
+		@include media.largerThan($breakpoint) {
+			&.mod-layoutFixed-#{$breakpoint} {
+				@include fixed;
+			}
+
+			&.mod-stickyColumn-#{$breakpoint} {
+				@include stickyColumn;
+			}
+		}
+	}
+
+	&.mod-stickyColumn-shadow {
+		@include shadow;
+	}
+
+	&[class*='mod-stickyColumn'] {
+		.table-head-row-cell,
+		.table-body-row-cell {
+			@for $i from 0 through 50 {
+				&.mod-stickyColumn-leftOffset#{$i} {
+					@include leftOffset($i);
+				}
+
+				&.mod-stickyColumn-rightOffset#{$i} {
+					@include rightOffset($i);
+				}
+			}
+		}
+	}
+
+	[class*='sticky'][class*='shadow-wrapper'] {
+		@include wrapper;
+	}
+
+	&[class*='mod-stickyHeader'] {
+		@include stickyHeaderCommon;
+
+		@each $breakpoint, $value in config.$breakpoints {
+			@include media.smallerThan($breakpoint) {
+				&.mod-stickyColumn-#{$breakpoint} {
+					@include stickyColumnBreakpoint;
+				}
+			}
+		}
+	}
+
+	&.mod-stickyHeader {
+		@include stickyHeader;
+	}
+
+	&.mod-stickyHeader-withBanner {
+		@include stickyHeaderBanner;
+	}
+}
+
+.table-body-row {
+	&.mod-stickyHeader-shadow {
+		@include stickyHeaderShadow;
+	}
+}

package/src/components/tableSticked/mods.scss

@@ -0,0 +1,214 @@
+@use '../../../../icons/src/mixins' as icon;
+@use '../../commons/utils/reset';
+@use 'sass:color';
+
+@mixin fixed {
+	table-layout: fixed;
+}
+
+@mixin layoutFixed($i) {
+	min-width: $i * 1rem;
+	max-width: $i * 1rem;
+	width: $i * 1rem;
+}
+
+@mixin stickyColumn($shadowColor: #2a3551) {
+	width: auto;
+	min-width: 100%;
+	background-color: var(--colors-white-color);
+
+	.table-body-row-cell,
+	.table-head-row-cell {
+		&[class*='mod-stickyColumn-'] {
+			position: sticky;
+			background-color: var(--colors-white-color);
+			z-index: 3;
+		}
+
+		&.mod-stickyColumn-shadow {
+			z-index: 1;
+			min-width: var(--components-table-fixed-column-sticky-shadow-width);
+			max-width: var(--components-table-fixed-column-sticky-shadow-width);
+			width: var(--components-table-fixed-column-sticky-shadow-width);
+			padding: 0;
+			background: transparent;
+		}
+
+		.stickyColumn-shadow-wrapper {
+			display: flex;
+		}
+	}
+
+	[class*='mod-stickyColumn-left'] {
+		.stickyColumn-shadow-wrapper {
+			left: calc(var(--components-table-fixed-column-sticky-shadow-width) * -1);
+
+			&::after {
+				background-image: linear-gradient(to right, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
+			}
+		}
+	}
+
+	[class*='mod-stickyColumn-right'] {
+		.stickyColumn-shadow-wrapper {
+			right: calc(var(--components-table-fixed-column-sticky-shadow-width) * -1);
+
+			&::after {
+				background-image: linear-gradient(to left, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
+			}
+		}
+	}
+
+	&[class*='mod-stickyHeader'] {
+		&[class*='mod-stickyColumn'] {
+			.table-head-row-cell {
+				&[class*='mod-stickyColumn'] {
+					z-index: 6;
+
+					&:not(.mod-stickyColumn-shadow) {
+						z-index: 7;
+					}
+				}
+
+				&.mod-columnSticky-shadowMask {
+					&::before {
+						width: var(--components-table-fixed-column-sticky-shadow-width);
+						left: calc(var(--components-table-fixed-column-sticky-shadow-width) * -1);
+						background: var(--colors-white-color);
+						top: 0;
+						bottom: 0;
+						z-index: 4;
+						position: absolute;
+						content: '';
+					}
+				}
+
+				&:not(.mod-columnSticky-shadowMask) {
+					&:not(.mod-stickyColumn-shadow) {
+						+ .mod-columnSticky-shadowMask {
+							&::before {
+								left: auto;
+								right: calc(var(--components-table-fixed-column-sticky-shadow-width) * -1);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@mixin shadow {
+	width: 0;
+	position: static;
+}
+
+@mixin leftOffset($i) {
+	left: $i * 1rem;
+
+	&.mod-stickyColumn-shadow,
+	.stickyColumn-shadow-wrapper::after {
+		left: calc(#{$i} * 1rem + var(--components-table-fixed-column-sticky-shadow-width));
+	}
+}
+
+@mixin rightOffset($i) {
+	right: $i * 1rem;
+
+	&.mod-stickyColumn-shadow,
+	.stickyColumn-shadow-wrapper::after {
+		right: calc(#{$i} * 1rem + var(--components-table-fixed-column-sticky-shadow-width));
+	}
+}
+
+@mixin wrapper {
+	bottom: calc(var(--commons-divider-width) * -1);
+	width: var(--components-table-fixed-column-sticky-shadow-width);
+	border-bottom-width: var(--commons-divider-width);
+	border-bottom-color: var(--commons-divider-color);
+	border-bottom-style: solid;
+	display: flex;
+	position: absolute;
+	top: 0;
+
+	&::after {
+		width: var(--components-table-fixed-column-sticky-shadow-width);
+		position: sticky;
+		display: block;
+		background-color: transparent;
+		height: 100%;
+		content: '';
+	}
+}
+
+@mixin stickyHeaderCommon {
+	.table-head-row-cell {
+		background-color: var(--colors-white-color);
+		position: sticky;
+		z-index: 5;
+	}
+}
+
+@mixin stickyColumnBreakpoint {
+	.table-head-row-cell {
+		left: auto !important;
+		right: auto !important;
+	}
+}
+
+@mixin stickyHeaderShadow($shadowColor: #2a3551) {
+	.table-body-row-cell {
+		top: calc(var(--sticky-header-shadow-offset-top) + var(--components-table-fixed-column-sticky-shadow-width));
+		z-index: 4;
+		height: 0;
+		padding: 0;
+		border: 0;
+		position: sticky;
+		background: transparent;
+	}
+
+	.stickyHeader-shadow-wrapper {
+		top: calc(var(--components-table-fixed-column-sticky-shadow-width) * -1);
+		width: 100%;
+		height: 0;
+		border: 0;
+
+		&::after {
+			top: calc(var(--sticky-header-shadow-offset-top) + var(--components-table-fixed-column-sticky-shadow-width));
+			height: var(--components-table-fixed-column-sticky-shadow-width);
+			background-image: linear-gradient(to bottom, color.adjust($shadowColor, $alpha: -0.75), color.adjust($shadowColor, $alpha: -1));
+			width: 100%;
+			opacity: 0.5;
+		}
+	}
+
+	+ .table-body-row .table-body-row-cell {
+		border-top: 0;
+	}
+}
+
+@mixin stickyHeader {
+	.table-head-row-cell {
+		top: 0;
+	}
+}
+
+@mixin stickyHeaderBanner {
+	.table-head-row-cell {
+		top: var(commons-banner-height);
+	}
+
+	.table-body-row-cell {
+		top: calc(
+			var(commons-banner-height) + var(--sticky-header-shadow-offset-top) + var(--components-table-fixed-column-sticky-shadow-width)
+		);
+
+		.stickyHeader-shadow-wrapper {
+			&::after {
+				top: calc(
+					var(commons-banner-height) + var(--sticky-header-shadow-offset-top) + var(--components-table-fixed-column-sticky-shadow-width)
+				);
+			}
+		}
+	}
+}

package/src/components/tableSticked/vars.scss

@@ -0,0 +1,8 @@
+@mixin vars {
+	// --components-table-sticky-column-max-offset: 50;
+	// --components-table-fixed-column-min-col-width: 2;
+	// --components-table-fixed-column-max-col-width: 20;
+	// --components-table-fixed-column-sticky-shadow-color: #2a3551;
+
+	--components-table-fixed-column-sticky-shadow-width: 0.625rem;
+}

package/src/components/tag/component.scss

@@ -0,0 +1,15 @@
+@mixin component {
+	background-color: var(--palettes-100, var(--components-tag-default-palette-100));
+	color: var(--palettes-900, var(--components-tag-default-palette-900));
+	border-radius: var(--commons-border-radius);
+	font-size: var(--sizes-smaller-font-size);
+	margin-right: var(--spacings-smallest);
+	padding: 0 var(--spacings-smallest);
+	line-height: 1rem;
+	font-weight: 600;
+	display: inline-block;
+	text-align: center;
+	text-decoration: none;
+	vertical-align: baseline;
+	white-space: nowrap;
+}

package/src/components/tag/exports.scss

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

package/src/components/tag/index.scss

@@ -0,0 +1,14 @@
+@use 'exports' as *;
+
+.tag {
+	@include vars;
+	@include component;
+
+	&.mod-clickable {
+		@include clickable;
+	}
+
+	&.mod-outlined {
+		@include outlined;
+	}
+}

package/src/components/tag/mods.scss

@@ -0,0 +1,15 @@
+@mixin clickable {
+	cursor: pointer;
+
+	&:hover, &:focus {
+		text-decoration: underline;
+	}
+}
+
+@mixin outlined {
+	color: var(--palettes-grey-600);
+	background-color: var(--colors-white-color);
+	border-color: var(--palettes-grey-300);
+	border-width: var(--commons-divider-width);
+	border-style: solid;
+}

package/src/components/tag/vars.scss

@@ -0,0 +1,12 @@
+@mixin vars {
+	--components-tag-default-palette-50: var(--palettes-primary-50);
+	--components-tag-default-palette-100: var(--palettes-primary-100);
+	--components-tag-default-palette-200: var(--palettes-primary-200);
+	--components-tag-default-palette-300: var(--palettes-primary-300);
+	--components-tag-default-palette-400: var(--palettes-primary-400);
+	--components-tag-default-palette-500: var(--palettes-primary-500);
+	--components-tag-default-palette-600: var(--palettes-primary-600);
+	--components-tag-default-palette-700: var(--palettes-primary-700);
+	--components-tag-default-palette-800: var(--palettes-primary-800);
+	--components-tag-default-palette-900: var(--palettes-primary-900);
+}

package/src/components/textfield/component.scss

@@ -0,0 +1,68 @@
+@mixin component {
+	vertical-align: middle;
+	width: var(--components-textfield-sizes-default);
+
+	@at-root {
+		.textfield-input {
+			min-width: 0;
+			border: 0;
+			line-height: 1.5rem;
+			-webkit-appearance: none;
+			background-color: var(--components-textfield-background);
+			border-radius: var(--components-textfield-border-radius);
+			padding: var(--components-textfield-input-padding-vertical) var(--components-textfield-input-padding-horizontal);
+			transition-property: box-shadow, background-color, color;
+			transition-duration: var(--commons-animations-durations-fast);
+
+			&::placeholder {
+				color: var(--components-textfield-input-placeholder);
+				transition-property: color;
+				transition-duration: var(--commons-animations-durations-fast);
+				opacity: 1;
+			}
+		}
+
+		.textfield-suffix {
+			top: var(--components-textfield-suffix-top);
+			right: var(--components-textfield-input-padding-horizontal);
+			position: absolute;
+			pointer-events: none;
+			line-height: 1.5rem;
+			z-index: 1;
+		}
+
+		.textfield-options {
+			box-shadow: var(--commons-elevations-elevation-3);
+			background-color: var(--colors-white-color);
+			border-radius: var(--commons-border-radius);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: all;
+			list-style: none;
+			overflow: auto;
+			position: absolute;
+			transform-origin: right top;
+			transform: scaleY(0);
+			margin: 3px 0 0;
+			max-height: 15rem;
+			opacity: 0;
+			padding: 0;
+			left: 0;
+			top: 100%;
+			z-index: 999;
+			width: 100%;
+		}
+
+		.textfield-options-mark {
+			background-color: transparent;
+			text-decoration: underline;
+			color: inherit;
+		}
+
+		.textfield-options-entry {
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: background-color;
+			padding: 0.5rem 1rem;
+			cursor: pointer;
+		}
+	}
+}

package/src/components/textfield/exports.scss

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