@lucca-front/scss 16.4.1 → 16.4.3

package/src/components/table/mods.scss

@@ -1,312 +1,312 @@
-@use '@lucca-front/icons/src/commons/utils/icon';
-
-@mixin S {
-	font-size: var(--sizes-S-fontSize);
-	line-height: var(--sizes-S-lineHeight);
-}
-
-@mixin zebra {
-	.table-body {
-		tr:nth-child(odd) {
-			background-color: var(--components-table-zebra-background);
-		}
-	}
-}
-
-@mixin alignTop {
-	.table-body-row-cell {
-		vertical-align: top;
-	}
-}
-
-@mixin clickable {
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		transition-duration: var(--commons-animations-durations-fast);
-		transition-property: background-color;
-	}
-
-	.table-body-row-cell-action,
-	.table-foot-row-cell-action {
-		color: var(--palettes-grey-800);
-		text-decoration: none;
-
-		&:hover,
-		&:focus {
-			text-decoration: underline;
-		}
-	}
-
-	.table-body-row,
-	.table-foot-row {
-		cursor: pointer;
-
-		&:hover,
-		&:focus-within {
-			.table-body-row-cell {
-				background-color: var(--components-table-hover-background);
-			}
-		}
-	}
-}
-
-@mixin card {
-	border-top: 0;
-
-	.table-head-row-cell {
-		border-top: 0;
-	}
-
-	.table-body,
-	.table-foot {
-		&:last-child {
-			.table-body-row-cell,
-			.table-foot-row-cell {
-				border-bottom: none;
-			}
-		}
-	}
-
-	.table-body-row,
-	.table-foot-row {
-		background-color: transparent;
-	}
-
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		&:first-child {
-			padding-left: var(--components-table-card-padding);
-		}
-
-		&:last-child {
-			padding-right: var(--components-table-card-padding);
-		}
-	}
-}
-
-@mixin borderless {
-	@include noOffset;
-
-	border: none;
-
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		border-top: none;
-	}
-}
-
-@mixin noOffset {
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		&:first-child {
-			padding-left: 0;
-		}
-
-		&:last-child {
-			padding-right: 0;
-		}
-	}
-}
-
-@mixin header {
-	vertical-align: bottom;
-}
-
-@mixin parent {
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		color: var(--palettes-grey-700);
-		background-color: var(--palettes-grey-50);
-		font-size: var(--sizes-S-fontSize);
-		line-height: var(--sizes-S-lineHeight);
-		font-weight: 600;
-	}
-}
-
-@mixin collapsable {
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		cursor: pointer;
-		text-decoration: none;
-
-		&:hover {
-			outline: none;
-		}
-
-		&:focus-visible,
-		&:hover {
-			outline: none;
-			text-decoration: underline;
-		}
-
-		&::before {
-			@include icon.generate('arrow_unfold_less');
-
-			font-size: var(--sizes-M-lineHeight);
-			font-weight: 400;
-			margin-right: var(--spacings-XS);
-			transition-duration: var(--commons-animations-durations-fast);
-			transition-property: transform;
-			vertical-align: top;
-		}
-	}
-
-	&.is-collapsed {
-		.table-body-row-cell,
-		.table-foot-row-cell {
-			&::before {
-				@include icon.generate('arrow_unfold_more');
-			}
-		}
-	}
-}
-
-@mixin child {
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		&:first-child {
-			padding-left: var(--spacings-XL);
-		}
-	}
-}
-
-@mixin draggable($atRoot: 'without: rule') {
-	@at-root ($atRoot) {
-		.table-body-row-cell-handler,
-		.table-foot-row-cell-handler {
-			top: 0;
-			bottom: 0;
-			left: 0;
-			width: var(--spacings-L);
-			position: absolute;
-			cursor: move;
-
-			&::after {
-				@include icon.generate('dots_drag');
-
-				color: var(--palettes-grey-600);
-				font-size: var(--sizes-M-lineHeight);
-				height: 100%;
-				margin: auto;
-				display: flex;
-				align-items: center;
-			}
-		}
-	}
-
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		&:first-child {
-			padding-left: var(--spacings-L);
-			position: relative;
-		}
-	}
-}
-
-@mixin selectable {
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		&:first-child {
-			padding-right: var(--spacings-XS);
-			width: var(--spacings-S);
-		}
-	}
-}
-
-@mixin twoLines($atRoot: 'without: rule') {
-	@at-root ($atRoot) {
-		.table-head-row-cell-secondLine {
-			margin-top: var(--spacings-XXS);
-			display: block;
-			font-weight: 400;
-		}
-	}
-
-	.table-head-row-cell {
-		vertical-align: top;
-	}
-
-	.table-head-row-cell-wrapper {
-		max-width: calc(100% - var(--spacings-L));
-		display: inline-block;
-		vertical-align: top;
-	}
-
-	.table-head-row-cell-secondLine {
-		margin-top: var(--spacings-XXS);
-		display: block;
-		font-weight: 400;
-	}
-}
-
-@mixin avatar {
-	padding-right: 0;
-	width: var(--spacings-L);
-}
-
-@mixin actions {
-	padding: 0.3rem;
-	padding-right: var(--spacings-XS);
-	padding-left: 0;
-	transition-duration: var(--commons-animations-durations-fast);
-	transition-property: opacity;
-	text-align: right;
-	white-space: nowrap;
-}
-
-@mixin actionsHidden {
-	@media (hover: hover) {
-		> * {
-			&:not(.is-loading) {
-				opacity: 0;
-			}
-		}
-
-		.table-head-row:hover &,
-		.table-body-row:hover &,
-		.table-foot-row:hover & {
-			> * {
-				opacity: 1;
-			}
-		}
-
-		.table-head-row:focus-within &,
-		.table-body-row:focus-within &,
-		.table-foot-row:focus-within & {
-			> * {
-				opacity: 1;
-			}
-		}
-	}
-}
-
-@mixin alignCenter {
-	text-align: center;
-}
-
-@mixin alignRight {
-	text-align: right;
-}
-
-@mixin layoutFixed {
-	table-layout: fixed;
-}
-
-@mixin noOffset {
-	.table-head-row-cell,
-	.table-body-row-cell,
-	.table-foot-row-cell {
-		&:first-child {
-			padding-left: 0;
-		}
-
-		&:last-child {
-			padding-right: 0;
-		}
-	}
-}
+@use '@lucca-front/icons/src/commons/utils/icon';
+
+@mixin S {
+	font-size: var(--sizes-S-fontSize);
+	line-height: var(--sizes-S-lineHeight);
+}
+
+@mixin zebra {
+	.table-body {
+		tr:nth-child(odd) {
+			background-color: var(--components-table-zebra-background);
+		}
+	}
+}
+
+@mixin alignTop {
+	.table-body-row-cell {
+		vertical-align: top;
+	}
+}
+
+@mixin clickable {
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		transition-duration: var(--commons-animations-durations-fast);
+		transition-property: background-color;
+	}
+
+	.table-body-row-cell-action,
+	.table-foot-row-cell-action {
+		color: var(--palettes-grey-800);
+		text-decoration: none;
+
+		&:hover,
+		&:focus {
+			text-decoration: underline;
+		}
+	}
+
+	.table-body-row,
+	.table-foot-row {
+		cursor: pointer;
+
+		&:hover,
+		&:focus-within {
+			.table-body-row-cell {
+				background-color: var(--components-table-hover-background);
+			}
+		}
+	}
+}
+
+@mixin card {
+	border-top: 0;
+
+	.table-head-row-cell {
+		border-top: 0;
+	}
+
+	.table-body,
+	.table-foot {
+		&:last-child {
+			.table-body-row-cell,
+			.table-foot-row-cell {
+				border-bottom: none;
+			}
+		}
+	}
+
+	.table-body-row,
+	.table-foot-row {
+		background-color: transparent;
+	}
+
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&:first-child {
+			padding-left: var(--components-table-card-padding);
+		}
+
+		&:last-child {
+			padding-right: var(--components-table-card-padding);
+		}
+	}
+}
+
+@mixin borderless {
+	@include noOffset;
+
+	border: none;
+
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		border-top: none;
+	}
+}
+
+@mixin noOffset {
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&:first-child {
+			padding-left: 0;
+		}
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+}
+
+@mixin header {
+	vertical-align: bottom;
+}
+
+@mixin parent {
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		color: var(--palettes-grey-700);
+		background-color: var(--palettes-grey-50);
+		font-size: var(--sizes-S-fontSize);
+		line-height: var(--sizes-S-lineHeight);
+		font-weight: 600;
+	}
+}
+
+@mixin collapsable {
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		cursor: pointer;
+		text-decoration: none;
+
+		&:hover {
+			outline: none;
+		}
+
+		&:focus-visible,
+		&:hover {
+			outline: none;
+			text-decoration: underline;
+		}
+
+		&::before {
+			@include icon.generate('arrow_unfold_less');
+
+			font-size: var(--sizes-M-lineHeight);
+			font-weight: 400;
+			margin-right: var(--spacings-XS);
+			transition-duration: var(--commons-animations-durations-fast);
+			transition-property: transform;
+			vertical-align: top;
+		}
+	}
+
+	&.is-collapsed {
+		.table-body-row-cell,
+		.table-foot-row-cell {
+			&::before {
+				@include icon.generate('arrow_unfold_more');
+			}
+		}
+	}
+}
+
+@mixin child {
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&:first-child {
+			padding-left: var(--spacings-XL);
+		}
+	}
+}
+
+@mixin draggable($atRoot: 'without: rule') {
+	@at-root ($atRoot) {
+		.table-body-row-cell-handler,
+		.table-foot-row-cell-handler {
+			top: 0;
+			bottom: 0;
+			left: 0;
+			width: var(--spacings-L);
+			position: absolute;
+			cursor: move;
+
+			&::after {
+				@include icon.generate('dots_drag');
+
+				color: var(--palettes-grey-600);
+				font-size: var(--sizes-M-lineHeight);
+				height: 100%;
+				margin: auto;
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&:first-child {
+			padding-left: var(--spacings-L);
+			position: relative;
+		}
+	}
+}
+
+@mixin selectable {
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&:first-child {
+			padding-right: var(--spacings-XS);
+			width: var(--spacings-S);
+		}
+	}
+}
+
+@mixin twoLines($atRoot: 'without: rule') {
+	@at-root ($atRoot) {
+		.table-head-row-cell-secondLine {
+			margin-top: var(--spacings-XXS);
+			display: block;
+			font-weight: 400;
+		}
+	}
+
+	.table-head-row-cell {
+		vertical-align: top;
+	}
+
+	.table-head-row-cell-wrapper {
+		max-width: calc(100% - var(--spacings-L));
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	.table-head-row-cell-secondLine {
+		margin-top: var(--spacings-XXS);
+		display: block;
+		font-weight: 400;
+	}
+}
+
+@mixin avatar {
+	padding-right: 0;
+	width: var(--spacings-L);
+}
+
+@mixin actions {
+	padding: 0.3rem;
+	padding-right: var(--spacings-XS);
+	padding-left: 0;
+	transition-duration: var(--commons-animations-durations-fast);
+	transition-property: opacity;
+	text-align: right;
+	white-space: nowrap;
+}
+
+@mixin actionsHidden {
+	@media (hover: hover) {
+		> * {
+			&:not(.is-loading) {
+				opacity: 0;
+			}
+		}
+
+		.table-head-row:hover &,
+		.table-body-row:hover &,
+		.table-foot-row:hover & {
+			> * {
+				opacity: 1;
+			}
+		}
+
+		.table-head-row:focus-within &,
+		.table-body-row:focus-within &,
+		.table-foot-row:focus-within & {
+			> * {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin alignCenter {
+	text-align: center;
+}
+
+@mixin alignRight {
+	text-align: right;
+}
+
+@mixin layoutFixed {
+	table-layout: fixed;
+}
+
+@mixin noOffset {
+	.table-head-row-cell,
+	.table-body-row-cell,
+	.table-foot-row-cell {
+		&:first-child {
+			padding-left: 0;
+		}
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+}

package/src/components/table/vars.scss

@@ -1,8 +1,8 @@
-@mixin vars {
-	--components-table-padding: var(--spacings-XS) .75rem;
-	--components-table-font-size: var(--sizes-M-fontSize);
-	--components-table-line-height: var(--sizes-M-lineHeight);
-	--components-table-zebra-background: #f5f5f5;
-	--components-table-hover-background: var(--palettes-grey-50);
-	--components-table-card-padding: var(--spacings-M);
-}
+@mixin vars {
+	--components-table-padding: var(--spacings-XS) .75rem;
+	--components-table-font-size: var(--sizes-M-fontSize);
+	--components-table-line-height: var(--sizes-M-lineHeight);
+	--components-table-zebra-background: #f5f5f5;
+	--components-table-hover-background: var(--palettes-grey-50);
+	--components-table-card-padding: var(--spacings-M);
+}

package/src/components/tableFixed/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/tableFixed/index.scss

@@ -1,21 +1,21 @@
-@use '@lucca-front/scss/src/commons/config';
-@use '@lucca-front/scss/src/commons/utils/media';
-@use 'exports' as *;
-
-.table-head-row-cell,
-.table-body-row-cell,
-.table-foot-row-cell {
-	@for $i from 2 through 20 {
-		&.mod-layoutFixed-#{$i} {
-			@include layoutFixed($i);
-		}
-
-		@each $breakpoint, $value in config.$breakpoints {
-			@include media.min($breakpoint) {
-				&.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
-					@include layoutFixed($i);
-				}
-			}
-		}
-	}
-}
+@use '@lucca-front/scss/src/commons/config';
+@use '@lucca-front/scss/src/commons/utils/media';
+@use 'exports' as *;
+
+.table-head-row-cell,
+.table-body-row-cell,
+.table-foot-row-cell {
+	@for $i from 2 through 20 {
+		&.mod-layoutFixed-#{$i} {
+			@include layoutFixed($i);
+		}
+
+		@each $breakpoint, $value in config.$breakpoints {
+			@include media.min($breakpoint) {
+				&.mod-layoutFixed-#{$i}\@mediaMin#{$breakpoint} {
+					@include layoutFixed($i);
+				}
+			}
+		}
+	}
+}