Source: dist/css/acc_uc.css, line 16373
4.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 16624
4.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 13961
4.1.1 Hover
Decorate containers and text to show user interaction with simple hover, and focus effects.
Source: dist/css/acc_uc.css, line 15482
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 15555
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 13972
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 15757
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>Code Sample
Source: dist/css/acc_uc.css, line 15726
4.1.1.5 Hover: Full Opacity
Set the Opacity of an object to 100% while hovered.
Example
Default styling
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>Code Sample
Source: dist/css/acc_uc.css, line 15698
4.1.1.5.1 Hover: Background Black and White Opacity
black and white overlays can be added to hovers easily by adding h: in front of black or white with the level of opacity needed.
Example s
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>Code Sample
Source: dist/css/acc_uc.css, line 16697
4.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 12529
4.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 12624
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 13939
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 12657
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 12591
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 12563
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 12539
4.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
Default styling
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>Code Sample
Source: dist/css/acc_uc.css, line 15841
4.2 Animation
Transitions Eases and Transforms.Create simple toggleable animations with a combination of classes.
Source: dist/css/acc_uc.css, line 15912
4.2.1 Easing the on Hover
Dynamic adjustment of transition with easing.
Example s
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>Code Sample
Source: dist/css/acc_uc.css, line 15963
4.2.2 Transform Scale
Dynamic adjustment of objects scale for toggling between
Example s
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>Code Sample
Source: dist/css/acc_uc.css, line 15852
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 16100
4.2.4 Rotation
Rotation through transform. Transform doesn't modify the displacement of the flow. This also have an active class modifier
Example s
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>Code Sample
Source: dist/css/acc_uc.css, line 16123
4.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
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>Code Sample
Source: dist/css/acc_uc.css, line 22484
4.3 Extras
Extras include user modification and other classes that modify the user interactions and experiences
Source: dist/css/acc_uc.css, line 16658
4.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