Clarity Spinners now support 3 sizes:
.spinner-sm
.spinner-md
.spinner-lg
.spinner-inline
is always a small sized spinner and can be used with text.
Clarity Forms can now be used within Grids by extending the .row
class on a .form-group
and wrapping the form fields in column classes.
While the markup hasn't changed for the tabs, the final rendered HTML looks a bit different with this release. Most notable changes are:
<clr-tab-link></clr-tab-link>
and <clr-tab-content></clr-tab-content>
tags from their children.
.active
class applied to the active <clr-tab-link></clr-tab-link>
and <clr-tab-content></clr-tab-content>
tags.
<clr-tab-link></clr-tab-link>
and <clr-tab-content></clr-tab-content>
tags
<li></li>
tags in the tab links
<clr-tabs>
<ul class="nav" role="tablist">
<clr-tab-link>
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#"
role="tab" id="clr-tabs-0-tab-0"
aria-selected="true" aria-controls="clr-tabs-0-content-0">
...
</a>
</li>
</clr-tab-link>
...
</ul>
<clr-tab-content>
<section role="tabpanel" id="clr-tabs-0-content-0" aria-hidden="false" aria-labelledby="clr-tabs-0-tab-0">
...
</section>
</clr-tab-content>
...
</clr-tabs>
<clr-tabs>
<ul class="nav" role="tablist">
<clr-tab-link class="nav-item
active" role="presentation"
id="link1" aria-selected="true"
aria-controls="content1">
<a class="nav-link" href="#" role="tab">
...
</a>
</clr-tab-link>
</ul>
<clr-tab-content role="tabpanel"
id="content1" aria-hidden="false"
aria-labelledby="link1"
data-hidden="false"
class="active">
<section>
...
</section>
</clr-tab-content>
</clr-tabs>