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

Fix iPhone slider remove button style and row alignment in test pulldown

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 19:48:35 +02:00
parent 104f5d771c
commit 3f9467f6eb
2 changed files with 60 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+1 -1
View File
@@ -228,7 +228,7 @@
</div> </div>
</div> </div>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true"> <div class="sg-pulldown-demo sg-pulldown-demo--single-slider-test" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
<span class="sg-activatable-control"> <span class="sg-activatable-control">
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Test-Pulldown ohne aktive Auswahl" data-label-base="Test-Pulldown" data-component-part="pulldown-trigger"> <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Test-Pulldown ohne aktive Auswahl" data-label-base="Test-Pulldown" data-component-part="pulldown-trigger">
Test-Pulldown Test-Pulldown
styleguide.css
+59 -11
View File
@@ -1263,23 +1263,25 @@ section + section {
color: var(--text-control-default); color: var(--text-control-default);
} }
.sg-pulldown-panel__remove, .sg-pulldown-panel__remove,
.sg-activatable-remove { .sg-activatable-remove {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: var(--interaction-height); width: var(--interaction-height);
height: var(--interaction-height); height: var(--interaction-height);
padding: 0; padding: 0;
border: var(--border-none); border: var(--border-none);
border-radius: var(--radius-interaction); border-radius: var(--radius-interaction);
background: var(--surface-activatable-remove); background: var(--surface-activatable-remove);
color: var(--text-activatable-remove); color: var(--text-activatable-remove);
font-family: var(--font-family-base); font-family: var(--font-family-base);
font-size: var(--font-size-base); font-size: var(--font-size-base);
line-height: 1; line-height: 1;
cursor: pointer; -webkit-appearance: none;
} appearance: none;
cursor: pointer;
}
.sg-pulldown-panel__remove[hidden] { .sg-pulldown-panel__remove[hidden] {
display: none; display: none;
@@ -1861,6 +1863,52 @@ section + section {
margin-top: var(--spacing-small); margin-top: var(--spacing-small);
} }
@media (max-width: 48rem) {
.sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
display: grid;
grid-template-columns:
var(--layout-input-label-width)
minmax(0, 1fr)
auto
var(--interaction-height);
align-items: center;
column-gap: var(--spacing-small);
padding-right: 0;
}
.sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
min-width: 0;
flex: 0 0 auto;
grid-column: 1;
grid-row: 1;
}
.sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
min-width: 0;
max-width: 100%;
width: 100%;
grid-column: 2;
grid-row: 1;
}
.sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
min-width: calc(var(--interaction-height) * 1.25);
justify-self: end;
align-self: center;
white-space: nowrap;
grid-column: 3;
grid-row: 1;
}
.sg-pulldown-demo--single-slider-test .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
transform: none;
margin-left: calc(var(--spacing-small) * 1.5);
grid-column: 4;
grid-row: 1;
}
}
.sg-form-sections-card__actions { .sg-form-sections-card__actions {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));