Sync styleguide 2026.05.18.1
This commit is contained in:
1 parent
319a590af8
commit
30e7d56f68
10 files changed
+250
-14
No files matched your search
@@ -178,6 +178,8 @@
|
||||
--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);
|
||||
--layout-notification-card-width: var(--dimension-notification-card-width);
|
||||
--layout-user-notification-card-width: var(--dimension-user-notification-card-width);
|
||||
--layout-user-notification-staple-offset: var(--spacing-small);
|
||||
--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);
|
||||
@@ -291,6 +293,7 @@
|
||||
--dimension-object-group-card-max-width: 650px;
|
||||
--dimension-object-group-card-height: 700px;
|
||||
--dimension-notification-card-width: 50%;
|
||||
--dimension-user-notification-card-width: 70%;
|
||||
--dimension-input-label-width: 9rem;
|
||||
--dimension-input-field-desktop-width: 400px;
|
||||
--dimension-input-field-max-width: 600px;
|
||||
@@ -3149,6 +3152,50 @@ section + section {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-user-notification-pattern {
|
||||
display: flex;
|
||||
width: var(--layout-user-notification-card-width);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-user-notification-pattern__actions {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple {
|
||||
display: grid;
|
||||
width: var(--layout-user-notification-card-width);
|
||||
margin-inline: auto;
|
||||
padding-inline-end: calc(var(--layout-user-notification-staple-offset) * 2);
|
||||
padding-block-end: calc(var(--layout-user-notification-staple-offset) * 2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple > .sg-card {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple > .sg-card:nth-child(2) {
|
||||
transform: translate(
|
||||
var(--layout-user-notification-staple-offset),
|
||||
var(--layout-user-notification-staple-offset)
|
||||
);
|
||||
}
|
||||
|
||||
.sg-user-notification-staple > .sg-card:nth-child(3) {
|
||||
transform: translate(
|
||||
calc(var(--layout-user-notification-staple-offset) * 2),
|
||||
calc(var(--layout-user-notification-staple-offset) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-user-notification-staple__actions {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -3198,6 +3245,14 @@ section + section {
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-user-notification-pattern {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
@@ -3837,7 +3892,7 @@ main {
|
||||
background: var(--surface-content-block-card-content);
|
||||
}
|
||||
|
||||
.sg-content-block-card-group__content .sg-body {
|
||||
.sg-content-block-card-group__content > .sg-body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -4902,17 +4957,17 @@ main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-public-page-pattern-text-and-picture-right__text .sg-body {
|
||||
.sg-public-page-pattern-text-and-picture-right__text > .sg-body {
|
||||
margin: 0;
|
||||
color: var(--text-public-page-pattern-text-picture);
|
||||
}
|
||||
|
||||
.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
|
||||
.sg-public-page-pattern-text-and-picture-fullwidth__text > .sg-body {
|
||||
margin: 0;
|
||||
color: var(--text-public-page-pattern-text-picture);
|
||||
}
|
||||
|
||||
.sg-public-page-pattern-text-and-picture-left__text .sg-body {
|
||||
.sg-public-page-pattern-text-and-picture-left__text > .sg-body {
|
||||
margin: 0;
|
||||
color: var(--text-public-page-pattern-text-picture);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"styleguideVersion": "2026.05.18.1",
|
||||
"styleguideCommit": "ea0ef8e",
|
||||
"syncedAtUtc": "2026-08-12T09:23:27Z",
|
||||
"styleguideCommit": "1d65a56",
|
||||
"syncedAtUtc": "2026-08-20T07:57:40Z",
|
||||
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
||||
"mirroredDocsPath": "docs/styleguide"
|
||||
}
|
||||
@@ -178,6 +178,8 @@
|
||||
--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);
|
||||
--layout-notification-card-width: var(--dimension-notification-card-width);
|
||||
--layout-user-notification-card-width: var(--dimension-user-notification-card-width);
|
||||
--layout-user-notification-staple-offset: var(--spacing-small);
|
||||
--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);
|
||||
@@ -291,6 +293,7 @@
|
||||
--dimension-object-group-card-max-width: 650px;
|
||||
--dimension-object-group-card-height: 700px;
|
||||
--dimension-notification-card-width: 50%;
|
||||
--dimension-user-notification-card-width: 70%;
|
||||
--dimension-input-label-width: 9rem;
|
||||
--dimension-input-field-desktop-width: 400px;
|
||||
--dimension-input-field-max-width: 600px;
|
||||
@@ -3149,6 +3152,50 @@ section + section {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-user-notification-pattern {
|
||||
display: flex;
|
||||
width: var(--layout-user-notification-card-width);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-user-notification-pattern__actions {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple {
|
||||
display: grid;
|
||||
width: var(--layout-user-notification-card-width);
|
||||
margin-inline: auto;
|
||||
padding-inline-end: calc(var(--layout-user-notification-staple-offset) * 2);
|
||||
padding-block-end: calc(var(--layout-user-notification-staple-offset) * 2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple > .sg-card {
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple > .sg-card:nth-child(2) {
|
||||
transform: translate(
|
||||
var(--layout-user-notification-staple-offset),
|
||||
var(--layout-user-notification-staple-offset)
|
||||
);
|
||||
}
|
||||
|
||||
.sg-user-notification-staple > .sg-card:nth-child(3) {
|
||||
transform: translate(
|
||||
calc(var(--layout-user-notification-staple-offset) * 2),
|
||||
calc(var(--layout-user-notification-staple-offset) * 2)
|
||||
);
|
||||
}
|
||||
|
||||
.sg-card-segment.sg-user-notification-staple__actions {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.sg-vsf-meldungen-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -3198,6 +3245,14 @@ section + section {
|
||||
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sg-user-notification-pattern {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sg-user-notification-staple {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================= */
|
||||
@@ -3837,7 +3892,7 @@ main {
|
||||
background: var(--surface-content-block-card-content);
|
||||
}
|
||||
|
||||
.sg-content-block-card-group__content .sg-body {
|
||||
.sg-content-block-card-group__content > .sg-body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -4902,17 +4957,17 @@ main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sg-public-page-pattern-text-and-picture-right__text .sg-body {
|
||||
.sg-public-page-pattern-text-and-picture-right__text > .sg-body {
|
||||
margin: 0;
|
||||
color: var(--text-public-page-pattern-text-picture);
|
||||
}
|
||||
|
||||
.sg-public-page-pattern-text-and-picture-fullwidth__text .sg-body {
|
||||
.sg-public-page-pattern-text-and-picture-fullwidth__text > .sg-body {
|
||||
margin: 0;
|
||||
color: var(--text-public-page-pattern-text-picture);
|
||||
}
|
||||
|
||||
.sg-public-page-pattern-text-and-picture-left__text .sg-body {
|
||||
.sg-public-page-pattern-text-and-picture-left__text > .sg-body {
|
||||
margin: 0;
|
||||
color: var(--text-public-page-pattern-text-picture);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user