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

7.1 Background

Background of containers can be easily maniputlated with textures, colors, and shadows.

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

7.1.1 Background Colors

Background colors can be easily change with bg_color-name

Example s

Default styling

Background Color of [modifier class]

bg_primary

background using primary color

Background Color of bg_primary

bg_secondary

background using secondary color

Background Color of bg_secondary

bg_shade

background using shade color

Background Color of bg_shade

bg_alert

background using alert color

Background Color of bg_alert

bg_warning

background using warning color

Background Color of bg_warning

bg_success

background using success color

Background Color of bg_success

bg_info

background using success color

Background Color of bg_info

bg_highlight

background using success color

Background Color of bg_highlight

<div class="[modifier class] p_3 c_white">Background Color of [modifier class]</div>

<div class="[modifier class] p_3 c_white">Background Color of [modifier class]</div>

Code Sample

Copy Code

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

7.1.1.1 Background Color Shades

Background colors can be shifted by appending a modifier of n5 through 5. The negative(n) numbers mix the color with black and the positive numbers mix the color with white.

Classes	Effect
.bg_(color)-0, .bg_(color)	pure color
.bg_(color)-1	color with 15% white mixed in
.bg_(color)-2	color with 37% white mixed in
.bg_(color)-3	color with 60% white mixed in
.bg_(color)-4	color with 78% white mixed in
.bg_(color)-5	color with 90% white mixed in
.bg_(color)-n1	color with 10% black mixed in
.bg_(color)-n2	color with 25% black mixed in
.bg_(color)-n3	color with 45% black mixed in
.bg_(color)-n4	color with 58% black mixed in
.bg_(color)-n5	color with 75% black mixed in

bg_primary - background color modified light to dark bg_secondary - background color modified light to dark bg_shade - background color modified light to dark bg_accent - background color modified light to dark bg_navigation - background color modified light to dark bg_info - background color modified light to dark bg_highlight - background color modified light to dark bg_success - background color modified light to dark bg_warning - background color modified light to dark bg_alert - background color modified light to dark bg_acc - background color modified light to dark

MarkupWrapperClasss: flex bg_shade-5 p_2 texture_light

Example

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

<div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
<div class="-5 flex_auto text_center  p_2 p-y_5">5</div>
<div class="-4 flex_auto text_center  p_2 p-y_5">4</div>
<div class="-3 flex_auto text_center  p_2 p-y_5">3</div>
<div class="-2 flex_auto text_center  p_2 p-y_5">2</div>
<div class="-1 flex_auto text_center  c_white p_2 p-y_5">1</div>
<div class="-0 flex_auto text_center  c_white p_2 p-y_5">0</div>
<div class="-n1 flex_auto text_center  c_white p_2 p-y_5">n1</div>
<div class="-n2 flex_auto text_center  c_white p_2 p-y_5">n2</div>
<div class="-n3 flex_auto text_center  c_white p_2 p-y_5">n3</div>
<div class="-n4 flex_auto text_center  c_white p_2 p-y_5">n4</div>
<div class="-n5 flex_auto text_center  c_white p_2 p-y_5">n5</div>
<div class="bg_black flex_auto text_center  c_white p_2 p-y_5">black</div>

<div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
<div class="-5 flex_auto text_center  p_2 p-y_5">5</div>
<div class="-4 flex_auto text_center  p_2 p-y_5">4</div>
<div class="-3 flex_auto text_center  p_2 p-y_5">3</div>
<div class="-2 flex_auto text_center  p_2 p-y_5">2</div>
<div class="-1 flex_auto text_center  c_white p_2 p-y_5">1</div>
<div class="-0 flex_auto text_center  c_white p_2 p-y_5">0</div>
<div class="-n1 flex_auto text_center  c_white p_2 p-y_5">n1</div>
<div class="-n2 flex_auto text_center  c_white p_2 p-y_5">n2</div>
<div class="-n3 flex_auto text_center  c_white p_2 p-y_5">n3</div>
<div class="-n4 flex_auto text_center  c_white p_2 p-y_5">n4</div>
<div class="-n5 flex_auto text_center  c_white p_2 p-y_5">n5</div>
<div class="bg_black flex_auto text_center  c_white p_2 p-y_5">black</div>

