#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

#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>

#Responsive

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

<div class="u-opacity-50-md">
    <!-- ... -->
</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.