Cirrus

#Opacity

New
0.7.0

These are utility classes that specify the z-index of elements.

ClassStyles
u-opacity-0
opacity: 0 !important
u-opacity-10
opacity: 0.1 !important
u-opacity-20
opacity: 0.2 !important
u-opacity-30
opacity: 0.3 !important
u-opacity-40
opacity: 0.4 !important
u-opacity-50
opacity: 0.5 !important
u-opacity-60
opacity: 0.6 !important
u-opacity-70
opacity: 0.7 !important
u-opacity-80
opacity: 0.8 !important
u-opacity-90
opacity: 0.9 !important
u-opacity-100
opacity: 1 !important
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Examples

Below is a demo of all supported opacity utility classes.

<div class="py-2">
    <button class="btn-info mx-1 u-opacity-0">0%</button>
    <button class="btn-info mx-1 u-opacity-10">10%</button>
    <button class="btn-info mx-1 u-opacity-20">20%</button>
    <button class="btn-info mx-1 u-opacity-30">30%</button>
    <button class="btn-info mx-1 u-opacity-40">40%</button>
    <button class="btn-info mx-1 u-opacity-50">50%</button>
    <button class="btn-info mx-1 u-opacity-60">60%</button>
    <button class="btn-info mx-1 u-opacity-70">70%</button>
    <button class="btn-info mx-1 u-opacity-80">80%</button>
    <button class="btn-info mx-1 u-opacity-90">90%</button>
    <button class="btn-info mx-1 u-opacity-100">100%</button>
</div>

#Property Specific

New
0.7.0

With the new color opacity modifiers, you can now modify the opacity for background, border, and text colors instead of the whole element.

BackgroundTextBorder
u-bg-opacity-0u-color-opacity-0u-border-opacity-0
u-bg-opacity-10u-color-opacity-10u-border-opacity-10
u-bg-opacity-20u-color-opacity-20u-border-opacity-20
u-bg-opacity-30u-color-opacity-30u-border-opacity-30
u-bg-opacity-40u-color-opacity-40u-border-opacity-40
u-bg-opacity-50u-color-opacity-50u-border-opacity-50
u-bg-opacity-60u-color-opacity-60u-border-opacity-60
u-bg-opacity-70u-color-opacity-70u-border-opacity-70
u-bg-opacity-80u-color-opacity-80u-border-opacity-80
u-bg-opacity-90u-color-opacity-90u-border-opacity-90
u-bg-opacity-100u-color-opacity-100u-border-opacity-100
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

Changing Background Opacity

Use the background opacity utility classes to control an element's background color opacity. You can use any opacity value that is defined in the opacity scale.

<button class="u-bg-opacity-100 ...">100%</button>
<button class="u-bg-opacity-90 ...">90%</button>
<button class="u-bg-opacity-80 ...">80%</button>
<button class="u-bg-opacity-70 ...">70%</button>
<button class="u-bg-opacity-60 ...">60%</button>
<button class="u-bg-opacity-50 ...">50%</button>
<button class="u-bg-opacity-40 ...">40%</button>
<button class="u-bg-opacity-30 ...">30%</button>
<button class="u-bg-opacity-20 ...">20%</button>
<button class="u-bg-opacity-10 ...">10%</button>
<button class="u-bg-opacity-0 ...">0%</button>
Changing Color Opacity

Use the color opacity utility classes to control an element's text color opacity. You can use any opacity value that is defined in the opacity scale.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="u-color-opacity-100 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-90 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-80 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-70 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-60 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-50 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-40 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-30 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-20 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-10 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-0 ...">The quick brown fox jumps over the lazy dog.</p>
Changing Border Opacity
New
0.7.1

Use the border opacity utility classes to control an element's border color opacity. You can use any opacity value that is defined in the opacity scale.

20
40
60
80
100
<div class="u-border-opacity-20 ...">
    <div>1</div>
</div>
<div class="u-border-opacity-40 ...">
    <div>40</div>
</div>
<div class="u-border-opacity-60 ...">
    <div>60</div>
</div>
<div class="u-border-opacity-80 ...">
    <div>80</div>
</div>
<div class="u-border-opacity-100 ...">
    <div>100</div>
</div>

#Responsive

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, use md:u-opacity-50 to apply opacity: 0.5 to an element only at medium screen sizes and above.

<div class="md:u-opacity-50">
    <!-- ... -->
</div>
<div class="md:u-bg-opacity-50">
    <!-- ... -->
</div>
<div class="md:u-color-opacity-50">
    <!-- ... -->
</div>
<div class="md:u-border-opacity-50">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting opacities. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        opacity: (
            25: .25,
            75: .75,
        )
    )
) !default;

This would generate the following classes.

.u-opacity-25 {
    opacity: .25 !important;
}
.u-opacity-75 {
    opacity: .75 !important;
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.