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

Interactive Elements: Aktivierung über Schalter statt Entfernen-Button

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 10:01:42 +02:00
parent 857785da1b
commit 4278019c02
3 changed files with 172 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+131 -149
View File
@@ -120,17 +120,25 @@
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
<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-activatable-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-pulldown-activatable">
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
</button>
<div class="sg-pulldown-demo" id="component-pulldown-activatable" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
<!--
The number in brackets shows the count of currently selected options inside this pulldown.
Initial state: no option is selected, therefore the trigger starts as inactive selectable.
Clicking an option activates the pulldown and shows the selected count in brackets.
Initial state: the activation toggle is off, therefore the trigger starts as inactive selectable.
Switching the activation toggle to "an" applies the active default selection and shows the selected count.
-->
<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="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
Auswahl
</button>
<button class="sg-activatable-remove" type="button" aria-label="Pulldown-Filter entfernen" data-pulldown-activate-remove hidden>×</button>
</span>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
@@ -203,6 +211,7 @@
</div>
</div>
</div>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-disabled</p>
@@ -390,14 +399,22 @@
<span>Standard Checkbox</span>
</label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" data-component="checkbox-field" data-component-state="inactive-selectable" data-activatable="true">
<div class="sg-activatable-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-checkbox-activatable">
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
</button>
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body" id="component-checkbox-activatable" data-component="checkbox-field" data-component-state="inactive-selectable" data-activatable="true">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Option wählen">
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<span>Option wählbar</span>
<button class="sg-activatable-remove" type="button" aria-label="Checkbox entfernen" data-checkbox-activate-remove hidden>×</button>
</label>
</div>
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="checkbox-field" data-component-state="disabled">
<span class="sg-state-example__label sg-table-label">form-disabled</span>
@@ -430,7 +447,15 @@
<span>Standard Radio</span>
</label>
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
<div class="sg-activatable-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-radio-activatable">
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
</button>
<label class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" id="component-radio-activatable" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
<span class="sg-state-example__label sg-table-label">Variante aktivierbar</span>
<span class="sg-radio-activatable-group__choices">
<span class="sg-radio-activatable-group__choice">
@@ -446,8 +471,8 @@
<span>Option 2</span>
</span>
</span>
<button class="sg-activatable-remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
</label>
</div>
<label class="sg-checkbox-field-option sg-checkbox-field-option--disabled sg-body" data-component="radio-field" data-component-state="disabled">
<span class="sg-state-example__label sg-table-label">form-disabled</span>
@@ -528,7 +553,15 @@
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<div class="sg-activatable-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-slider-activatable">
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span>
</button>
<label class="sg-slider-row sg-slider-row--inactive-selectable" id="component-slider-activatable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<span class="sg-label">Wert</span>
<input
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -540,10 +573,10 @@
aria-label="Slider inaktiv auswählbar"
>
<output class="sg-slider-value sg-body" for="slider">2.0</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button>
</label>
</div>
</div>
</div>
</section>
<!-- Component: Sandwich Menu Button -->
@@ -625,11 +658,80 @@
});
});
const setActivatableComponentState = (target, isActive) => {
if (!target) {
return;
}
const componentType = target.dataset.component;
target.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
if (componentType === 'pulldown') {
const trigger = target.querySelector('.sg-pulldown-demo__trigger');
const options = target.querySelectorAll('[data-pulldown-option]');
if (!trigger || options.length === 0) {
return;
}
options.forEach((option, index) => {
option.setAttribute('aria-checked', String(isActive && index === 0));
});
target.dataset.open = 'false';
trigger.setAttribute('aria-expanded', 'false');
updatePulldownSelectionState(target);
return;
}
if (componentType === 'checkbox-field') {
const checkbox = target.querySelector('.sg-checkbox-field');
if (!checkbox) {
return;
}
checkbox.setAttribute('aria-checked', String(isActive));
checkbox.classList.toggle('sg-form-active', isActive);
checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !isActive);
return;
}
if (componentType === 'radio-field') {
const radios = target.querySelectorAll('.sg-radio-field');
const defaultRadio = radios[0];
radios.forEach((radio) => {
const checked = isActive && radio === defaultRadio;
radio.setAttribute('aria-checked', String(checked));
radio.classList.toggle('sg-form-active', checked);
radio.classList.toggle('sg-radio-field--inactive-selectable', !isActive);
});
return;
}
if (componentType === 'slider') {
const slider = target.querySelector('.sg-slider');
if (!slider) {
return;
}
target.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
slider.classList.toggle('sg-form-active', isActive);
slider.classList.toggle('sg-form-inactive-selectable', !isActive);
}
};
document.querySelectorAll('.sg-activation-mode-toggle').forEach((toggle) => {
toggle.addEventListener('click', () => {
const nextState = toggle.dataset.active === 'absolute' ? 'relative' : 'absolute';
const isActive = nextState === 'relative';
toggle.dataset.active = nextState;
toggle.setAttribute('aria-label', `Aktivierung: ${nextState === 'absolute' ? 'aus' : 'an'}`);
toggle.setAttribute('aria-label', `Aktivierung: ${isActive ? 'an' : 'aus'}`);
const targetId = toggle.dataset.activationTarget;
if (!targetId) {
return;
}
const target = document.getElementById(targetId);
setActivatableComponentState(target, isActive);
});
});
@@ -669,8 +771,6 @@
document.querySelectorAll('.sg-slider-row').forEach((row) => {
const slider = row.querySelector('.sg-slider');
const valueOutput = row.querySelector('.sg-slider-value');
const removeButton = row.querySelector('[data-slider-activate-remove]');
if (!slider || !valueOutput) {
return;
}
@@ -686,25 +786,12 @@
valueOutput.textContent = value.toFixed(1);
};
const activateSliderRow = () => {
if (row.dataset.activatable === 'true' && row.dataset.componentState === 'inactive-selectable') {
row.dataset.componentState = 'active';
row.classList.remove('sg-slider-row--inactive-selectable');
slider.classList.remove('sg-form-inactive-selectable');
slider.classList.add('sg-form-active');
if (removeButton) {
removeButton.hidden = false;
}
}
};
slider.addEventListener('input', () => {
activateSliderRow();
if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
return;
}
updateSliderState();
});
slider.addEventListener('pointerdown', activateSliderRow);
slider.addEventListener('click', activateSliderRow);
updateSliderState();
});
@@ -716,16 +803,10 @@
const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
if (activatableOption) {
checkbox.setAttribute('aria-checked', 'true');
checkbox.classList.add('sg-form-active');
checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
activatableOption.dataset.componentState = 'active';
const removeButton = activatableOption.querySelector('[data-checkbox-activate-remove]');
if (removeButton) {
removeButton.hidden = false;
}
if (activatableOption.dataset.componentState !== 'active') {
return;
}
}
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
checkbox.setAttribute('aria-checked', String(nextState));
@@ -744,6 +825,9 @@
if (!pulldownDemo) {
return;
}
if (pulldownDemo.dataset.activatable === 'true' && pulldownDemo.dataset.componentState !== 'active') {
return;
}
const selectionMode = pulldownDemo.dataset.selectionMode || 'single';
if (selectionMode === 'multiple') {
@@ -775,32 +859,16 @@
const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
if (activatableGroup) {
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
const defaultRadio = radios[0];
const removeButton = activatableGroup.querySelector('[data-radio-activate-remove]');
if (activatableGroup.dataset.componentState === 'inactive-selectable' && defaultRadio) {
radios.forEach((otherRadio) => {
otherRadio.setAttribute('aria-checked', String(otherRadio === defaultRadio));
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
otherRadio.classList.toggle('sg-form-active', otherRadio === defaultRadio);
});
activatableGroup.dataset.componentState = 'active';
if (removeButton) {
removeButton.hidden = false;
}
if (activatableGroup.dataset.componentState !== 'active') {
return;
}
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
radios.forEach((otherRadio) => {
otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
});
activatableGroup.dataset.componentState = 'active';
if (removeButton) {
removeButton.hidden = false;
}
return;
}
@@ -818,7 +886,6 @@
const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
if (!trigger || selectableOptions.length === 0) {
return;
@@ -843,15 +910,13 @@
const labelBase = trigger.dataset.labelBase || 'Auswahl';
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
trigger.classList.toggle('sg-form-active', selectedCount > 0);
trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0);
if (activatableRemove) {
activatableRemove.hidden = selectedCount === 0;
}
const isActivatableActive = demo.dataset.activatable === 'true' && demo.dataset.componentState === 'active';
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0 || isActivatableActive);
trigger.classList.toggle('sg-form-active', selectedCount > 0 || isActivatableActive);
trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0 && !isActivatableActive);
trigger.setAttribute(
'aria-label',
selectedCount > 0 ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
selectedCount > 0 || isActivatableActive ? 'Pulldown mit aktiver Auswahl' : 'Pulldown ohne aktive Auswahl'
);
};
@@ -869,18 +934,11 @@
trigger.addEventListener('click', (event) => {
event.stopPropagation();
if (demo.dataset.activatable === 'true' && demo.dataset.componentState !== 'active') {
return;
}
const nextState = demo.dataset.open !== 'true';
if (demo.dataset.activatable === 'true') {
const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
trigger.classList.add('sg-pulldown--selected', 'sg-form-active');
trigger.classList.remove('sg-pulldown--inactive-selectable');
trigger.setAttribute('aria-label', 'Pulldown mit aktiver Auswahl');
if (activatableRemove) {
activatableRemove.hidden = false;
}
}
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
otherDemo.dataset.open = 'false';
@@ -922,82 +980,6 @@
});
});
document.querySelectorAll('[data-pulldown-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const demo = removeButton.closest('.sg-pulldown-demo');
const trigger = demo ? demo.querySelector('.sg-pulldown-demo__trigger') : null;
if (!demo || !trigger) {
return;
}
demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
option.setAttribute('aria-checked', 'false');
});
demo.dataset.componentState = 'inactive-selectable';
demo.dataset.open = 'false';
trigger.setAttribute('aria-expanded', 'false');
updatePulldownSelectionState(demo);
});
});
document.querySelectorAll('[data-checkbox-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const option = removeButton.closest('[data-component="checkbox-field"][data-activatable="true"]');
const checkbox = option ? option.querySelector('.sg-checkbox-field') : null;
if (!option || !checkbox) {
return;
}
option.dataset.componentState = 'inactive-selectable';
checkbox.setAttribute('aria-checked', 'false');
checkbox.classList.remove('sg-form-active');
checkbox.classList.add('sg-checkbox-field--inactive-selectable');
removeButton.hidden = true;
});
});
document.querySelectorAll('[data-radio-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const option = removeButton.closest('[data-activatable-radio-group="true"]');
const radios = option ? option.querySelectorAll('.sg-radio-field') : null;
if (!option || !radios || radios.length === 0) {
return;
}
option.dataset.componentState = 'inactive-selectable';
radios.forEach((radio) => {
radio.setAttribute('aria-checked', 'false');
radio.classList.remove('sg-form-active');
radio.classList.add('sg-radio-field--inactive-selectable');
});
removeButton.hidden = true;
});
});
document.querySelectorAll('[data-slider-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const row = removeButton.closest('.sg-slider-row[data-activatable="true"]');
const slider = row ? row.querySelector('.sg-slider') : null;
if (!row || !slider) {
return;
}
row.dataset.componentState = 'inactive-selectable';
row.classList.add('sg-slider-row--inactive-selectable');
slider.classList.remove('sg-form-active');
slider.classList.add('sg-form-inactive-selectable');
removeButton.hidden = true;
});
});
// Filter rows inside the opened pulldown start as inactive preselected rows.
// They are visually dimmed but remain operable; clicking or changing them activates the row.
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
semantic-tokens-components.html
+2 -2
View File
@@ -124,7 +124,7 @@
<h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
<tr><td>surface-pulldown-panel</td><td>color-light-grey</td><td>Fläche geöffneter Pulldown-Panels.</td></tr>
<tr><td>surface-activatable-remove</td><td>surface-control-default</td><td>Fläche des generischen Schließen-Kontrollfelds in aktivierbaren Varianten (Pulldown, Checkbox, Radio, Slider).</td></tr>
<tr><td>surface-activatable-remove</td><td>surface-control-default</td><td>Fläche des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>
<tr><td>icon-pulldown-chevron</td><td>currentColor-basierte Verlaufsgrafik</td><td>Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.</td></tr>
<tr><td>layout-pulldown-panel-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand des geöffneten Pulldown-Panels.</td></tr>
<tr><td>layout-pulldown-option-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand der einzelnen Pulldown-Optionen.</td></tr>
@@ -137,7 +137,7 @@
<tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
<tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
<tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
<tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des generischen Schließen-Kontrollfelds in aktivierbaren Varianten.</td></tr>
<tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Toggle / Checkbox / Radio / Help</h3>
styleguide.css
+8 -75
View File
@@ -507,6 +507,12 @@ section + section {
gap: var(--spacing-small);
}
.sg-activatable-row {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
}
.sg-interaction-element {
box-sizing: border-box;
height: var(--interaction-height);
@@ -1012,36 +1018,6 @@ section + section {
color: var(--text-control-default);
}
.sg-slider-row[data-activatable="true"] {
position: relative;
padding-right: calc(var(--interaction-height) + var(--spacing-small));
}
#component-slider .sg-form-preview-area {
padding-right: calc(var(--spacing-large) + var(--interaction-height) + var(--spacing-small));
}
.sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
#component-slider .sg-slider-row[data-activatable="true"] {
position: static;
padding-right: 0;
}
#component-slider .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
top: auto;
right: auto;
transform: none;
align-self: center;
margin-left: calc(var(--spacing-small) * 1.5);
}
.sg-slider-row--inactive-selectable {
opacity: var(--disabled-opacity);
}
@@ -1051,11 +1027,9 @@ section + section {
grid-template-columns:
var(--layout-input-label-width)
minmax(0, 1fr)
auto
var(--interaction-height);
auto;
align-items: center;
column-gap: var(--spacing-small);
padding-right: 0;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1082,16 +1056,6 @@ section + section {
grid-row: 1;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
top: auto;
right: auto;
transform: none;
margin-left: calc(var(--spacing-small) * 1.5);
grid-column: 4;
grid-row: 1;
}
@media (max-width: 48rem) {
#component-slider .sg-state-example {
grid-template-columns: 1fr;
@@ -1130,18 +1094,6 @@ section + section {
white-space: nowrap;
}
.sg-slider-row[data-activatable="true"] {
padding-right: 0;
}
.sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
top: auto;
right: auto;
transform: none;
align-self: center;
margin-left: calc(var(--spacing-small) * 1.5);
}
}
.sg-sandwich-button {
@@ -1350,8 +1302,7 @@ section + section {
color: var(--text-control-default);
}
.sg-pulldown-panel__remove,
.sg-activatable-remove {
.sg-pulldown-panel__remove {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -1374,10 +1325,6 @@ section + section {
display: none;
}
.sg-activatable-remove[hidden] {
display: none;
}
.sg-pulldown-panel__row--disabled {
color: var(--text-control-disabled);
opacity: var(--disabled-opacity);
@@ -1764,7 +1711,6 @@ section + section {
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-small);
padding-right: 0;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
@@ -1786,19 +1732,6 @@ section + section {
flex: 0 0 auto;
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
position: static;
transform: none;
margin-left: calc(var(--spacing-small) * 1.5);
flex: 0 0 var(--interaction-height);
}
.sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove[hidden] {
display: inline-flex;
visibility: hidden;
pointer-events: none;
}
.sg-pulldown-panel__row {
grid-template-columns: minmax(0, 1fr) var(--interaction-height);
}