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
styleguide.css
+14 -19
View File
@@ -1063,23 +1063,24 @@ section + section {
align-self: center;
display: block;
margin: 0;
line-height: 1;
}
#component-slider .sg-activatable-row {
display: grid;
grid-template-columns: auto max-content minmax(0, 1fr) auto;
grid-template-columns: max-content minmax(0, 1fr);
align-items: center;
column-gap: var(--spacing-large);
width: 100%;
}
#component-slider .sg-slider-activatable-header {
grid-column: 1 / 3;
display: grid;
grid-template-columns: max-content max-content;
column-gap: var(--spacing-large);
align-items: center;
width: max-content;
width: 100%;
justify-content: start;
}
#component-slider .sg-slider-activatable-header .sg-label {
@@ -1087,23 +1088,28 @@ section + section {
}
#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 {
grid-column: 3;
width: 100%;
max-width: none;
min-width: 0;
grid-column: 1;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 4;
grid-column: 2;
justify-self: start;
min-width: 0;
align-self: center;
display: block;
margin: 0;
line-height: 1;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
@@ -1153,10 +1159,9 @@ section + section {
}
#component-slider .sg-activatable-row {
grid-template-columns: auto max-content;
grid-template-columns: 1fr;
align-items: start;
row-gap: var(--spacing-small);
column-gap: var(--spacing-large);
}
#component-slider .sg-slider-activatable-header .sg-label {
@@ -1164,9 +1169,6 @@ section + section {
}
#component-slider .sg-activatable-row .sg-slider-row {
display: grid;
grid-column: 1 / -1;
grid-row: 2;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--spacing-large);
align-items: center;
@@ -1174,21 +1176,14 @@ section + section {
}
#component-slider .sg-activatable-row .sg-slider-row .sg-slider {
grid-column: 1;
grid-row: 1;
width: 100%;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 2;
grid-row: 1;
justify-self: start;
align-self: center;
margin: 0;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-label {
display: contents;
line-height: 1;
}
}