Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 15695

4.1.1.4 Hover: Border Color

hovers can easily effect the border style to toggle between styles. Very useful fo toggling from a border type to none or vice versa.

Class Effect
br_none Border is None on Hover
br_dotted Border is Dotted on Hover
br_dashed Border is Dashed on Hover
br_solid Border is Solid on Hover
br_transparent Sometimes shifting to transparent is better so as to not cause the UI to flicker and resize

Example

Default styling

None
Transparent
Solid
Dashed
Dotted
<div class="">
<div class="h:br_none br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">None</div>
<div class="h:br_transparent br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Transparent</div>
<div class="h:br_solid br_3 br_dotted br_primary-2 p_2 m_2 bg_shade-5">Solid</div>
<div class="h:br_dashed br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Dashed</div>
<div class="h:br_dotted br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Dotted</div>
</div>
Copy Code