cahier-de-bridge/css/tree.css

Gestion d'un éditeur de mains de bridge

/* Crédit: https://iamkate.com/code/tree-views/ */
.tree {
	--spacing: 1.5rem;
	--radius: 10px;
	user-select: none;
}

.tree li {
	display: block;
	position: relative;
	padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
	cursor: pointer;
}

.tree ul {
	margin-left: calc(var(--radius) - var(--spacing));
	padding-left: 0;
}

.tree ul li {
	border-left: 2px solid #000;
}

.tree ul li:last-child {
	border-color: transparent;
}

.tree ul li::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--spacing) / -2);
	left: -2px;
	width: calc(var(--spacing) + 2px);
	height: calc(var(--spacing) + 1px);
	border: solid #000;
	border-width: 0 0 2px 2px;
}

.tree summary {
	display: flex;
}

.tree summary span {
	display: block;
	width: 100%;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
	display: none;
}

.tree summary:focus {
	outline: none;
}

.tree summary:focus-visible {
	outline: 1px dotted #000;
}
.tree summary::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--spacing) / 2 - var(--radius));
	left: calc(var(--spacing) - var(--radius) - 1px);
	width: calc(2 * var(--radius));
	height: calc(2 * var(--radius));
	border-radius: 50%;
	background: #ddd;
}

.tree summary::before {
	z-index: 1;
	background: #696 url("/images/expand-collapse.svg") 0 0;
}

.tree details[open] > summary::before {
	background-position: calc(-2 * var(--radius)) 0;
}

.tree_sel {
	font-weight: bold;
	color: blue;
}
#tree_sw {
	appearance: none;
	margin: 5px;
	padding: 0;
}

#tree_sw + label {
	cursor: pointer;
}

#tree_sw:checked + label img {
	transform: rotate(180deg);
}