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

Rebuild multiselect pulldown row header

Browse Source
This commit is contained in:
gitea_admin committed 2026-10-14 13:25:48 +02:00
1 parent d5d2270fc4
commit 7037f178c8
2 files changed
+23 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

patterns/multiselektions-pulldown.html
+8
View File
@@ -224,6 +224,7 @@
</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">
<div class="sg-pulldown-panel__row-header">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus"> <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-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>
@@ -232,6 +233,7 @@
</span> </span>
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 1</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
</div>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled>
<option selected>Option 1</option> <option selected>Option 1</option>
@@ -245,6 +247,7 @@
<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">
<div class="sg-pulldown-panel__row-header">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus"> <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-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>
@@ -253,6 +256,7 @@
</span> </span>
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 2</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
</div>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled>
<option selected>Option 1</option> <option selected>Option 1</option>
@@ -262,6 +266,7 @@
</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">
<div class="sg-pulldown-panel__row-header">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus"> <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-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>
@@ -270,6 +275,7 @@
</span> </span>
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 3</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
</div>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled>
<option selected>Option 1</option> <option selected>Option 1</option>
@@ -279,6 +285,7 @@
</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">
<div class="sg-pulldown-panel__row-header">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus"> <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-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>
@@ -287,6 +294,7 @@
</span> </span>
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 4</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
</div>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled>
<option selected>Option 1</option> <option selected>Option 1</option>
styles/25-patterns-form-sections.css
+15 -17
View File
@@ -113,7 +113,7 @@
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label, .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label, .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] .sg-pulldown-panel__label {
white-space: normal; white-space: normal;
} }
@@ -203,37 +203,35 @@
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable > :not(.sg-mode-toggle), .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable > :not(.sg-mode-toggle),
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > :not(.sg-mode-toggle), .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > :not(.sg-mode-toggle),
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > :not(.sg-mode-toggle) { .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__row-header > :not(.sg-mode-toggle),
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown {
pointer-events: none; pointer-events: none;
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
display: grid; display: grid;
grid-template-columns: max-content minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--interaction-height) auto; grid-template-rows: var(--interaction-height) auto;
column-gap: var(--spacing-large);
row-gap: var(--spacing-small); row-gap: var(--spacing-small);
align-items: center;
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header {
display: flex;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
align-items: center;
gap: var(--spacing-large);
min-width: 0;
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label {
grid-column: 2; margin: 0;
grid-row: 1; min-width: 0;
display: flex; line-height: var(--line-height-base);
align-items: center;
justify-content: flex-start;
align-self: center;
height: var(--layout-mode-toggle-local-height);
line-height: var(--layout-mode-toggle-local-height);
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
grid-column: 1 / -1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
@@ -241,7 +239,7 @@
opacity: 1; opacity: 1;
} }
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__label, .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label,
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown { .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown {
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
} }