Update multiselect pulldown to activation-toggle pattern
This commit is contained in:
@@ -37,6 +37,13 @@
|
|||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 1: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="sg-label">Slider 1</span>
|
<span class="sg-label">Slider 1</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||||
@@ -46,12 +53,19 @@
|
|||||||
step="0.1"
|
step="0.1"
|
||||||
value="6.5"
|
value="6.5"
|
||||||
aria-label="Slider 1 von 1 bis 10"
|
aria-label="Slider 1 von 1 bis 10"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
<output class="sg-slider-value sg-body" for="slider">6.5</output>
|
<output class="sg-slider-value" for="slider">6.5</output>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Slider 1 entfernen" data-slider-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 2: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="sg-label">Slider 2</span>
|
<span class="sg-label">Slider 2</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||||
@@ -61,12 +75,19 @@
|
|||||||
step="0.1"
|
step="0.1"
|
||||||
value="9.5"
|
value="9.5"
|
||||||
aria-label="Slider 2 von 1 bis 10"
|
aria-label="Slider 2 von 1 bis 10"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
<output class="sg-slider-value sg-body" for="slider">9.5</output>
|
<output class="sg-slider-value" for="slider">9.5</output>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Slider 2 entfernen" data-slider-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 3: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="sg-label">Slider 3</span>
|
<span class="sg-label">Slider 3</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||||
@@ -76,12 +97,19 @@
|
|||||||
step="0.1"
|
step="0.1"
|
||||||
value="5.0"
|
value="5.0"
|
||||||
aria-label="Slider 3 von 1 bis 10"
|
aria-label="Slider 3 von 1 bis 10"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
<output class="sg-slider-value sg-body" for="slider">5.0</output>
|
<output class="sg-slider-value" for="slider">5.0</output>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Slider 3 entfernen" data-slider-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 4: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="sg-label">Slider 4</span>
|
<span class="sg-label">Slider 4</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||||
@@ -91,9 +119,9 @@
|
|||||||
step="0.1"
|
step="0.1"
|
||||||
value="6.5"
|
value="6.5"
|
||||||
aria-label="Slider 4 von 1 bis 10"
|
aria-label="Slider 4 von 1 bis 10"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
<output class="sg-slider-value sg-body" for="slider">6.5</output>
|
<output class="sg-slider-value" for="slider">6.5</output>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Slider 4 entfernen" data-slider-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -101,6 +129,13 @@
|
|||||||
<h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2>
|
<h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2>
|
||||||
|
|
||||||
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 5: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="sg-label">Slider 5</span>
|
<span class="sg-label">Slider 5</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||||
@@ -110,12 +145,19 @@
|
|||||||
step="0.1"
|
step="0.1"
|
||||||
value="3.0"
|
value="3.0"
|
||||||
aria-label="Slider 5 von 1 bis 10"
|
aria-label="Slider 5 von 1 bis 10"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
<output class="sg-slider-value sg-body" for="slider">3.0</output>
|
<output class="sg-slider-value" for="slider">3.0</output>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Slider 5 entfernen" data-slider-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 6: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="sg-label">Slider 6</span>
|
<span class="sg-label">Slider 6</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||||
@@ -125,12 +167,19 @@
|
|||||||
step="0.1"
|
step="0.1"
|
||||||
value="2.5"
|
value="2.5"
|
||||||
aria-label="Slider 6 von 1 bis 10"
|
aria-label="Slider 6 von 1 bis 10"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
<output class="sg-slider-value sg-body" for="slider">2.5</output>
|
<output class="sg-slider-value" for="slider">2.5</output>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Slider 6 entfernen" data-slider-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 7: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span class="sg-label">Slider 7</span>
|
<span class="sg-label">Slider 7</span>
|
||||||
<input
|
<input
|
||||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||||
@@ -140,9 +189,9 @@
|
|||||||
step="0.1"
|
step="0.1"
|
||||||
value="1.6"
|
value="1.6"
|
||||||
aria-label="Slider 7 von 1 bis 10"
|
aria-label="Slider 7 von 1 bis 10"
|
||||||
|
disabled
|
||||||
>
|
>
|
||||||
<output class="sg-slider-value sg-body" for="slider">1.6</output>
|
<output class="sg-slider-value" for="slider">1.6</output>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Slider 7 entfernen" data-slider-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -150,6 +199,14 @@
|
|||||||
<h2 id="multiselect-block-3" class="sg-strong sg-form-sections-card__chapter-title">Block 3</h2>
|
<h2 id="multiselect-block-3" class="sg-strong sg-form-sections-card__chapter-title">Block 3</h2>
|
||||||
|
|
||||||
<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">
|
<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">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Radio Auswahl: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span class="sg-label">Radio Auswahl</span>
|
||||||
<span class="sg-radio-activatable-group__choices">
|
<span class="sg-radio-activatable-group__choices">
|
||||||
<span class="sg-radio-activatable-group__choice">
|
<span class="sg-radio-activatable-group__choice">
|
||||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 1 wählen">
|
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 1 wählen">
|
||||||
@@ -164,19 +221,23 @@
|
|||||||
<span>Radio 2</span>
|
<span>Radio 2</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Radio-Auswahl entfernen" data-radio-activate-remove hidden>×</button>
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
|
<p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
|
||||||
|
|
||||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl">
|
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled>
|
||||||
<option selected>Option 1</option>
|
<option selected>Option 1</option>
|
||||||
<option>Option 2</option>
|
<option>Option 2</option>
|
||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 1 entfernen" hidden>×</button>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -184,39 +245,54 @@
|
|||||||
<h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
|
<h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
|
||||||
|
|
||||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
|
<p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
|
||||||
|
|
||||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl">
|
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled>
|
||||||
<option selected>Option 1</option>
|
<option selected>Option 1</option>
|
||||||
<option>Option 2</option>
|
<option>Option 2</option>
|
||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 2 entfernen" hidden>×</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
|
<p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
|
||||||
|
|
||||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl">
|
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled>
|
||||||
<option selected>Option 1</option>
|
<option selected>Option 1</option>
|
||||||
<option>Option 2</option>
|
<option>Option 2</option>
|
||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 3 entfernen" hidden>×</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||||
|
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus">
|
||||||
|
<span class="sg-mode-toggle__switch" aria-hidden="true">
|
||||||
|
<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"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
|
<p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
|
||||||
|
|
||||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl">
|
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled>
|
||||||
<option selected>Option 1</option>
|
<option selected>Option 1</option>
|
||||||
<option>Option 2</option>
|
<option>Option 2</option>
|
||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button class="sg-pulldown-panel__remove" type="button" aria-label="Pulldown 4 entfernen" hidden>×</button>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -232,10 +308,64 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
(() => {
|
(() => {
|
||||||
|
const setLocalActivationState = (toggle, isActive) => {
|
||||||
|
const sliderRow = toggle.closest('.sg-slider-row[data-activatable="true"]');
|
||||||
|
if (sliderRow) {
|
||||||
|
const slider = sliderRow.querySelector('.sg-slider');
|
||||||
|
if (!slider) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||||
|
sliderRow.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
|
||||||
|
slider.classList.toggle('sg-form-active', isActive);
|
||||||
|
slider.classList.toggle('sg-form-inactive-selectable', !isActive);
|
||||||
|
slider.disabled = !isActive;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const radioGroup = toggle.closest('[data-activatable-radio-group="true"]');
|
||||||
|
if (radioGroup) {
|
||||||
|
const radios = radioGroup.querySelectorAll('.sg-radio-field');
|
||||||
|
radioGroup.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||||
|
radios.forEach((radio) => {
|
||||||
|
if (!isActive) {
|
||||||
|
radio.setAttribute('aria-checked', 'false');
|
||||||
|
}
|
||||||
|
const checked = radio.getAttribute('aria-checked') === 'true';
|
||||||
|
radio.classList.toggle('sg-form-active', checked);
|
||||||
|
radio.classList.toggle('sg-radio-field--inactive-selectable', !isActive);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pulldownRow = toggle.closest('[data-pulldown-filter-row]');
|
||||||
|
if (pulldownRow) {
|
||||||
|
const select = pulldownRow.querySelector('.sg-pulldown');
|
||||||
|
if (!select) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
pulldownRow.dataset.active = isActive ? 'true' : 'false';
|
||||||
|
select.disabled = !isActive;
|
||||||
|
pulldownRow.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||||
|
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||||
|
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('.sg-activation-mode-toggle').forEach((toggle) => {
|
||||||
|
toggle.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const nextState = toggle.dataset.active === 'absolute' ? 'relative' : 'absolute';
|
||||||
|
const isActive = nextState === 'relative';
|
||||||
|
toggle.dataset.active = nextState;
|
||||||
|
toggle.setAttribute('aria-label', toggle.getAttribute('aria-label').replace(/(an|aus)$/, isActive ? 'an' : 'aus'));
|
||||||
|
setLocalActivationState(toggle, isActive);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const updatePulldownSelectionState = (demo) => {
|
const updatePulldownSelectionState = (demo) => {
|
||||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||||
const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
|
|
||||||
const forceActive = demo.dataset.forceActive === 'true';
|
const forceActive = demo.dataset.forceActive === 'true';
|
||||||
|
|
||||||
if (!trigger || selectableOptions.length === 0) {
|
if (!trigger || selectableOptions.length === 0) {
|
||||||
@@ -253,9 +383,6 @@
|
|||||||
trigger.classList.toggle('sg-pulldown--selected', forceActive || selectedCount > 0);
|
trigger.classList.toggle('sg-pulldown--selected', forceActive || selectedCount > 0);
|
||||||
trigger.classList.toggle('sg-form-active', forceActive || selectedCount > 0);
|
trigger.classList.toggle('sg-form-active', forceActive || selectedCount > 0);
|
||||||
trigger.classList.toggle('sg-pulldown--inactive-selectable', !forceActive && selectedCount === 0);
|
trigger.classList.toggle('sg-pulldown--inactive-selectable', !forceActive && selectedCount === 0);
|
||||||
if (activatableRemove) {
|
|
||||||
activatableRemove.hidden = forceActive || selectedCount === 0;
|
|
||||||
}
|
|
||||||
trigger.setAttribute(
|
trigger.setAttribute(
|
||||||
'aria-label',
|
'aria-label',
|
||||||
forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl`
|
forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl`
|
||||||
@@ -265,7 +392,6 @@
|
|||||||
document.querySelectorAll('.sg-slider-row').forEach((row) => {
|
document.querySelectorAll('.sg-slider-row').forEach((row) => {
|
||||||
const slider = row.querySelector('.sg-slider');
|
const slider = row.querySelector('.sg-slider');
|
||||||
const valueOutput = row.querySelector('.sg-slider-value');
|
const valueOutput = row.querySelector('.sg-slider-value');
|
||||||
const removeButton = row.querySelector('[data-slider-activate-remove]');
|
|
||||||
|
|
||||||
if (!slider || !valueOutput) {
|
if (!slider || !valueOutput) {
|
||||||
return;
|
return;
|
||||||
@@ -282,26 +408,13 @@
|
|||||||
valueOutput.textContent = value.toFixed(1);
|
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', () => {
|
slider.addEventListener('input', () => {
|
||||||
activateSliderRow();
|
if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
updateSliderState();
|
updateSliderState();
|
||||||
});
|
});
|
||||||
|
|
||||||
slider.addEventListener('pointerdown', activateSliderRow);
|
|
||||||
slider.addEventListener('click', activateSliderRow);
|
|
||||||
|
|
||||||
updateSliderState();
|
updateSliderState();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -318,10 +431,6 @@
|
|||||||
checkbox.classList.add('sg-form-active');
|
checkbox.classList.add('sg-form-active');
|
||||||
checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
|
checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
|
||||||
activatableOption.dataset.componentState = 'active';
|
activatableOption.dataset.componentState = 'active';
|
||||||
const removeButton = activatableOption.querySelector('[data-checkbox-activate-remove]');
|
|
||||||
if (removeButton) {
|
|
||||||
removeButton.hidden = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||||
@@ -347,6 +456,9 @@
|
|||||||
if (!activatableGroup) {
|
if (!activatableGroup) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (activatableGroup.dataset.componentState !== 'active') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
|
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
|
||||||
radios.forEach((otherRadio) => {
|
radios.forEach((otherRadio) => {
|
||||||
@@ -354,12 +466,6 @@
|
|||||||
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
|
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
|
||||||
otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
|
otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
|
||||||
});
|
});
|
||||||
activatableGroup.dataset.componentState = 'active';
|
|
||||||
|
|
||||||
const removeButton = activatableGroup.querySelector('[data-radio-activate-remove]');
|
|
||||||
if (removeButton) {
|
|
||||||
removeButton.hidden = false;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -375,12 +481,8 @@
|
|||||||
const nextState = demo.dataset.open !== 'true';
|
const nextState = demo.dataset.open !== 'true';
|
||||||
|
|
||||||
if (demo.dataset.activatable === '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.add('sg-pulldown--selected', 'sg-form-active');
|
||||||
trigger.classList.remove('sg-pulldown--inactive-selectable');
|
trigger.classList.remove('sg-pulldown--inactive-selectable');
|
||||||
if (activatableRemove) {
|
|
||||||
activatableRemove.hidden = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||||
@@ -424,92 +526,10 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
|
||||||
if (pulldownDemo) {
|
|
||||||
updatePulldownSelectionState(pulldownDemo);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
|
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
|
||||||
const select = row.querySelector('.sg-pulldown');
|
const select = row.querySelector('.sg-pulldown');
|
||||||
const removeButton = row.querySelector('.sg-pulldown-panel__remove');
|
|
||||||
|
|
||||||
if (!select || !removeButton) {
|
if (!select) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -518,28 +538,9 @@
|
|||||||
row.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
row.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||||
select.classList.toggle('sg-pulldown--selected', isActive);
|
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||||
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||||
removeButton.hidden = !isActive;
|
select.disabled = !isActive;
|
||||||
};
|
};
|
||||||
|
|
||||||
select.addEventListener('click', (event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
if (row.dataset.active !== 'true') {
|
|
||||||
row.dataset.active = 'true';
|
|
||||||
updateFilterRowState();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
select.addEventListener('change', () => {
|
|
||||||
row.dataset.active = 'true';
|
|
||||||
updateFilterRowState();
|
|
||||||
});
|
|
||||||
|
|
||||||
removeButton.addEventListener('click', (event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
row.dataset.active = 'false';
|
|
||||||
updateFilterRowState();
|
|
||||||
});
|
|
||||||
|
|
||||||
updateFilterRowState();
|
updateFilterRowState();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+132
@@ -2039,6 +2039,73 @@ section + section {
|
|||||||
margin-top: var(--spacing-small);
|
margin-top: var(--spacing-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content max-content minmax(0, 1fr) auto;
|
||||||
|
align-items: center;
|
||||||
|
column-gap: var(--spacing-large);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
|
||||||
|
grid-column: 2;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
|
||||||
|
grid-column: 3;
|
||||||
|
min-width: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
|
||||||
|
grid-column: 4;
|
||||||
|
margin: 0;
|
||||||
|
min-width: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: max-content max-content minmax(0, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
column-gap: var(--spacing-large);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
|
||||||
|
grid-column: 2;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
|
||||||
|
grid-column: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
|
||||||
|
grid-template-columns: max-content max-content minmax(0, 1fr);
|
||||||
|
column-gap: var(--spacing-large);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
|
||||||
|
grid-column: 3;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
@@ -2051,6 +2118,71 @@ section + section {
|
|||||||
width: max-content;
|
width: max-content;
|
||||||
max-width: calc(100vw - (2 * var(--spacing-large)));
|
max-width: calc(100vw - (2 * var(--spacing-large)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
|
||||||
|
grid-template-columns: max-content minmax(0, 1fr);
|
||||||
|
row-gap: var(--spacing-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
|
||||||
|
grid-template-columns: max-content minmax(0, 1fr);
|
||||||
|
row-gap: var(--spacing-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
|
||||||
|
grid-template-columns: max-content minmax(0, 1fr);
|
||||||
|
row-gap: var(--spacing-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
grid-row: 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-form-sections-card__actions {
|
.sg-form-sections-card__actions {
|
||||||
|
|||||||
Reference in New Issue
Block a user