efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: colors for items via css variable

Browse Source
This commit is contained in:
efim
2023-10-04 05:15:53 +00:00
parent 58ca4ecafa
commit 133fa0df2b
4 changed files with 64 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
17-results-summary-component-go/templates/summary-component.gohtml
View File

@@ -53,27 +53,47 @@
<section class="flex flex-col gap-y-4 p-7">
<h2 class="font-bold">Summary</h2>
<dl class="grid grid-cols-2">
<dt>Reaction</dt>
<dd class="flex flex-row">
<strong>80</strong>
/ 100
</dd>
<dt>Memory</dt>
<dd class="flex flex-row">
<strong>92</strong>
/ 100
</dd>
<dt>Verbal</dt>
<dd class="flex flex-row">
<strong>61</strong>
/ 100
</dd>
<dt>Visual</dt>
<dd class="flex flex-row">
<strong>72</strong>
/ 100
</dd>
<dl class="flex flex-col">
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 0deg 100% 67%"
>
<dt class="flex-1 text-summary-item-color">Reaction</dt>
<dd class="flex flex-row">
<strong>80</strong>
/ 100
</dd>
</div>
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 39deg 100% 56%"
>
<dt class="flex-1 text-summary-item-color">Memory</dt>
<dd class="flex flex-row">
<strong>92</strong>
/ 100
</dd>
</div>
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 166deg 100% 37%"
>
<dt class="flex-1 text-summary-item-color">Verbal</dt>
<dd class="flex flex-row">
<strong>61</strong>
/ 100
</dd>
</div>
<div
class="flex flex-row bg-summary-item-color/10"
style="--summary-item-color-var: 234deg 85% 45%"
>
<dt class="flex-1 text-summary-item-color">Visual</dt>
<dd class="flex flex-row">
<strong>72</strong>
/ 100
</dd>
</div>
</dl>
Continue
</section>