hippie-style/elements/_tables.scss

@use "sass:color";

@use "../global/config";
@use "../global/common";
@use "../global/typography";
@use "../elements/grouping";

// 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;
}

.table_blank {
	border: config.$width_border_basic solid transparent;

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

.table_free {
	border: config.$width_border_basic solid transparent;
}

.table_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);
	}
}

.table_fix {
	table-layout: fixed;
}

.table_file_simple {
	@extend .width_full;
}

// 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 {

}

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

	&.rigid {
		white-space: nowrap;
	}
}

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;
	}
}

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);
}