This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Interaction

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

2.1 Interaction

Modify how the user gets feed back of changes from hover effects to active states and how things animate or select.

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

2.1 States

Prefixed before class rules the h: for hover or a: for active class allows for some dynamics with very little efforts.

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

2.1.1 Hover

Decorate containers and text to show user interaction with simple hover, and focus effects.

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

2.1.1.1 Hover: Text Color

Hovers can easily be added to change the text color by adding h: in front of the text color utility like h:primary

Example s

Default styling

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_alert

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex m_5">
  <div class="h:[modifier class]-5 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="h:[modifier class]-4 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="h:[modifier class]-3 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="h:[modifier class]-2 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="h:[modifier class]-1 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="h:[modifier class]-0 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="h:[modifier class]-n1 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n1</div>
  <div class="h:[modifier class]-n2 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n2</div>
  <div class="h:[modifier class]-n3 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n3</div>
  <div class="h:[modifier class]-n4 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n4</div>
  <div class="h:[modifier class]-n5 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n5</div>
</div>
Copy Code

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

2.1.1.2 Hover: Underline

Sometimes is is needed to add an underline on a piece of text when it hovers adding h: in front of the type of underline you would like gives that type of underline to the text when hovered.

Example s

Default styling

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

underline.c_primary

classic anchor text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

dotted.c_warning

great for popups or hint text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

double.c_highlight

extra loud underlines for the really important links or modals

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

dashed.c_accent

extra loud dots for info and hint texts reveals.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et. 

<p class="font_1">
  Lorem ipsum dolor sit amet,
  <span class="h:[modifier class] h:c_primary-n3">consectetur</span>
  adipisicing elit.
  <span class="h:[modifier class] h:c_primary-n3">Tenetur, similique</span>.
  Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi
  <span class="h:[modifier class] h:c_primary-n3">harum magni</span>
      adipisicing elit aut nulla et.
</p>
Copy Code

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

2.1.1.3 Hover: Background Color

hovers can easily be added to objects by adding h: in front of the background color utility like h:bg_primary

Example s

Default styling

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_alert

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_primary

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_shade

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_info

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_highlight

background color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_success

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_warning

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex m_5">
  <div class="h:[modifier class]-5 flex_auto text_center br_1 br_solid br_shade-4 p_2">5</div>
  <div class="h:[modifier class]-4 flex_auto text_center br_1 br_solid br_shade-4 p_2">4</div>
  <div class="h:[modifier class]-3 flex_auto text_center br_1 br_solid br_shade-4 p_2">3</div>
  <div class="h:[modifier class]-2 flex_auto text_center br_1 br_solid br_shade-4 p_2">2</div>
  <div class="h:[modifier class]-1 flex_auto text_center br_1 br_solid br_shade-4 p_2">1</div>
  <div class="h:[modifier class]-0 flex_auto text_center br_1 br_solid br_shade-4 p_2">0</div>
  <div class="h:[modifier class]-n1 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n1</div>
  <div class="h:[modifier class]-n2 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n2</div>
  <div class="h:[modifier class]-n3 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n3</div>
  <div class="h:[modifier class]-n4 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n4</div>
  <div class="h:[modifier class]-n5 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n5</div>
</div>
Copy Code

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

2.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

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

Example

0
1
2
3
4
5
6
7
8
9
<div class="flex m_5 bg_primary m_5">
  <div class="h:opacity opacity-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="h:opacity opacity-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="h:opacity opacity-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="h:opacity opacity-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="h:opacity opacity-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="h:opacity opacity-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="h:opacity opacity-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="h:opacity opacity-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="h:opacity opacity-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="h:opacity opacity-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
</div>
Copy Code

Example s

Default styling

0
1
2
3
4
5
6
7
8
9
default

bg_white

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default

bg_black

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default
<div class="flex m_5 bg_primary m_5">
  <div class="h:[modifier class]-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="h:[modifier class]-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="h:[modifier class]-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="h:[modifier class]-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="h:[modifier class]-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="h:[modifier class]-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="h:[modifier class]-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="h:[modifier class]-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="h:[modifier class]-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="h:[modifier class]-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="h:[modifier class]  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

2.1.1.6 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
cursor_pointer pointer
cursor_not-allowed no touch
cursor_grab open hand
cursor_grabbing closed hand
cursor_wait spinning ball

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

2.1.2 active

A common class name given to the parent container can effect the color, background and opacity of the children. The active class is different depending if you are using Bootstrap or Foundation.

This Variation of Arches uses "active"

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

2.1.2.1 active Background Color

Click the areas below to toggle the "active" state.
Set the font color of the child by setting the parent to .active. `a:c_primary`

Example s

