generator-nitro/generators/app/templates/src/shared/props/token/css/10-semantic-dimension.css

Yeoman generator for the nitro frontend framework

/* ⚠️ semantic dimension variables */
:root {
	--spacing-static-1: var(--dimension-10);
	--spacing-static-2: var(--dimension-20);

	--spacing-s1: var(--dimension-4);
	--spacing-s2: var(--dimension-8);
	--spacing-s3: var(--dimension-16);
}

@media (min-width: 768px) {
	:root {
		--spacing-s1: var(--dimension-8);
		--spacing-s2: var(--dimension-16);
		--spacing-s3: var(--dimension-32);
	}
}

@media (min-width: 1200px) {
	:root {
		--spacing-s1: var(--dimension-10);
		--spacing-s2: var(--dimension-24);
		--spacing-s3: var(--dimension-40);
	}
}
/* ⚠️ end semantic dimension variables */