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

Fix notifications pattern width behavior and text-segment height

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-01 16:36:29 +02:00
parent 328e1652ec
commit 98168722b6
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/notifications.html
+3 -3
View File
@@ -16,7 +16,7 @@
<div class="sg-preview-area sg-notifications-pattern"> <div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body"> <p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p> </p>
@@ -30,7 +30,7 @@
</article> </article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body"> <p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p> </p>
@@ -44,7 +44,7 @@
</article> </article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body"> <p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p> </p>
styles/28-patterns-notifications.css
+17
View File
@@ -2,16 +2,33 @@
/* Patterns: Notifications */ /* Patterns: Notifications */
/* ========================================================= */ /* ========================================================= */
.sg-notifications-pattern {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-small);
align-items: flex-start;
width: 100%;
}
.sg-notifications-pattern__card { .sg-notifications-pattern__card {
flex: 1 1 var(--layout-object-card-min-width);
min-width: var(--layout-object-card-min-width); min-width: var(--layout-object-card-min-width);
max-width: var(--layout-object-card-max-width); max-width: var(--layout-object-card-max-width);
}
.sg-notifications-pattern__text-segment {
height: 200px; height: 200px;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.sg-notifications-pattern__card { .sg-notifications-pattern__card {
width: 100%;
min-width: 0; min-width: 0;
max-width: none; max-width: none;
flex: 1 1 auto;
}
.sg-notifications-pattern__text-segment {
height: auto; height: auto;
} }
} }