lit-element not showing border with rgba

Question

Mabey stupid question but it seems I cant use rgba in my lit-element.

You can use HEXColors with rgba as you can se in this codepen:

And you can use varibles with rgba as you can see here:

https://codepen.io/finnhvman/post/theming-with-css-variables-in-rgba

If use this solution, the border dosent render out:

border: 0.3rem solid rgba(var(--application-color, black), 0.3);//dont work

Same goes for this

border: 0.3rem solid rgba(#000, 0.3);//dont work

If I use this solution the border renders out at it works.

border: 0.3rem solid rgba(250,0,0, 0.3); //Works!

My code:

 public render(): TemplateResult {
    return html`<div class="main-content">
        <div class=${classMap({  donut: this.loading })}></div>
        </div>
        `;
  }

public static get styles(): CSSResult {
    return css`
        :host {
          display: block;
        }
      .main-content {
        padding: 30px;
        background-color: #fafafa;
        text-align: center;
      }
      .donut {
        width: 2rem;
        height: 2rem;
        margin: 1rem;
        border-radius: 50%;
        border: 0.3rem solid rgba(var(--application-color, black), 0.3);//dont work
        //border: 0.3rem solid rgba(250,0,0, 0.3); //Works!
        border-top-color: var(--application-color, black);
        -webkit-animation: 1.5s spin infinite linear;
                animation: 1.5s spin infinite linear;
      }
      @keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      `;
  }

Any ideas what im doing wrong?

Where are you declaring the variable? It's not in your code. — Paulie_D, Mar 20 '20 at 11:55
thats right, because this is a webcomponent I declare it where I use it, therefore I have the fallback color black. I have tested this and this works with the other colors I use, example the border-top-color. — J4v4Scr1pt, Mar 20 '20 at 11:58
`border-top-color: var(--application-color, black);` won't work because **it's not using RGB/A anywhere**. — Paulie_D, Mar 20 '20 at 12:02
yes, but its rgb color that you use there try with hexColor, now you wondering, why use hexColor. But that is nothing I can change. Because the --application-color is set from webApplications that uses hex. Mabey there is a way to parse that to rgb in css I dont know :) — J4v4Scr1pt, Mar 20 '20 at 12:04
the variable "--application-color" is not the problem. It works in your codePen — J4v4Scr1pt, Mar 20 '20 at 12:05
Does this answer your question? [How do I apply opacity to a CSS color variable?](https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable) — abraham, Mar 21 '20 at 15:08
After some googleing I decieded to use RRGGBBAA, but now I need help with combining a var with the opacity/alpha value ex: var(--application-color, #000000) + '4D' <-- that dont work obviously but mabey u get what i want :) — J4v4Scr1pt, Mar 23 '20 at 12:30
ok 4 anyone that reads this, Im going to wait for this function: https://drafts.csswg.org/css-color-5/ In the meantime I will just just it without the alpha value — J4v4Scr1pt, Mar 24 '20 at 11:08

score 1 · Answer 1 · edited Mar 21 '20 at 15:07

1

You must use transparentize which is sass property. And then get your desired result.

border: 0.3rem solid transparentize(#000, 0.3);

edited Mar 21 '20 at 15:07

abraham

46,583
10
100
152

answered Mar 20 '20 at 12:18

Muhammad Hassaan

31
3

lit-element not showing border with rgba

1 Answers1