view release on metacpan or  search on metacpan

t/0245-realworld-css.t  view on Meta::CPAN

	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	background: #333;
	color: #fff;
	font-size: 0.75rem;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}

[data-tooltip]:hover::after {
	opacity: 1;
}
END
	is(cs($code), $code, 'CSS: tooltip with pseudo-element');
}

# 16. card hover effect
{
	my $code = <<'END';
.hover-card {
	transform: translateY(0);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
END
	is(cs($code), $code, 'CSS: hover lift effect');
}

# 17. @layer rule
{
	my $code = <<'END';
@layer base {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	html {
		font-size: 16px;
		scroll-behavior: smooth;
	}
}

@layer components {
	.btn {
		display: inline-block;
		padding: 8px 16px;
	}
}
END
	is(cs($code), $code, 'CSS: @layer cascade layers');
}

# 18. container queries
{
	my $code = <<'END';
.sidebar {
	container-type: inline-size;
}

@container (min-width: 300px) {
	.widget {
		display: flex;
		gap: 12px;
	}
}

@container (min-width: 600px) {
	.widget {
		grid-template-columns: 1fr 2fr;
	}
}
END
	is(cs($code), $code, 'CSS: container queries');
}

# 19. scrollbar styling
{
	my $code = <<'END';
.scrollable {
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #888 transparent;
}

.scrollable::-webkit-scrollbar {
	width: 6px;
}

.scrollable::-webkit-scrollbar-track {
	background: transparent;
}

.scrollable::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 3px;
}
END
	is(cs($code), $code, 'CSS: scrollbar styling');
}

# 20. focus-visible
{
	my $code = <<'END';
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;