@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/tableSticked/mods.scss

@@ -1,212 +1,212 @@
-@use 'sass:color';
-
-@use '@lucca-front/icons/src/commons/utils/icon';
-@use '@lucca-front/scss/src/commons/utils/reset';
-
-@mixin stickyColumn($shadowColor: #2a3551) {
-	width: auto;
-	min-width: 100%;
-	background-color: var(--colors-white-color);
-
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-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: calc(#{$i} * var(--spacings-S));
-
-	&.mod-stickyColumn-shadow,
-	.stickyColumn-shadow-wrapper::after {
-		left: calc(#{$i} * var(--spacings-S) + var(--components-table-fixed-column-sticky-shadow-width));
-	}
-}
-
-@mixin rightOffset($i) {
-	right: calc(#{$i} * var(--spacings-S));
-
-	&.mod-stickyColumn-shadow,
-	.stickyColumn-shadow-wrapper::after {
-		right: calc(#{$i} * var(--spacings-S) + 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,
-	.table-foot-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-foot-row {
-		.table-body-row-cell,
-		.table-foot-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,
-	.table-foot-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)
-				);
-			}
-		}
-	}
-}
+@use 'sass:color';
+
+@use '@lucca-front/icons/src/commons/utils/icon';
+@use '@lucca-front/scss/src/commons/utils/reset';
+
+@mixin stickyColumn($shadowColor: #2a3551) {
+	width: auto;
+	min-width: 100%;
+	background-color: var(--colors-white-color);
+
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-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: calc(#{$i} * var(--spacings-S));
+
+	&.mod-stickyColumn-shadow,
+	.stickyColumn-shadow-wrapper::after {
+		left: calc(#{$i} * var(--spacings-S) + var(--components-table-fixed-column-sticky-shadow-width));
+	}
+}
+
+@mixin rightOffset($i) {
+	right: calc(#{$i} * var(--spacings-S));
+
+	&.mod-stickyColumn-shadow,
+	.stickyColumn-shadow-wrapper::after {
+		right: calc(#{$i} * var(--spacings-S) + 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,
+	.table-foot-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-foot-row {
+		.table-body-row-cell,
+		.table-foot-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,
+	.table-foot-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

@@ -1,8 +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;
-}
+@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

@@ -1,13 +1,13 @@
-@mixin component {
-	background-color: var(--palettes-100, var(--palettes-grey-100));
-	border-radius: var(--commons-borderRadius-M);
-	color: var(--palettes-900, var(--palettes-grey-700));
-	font-size: var(--sizes-S-fontSize);
-	padding: 0 var(--spacings-XXS);
-	line-height: var(--sizes-S-lineHeight);
-	display: inline-block;
-	text-align: center;
-	text-decoration: none;
-	vertical-align: baseline;
-	white-space: nowrap;
-}
+@mixin component {
+	background-color: var(--palettes-100, var(--palettes-grey-100));
+	border-radius: var(--commons-borderRadius-M);
+	color: var(--palettes-900, var(--palettes-grey-700));
+	font-size: var(--sizes-S-fontSize);
+	padding: 0 var(--spacings-XXS);
+	line-height: var(--sizes-S-lineHeight);
+	display: inline-block;
+	text-align: center;
+	text-decoration: none;
+	vertical-align: baseline;
+	white-space: nowrap;
+}

package/src/components/tag/exports.scss

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

package/src/components/tag/index.scss

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

package/src/components/tag/mods.scss

@@ -1,19 +1,19 @@
-@mixin clickable {
-	cursor: pointer;
-
-	&:hover,
-	&:focus {
-		text-decoration: underline;
-	}
-}
-
-@mixin l {
-	font-size: var(--sizes-M-fontSize);
-	line-height: var(--sizes-M-lineHeight);
-}
-
-@mixin outlined {
-	color: var(--palettes-600, var(--palettes-grey-600));
-	background-color: var(--colors-white-color);
-	box-shadow: 0 0 0 1px var(--palettes-300, var(--palettes-grey-300));
-}
+@mixin clickable {
+	cursor: pointer;
+
+	&:hover,
+	&:focus {
+		text-decoration: underline;
+	}
+}
+
+@mixin l {
+	font-size: var(--sizes-M-fontSize);
+	line-height: var(--sizes-M-lineHeight);
+}
+
+@mixin outlined {
+	color: var(--palettes-600, var(--palettes-grey-600));
+	background-color: var(--colors-white-color);
+	box-shadow: 0 0 0 1px var(--palettes-300, var(--palettes-grey-300));
+}

package/src/components/tag/vars.scss

@@ -1,2 +1,2 @@
-@mixin vars {
-}
+@mixin vars {
+}