gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap charts component preview in padded light-grey surface

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-20 13:34:49 +02:00
parent ad1bec8377
commit 841020e102
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/charts.html
+21 -19
View File
@@ -13,28 +13,30 @@
<section id="component-score-bar"> <section id="component-score-bar">
<p class="sg-preview-label">Component: Score-Balken / Median-Marker</p> <p class="sg-preview-label">Component: Score-Balken / Median-Marker</p>
<div class="sg-score-bar-list" data-component="score-bar-list"> <div class="sg-form-preview-area">
<div class="sg-score-bar-item" data-component="score-bar"> <div class="sg-score-bar-list" data-component="score-bar-list">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p> <div class="sg-score-bar-item" data-component="score-bar">
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"> <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div> <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div> <div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
</div> </div>
</div>
<div class="sg-score-bar-item" data-component="score-bar"> <div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p> <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"> <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div> <div class="sg-score-bar__value sg-score-bar__value--neutral sg-score-bar__value--w64" data-component-part="score-value" data-component-state="neutral"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div> <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
</div> </div>
</div>
<div class="sg-score-bar-item" data-component="score-bar"> <div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p> <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Label</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track"> <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div> <div class="sg-score-bar__value sg-score-bar__value--negative sg-score-bar__value--w35" data-component-part="score-value" data-component-state="negative"></div>
<div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div> <div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -43,4 +45,4 @@
</body> </body>
</html> </html>