37704-vm/wp-content/plugins/tablepress/css/_default-datatables.scss

/**
 * TablePress Default CSS - DataTables-related code.
 *
 * @package TablePress
 * @subpackage Frontend CSS
 * @author Tobias Bäthge, Allan Jardine
 * @since 1.0.0
 */

// Load the Sass string module, for use in the `unicode` function.
@use "sass:string";

/* Default toggle variable for LTR and RTL CSS. */
$direction: "ltr" !default;

/* Import DataTables pagination code. */
@use "default-datatables-pagination" with ($direction: $direction);

// Ensure that Unicode characters are embedded in ASCII-encoded form.
@function unicode($str) {
	@return string.unquote("\"") + string.unquote(string.insert($str, "\\", 1)) + string.unquote("\"");
}

/* Default variables for the LTR CSS. */
$align-side: left;
$align-side-opposite: right;

/* Variables for the RTL CSS. */
@if "rtl" == $direction {
	$align-side: right;
	$align-side-opposite: left;
}

/* Scrolling. */
.dt-scroll {
	width: 100%;

	/* Fix for wrong alignment and width. */
	.tablepress {
		width: 100% !important;
	}
}

div.dt-scroll-body {
	thead,
	tfoot {
		tr {
			height: 0;

			th,
			td {
				height: 0 !important;
				padding-top: 0 !important;
				padding-bottom: 0 !important;
				border-top-width: 0 !important;
				border-bottom-width: 0 !important;

				div.dt-scroll-sizing {
					height: 0 !important;
					overflow: hidden !important;
				}
			}
		}
	}

	> table.dataTable > thead > tr {
		> th,
		> td {
			overflow: hidden;
		}
	}
}

/* Sorting. */
.tablepress {
	/* Custom properties. */
	--head-active-bg-color: #049cdb;
	--head-active-text-color: var(--head-text-color);
	--head-sort-arrow-color: var(--head-active-text-color);

	thead {
		th:active {
			outline: none;
		}

		.dt-orderable-asc,
		.dt-ordering-asc {
			.dt-column-order:before {
				position: absolute;
				display: block;
				bottom: 50%;
				content: unicode("25b2") / "";
			}
		}

		.dt-orderable-desc,
		.dt-ordering-desc {
			.dt-column-order:after {
				position: absolute;
				display: block;
				top: 50%;
				content: unicode("25bc") / "";
			}
		}

		.dt-orderable-asc,
		.dt-orderable-desc,
		.dt-ordering-asc,
		.dt-ordering-desc {
			.dt-column-order {
				position: relative;
				width: 12px;
				height: 24px;
				color: var(--head-sort-arrow-color);
				line-height: 12px;
				font-size: 14px;
				font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif !important;

				&:before,
				&:after {
					opacity: 0.2;
				}
			}
		}

		.dt-orderable-asc,
		.dt-orderable-desc {
			cursor: pointer;
			outline-offset: -2px;

			&:hover {
				background-color: var(--head-active-bg-color);
				color: var(--head-active-text-color);
			}
		}

		.dt-ordering-asc,
		.dt-ordering-desc {
			background-color: var(--head-active-bg-color);
			color: var(--head-active-text-color);
		}

		.dt-ordering-asc .dt-column-order:before,
		.dt-ordering-desc .dt-column-order:after {
			opacity: 0.8;
		}
	}

	thead,
	tfoot {
		> tr > * {
			.dt-column-header,
			.dt-column-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 4px;

				.dt-column-title {
					flex-grow: 1;

					&:empty {
						display: none;
					}
				}
			}
		}
	}
}

/* Automatic data type alignment. */
.tablepress:where(.auto-type-alignment) {
	.dt-type-numeric,
	.dt-type-date,
	/* .dt-right is used for custom dates. */
	.dt-right {
		text-align: $align-side-opposite;

		.dt-column-header,
		.dt-column-footer {
			flex-direction: row-reverse;
		}
	}
}

/* Element positioning. */
.dt-container {
	position: relative;
	clear: both;
	margin-bottom: 1rem;

	.tablepress {
		margin-bottom: 0;

		/* Empty footers should be hidden for improved accessibility. */
		tfoot:empty {
			display: none;
		}
	}

	.dt-layout-row {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;

		&.dt-layout-table {
			.dt-layout-cell {
				display: block;
				width: 100%;
			}
		}
	}

	.dt-layout-cell {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 1em;
		padding: 5px 0;

		&.dt-layout-full {
			justify-content: space-between;
			align-items: center;
			width: 100%;

			> *:only-child {
				margin: auto;
			}
		}

		&.dt-layout-start {
			justify-content: flex-start;
			align-items: center;
			margin-right: auto;
		}

		&.dt-layout-end {
			justify-content: flex-end;
			align-items: center;
			margin-left: auto;
		}

		&:empty {
			display: none;
		}
	}

	label {
		display: inline;
		width: auto;
	}

	/* Input and select fields. */
	.dt-input {
		display: inline;
		padding: 5px;
		width: auto;
		font-size: inherit;
	}

	/* Search and Length Change fields. */
	.dt-search,
	.dt-length {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 5px;
	}

	/* Pagination. */
	@include default-datatables-pagination.dt-paging;
}

@media screen and (max-width: 767px) {
	.dt-container {
		.dt-layout-row {
			flex-direction: column;
		}

		.dt-layout-cell {
			flex-direction: column;
			padding: 0.5em 0;
		}
	}
}