show-first-row.css
No OneTemporary
Actions

Size

883 B

Referenced Files

None

Subscribers

None

show-first-row.css
View Options

	.show-first-row {
	container-type: inline-size;
	text-align: center;
	width: 100%;

	.show-first-row__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
	justify-content: center;
	gap: var(--column-gap);
	transition: row-gap 200ms, overflow 200ms;
	overflow: hidden;

	.show-first-row__checkbox:not(:checked) + & {
	row-gap: 0;
	}

	& > * {
	align-self: center;
	justify-self: center;
	}
	}

	.show-first-row__default-button {
	background: blue;
	color: white;
	height: 40px;
	display: inline-block;
	padding: 0 20px;
	line-height: 40px;
	cursor: pointer;
	margin: 0 auto;
	margin-top: 20px;
	}

	.show-first-row__show-less-button {
	display: none;
	}

	&:has(input:checked) {
	.show-first-row__show-less-button {
	display: block;
	}

	.show-first-row__show-more-button {
	display: none;
	}
	}
	}