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

Keep add-to-list overlay header and footer fixed

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-16 11:00:39 +02:00
parent 27bb573191
commit 899af962a6
2 changed files with 88 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+2
View File
@@ -108,6 +108,7 @@
<p class="sg-body sg-strong" id="add-to-list-title">Füge das Unternehmen einer Liste hinzu</p> <p class="sg-body sg-strong" id="add-to-list-title">Füge das Unternehmen einer Liste hinzu</p>
</header> </header>
<div class="sg-delete-confirmation-pattern__scroll-region">
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"> <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
<ul class="sg-delete-confirmation-pattern__list" aria-label="Listen"> <ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
<li class="sg-delete-confirmation-pattern__list-item"> <li class="sg-delete-confirmation-pattern__list-item">
@@ -187,6 +188,7 @@
</form> </form>
</div> </div>
</div> </div>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__actions-segment"> <footer class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__actions-segment">
<div class="sg-delete-confirmation-pattern__actions sg-delete-confirmation-pattern__actions--footer"> <div class="sg-delete-confirmation-pattern__actions sg-delete-confirmation-pattern__actions--footer">
styles/27-patterns-delete-confirmation.css
+15 -2
View File
@@ -49,13 +49,13 @@
box-sizing: border-box; box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor)); max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
height: var(--layout-delete-confirmation-overlay-height, auto); height: var(--layout-delete-confirmation-overlay-height, auto);
overflow: auto; overflow: hidden;
z-index: var(--layer-delete-confirmation-overlay); z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay); box-shadow: var(--shadow-overlay);
} }
.sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host { .sg-delete-confirmation-pattern__floating-card.sg-card.sg-card--overlay-host {
overflow: auto; overflow: hidden;
} }
.sg-delete-confirmation-pattern__floating-card[hidden] { .sg-delete-confirmation-pattern__floating-card[hidden] {
@@ -69,9 +69,18 @@
background: var(--surface-delete-confirmation-overlay); background: var(--surface-delete-confirmation-overlay);
} }
.sg-delete-confirmation-pattern__scroll-region {
display: flex;
flex: 1 1 auto;
min-height: 0;
flex-direction: column;
overflow: auto;
}
.sg-delete-confirmation-pattern__actions-segment { .sg-delete-confirmation-pattern__actions-segment {
border-bottom-left-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card);
border-bottom-right-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card);
flex: 0 0 auto;
} }
.sg-delete-confirmation-pattern__list { .sg-delete-confirmation-pattern__list {
@@ -165,6 +174,10 @@
margin-top: 0; margin-top: 0;
} }
.sg-delete-confirmation-pattern__scroll-region > .sg-delete-confirmation-pattern__create-list-segment {
flex: 0 0 auto;
}
.sg-delete-confirmation-pattern__create-list-toggle { .sg-delete-confirmation-pattern__create-list-toggle {
width: 100%; width: 100%;
} }