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