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

Mobile Slider-Layout: Header (Schalter+Wert) und volle Breite für Slider-Zeile

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-23 10:11:14 +02:00
parent 177a602879
commit e46eb330f2
2 changed files with 46 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+3 -1
View File
@@ -554,6 +554,7 @@
<div class="sg-state-example"> <div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p> <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
<div class="sg-activatable-row"> <div class="sg-activatable-row">
<span class="sg-slider-activatable-header">
<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"> <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-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--left">aus</span>
@@ -561,8 +562,9 @@
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span> <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
</span> </span>
</button> </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> <span class="sg-label">Wert</span>
</span>
<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">
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range" type="range"
styleguide.css
+36 -7
View File
@@ -1070,15 +1070,23 @@ section + section {
width: 100%; width: 100%;
} }
#component-slider .sg-activatable-row .sg-slider-row { #component-slider .sg-slider-activatable-header {
display: contents; display: contents;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-label { #component-slider .sg-slider-activatable-header .sg-mode-toggle {
grid-column: 1;
}
#component-slider .sg-slider-activatable-header .sg-label {
grid-column: 2; grid-column: 2;
min-width: 0; min-width: 0;
} }
#component-slider .sg-activatable-row .sg-slider-row {
display: contents;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-slider { #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
grid-column: 3; grid-column: 3;
width: 100%; width: 100%;
@@ -1139,32 +1147,53 @@ section + section {
} }
#component-slider .sg-activatable-row { #component-slider .sg-activatable-row {
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto max-content;
align-items: start; align-items: start;
row-gap: var(--spacing-small); row-gap: var(--spacing-small);
column-gap: var(--spacing-large);
} }
#component-slider .sg-activatable-row .sg-slider-row { #component-slider .sg-slider-activatable-header {
display: contents; display: contents;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-label { #component-slider .sg-slider-activatable-header .sg-mode-toggle {
grid-column: 1;
grid-row: 1;
}
#component-slider .sg-slider-activatable-header .sg-label {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
} }
#component-slider .sg-activatable-row .sg-slider-row {
display: grid;
grid-column: 1 / -1;
grid-row: 2;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--spacing-large);
align-items: center;
width: 100%;
}
#component-slider .sg-activatable-row .sg-slider-row .sg-slider { #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 1;
width: 100%;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 1;
justify-self: end; justify-self: end;
align-self: center; align-self: center;
} }
#component-slider .sg-activatable-row .sg-slider-row .sg-label {
display: contents;
}
} }
.sg-sandwich-button { .sg-sandwich-button {