Code Sample

Copy Code

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

7.1.1.2 Background Colors Alpha

Background colors of white and black can be shifted by appending a modifier bg_{{color-name}}-{{0 to 9}} to shift its transparency

Example s

Default styling

[modifier class]-0

[modifier class]-1

[modifier class]-2

[modifier class]-3

[modifier class]-4

[modifier class]-5

[modifier class]-6

[modifier class]-7

[modifier class]-8

[modifier class]-9

[modifier class]

black

background color of black modified with alphas

black-0

black-1

black-2

black-3

black-4

black-5

black-6

black-7

black-8

black-9

black

white

background color of white modified with alphas

white-0

white-1

white-2

white-3

white-4

white-5

white-6

white-7

white-8

white-9

white

<div class="bg_[modifier class]-0 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-0</div>
<div class="bg_[modifier class]-1 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-1</div>
<div class="bg_[modifier class]-2 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-2</div>
<div class="bg_[modifier class]-3 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-3</div>
<div class="bg_[modifier class]-4 flex_auto text_center c_white p_2 p-y_5">[modifier class]-4</div>
<div class="bg_[modifier class]-5 flex_auto text_center c_white p_2 p-y_5">[modifier class]-5</div>
<div class="bg_[modifier class]-6 flex_auto text_center c_white p_2 p-y_5">[modifier class]-6</div>
<div class="bg_[modifier class]-7 flex_auto text_center c_white p_2 p-y_5">[modifier class]-7</div>
<div class="bg_[modifier class]-8 flex_auto text_center c_white p_2 p-y_5">[modifier class]-8</div>
<div class="bg_[modifier class]-9 flex_auto text_center c_white p_2 p-y_5">[modifier class]-9</div>
<div class="bg_[modifier class] flex_auto text_center c_white p_2 p-y_5">[modifier class]</div>

<div class="bg_[modifier class]-0 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-0</div>
<div class="bg_[modifier class]-1 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-1</div>
<div class="bg_[modifier class]-2 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-2</div>
<div class="bg_[modifier class]-3 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-3</div>
<div class="bg_[modifier class]-4 flex_auto text_center c_white p_2 p-y_5">[modifier class]-4</div>
<div class="bg_[modifier class]-5 flex_auto text_center c_white p_2 p-y_5">[modifier class]-5</div>
<div class="bg_[modifier class]-6 flex_auto text_center c_white p_2 p-y_5">[modifier class]-6</div>
<div class="bg_[modifier class]-7 flex_auto text_center c_white p_2 p-y_5">[modifier class]-7</div>
<div class="bg_[modifier class]-8 flex_auto text_center c_white p_2 p-y_5">[modifier class]-8</div>
<div class="bg_[modifier class]-9 flex_auto text_center c_white p_2 p-y_5">[modifier class]-9</div>
<div class="bg_[modifier class] flex_auto text_center c_white p_2 p-y_5">[modifier class]</div>

Code Sample

Copy Code

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

7.1.2 Background Position

For many images you will need top place background images in to a cardnial location.

Example s

Default styling

[modifier class]

.bg_left

cardnial left

bg_left

.bg_top

cardnial top

bg_top

.bg_right

cardnial right

bg_right

.bg_bottom

cardnial bottom

bg_bottom

.bg_center

cardnial center center

bg_center

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt">[modifier class]</span></div>

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt">[modifier class]</span></div>

Code Sample

Copy Code

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

7.1.3 Background Repeat

repeating a background image is easy.

.bg_norepeat - norepeat .bg_repeat - repeat .bg_repeat-x - repoeat-x .bg_repeat-y - repeat-y .bg_repeat-space - repeat-space

Example

<div class=" seal_tiny bg_auto" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt"></span></div>

<div class=" seal_tiny bg_auto" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt"></span></div>

Code Sample

Copy Code

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

7.1.4 Background Size

For many images you will need top place background images in to a cardnial location.

Example s

Default styling

[modifier class]

.bg_unset

removes any css background size

bg_unset

.bg_auto

auto

bg_auto

.bg_cover

cover

bg_cover

.bg_contain

contain

bg_contain

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;"><span class="alt">[modifier class]</span></div>

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;"><span class="alt">[modifier class]</span></div>

Code Sample

Copy Code

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

7.1.5 Textures

All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes. It is easy to apply textures using the texture utlities.

Example s

Default styling

[modifier class]

.texture_light

Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.

texture_light

.texture_medium

medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.

texture_medium

.texture_dust

Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.

texture_dust

.texture_dark

This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.

texture_dark

.texture_cross

A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.

texture_cross

.texture_disabled

This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.

texture_disabled

<div class="[modifier class] p_5 br_black-8 br_1 br_solid text_center">[modifier class]</div>

<div class="[modifier class] p_5 br_black-8 br_1 br_solid text_center">[modifier class]</div>

Code Sample

Copy Code

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

7.1.5.1 Textures Plus Background Colors

All textures are slightly transparent. You can acheive different effects with using the combo of textures and background colors.

Example s

Default styling

[modifier class]

.texture_light.bg_primary

textures are slightly transparent so they can be colored with background-color classess

texture_light bg_primary

.texture_dust.bg_primary

textures are slightly transparent so they can be colored with background-color classess

texture_dust bg_primary

.texture_medium.bg_primary

textures are slightly transparent so they can be colored with background-color classess

texture_medium bg_primary

.texture_dark.bg_primary

textures are slightly transparent so they can be colored with background-color classess

texture_dark bg_primary

.texture_light.bg_alert

textures are slightly transparent so they can be colored with background-color classess

texture_light bg_alert

.texture_medium.bg_alert

textures are slightly transparent so they can be colored with background-color classess

texture_medium bg_alert

.texture_dust.bg_alert

textures are slightly transparent so they can be colored with background-color classess

texture_dust bg_alert

.texture_dark.bg_alert

textures are slightly transparent so they can be colored with background-color classess

texture_dark bg_alert

.texture_cross.bg_alert

textures are slightly transparent so they can be colored with background-color classess

texture_cross bg_alert

.texture_disabled.bg_alert

textures are slightly transparent so they can be colored with background-color classess

texture_disabled bg_alert

<div class="[modifier class] p_5 br_black-8 br_1 br_solid text_center">[modifier class]</div>

<div class="[modifier class] p_5 br_black-8 br_1 br_solid text_center">[modifier class]</div>

Code Sample

Copy Code

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

7.1.5.2 Textures Plus Background Shades

All textures are slightly transparent. You can further shade the background colors to achieve even more flexablity.

Example s

Default styling

n3

n1

1

3

.texture_light.bg_primary

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_dust.bg_primary

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_medium.bg_primary

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_dark.bg_primary

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_light.bg_warning

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_medium.bg_warning

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_dust.bg_warning

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_dark.bg_warning

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_cross.bg_warning

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

.texture_disabled.bg_warning

textures are slightly transparent so they can be colored with background-color classess

n3

n1

1

3

<div class="flex">
	<div class="[modifier class]-n3 p_3 flex_auto text_center c_white">n3</div>
	<div class="[modifier class]-n1 p_3 flex_auto text_center c_white">n1</div>
	<div class="[modifier class]-1 p_3 flex_auto text_center c_white">1</div>
	<div class="[modifier class]-3 p_3 flex_auto text_center c_white">3</div>
</div>

<div class="flex">
	<div class="[modifier class]-n3 p_3 flex_auto text_center c_white">n3</div>
	<div class="[modifier class]-n1 p_3 flex_auto text_center c_white">n1</div>
	<div class="[modifier class]-1 p_3 flex_auto text_center c_white">1</div>
	<div class="[modifier class]-3 p_3 flex_auto text_center c_white">3</div>
</div>

Code Sample

Copy Code

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

7.1.6 Text Blend

Color blending modes for text on backgrounds.

