<table class="dst-table">
<thead>
<tr>
<th>CSS</th>
<th>SCSS</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>u-radius-1</code></td>
<td><code>radius(radius-1)</code></td>
<td>
<div class="radius u-radius-1"></div>
</td>
</tr>
<tr>
<td><code>u-radius-2</code></td>
<td><code>radius(radius-2)</code></td>
<td>
<div class="radius u-radius-2"></div>
</td>
</tr>
<tr>
<td><code>u-radius-4</code></td>
<td><code>radius(radius-4)</code></td>
<td>
<div class="radius u-radius-4"></div>
</td>
</tr>
<tr>
<td><code>u-radius-6</code></td>
<td><code>radius(radius-6)</code></td>
<td>
<div class="radius u-radius-6"></div>
</td>
</tr>
<tr>
<td><code>u-radius-8</code></td>
<td><code>radius(radius-8)</code></td>
<td>
<div class="radius u-radius-8"></div>
</td>
</tr>
<tr>
<td><code>u-radius-10</code></td>
<td><code>radius(radius-10)</code></td>
<td>
<div class="radius u-radius-10"></div>
</td>
</tr>
<tr>
<td><code>u-radius-12</code></td>
<td><code>radius(radius-12)</code></td>
<td>
<div class="radius u-radius-12"></div>
</td>
</tr>
<tr>
<td><code>u-radius-14</code></td>
<td><code>radius(radius-14)</code></td>
<td>
<div class="radius u-radius-14"></div>
</td>
</tr>
<tr>
<td><code>u-radius-16</code></td>
<td><code>radius(radius-16)</code></td>
<td>
<div class="radius u-radius-16"></div>
</td>
</tr>
<tr>
<td><code>u-radius-20</code></td>
<td><code>radius(radius-20)</code></td>
<td>
<div class="radius u-radius-20"></div>
</td>
</tr>
<tr>
<td><code>u-radius-24</code></td>
<td><code>radius(radius-24)</code></td>
<td>
<div class="radius u-radius-24"></div>
</td>
</tr>
<tr>
<td><code>u-radius-28</code></td>
<td><code>radius(radius-28)</code></td>
<td>
<div class="radius u-radius-28"></div>
</td>
</tr>
<tr>
<td><code>u-radius-32</code></td>
<td><code>radius(radius-32)</code></td>
<td>
<div class="radius u-radius-32"></div>
</td>
</tr>
<tr>
<td><code>u-radius-36</code></td>
<td><code>radius(radius-36)</code></td>
<td>
<div class="radius u-radius-36"></div>
</td>
</tr>
<tr>
<td><code>u-radius-40</code></td>
<td><code>radius(radius-40)</code></td>
<td>
<div class="radius u-radius-40"></div>
</td>
</tr>
<tr>
<td><code>u-radius-44</code></td>
<td><code>radius(radius-44)</code></td>
<td>
<div class="radius u-radius-44"></div>
</td>
</tr>
<tr>
<td><code>u-radius-48</code></td>
<td><code>radius(radius-48)</code></td>
<td>
<div class="radius u-radius-48"></div>
</td>
</tr>
<tr>
<td><code>u-radius-56</code></td>
<td><code>radius(radius-56)</code></td>
<td>
<div class="radius u-radius-56"></div>
</td>
</tr>
<tr>
<td><code>u-radius-64</code></td>
<td><code>radius(radius-64)</code></td>
<td>
<div class="radius u-radius-64"></div>
</td>
</tr>
<tr>
<td><code>u-radius-80</code></td>
<td><code>radius(radius-80)</code></td>
<td>
<div class="radius u-radius-80"></div>
</td>
</tr>
<tr>
<td><code>u-radius-96</code></td>
<td><code>radius(radius-96)</code></td>
<td>
<div class="radius u-radius-96"></div>
</td>
</tr>
</tbody>
</table>
<table class="dst-table">
<thead>
<tr>
<th>CSS</th>
<th>SCSS</th>
<th>Example</th>
</tr>
</thead>
<tbody>
{% for radius in radiuses %}
<tr>
<td><code>{{ radius.css }}</code></td>
<td><code>radius({{ radius.scss }})</code></td>
<td>
<div class="radius {{ radius.css }}"></div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{
"radiuses": [
{
"scss": "radius-1",
"value": "1px",
"css": "u-radius-1"
},
{
"scss": "radius-2",
"value": "2px",
"css": "u-radius-2"
},
{
"scss": "radius-4",
"value": "4px",
"css": "u-radius-4"
},
{
"scss": "radius-6",
"value": "6px",
"css": "u-radius-6"
},
{
"scss": "radius-8",
"value": "8px",
"css": "u-radius-8"
},
{
"scss": "radius-10",
"value": "10px",
"css": "u-radius-10"
},
{
"scss": "radius-12",
"value": "12px",
"css": "u-radius-12"
},
{
"scss": "radius-14",
"value": "14px",
"css": "u-radius-14"
},
{
"scss": "radius-16",
"value": "16px",
"css": "u-radius-16"
},
{
"scss": "radius-20",
"value": "20px",
"css": "u-radius-20"
},
{
"scss": "radius-24",
"value": "24px",
"css": "u-radius-24"
},
{
"scss": "radius-28",
"value": "28px",
"css": "u-radius-28"
},
{
"scss": "radius-32",
"value": "32px",
"css": "u-radius-32"
},
{
"scss": "radius-36",
"value": "36px",
"css": "u-radius-36"
},
{
"scss": "radius-40",
"value": "40px",
"css": "u-radius-40"
},
{
"scss": "radius-44",
"value": "44px",
"css": "u-radius-44"
},
{
"scss": "radius-48",
"value": "48px",
"css": "u-radius-48"
},
{
"scss": "radius-56",
"value": "56px",
"css": "u-radius-56"
},
{
"scss": "radius-64",
"value": "64px",
"css": "u-radius-64"
},
{
"scss": "radius-80",
"value": "80px",
"css": "u-radius-80"
},
{
"scss": "radius-96",
"value": "96px",
"css": "u-radius-96"
}
]
}
No notes defined.