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

Slider als clean grid template bereinigen und output-typografie entkoppeln

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 10:24:43 +02:00
parent 0451329eda
commit 8bc16561c1
2 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+2 -2
View File
@@ -547,7 +547,7 @@
value="6.5" value="6.5"
aria-label="Slider" aria-label="Slider"
> >
<output class="sg-slider-value sg-body" for="slider">6.5</output> <output class="sg-slider-value" for="slider">6.5</output>
</label> </label>
</div> </div>
@@ -574,7 +574,7 @@
value="2.0" value="2.0"
aria-label="Slider inaktiv auswählbar" aria-label="Slider inaktiv auswählbar"
> >
<output class="sg-slider-value sg-body" for="slider">2.0</output> <output class="sg-slider-value" for="slider">2.0</output>
</label> </label>
</div> </div>
</div> </div>
styleguide.css
+14 -19
View File
@@ -1063,23 +1063,24 @@ section + section {
align-self: center; align-self: center;
display: block; display: block;
margin: 0; margin: 0;
line-height: 1;
} }
#component-slider .sg-activatable-row { #component-slider .sg-activatable-row {
display: grid; display: grid;
grid-template-columns: auto max-content minmax(0, 1fr) auto; grid-template-columns: max-content minmax(0, 1fr);
align-items: center; align-items: center;
column-gap: var(--spacing-large); column-gap: var(--spacing-large);
width: 100%; width: 100%;
} }
#component-slider .sg-slider-activatable-header { #component-slider .sg-slider-activatable-header {
grid-column: 1 / 3;
display: grid; display: grid;
grid-template-columns: max-content max-content; grid-template-columns: max-content max-content;
column-gap: var(--spacing-large); column-gap: var(--spacing-large);
align-items: center; align-items: center;
width: max-content; width: 100%;
justify-content: start;
} }
#component-slider .sg-slider-activatable-header .sg-label { #component-slider .sg-slider-activatable-header .sg-label {
@@ -1087,23 +1088,28 @@ section + section {
} }
#component-slider .sg-activatable-row .sg-slider-row { #component-slider .sg-activatable-row .sg-slider-row {
display: contents; display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--spacing-large);
width: 100%;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-slider { #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
grid-column: 3;
width: 100%; width: 100%;
max-width: none; max-width: none;
min-width: 0; min-width: 0;
grid-column: 1;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 4; grid-column: 2;
justify-self: start; justify-self: start;
min-width: 0; min-width: 0;
align-self: center; align-self: center;
display: block; display: block;
margin: 0; margin: 0;
line-height: 1;
} }
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] { .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
@@ -1153,10 +1159,9 @@ section + section {
} }
#component-slider .sg-activatable-row { #component-slider .sg-activatable-row {
grid-template-columns: auto max-content; grid-template-columns: 1fr;
align-items: start; align-items: start;
row-gap: var(--spacing-small); row-gap: var(--spacing-small);
column-gap: var(--spacing-large);
} }
#component-slider .sg-slider-activatable-header .sg-label { #component-slider .sg-slider-activatable-header .sg-label {
@@ -1164,9 +1169,6 @@ section + section {
} }
#component-slider .sg-activatable-row .sg-slider-row { #component-slider .sg-activatable-row .sg-slider-row {
display: grid;
grid-column: 1 / -1;
grid-row: 2;
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--spacing-large); column-gap: var(--spacing-large);
align-items: center; align-items: center;
@@ -1174,21 +1176,14 @@ section + section {
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-slider { #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
grid-column: 1;
grid-row: 1;
width: 100%; width: 100%;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 2;
grid-row: 1;
justify-self: start; justify-self: start;
align-self: center; align-self: center;
margin: 0; margin: 0;
} line-height: 1;
#component-slider .sg-activatable-row .sg-slider-row .sg-label {
display: contents;
} }
} }