Revert "Add Multiselektionspulldown pattern based on form sections structure"
This reverts commit ba31de8870.
This commit is contained in:
@@ -45,7 +45,6 @@
|
|||||||
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
|
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
|
||||||
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
|
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
|
||||||
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
|
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
|
||||||
<li><a href="./patterns/multiselektionspulldown.html">Multiselektionspulldown</a></li>
|
|
||||||
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
|
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
|
||||||
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
|
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -1,140 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Styleguide – Pattern Multiselektionspulldown</title>
|
|
||||||
<link rel="stylesheet" href="../styleguide.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<h1 class="sg-main-heading">Pattern – Multiselektionspulldown</h1>
|
|
||||||
<section id="pattern-multiselektionspulldown">
|
|
||||||
<p class="sg-preview-label">Pattern: Multiselektionspulldown</p>
|
|
||||||
|
|
||||||
<div class="sg-multiselect-pulldown-demo" data-pattern="multiselektionspulldown" aria-label="Multiselektionspulldown Kennzahlen">
|
|
||||||
<div class="sg-multiselect-pulldown-demo__controls" aria-hidden="true">
|
|
||||||
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected" type="button">Kennzahlen (1)</button>
|
|
||||||
<span class="sg-input-single-line-wrap sg-multiselect-pulldown-demo__search-wrap" data-has-value="false">
|
|
||||||
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="suchen" aria-label="suchen" disabled>
|
|
||||||
</span>
|
|
||||||
<span class="sg-table-label sg-multiselect-pulldown-demo__results">236 Treffer</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-pulldown-demo sg-multiselect-pulldown" data-open="true" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-context="multiselektionspulldown" data-component-state="selected">
|
|
||||||
<button
|
|
||||||
class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger sg-pulldown--selected"
|
|
||||||
type="button"
|
|
||||||
aria-expanded="true"
|
|
||||||
aria-label="Pulldown Kennzahlen mit aktiver Auswahl"
|
|
||||||
data-component-part="pulldown-trigger"
|
|
||||||
data-label-base="Kennzahlen"
|
|
||||||
>
|
|
||||||
Kennzahlen (1)
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Kennzahlen" data-component-part="pulldown-panel">
|
|
||||||
<div class="sg-form-sections-card-wrapper sg-multiselect-pulldown__form-wrapper" data-pattern-part="multiselect-form-wrapper">
|
|
||||||
<form class="sg-form-sections-card sg-multiselect-pulldown__form" action="#" method="post">
|
|
||||||
<div class="sg-form-sections-card__body sg-multiselect-pulldown__form-body" data-pattern-part="multiselect-form-body">
|
|
||||||
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-score-minimum">
|
|
||||||
<h2 id="kennzahlen-score-minimum" class="sg-sub-heading sg-multiselect-pulldown__section-title">Scores Minimum</h2>
|
|
||||||
|
|
||||||
<label class="sg-checkbox-field-option sg-body sg-multiselect-pulldown__row-label" data-component="checkbox-field" data-component-state="inactive-selectable">
|
|
||||||
<button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Nur Score attraktiv">
|
|
||||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
|
||||||
</button>
|
|
||||||
<span>Nur Score "attraktiv"</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
|
|
||||||
<span class="sg-label">Aktienbewertung</span>
|
|
||||||
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
|
|
||||||
<span class="sg-slider-value">6.5</span>
|
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Aktienbewertung entfernen" hidden>×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
|
|
||||||
<span class="sg-label">Wachstum</span>
|
|
||||||
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="9.5" disabled>
|
|
||||||
<span class="sg-slider-value">9.5</span>
|
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Wachstum entfernen" hidden>×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
|
|
||||||
<span class="sg-label">Profitabilität</span>
|
|
||||||
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="5.0" disabled>
|
|
||||||
<span class="sg-slider-value">5.0</span>
|
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Profitabilität entfernen" hidden>×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
|
|
||||||
<span class="sg-label">Stabilität</span>
|
|
||||||
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
|
|
||||||
<span class="sg-slider-value">6.5</span>
|
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="Stabilität entfernen" hidden>×</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-marktbewertung-max">
|
|
||||||
<h2 id="kennzahlen-marktbewertung-max" class="sg-sub-heading sg-multiselect-pulldown__section-title">Marktbewertung Maximum</h2>
|
|
||||||
|
|
||||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
|
|
||||||
<span class="sg-label">PE</span>
|
|
||||||
<input class="sg-slider" type="range" min="0" max="60" step="1" value="30" disabled>
|
|
||||||
<span class="sg-slider-value">30</span>
|
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="PE entfernen" hidden>×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
|
|
||||||
<span class="sg-label">PE forw.</span>
|
|
||||||
<input class="sg-slider" type="range" min="0" max="50" step="1" value="25" disabled>
|
|
||||||
<span class="sg-slider-value">25</span>
|
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="PE forw. entfernen" hidden>×</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-slider-row" data-activatable="true">
|
|
||||||
<span class="sg-label">PEG</span>
|
|
||||||
<input class="sg-slider" type="range" min="0" max="4" step="0.1" value="1.6">
|
|
||||||
<span class="sg-slider-value">1.6</span>
|
|
||||||
<button class="sg-activatable-remove" type="button" aria-label="PEG entfernen">×</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-weitere-filter">
|
|
||||||
<h2 id="kennzahlen-weitere-filter" class="sg-sub-heading sg-multiselect-pulldown__section-title">Weitere Filter</h2>
|
|
||||||
|
|
||||||
<div class="sg-multiselect-pulldown__radio-row" role="radiogroup" aria-label="Zyklus-Empfehlung">
|
|
||||||
<span class="sg-label">Zyklus-Empfehlung</span>
|
|
||||||
<label class="sg-radio-activatable-group__choice sg-body" data-component="radio-field" data-component-state="inactive-selectable">
|
|
||||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="kaufen">
|
|
||||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
|
||||||
</button>
|
|
||||||
<span>kaufen</span>
|
|
||||||
</label>
|
|
||||||
<label class="sg-radio-activatable-group__choice sg-body" data-component="radio-field" data-component-state="active">
|
|
||||||
<button class="sg-radio-field" type="button" role="radio" aria-checked="true" aria-label="nicht kaufen">
|
|
||||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
|
||||||
</button>
|
|
||||||
<span>nicht kaufen</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-multiselect-pulldown__row-label">
|
|
||||||
<span class="sg-label">Moat mindestens</span>
|
|
||||||
<button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig">Maessig</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="sg-form-sections-card__actions-segment sg-multiselect-pulldown__actions-segment" data-pattern-part="multiselect-actions-segment">
|
|
||||||
<div class="sg-form-sections-card__actions"></div>
|
|
||||||
</footer>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -47,18 +47,6 @@
|
|||||||
<tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
|
<tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
|
||||||
</tbody></table>
|
</tbody></table>
|
||||||
|
|
||||||
<h3 class="sg-sub-heading sg-section-h3">Multiselektionspulldown</h3>
|
|
||||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
|
||||||
<tr><td>surface-multiselect-pulldown</td><td>color-light-grey</td><td>Grundfläche des geöffneten Kennzahlen-Panels.</td></tr>
|
|
||||||
<tr><td>surface-multiselect-pulldown-shell</td><td>color-light-grey</td><td>Grundfläche der oberen Trigger-/Suche-Zeile.</td></tr>
|
|
||||||
<tr><td>surface-multiselect-pulldown-control</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche innerhalb des Patterns.</td></tr>
|
|
||||||
<tr><td>surface-multiselect-pulldown-control-selected</td><td>surface-control-active</td><td>Alias auf aktive Control-Fläche innerhalb des Patterns.</td></tr>
|
|
||||||
<tr><td>text-multiselect-pulldown-default</td><td>text-control-default</td><td>Alias auf Standard-Textfarbe im Pattern.</td></tr>
|
|
||||||
<tr><td>text-multiselect-pulldown-muted</td><td>text-control-disabled</td><td>Alias auf reduzierte Textfarbe für deaktivierte Zeilen.</td></tr>
|
|
||||||
<tr><td>layout-multiselect-pulldown-width</td><td>dimension-multiselect-pulldown-width</td><td>Fixe Panelbreite für die geöffnete Desktop-Darstellung.</td></tr>
|
|
||||||
<tr><td>layout-multiselect-pulldown-row-label-width</td><td>dimension-multiselect-pulldown-row-label-width</td><td>Breite der linken Label-Spalte im Panel.</td></tr>
|
|
||||||
</tbody></table>
|
|
||||||
|
|
||||||
<h3 class="sg-sub-heading sg-section-h3">Navigation Card</h3>
|
<h3 class="sg-sub-heading sg-section-h3">Navigation Card</h3>
|
||||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||||||
<tr><td>surface-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
|
<tr><td>surface-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
|
||||||
|
|||||||
-140
@@ -150,14 +150,6 @@
|
|||||||
--layout-options-row-group-gap: var(--spacing-small);
|
--layout-options-row-group-gap: var(--spacing-small);
|
||||||
--layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
|
--layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
|
||||||
--layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
|
--layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
|
||||||
--surface-multiselect-pulldown: var(--color-light-grey);
|
|
||||||
--surface-multiselect-pulldown-shell: var(--color-light-grey);
|
|
||||||
--surface-multiselect-pulldown-control: var(--surface-control-default);
|
|
||||||
--surface-multiselect-pulldown-control-selected: var(--surface-control-active);
|
|
||||||
--text-multiselect-pulldown-default: var(--text-control-default);
|
|
||||||
--text-multiselect-pulldown-muted: var(--text-control-disabled);
|
|
||||||
--layout-multiselect-pulldown-width: var(--dimension-multiselect-pulldown-width);
|
|
||||||
--layout-multiselect-pulldown-row-label-width: var(--dimension-multiselect-pulldown-row-label-width);
|
|
||||||
--layout-object-card-min-width: var(--dimension-object-card-min-width);
|
--layout-object-card-min-width: var(--dimension-object-card-min-width);
|
||||||
--layout-object-card-max-width: var(--dimension-object-card-max-width);
|
--layout-object-card-max-width: var(--dimension-object-card-max-width);
|
||||||
--layout-object-card-height: var(--dimension-object-card-height);
|
--layout-object-card-height: var(--dimension-object-card-height);
|
||||||
@@ -230,8 +222,6 @@
|
|||||||
--dimension-search-field-width: 15.3rem;
|
--dimension-search-field-width: 15.3rem;
|
||||||
--dimension-options-row-mode-toggle-width: 7rem;
|
--dimension-options-row-mode-toggle-width: 7rem;
|
||||||
--dimension-options-row-help-panel-width: 16rem;
|
--dimension-options-row-help-panel-width: 16rem;
|
||||||
--dimension-multiselect-pulldown-width: 48rem;
|
|
||||||
--dimension-multiselect-pulldown-row-label-width: 15rem;
|
|
||||||
--dimension-card-list-drawer-width: 40%;
|
--dimension-card-list-drawer-width: 40%;
|
||||||
--dimension-slider-track-height: 6px;
|
--dimension-slider-track-height: 6px;
|
||||||
--dimension-slider-thumb-size: 22px;
|
--dimension-slider-thumb-size: 22px;
|
||||||
@@ -1626,136 +1616,6 @@ section + section {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========================================================= */
|
|
||||||
/* Patterns: Multiselektionspulldown */
|
|
||||||
/* ========================================================= */
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown-demo {
|
|
||||||
width: var(--layout-multiselect-pulldown-width);
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown-demo__controls {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-small);
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: var(--spacing-small);
|
|
||||||
padding: var(--spacing-small);
|
|
||||||
border-radius: var(--radius-card);
|
|
||||||
background: var(--surface-multiselect-pulldown-shell);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown-demo__search-wrap {
|
|
||||||
flex: 0 1 15rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown-demo__results {
|
|
||||||
color: var(--text-multiselect-pulldown-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown {
|
|
||||||
--surface-pulldown-panel: var(--surface-multiselect-pulldown);
|
|
||||||
--surface-control-default: var(--surface-multiselect-pulldown-control);
|
|
||||||
--surface-control-active: var(--surface-multiselect-pulldown-control-selected);
|
|
||||||
--text-control-default: var(--text-multiselect-pulldown-default);
|
|
||||||
--text-control-disabled: var(--text-multiselect-pulldown-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown > .sg-pulldown-demo__trigger {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown > .sg-pulldown-panel {
|
|
||||||
position: static;
|
|
||||||
display: flex;
|
|
||||||
min-width: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: var(--spacing-large);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__form-wrapper,
|
|
||||||
.sg-multiselect-pulldown__form {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__form {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__form-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-large);
|
|
||||||
padding: 0;
|
|
||||||
background: var(--surface-multiselect-pulldown);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__actions-segment {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__section-title {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__section .sg-slider-row,
|
|
||||||
.sg-multiselect-pulldown__row-label,
|
|
||||||
.sg-multiselect-pulldown__radio-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) minmax(0, 1fr) auto auto;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: var(--spacing-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__section .sg-slider-row .sg-label,
|
|
||||||
.sg-multiselect-pulldown__row-label .sg-label,
|
|
||||||
.sg-multiselect-pulldown__radio-row > .sg-label {
|
|
||||||
min-width: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__section .sg-slider-row .sg-slider {
|
|
||||||
min-width: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__section .sg-slider-row .sg-slider-value {
|
|
||||||
min-width: calc(var(--interaction-height) * 1.25);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__radio-row {
|
|
||||||
grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) auto auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__compact-pulldown {
|
|
||||||
width: max-content;
|
|
||||||
min-width: 7.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 48rem) {
|
|
||||||
.sg-multiselect-pulldown-demo {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sg-multiselect-pulldown__section .sg-slider-row,
|
|
||||||
.sg-multiselect-pulldown__row-label,
|
|
||||||
.sg-multiselect-pulldown__radio-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
row-gap: var(--spacing-small);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
/* Patterns: Object Card */
|
/* Patterns: Object Card */
|
||||||
/* ========================================================= */
|
/* ========================================================= */
|
||||||
|
|||||||
Reference in New Issue
Block a user