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

Refine activatable controls with generic remove class and shared style cascade

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 11:14:27 +02:00
parent 30193be5bd
commit 8d245c0456
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+4 -4
View File
@@ -130,7 +130,7 @@
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" 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="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
Auswahl Auswahl
</button> </button>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown-Filter entfernen" data-pulldown-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Pulldown-Filter entfernen" data-pulldown-activate-remove hidden>×</button>
</span> </span>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel"> <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
@@ -396,7 +396,7 @@
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span> <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button> </button>
<span>Option wählbar</span> <span>Option wählbar</span>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button>
</label> </label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled"> <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
@@ -446,7 +446,7 @@
<span>Option 2</span> <span>Option 2</span>
</span> </span>
</span> </span>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
</label> </label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled"> <label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
@@ -525,7 +525,7 @@
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 sg-body" for="slider">2.0</output>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
</div> </div>
</div> </div>
styleguide.css
+7 -2
View File
@@ -928,7 +928,7 @@ section + section {
color: var(--text-control-default); color: var(--text-control-default);
} }
.sg-slider-row .sg-pulldown-panel__remove { .sg-slider-row .sg-activatable-remove {
flex: 0 0 auto; flex: 0 0 auto;
} }
@@ -1155,7 +1155,8 @@ section + section {
color: var(--text-control-default); color: var(--text-control-default);
} }
.sg-pulldown-panel__remove { .sg-pulldown-panel__remove,
.sg-activatable-remove {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -1176,6 +1177,10 @@ section + section {
display: none; display: none;
} }
.sg-activatable-remove[hidden] {
display: none;
}
.sg-pulldown-panel__row--disabled { .sg-pulldown-panel__row--disabled {
color: var(--text-control-disabled); color: var(--text-control-disabled);
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);