.font-blend_normal - blend text with a normal .font-blend_multiply - blend text with a multiply .font-blend_screen - blend text with a screen .font-blend_overlay - blend text with a overlay .font-blend_darken - blend text with a darken .font-blend_lighten - blend text with a lighten .font-blend_color - blend text with a color .font-blend_color - blend text with a color .font-blend_hard - blend text with a hard .font-blend_soft - blend text with a soft .font-blend_difference - blend text with a difference .font-blend_exclusion - blend text with a exclusion .font-blend_hue - blend text with a hue .font-blend_saturation - blend text with a saturation .font-blend_color - blend text with a color .font-blend_luminosity - blend text with a luminosity .font-blend_initial - blend text with a initial .font-blend_inherit - blend text with a inherit .font-blend_unset - blend text with a unset

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

7.1.7 Mixed Blend Mode

Background Image blending modes on top of other layers like other images, text, and svg.

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

7.1.8 Shadows

Shadows can be easily added to container .shadow_{{modifier_class}}. You can add simple or rich shadows depending on the level of depth and details of the shadow needed for the UI.

Example s

Default styling

[modifier class]

.shadow_n5

inset shadow

shadow_n5

.shadow_n4

inset shadow

shadow_n4

.shadow_n3

inset shadow

shadow_n3

.shadow_n2

inset shadow

shadow_n2

.shadow_n1

inset shadow

shadow_n1

.shadow_0

no shadow

shadow_0

.shadow_1

box shadow

shadow_1

.shadow_2

box shadow

shadow_2

.shadow_3

box shadow

shadow_3

.shadow_4

box shadow

shadow_4

.shadow_5

box shadow

shadow_5

.shadow_bevel-light

Rich Shadow bevel-light

shadow_bevel-light

.shadow_bevel-bold

Rich Shadow bevel-bold

shadow_bevel-bold

.shadow_overlap-light

Rich Shadow overlap-light

shadow_overlap-light

.shadow_overlap-bold

Rich Shadow overlap-bold

shadow_overlap-bold

.shadow_emboss-light

Rich Shadow emboss-light

shadow_emboss-light

.shadow_emboss-bold

Rich Shadow emboss-bold

shadow_emboss-bold

<div class="[modifier class] bg-blend_overlay bg_primary-5 br_round lh_1 m_0 m_5:md p_4 p_5 text_center texture_light flex flex_column"><span class="flex_auto self_center">[modifier class]</span></div>

<div class="[modifier class] bg-blend_overlay bg_primary-5 br_round lh_1 m_0 m_5:md p_4 p_5 text_center texture_light flex flex_column"><span class="flex_auto self_center">[modifier class]</span></div>

Code Sample

Copy Code

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

7.2 Borders

Borders a complex utility that demands a combo UCs to acheive their effect. The three UCs that must be used in combo are style, color, and width. To make an object with single black pixel border that is solid you would have to add '.br_solid.br_1.br_black'

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

7.2.1 Color

alter the border color of and object by adding the border color utitlity class.

Example s

Default styling

[modifier class] border

br_primary

border color

br_primary border

br_shade

border color

br_shade border

br_alert

border color

br_alert border

br_warning

border color

br_warning border

br_info

border color

br_info border

br_highlight

border color

br_highlight border

<div class="[modifier class] p_3 br_solid bw_3">[modifier class] border</div>

<div class="[modifier class] p_3 br_solid bw_3">[modifier class] border</div>

Code Sample

Copy Code

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

7.2.1.1 Color:Black with Alphas

Border black has attached alpha modifiers to allow for greater flexablity

Example s

Default styling

[modifier class] border

br_black

border black with alpha of 100%

br_black border

br_black-0

border black with alpha of 2%

br_black-0 border

br_black-1

border black with alpha of 10%

br_black-1 border

br_black-2

border black with alpha of 20%

br_black-2 border

br_black-3

border black with alpha of 30%

br_black-3 border

br_black-4

border black with alpha of 40%

br_black-4 border

br_black-5

border black with alpha of 50%

br_black-5 border

br_black-6

border black with alpha of 60%

br_black-6 border

br_black-7

