#Opacity
These are utility classes that specify the z-index of elements.
| Class | Styles |
|---|---|
u-opacity-0 | |
u-opacity-10 | |
u-opacity-20 | |
u-opacity-30 | |
u-opacity-40 | |
u-opacity-50 | |
u-opacity-60 | |
u-opacity-70 | |
u-opacity-80 | |
u-opacity-90 | |
u-opacity-100 | |
#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.