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

Clean multiselect slider state semantics and touch feedback

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-27 10:39:33 +02:00
parent e9c1952e57
commit ecf6f2afee
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+8 -8
View File
@@ -36,7 +36,7 @@
<span>Checkbox 1</span> <span>Checkbox 1</span>
</label> </label>
<label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="active" 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"> <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-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--left">aus</span>
@@ -57,7 +57,7 @@
<output class="sg-slider-value" for="slider">6.5</output> <output class="sg-slider-value" for="slider">6.5</output>
</label> </label>
<label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="active" 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"> <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-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--left">aus</span>
@@ -78,7 +78,7 @@
<output class="sg-slider-value" for="slider">9.5</output> <output class="sg-slider-value" for="slider">9.5</output>
</label> </label>
<label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="active" 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"> <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-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--left">aus</span>
@@ -99,7 +99,7 @@
<output class="sg-slider-value" for="slider">5.0</output> <output class="sg-slider-value" for="slider">5.0</output>
</label> </label>
<label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="active" 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"> <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-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--left">aus</span>
@@ -124,7 +124,7 @@
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-2"> <section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-2">
<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" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="active" 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"> <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-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--left">aus</span>
@@ -145,7 +145,7 @@
<output class="sg-slider-value" for="slider">3.0</output> <output class="sg-slider-value" for="slider">3.0</output>
</label> </label>
<label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="active" 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"> <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-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--left">aus</span>
@@ -166,7 +166,7 @@
<output class="sg-slider-value" for="slider">2.5</output> <output class="sg-slider-value" for="slider">2.5</output>
</label> </label>
<label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="active" 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"> <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-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--left">aus</span>
@@ -308,7 +308,7 @@
if (!slider) { if (!slider) {
return; return;
} }
sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable'; sliderRow.dataset.componentState = 'active';
sliderRow.classList.remove('sg-slider-row--inactive-selectable'); sliderRow.classList.remove('sg-slider-row--inactive-selectable');
slider.classList.add('sg-form-active'); slider.classList.add('sg-form-active');
slider.classList.remove('sg-form-inactive-selectable'); slider.classList.remove('sg-form-inactive-selectable');
styles/25-patterns-form-sections.css
+1 -1
View File
@@ -113,7 +113,7 @@
line-height: 1; line-height: 1;
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"][data-component-state="inactive-selectable"] { .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }