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

Split styleguide CSS into modular files per section/pattern/layout/page

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-25 08:29:52 +02:00
parent e13ce0ad23
commit 3e9c273823
18 changed files with 3273 additions and 3256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/31-patterns-text-layouts.css
+81
View File
@@ -0,0 +1,81 @@
/* ========================================================= */
/* Patterns: Text Layouts */
/* ========================================================= */
.sg-text-layout-pattern {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.sg-text-layout-pattern__preview-surface {
width: 100%;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--surface-text-layout-preview);
}
.sg-text-layout-pattern__sample {
margin: 0;
}
.sg-text-layout-pattern__sample--full-width {
width: 100%;
}
.sg-text-layout-pattern__sample--sixty-width {
width: 60%;
}
.sg-text-layout-pattern__sample--two-column {
margin: 0;
}
.sg-text-layout-pattern__two-column {
width: 100%;
display: grid;
grid-template-columns: var(--layout-text-layout-two-column-columns);
column-gap: var(--layout-text-layout-column-gap);
}
.sg-text-layout-pattern__three-column-distributed {
width: 100%;
display: grid;
grid-template-columns: var(--layout-text-layout-three-column-columns);
column-gap: var(--layout-text-layout-column-gap);
}
.sg-text-layout-pattern__column {
margin: 0;
}
.sg-text-layout-pattern__column--align-left {
text-align: var(--text-align-text-layout-column-left);
}
.sg-text-layout-pattern__column--align-center {
text-align: var(--text-align-text-layout-column-center);
}
.sg-text-layout-pattern__column--align-right {
text-align: var(--text-align-text-layout-column-right);
}
@media (max-width: 767px) {
.sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column,
.sg-text-layout-pattern__two-column,
.sg-text-layout-pattern__three-column-distributed {
width: 100%;
}
.sg-text-layout-pattern__two-column,
.sg-text-layout-pattern__three-column-distributed {
grid-template-columns: 1fr;
}
.sg-text-layout-pattern__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] {
grid-template-columns: var(--layout-text-layout-three-column-columns);
}
}