kidonng / unocss-preset-daisy

UnoCSS preset for daisyUI
https://unocss-preset-daisy.vercel.app
MIT License
220 stars 19 forks source link

Stats does not look right #13

Closed jf908 closed 1 year ago

jf908 commented 1 year ago

The borders for stats doesn't seem to work properly for this preset.

image

Using this code snippet from the DaisyUI docs:

<div class="stats shadow">

  <div class="stat">
    <div class="stat-figure text-secondary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>
    <div class="stat-title">Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>

  <div class="stat">
    <div class="stat-figure text-secondary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
    </div>
    <div class="stat-title">New Users</div>
    <div class="stat-value">4,200</div>
    <div class="stat-desc">↗︎ 400 (22%)</div>
  </div>

  <div class="stat">
    <div class="stat-figure text-secondary">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path></svg>
    </div>
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↘︎ 90 (14%)</div>
  </div>

</div>
jf908 commented 1 year ago

It seems as though this style is missing a "px" as this doesn't work

:where(.stats)>:not([hidden])~:not([hidden]) {
    border-top-width: calc(0 * calc(1 - var(--un-divide-y-reverse)));
    border-bottom-width: calc(0 * var(--un-divide-y-reverse));
}

but this does:

:where(.stats)>:not([hidden])~:not([hidden]) {
    border-top-width: calc(0px * calc(1 - var(--un-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--un-divide-y-reverse));
}
jf908 commented 1 year ago

Turns out this is actually an uno.css bug https://github.com/unocss/unocss/issues/2354

kidonng commented 1 year ago

Thanks for filing the UnoCSS bug!

jf908 commented 1 year ago

Thanks for filing the UnoCSS bug!

You're welcome, great preset!