hippie-style/elements/_tables.scss

@use "sass:color";

@use "../global/config";
@use "../global/common";
@use "../global/typography";
@use "../elements/grouping";
@use "../functions/color" as *;

// Tabular data
// -----------------------------------------------------------------------------
// table
// caption
// colgroup
// col
// tbody
// thead
// tfoot
// tr
// td
// th


// Table
// -----------------------------------------------------------------------------
table {
	margin: config.$margin_double;
	border: config.$border_basic;
	border-collapse: collapse;

	&.blank {
		border: config.$width_border_basic solid transparent;

		th, td {
			border: config.$width_border_basic solid transparent;
		}
	}

	&.free {
		border: config.$width_border_basic solid transparent;
	}

	&.stripe {
		td {
			border-top: 0;
			border-bottom: 0;
		}

		tr:nth-child(even) td {
			background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
		}
	}

	&.fix {
		table-layout: fixed;
	}

	&.table_file_simple {
		@extend .width_full;
	}

	&.draggable tbody tr {
		transition: opacity 0.2s;

		&.dragging {
			opacity: 0.5;
		}
	}

	&.link {
		width: 100%;
		border: 0;
		table-layout: auto;

		tbody {
			border-bottom: config.$border_basic;

			&:hover {
				background-color: config.$color_bright;
			}

			td:nth-child(2) {
				width: 100%;
			}
		}

		th,
		td {
			border: 0;
		}

		thead th,
		tbody tr:nth-child(1) td {
			&:last-child {
				@extend .rigid;
				width: 1%;
				text-align: center;
			}
		}
	}
}

// Caption
// -----------------------------------------------------------------------------
caption {
	@extend p;
	padding: config.$space_half 0;
	border: config.$border_dotted;
	text-align: center;
}

// Columns
// -----------------------------------------------------------------------------
colgroup {

}

col {

}

// Table body
// -----------------------------------------------------------------------------
tbody {

}

// Table head
// -----------------------------------------------------------------------------
thead {

}

// Table foot
// -----------------------------------------------------------------------------
tfoot {

	tr:first-child td {
		border-top: config.$border_basic;
	}
}

// Row
// -----------------------------------------------------------------------------
tr {
	&.active {
		color: config.$color_highlight_basic;
		background-color: config.$color_action_basic;
	}
}

// Cells
// -----------------------------------------------------------------------------
th, td {
	@extend %basic;
	padding: config.$space_half;

	&.rigid {
		white-space: nowrap;
	}

	&.icon {
		width: 48px;
		text-align: center;

		img {
			vertical-align: text-top;
		}
	}

	&.link {
		padding-right: config.$space_basic;
		padding-left: config.$space_basic;

		&:hover {
			background-color: basic_color(foxtrot);

			span {
				display: none;
			}

			a {
				display: block;
				color: config.$color_highlight_basic;
			}
		}

		span {
			display: block;
		}

		a {
			display: none;
		}
	}
}

th {
	border: config.$border_basic;
	text-align: left;
}

td {
	border-right: config.$border_basic;
	border-bottom: config.$border_basic;

	&.unit {
		text-align: right;
		white-space: nowrap;
	}

	&.ellipsis {
		width: 100%;
		max-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&.text {
		padding-right: config.$space_basic;
		padding-left: config.$space_basic;
		text-align: left;

		div {
			width: 100%;
		}

		.shorten {
			@extend %short;
			max-height: 44px;
		}
	}

}

td:last-child {
	border-right: 0;

	td {
		border-bottom: 0;
	}
}

.cell_pre {
	// border-right-width: $width_border_4;
	// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
	background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
}