border black with alpha of 70%

br_black-7 border

br_black-8

border black with alpha of 80%

br_black-8 border

br_black-9

border black with alpha of 90%

br_black-9 border

<div class="[modifier class] p_3 br_solid br_5 bg_primary-1 white">[modifier class] border</div>

<div class="[modifier class] p_3 br_solid br_5 bg_primary-1 white">[modifier class] border</div>

Code Sample

Copy Code

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

7.2.1.2 Colors

Border colors can also have the colors modified by shifting to white or black

Example s

Default styling

[modifier class] border

br_primary

border color primary

br_primary border

br_primary-1

border color mixed with white

br_primary-1 border

br_primary-2

border color mixed with white

br_primary-2 border

br_primary-3

border color mixed with white

br_primary-3 border

br_primary-4

border color mixed with white

br_primary-4 border

br_primary-5

border color mixed with white

br_primary-5 border

br_primary-n1

border color mixed with black

br_primary-n1 border

br_primary-n2

border color mixed with black

br_primary-n2 border

br_primary-n3

border color mixed with black

br_primary-n3 border

br_primary-n4

border color mixed with black

br_primary-n4 border

br_primary-n5

border color mixed with black

br_primary-n5 border

<div class="[modifier class] p_3 br_solid br_5 bg_shade c_white">[modifier class] border</div>

<div class="[modifier class] p_3 br_solid br_5 bg_shade c_white">[modifier class] border</div>

Code Sample

Copy Code

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

7.2.1.3 Color: White with Alphas

Border white has attached alpha modifiers to allow for greater flexablity

Example s

Default styling

[modifier class] border

br_white

border white with alpha of 100%

br_white border

br_white-0

border white with alpha of 2%

br_white-0 border

br_white-1

border white with alpha of 90%

br_white-1 border

br_white-2

border white with alpha of 80%

br_white-2 border

br_white-3

border white with alpha of 70%

br_white-3 border

br_white-4

border white with alpha of 60%

br_white-4 border

br_white-5

border white with alpha of 50%

br_white-5 border

br_white-6

border white with alpha of 40%

br_white-6 border

br_white-7

border white with alpha of 30%

br_white-7 border

br_white-8

border white with alpha of 20%

br_white-8 border

br_white-9

border white with alpha of 10%

br_white-9 border

<div class="[modifier class] p_3 br_solid br_5 bg_primary-1 c_white">[modifier class] border</div>

<div class="[modifier class] p_3 br_solid br_5 bg_primary-1 c_white">[modifier class] border</div>

Code Sample

Copy Code

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

7.2.2 Radius

Apply border radius to objects by adding full or partial classes for border-radius

Example s

Default styling

[modifier class] border

br_square

All square

br_square border

br_radius

All with $global-radus

br_radius border

br_round

All corners with 99(px)

br_round border

br_circle

All corders at 100%

br_circle border

br-tl_square

top left square

br-tl_square border

br-tl_radius

top left with $global-radus

br-tl_radius border

br-tl_round

top left corners with 99(px)

br-tl_round border

br-tl_circle

top left corders at 100%

br-tl_circle border

br-bl_square

bottom left square

br-bl_square border

br-bl_radius

bottom left with $global-radus

br-bl_radius border

br-bl_round

bottom left corners with 99(px)

br-bl_round border

br-bl_circle

bottom left corders at 100%

br-bl_circle border

<div class="[modifier class] p_3 br_black br_solid br_2">[modifier class] border</div>

<div class="[modifier class] p_3 br_black br_solid br_2">[modifier class] border</div>

Code Sample

Copy Code

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

7.2.3 Style

Depends on base border module in _borders.css

Example s

Default styling

[modifier class] border

.br_none

makes a border none

br_none border

.br_dotted

makes a border dotted

br_dotted border

.br_dashed

makes a border dashed

br_dashed border

.br_solid

makes a border solid

br_solid border

<div class="[modifier class] br_black bw_1 p_3">[modifier class] border</div>

<div class="[modifier class] br_black bw_1 p_3">[modifier class] border</div>