Default styling

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_alert

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex p_5 is-active_toggle-function">
  <div class="flex_auto a:[modifier class]-5 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="flex_auto a:[modifier class]-4 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="flex_auto a:[modifier class]-3 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="flex_auto a:[modifier class]-2 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="flex_auto a:[modifier class]-1 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="flex_auto a:[modifier class]-0 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="flex_auto a:[modifier class]-n1 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n1</div>
  <div class="flex_auto a:[modifier class]-n2 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n2</div>
  <div class="flex_auto a:[modifier class]-n3 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n3</div>
  <div class="flex_auto a:[modifier class]-n4 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n4</div>
  <div class="flex_auto a:[modifier class]-n5 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n5</div>
</div>
Copy Code

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

2.1.2.2 active Display

Click the areas below to toggle the "active" state.
Toggle the display type of an object when it's parent 'active'

Example s

Default styling

Click to Toggle parent is-active Span with display:[modifier class] when parent is active

none

make the display none when parent is-active

Click to Toggle parent is-active Span with display:none when parent is active

inline

make the display inline when parent is-active

Click to Toggle parent is-active Span with display:inline when parent is active

inline-block

make the display inline-block when parent is-active

Click to Toggle parent is-active Span with display:inline-block when parent is active

block

make the display block when parent is-active

Click to Toggle parent is-active Span with display:block when parent is active 
<div class="p_5 is-active_toggle-function">
  <span class="a:bg_accent bg_shade-2 font_4 text_center br_1 br_solid br_shade-4 p_4">Click to Toggle parent is-active</span>
  <span class="a:[modifier class] a:bg_accent bg_shade-2 font_4 text_center br_1 br_solid br_shade-4 p_4">Span with display:[modifier class] when parent is active</span>
</div>
Copy Code

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

2.1.2.3 active Icons

Click the areas below to toggle the "active" state.
Toggle the display and hide of a an icon with applying `is-active_icon-show` or `is-active_icon-hide`

Example s

Default styling

Show When Active
Hide when Active

fa-award

toggle the award icon

Show When Active
Hide when Active

fa-bell

toggle the bell icon

Show When Active
Hide when Active

fa-bell-slash

toggle the bell slash icon

Show When Active
Hide when Active

fa-bug

toggle the bug icon

Show When Active
Hide when Active
<div class="flex is-active_toggle-function">
  <div class="flex_auto a:bg_accent bg_shade-2 font_3 text_center br_1 br_solid br_shade-4 p_3"><i class="fas font_4 [modifier class] a:icon-show"></i> Show When Active</div>
  <div class="flex_auto a:bg_accent bg_shade-2 font_3 text_center br_1 br_solid br_shade-4 p_3"><i class="fas font_4 [modifier class] a:icon-hide"></i> Hide when Active</div>
</div>
Copy Code

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

2.1.2.4 active font color

Click the areas below to toggle the "active" state.
Set the font color of the child by setting the parent to .active. `a:c_primary`

Example s

Default styling

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_alert

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex p_5 is-active_toggle-function c_white">
  <div class="flex_auto a:[modifier class]-5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="flex_auto a:[modifier class]-4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="flex_auto a:[modifier class]-3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="flex_auto a:[modifier class]-2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="flex_auto a:[modifier class]-1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="flex_auto a:[modifier class]-0 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="flex_auto a:[modifier class]-n1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n1</div>
  <div class="flex_auto a:[modifier class]-n2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n2</div>
  <div class="flex_auto a:[modifier class]-n3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n3</div>
  <div class="flex_auto a:[modifier class]-n4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n4</div>
  <div class="flex_auto a:[modifier class]-n5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n5</div>
</div>
Copy Code

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

2.1.2.5 active Black n White

Click the areas below to toggle the "active" state.
Set the background to full white or black when the parent has a class of "active".

Example s

Default styling

0
1
2
3
4
5
6
7
8
9
default

bg_white

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default

bg_black

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default
<div class="flex p_5 bg_primary m_5 is-active_toggle-function">
  <div class="flex_auto a:[modifier class] bg_[modifier class]-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">0</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-1 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">1</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-2 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">2</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-3 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">3</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-4 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">4</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-5 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">5</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-6 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-7 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-8 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-9 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="flex_auto  a:[modifier class] bg_[modifier class]-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

2.1.2.6 active Full Opacity

Click the areas below to toggle the `active` state.
`.active .a:opacity` Set the Opacity of an objects children to 100% when it has the class is-active.

Example

0
1
2
3
4
5
6
7
8
9 
<div class="flex p_4 bg_primary is-active_toggle-function ">
  <div class="flex_auto opacity_0 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 0 </div>
  <div class="flex_auto opacity_1 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 1 </div>
  <div class="flex_auto opacity_2 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 2 </div>
  <div class="flex_auto opacity_3 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 3 </div>
  <div class="flex_auto opacity_4 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 4 </div>
  <div class="flex_auto opacity_5 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 5 </div>
  <div class="flex_auto opacity_6 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 6 </div>
  <div class="flex_auto opacity_7 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 7 </div>
  <div class="flex_auto opacity_8 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 8 </div>
  <div class="flex_auto opacity_9 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 9 </div>
</div>
Copy Code

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

2.2 Animation

Transitions Eases and Transforms.Create simple toggleable animations with a combination of classes.

Example s

Default styling

0
1
2
3
4
5
6
7
8
9
default

out-in

ease timing

0
1
2
3
4
5
6
7
8
9
default

out

ease-out timing

0
1
2
3
4
5
6
7
8
9
default

in

ease-in timing

0
1
2
3
4
5
6
7
8
9
default

in-out

ease-in-out timing

0
1
2
3
4
5
6
7
8
9
default

linear

linear timing

0
1
2
3
4
5
6
7
8
9
default
<div class="flex m_5 bg_primary m_5">
  <div class="transition_3 ease_[modifier class] h:bg_black-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="transition_3 ease_[modifier class] h:bg_black  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

2.2.2 Transform Scale

Dynamic adjustment of objects scale for toggling between

Example s

Default styling

This is content that will be scaled.

0

Scale to 0%

This is content that will be scaled.

100

Scale to 100%

This is content that will be scaled.

X-0

Scale the X to 0%

This is content that will be scaled.

X-100

Scale the X to 100%

This is content that will be scaled.

Y-0

Scale the X to 0%

This is content that will be scaled.

Y-100

Scale the X to 100%

This is content that will be scaled.
<div class="flex m_5 bg_primary m_5">
  <div class="scale_[modifier class] w-10 p-y_3 p-x_4 font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">This is content that will be scaled.</div>
</div>
Copy Code

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

2.2.3 Transition

Soften the harshness of the switch of the style by adding transitions to the change the speed of transition from decorators.

Example s

Default styling

0
1
2
3
4
5
6
7
8
9
default

0

0 second transition

0
1
2
3
4
5
6
7
8
9
default

1

.1 second transition

0
1
2
3
4
5
6
7
8
9
default

2

.25 second transition

0
1
2
3
4
5
6
7
8
9
default

3

.3 second transition

0
1
2
3
4
5
6
7
8
9
default

4

.5 second transition

0
1
2
3
4
5
6
7
8
9
default

5

1 second transition

0
1
2
3
4
5
6
7
8
9
default
<div class="flex m_5 bg_primary m_5">
  <div class="transition_[modifier class] h:bg_black-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="transition_[modifier class] h:bg_black-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="transition_[modifier class] h:bg_black-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="transition_[modifier class] h:bg_black-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="transition_[modifier class] h:bg_black-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="transition_[modifier class] h:bg_black-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="transition_[modifier class] h:bg_black-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="transition_[modifier class] h:bg_black-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="transition_[modifier class] h:bg_black-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="transition_[modifier class] h:bg_black-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="transition_[modifier class] h:bg_black  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

2.2.4 Rotation

Rotation through transform. Transform doesn't modify the displacement of the flow. This also have an active class modifier

Example s

Default styling

rotate_45

Rotate by 45 degrees

rotate_90

Rotate by 90 degrees

rotate_135

Rotate by 135 degrees

rotate_180

Rotate by 180 degrees

rotate_225

Rotate by 225 degrees

rotate_270

Rotate by 270 degrees

rotate_315

Rotate by 315 degrees 

<i class="font_10 fas fa fa-user [modifier class]"></i>
Copy Code

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

2.2.5 Rotation on Active

Add in the a: in front of these classes gives you the rotation only when the item is active.

These classes are effected by the parent having active state.

Example s

Default styling

Not Active Active

rotate_45

Rotate by 45 degrees

Not Active Active

rotate_90

Rotate by 90 degrees

Not Active Active

rotate_135

Rotate by 135 degrees

Not Active Active

rotate_180

Rotate by 180 degrees

Not Active Active

rotate_225

Rotate by 225 degrees

Not Active Active

rotate_270

Rotate by 270 degrees

Not Active Active

rotate_315

Rotate by 315 degrees

Not Active Active 
<span><i class="font_10 fas fa fa-user a:[modifier class]"></i> Not Active </span>
<span><i class="active font_10 fas fa fa-user a:[modifier class]"></i> Active </span>
Copy Code

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

2.3 Extras

Extras include user modification and other classes that modify the user interactions and experiences

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

2.3.1 User Select

User interaction classes that define how the user can interact with the text of the element.

  • User on click will select All

    .user-select_all

  • User on click will select Nothing

    .user-select_none

  • User on click will select Browser Default

    .user-select_auto

  • User on click will select Only the text

    .user-select_text