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

Add content basic object card variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-18 10:04:11 +02:00
parent bb824cb540
commit 94a1ac9b33
5 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/01-foundations.css
+4
View File
@@ -172,6 +172,8 @@
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
--layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
--layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
--dimension-notifications-card-min-width: 445px;
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
--layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -273,6 +275,8 @@
--dimension-object-card-mobile-width: 100%;
--dimension-object-card-mobile-height: auto;
--dimension-object-card-desktop-breakpoint: 768px;
--dimension-content-card-margin-top-desktop: 100px;
--dimension-content-card-margin-top-mobile: 1rem;
--dimension-object-group-card-min-width: 450px;
--dimension-object-group-card-max-width: 650px;
--dimension-object-group-card-height: 700px;
styles/22-patterns-object-card.css
+22
View File
@@ -70,3 +70,25 @@
.sg-object-card--variable-height {
height: auto;
}
.sg-object-card--content-basic {
width: min(70vw, var(--layout-object-card-max-width));
margin-inline: auto;
height: auto;
}
.sg-object-card-content-basic {
margin-top: var(--layout-content-card-margin-top-desktop);
}
@media (max-width: 767px) {
.sg-object-card--content-basic {
width: var(--layout-object-card-mobile-width);
min-width: 0;
max-width: none;
}
.sg-object-card-content-basic {
margin-top: var(--layout-content-card-margin-top-mobile);
}
}