Code Sample

Copy Code

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

7.2.4 Width

Manipulation of borders with these classes either all border or with single borders

Example s

Default styling

[modifier class] border

br_0

all border with no border

br_0 border

br_1

all borders with 1px

br_1 border

br_2

all borders with .125rem

br_2 border

br_3

all borders with .25rem

br_3 border

br_4

all borders with .5rem

br_4 border

br_5

all borders with rem

br_5 border

br-l_0.br_1

left border with no border

br-l_0 br_1 border

br-l_1.br_1

left borders with 1px

br-l_1 br_1 border

br-l_2.br_1

left borders with .125rem

br-l_2 br_1 border

br-l_3.br_1

left borders with .25rem

br-l_3 br_1 border

br-l_4.br_1

left borders with .5rem

br-l_4 br_1 border

br-l_5.br_1

left borders with rem

br-l_5 br_1 border

<div class="[modifier class] p_3 br_solid br_black c_black">[modifier class] border</div>

<div class="[modifier class] p_3 br_solid br_black c_black">[modifier class] border</div>

Code Sample

Copy Code

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

7.3 Opacity

A subtle set of UCs that control opacity can alter the objects level of focus.

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

7.3.1 Opacity Levels

Set the Opacity of an object.

class	css property	value
.opacity_0	opacity :	0
.opacity__01	opacity :	0.005
.opacity__05	opacity :	0.0075
.opacity_1	opacity :	0.025
.opacity_2	opacity :	0.1
.opacity_3	opacity :	0.25
.opacity_4	opacity :	0.38
.opacity_5	opacity :	0.5
.opacity_6	opacity :	0.62
.opacity_7	opacity :	0.75
.opacity_8	opacity :	0.9
.opacity_9	opacity :	0.975
.opacity_none	opacity :	1

Example s

Default styling

[modifier class]

.opacity_2

set opacity: 0.1

opacity_2

.opacity_6

set opacity: 0.62

opacity_6

.opacity_8

set opacity: 0.9

opacity_8

.opacity_none

set opacity: 1

opacity_none

<div class="[modifier class] br_1 br_solid br_white p_2 bg_warning c_white">[modifier class]</div>

<div class="[modifier class] br_1 br_solid br_white p_2 bg_warning c_white">[modifier class]</div>

Code Sample

Copy Code

This Documentation is Moved!

Decorator

7.1 Background

7.1.1 Background Colors

Example s

Default styling

bg_primary

bg_secondary

bg_shade

bg_alert

bg_warning

bg_success

bg_info

bg_highlight

7.1.1.1 Background Color Shades

Example

7.1.1.2 Background Colors Alpha

Example s

Default styling

black

white

7.1.2 Background Position

Example s

Default styling

.bg_left

.bg_top

.bg_right

.bg_bottom

.bg_center

7.1.3 Background Repeat

Example

7.1.4 Background Size

Example s

Default styling

.bg_unset

.bg_auto

.bg_cover

.bg_contain

7.1.5 Textures

Example s

Default styling

.texture_light

.texture_medium

.texture_dust

.texture_dark

.texture_cross

.texture_disabled

7.1.5.1 Textures Plus Background Colors

Example s

Default styling

.texture_light.bg_primary

.texture_dust.bg_primary

.texture_medium.bg_primary

.texture_dark.bg_primary

.texture_light.bg_alert

.texture_medium.bg_alert

.texture_dust.bg_alert

.texture_dark.bg_alert

.texture_cross.bg_alert

.texture_disabled.bg_alert

7.1.5.2 Textures Plus Background Shades

Example s

Default styling

.texture_light.bg_primary

.texture_dust.bg_primary

.texture_medium.bg_primary

.texture_dark.bg_primary

.texture_light.bg_warning

.texture_medium.bg_warning

.texture_dust.bg_warning

.texture_dark.bg_warning

.texture_cross.bg_warning

.texture_disabled.bg_warning

7.1.6 Text Blend

7.1.7 Mixed Blend Mode

7.1.8 Shadows

Example s

Default styling

.shadow_n5

.shadow_n4