Raise pulldown overlay layer via centralized z-index token
This commit is contained in:
@@ -138,6 +138,7 @@
|
|||||||
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
|
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
|
||||||
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
|
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
|
||||||
<tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
|
<tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
|
||||||
|
<tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
|
||||||
<tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Desktop-Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern.</td></tr>
|
<tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Desktop-Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern.</td></tr>
|
||||||
<tr><td>multiselect-pulldown-panel-mobile-width</td><td>80vw</td><td>Mobile Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern.</td></tr>
|
<tr><td>multiselect-pulldown-panel-mobile-width</td><td>80vw</td><td>Mobile Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern.</td></tr>
|
||||||
<tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
|
<tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
|
||||||
|
|||||||
@@ -109,6 +109,7 @@
|
|||||||
<tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
|
<tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
|
||||||
<tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
|
<tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
|
||||||
<tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
|
<tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
|
||||||
|
<tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
|
||||||
<tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Desktop-Breite des geöffneten Panels im Pattern Multiselektions-Pulldown.</td></tr>
|
<tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Desktop-Breite des geöffneten Panels im Pattern Multiselektions-Pulldown.</td></tr>
|
||||||
<tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Mobile Breite des geöffneten Panels im Pattern Multiselektions-Pulldown.</td></tr>
|
<tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Mobile Breite des geöffneten Panels im Pattern Multiselektions-Pulldown.</td></tr>
|
||||||
<tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
|
<tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
|
||||||
|
|||||||
+3
-1
@@ -73,6 +73,7 @@
|
|||||||
--layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
|
--layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
|
||||||
--layout-pulldown-chevron-reserved-space: var(--spacing-large);
|
--layout-pulldown-chevron-reserved-space: var(--spacing-large);
|
||||||
--layout-pulldown-panel-form-mobile-width: 90%;
|
--layout-pulldown-panel-form-mobile-width: 90%;
|
||||||
|
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
|
||||||
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
|
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
|
||||||
--layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
|
--layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
|
||||||
--layout-input-label-width: var(--dimension-input-label-width);
|
--layout-input-label-width: var(--dimension-input-label-width);
|
||||||
@@ -222,6 +223,7 @@
|
|||||||
--dimension-input-field-desktop-width: 400px;
|
--dimension-input-field-desktop-width: 400px;
|
||||||
--dimension-input-field-max-width: 600px;
|
--dimension-input-field-max-width: 600px;
|
||||||
--dimension-search-field-width: 15.3rem;
|
--dimension-search-field-width: 15.3rem;
|
||||||
|
--dimension-layer-pulldown-panel: 40;
|
||||||
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
|
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
|
||||||
--dimension-multiselect-pulldown-panel-mobile-width: 80vw;
|
--dimension-multiselect-pulldown-panel-mobile-width: 80vw;
|
||||||
--dimension-options-row-mode-toggle-width: 7rem;
|
--dimension-options-row-mode-toggle-width: 7rem;
|
||||||
@@ -1228,7 +1230,7 @@ section + section {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% + var(--spacing-small));
|
top: calc(100% + var(--spacing-small));
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 2;
|
z-index: var(--layer-pulldown-panel);
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-small);
|
gap: var(--spacing-small);
|
||||||
|
|||||||
Reference in New Issue
Block a user