Radius

Tokens

• Tokens: 1, 2, ..., 6, 99

Utility

• Utility Class: -bdrs:1, ..., -bdrs:6, -bdrs:99

Variables

• --radius--{token}
• 初期値
  • --radius--1: 0.125rem // ≒ 2px
  • --radius--2: 0.25rem // ≒ 4px
  • --radius--3: 0.5rem // ≒ 8px
  • --radius--4: 0.75rem // ≒ 12px
  • --radius--5: 1.25rem // ≒ 20px
  • --radius--6: 1.875rem // ≒ 30px
  • --radius--99: 999px

DEMOs

How to use

<Box radius="2">...</Box>

<div class="l--box -bdrs:2">...</div>

.foo{
	border-radius: var(--radius--2);
}