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 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">
<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
styleguide.css
+51 -3
View File
@@ -1263,8 +1263,8 @@ section + section {
color: var(--text-control-default);
}
.sg-pulldown-panel__remove,
.sg-activatable-remove {
.sg-pulldown-panel__remove,
.sg-activatable-remove {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -1278,8 +1278,10 @@ section + section {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: 1;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
}
.sg-pulldown-panel__remove[hidden] {
display: none;
@@ -1861,6 +1863,52 @@ section + section {
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 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));