Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling is broken for ring styles like 'ring-1' #20

Open
Wanderwichtl opened this issue Nov 10, 2022 · 3 comments
Open

Styling is broken for ring styles like 'ring-1' #20

Wanderwichtl opened this issue Nov 10, 2022 · 3 comments

Comments

@Wanderwichtl
Copy link

Wanderwichtl commented Nov 10, 2022

Hello,
I am having some huge problems in order to get the :ring-1 styles applied. It seems to be broken.
When the styles :ring-1 :ring-secondary-body-border are applied, I get:

    --gi-ring-color: rgba(114,124,121,var(--gi-ring-opacity));
    --gi-bg-opacity: 1;
    box-shadow: var(--gi-ring-inset) 0 0 0 calc(1px+var(--gi-ring-offset-width)) var(--gi-ring-color);

This is computed to none in the browser

I tried to get this up and running with a custom-rule, but even there I have some problems. Even just to get it up and running.

(defn- ring-width-compiler [{[value] :component-data}]
  (let [size (if (nil? value)
               "3px"
               (common/value-unit->css value {:zero-unit nil
                                              :number    {:unit "px"}}))]
    {:--gi-ring-opacity (str "var(--gi-ring-opacity, 1)")
     :--gi-ring-color (str "var(--gi-ring-color, rgb(114 124 121 / var(gi-ring-opacity)))")
     :--gi-ring-offset-shadow (str "var(--gi-ring-inset) 0 0 0 var(--gi-ring-offset-width, 0px) var(--gi-ring-offset-color, #fff)")
     :--gi-ring-offset-width (str "var(--gi-ring-offset-width, 0px)")
     :--gi-ring-shadow (str "var(--gi-ring-inset) 0 0 0 calc(" size " + var(--gi-ring-offset-width, 0px)) var(--gi-ring-color)")
     :box-shadow (str "var(--gi-ring-offset-shadow), var(--gi-ring-shadow), var(--gi-shadow, 0 0 #0000)")}))


;; config part
{:components [{:id     :ring-width 
                         :rules  "ring-width = <'ring'> (<'-'> ('inset' | number | length | length-unit))?"
                         :garden ring-width-compiler}]}

I would be glad for any advises or help
Alex

@plexus
Copy link
Member

plexus commented Nov 10, 2022

Hi Alex,

Seems like this might actually be a girouette issue. Have you filed an upstream issue we could track?

Thanks!

@green-coder
Copy link

green-coder commented Nov 11, 2022

@Wanderwichtl Hi,

As Plexus said, it seems to be a Girouette issue. Please open an issue at https://github.com/green-coder/girouette or (even better) create a PR.

Thanks !

@Wanderwichtl
Copy link
Author

Hi,
I've created an issue at green-coder/girouette#95

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants