Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Utilities][Opacity] Add opacity classes

See original GitHub issue

Easily change the opacity of elements with the opacity utilities.

This can be very useful in some context, for example :

<section class="module-list {% if not hook['active'] %} opacity-50 {% endif %}">

Instead of :

<section class="module-list" {% if not hook['active'] %} style="opacity:50%" {% endif %}>

I can provide a PR if you are interested in this feature.

opacity-10 => opacity:10%
opacity-20 => opacity:20%
opacity-30 => opacity:30%
opacity-40 => opacity:40%
opacity-50 => opacity:50%
opacity-60 => opacity:60%
opacity-70 => opacity:70%
opacity-80 => opacity:80%
opacity-90 => opacity:90%
opacity-100 => opacity:100%

Issue Analytics

State:
Created 3 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

techboyg5commented, Sep 4, 2020

* opacity 0       => opacity:0 

* opacity-10     => opacity:0.1

* opacity-20     => opacity:0.2

* opacity-30     => opacity:0.3

* opacity-40     => opacity:0.4

* opacity-50     => opacity:0.5

* opacity-60     => opacity:0.6

* opacity-70     => opacity:0.7

* opacity-80     => opacity:0.8

* opacity-90     => opacity:0.9

There should be one for opacity: 0 too. In fact that one should be the most important.

Also, do not use percentage values for opacity.

Finally, there is no need for a fully opaque class because it is that by default.

1reaction

MauricioHernanCabreracommented, Sep 4, 2020

I can do that @PululuK

Top Results From Across the Web

Opacity · Bootstrap v5.1

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at...

Bootstrap Opacity Classes - Custom CSS

Update: Bootstrap 5 now includes opacity utility classes. Below are custom styles you can use in older versions. Bootstrap 4 does not have...

Bootstrap Opacity -- Tutorials with advanced examples

Set element's opacity with the opacity utility class. Staticfree. Change the opacity of the element by adding .opacity-* class. Opacity 0%. Opacity 5%....

Bootstrap Opacity - examples & tutorial

Opacity built with the latest Bootstrap 5. Set the opacity level and describe the transparency level class for an element such as navbar,...

Extended Bootstrap Opacity Utilities by Keenthemes

Overview. Metronic sets custom opacity classes in src/sass/components/helpers/_opacity. scss and through a SASS variable $opacity-values defined in src/sass/ ...