Sync styleguide 2026.05.18.1

This commit is contained in:
2026-07-07 14:42:15 +02:00
parent 9942256db4
commit 720c5cf6d9
10 changed files with 145 additions and 10 deletions
+34
View File
@@ -17,6 +17,7 @@
--color-signal-green: #009101;
--color-signal-green-light: #65A665;
--color-signal-yellow: #9C7A00;
--color-ampel-hellgelb: #D3B962;
--color-signal-red: #9B3B2F;
--color-font-dark: #414959;
--color-font-light: #FFFFFF;
@@ -175,6 +176,7 @@
--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);
--layout-notification-card-width: var(--dimension-notification-card-width);
--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);
@@ -187,6 +189,7 @@
--layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
--layout-object-group-card-height: var(--dimension-object-group-card-height);
--surface-object-card-lower-segment: var(--color-white);
--surface-notification-card-lower-segment: var(--color-ampel-hellgelb);
--text-company-card-data-negative: var(--chart-value-negative);
--text-company-card-moat-neutral: var(--chart-value-neutral);
--layout-company-card-analysis-gap-after-moat: var(--spacing-large);
@@ -286,6 +289,7 @@
--dimension-object-group-card-min-width: 450px;
--dimension-object-group-card-max-width: 650px;
--dimension-object-group-card-height: 700px;
--dimension-notification-card-width: 50%;
--dimension-input-label-width: 9rem;
--dimension-input-field-desktop-width: 400px;
--dimension-input-field-max-width: 600px;
@@ -2129,6 +2133,10 @@ section + section {
.sg-portal-header__tabs {
grid-area: tabs;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-small);
width: 100%;
}
@@ -2153,6 +2161,14 @@ section + section {
margin-top: var(--spacing-large);
}
.sg-portal-header-pattern-variant__links-card {
margin-top: var(--spacing-small);
}
.sg-portal-header-pattern-variant__links-card .sg-portal-header__tabs {
gap: var(--spacing-large);
}
@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
.sg-portal-header__main {
gap: var(--spacing-small) var(--spacing-large);
@@ -2409,6 +2425,18 @@ section + section {
height: auto;
}
.sg-card.sg-object-card--notification {
width: var(--layout-notification-card-width);
min-width: 0;
max-width: none;
height: auto;
--surface-object-card-lower-segment: var(--surface-notification-card-lower-segment);
}
.sg-notification-card__actions {
justify-content: flex-end;
}
.sg-object-card-content-basic {
margin-top: var(--layout-content-card-margin-top-desktop);
}
@@ -2420,6 +2448,12 @@ section + section {
max-width: none;
}
.sg-card.sg-object-card--notification {
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);
}
+2 -2
View File
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
"styleguideCommit": "85f80a0",
"syncedAtUtc": "2026-06-27T05:53:58Z",
"styleguideCommit": "ec00d82",
"syncedAtUtc": "2026-07-07T12:42:15Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
+34
View File
@@ -17,6 +17,7 @@
--color-signal-green: #009101;
--color-signal-green-light: #65A665;
--color-signal-yellow: #9C7A00;
--color-ampel-hellgelb: #D3B962;
--color-signal-red: #9B3B2F;
--color-font-dark: #414959;
--color-font-light: #FFFFFF;
@@ -175,6 +176,7 @@
--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);
--layout-notification-card-width: var(--dimension-notification-card-width);
--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);
@@ -187,6 +189,7 @@
--layout-object-group-card-max-width: var(--dimension-object-group-card-max-width);
--layout-object-group-card-height: var(--dimension-object-group-card-height);
--surface-object-card-lower-segment: var(--color-white);
--surface-notification-card-lower-segment: var(--color-ampel-hellgelb);
--text-company-card-data-negative: var(--chart-value-negative);
--text-company-card-moat-neutral: var(--chart-value-neutral);
--layout-company-card-analysis-gap-after-moat: var(--spacing-large);
@@ -286,6 +289,7 @@
--dimension-object-group-card-min-width: 450px;
--dimension-object-group-card-max-width: 650px;
--dimension-object-group-card-height: 700px;
--dimension-notification-card-width: 50%;
--dimension-input-label-width: 9rem;
--dimension-input-field-desktop-width: 400px;
--dimension-input-field-max-width: 600px;
@@ -2129,6 +2133,10 @@ section + section {
.sg-portal-header__tabs {
grid-area: tabs;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-small);
width: 100%;
}
@@ -2153,6 +2161,14 @@ section + section {
margin-top: var(--spacing-large);
}
.sg-portal-header-pattern-variant__links-card {
margin-top: var(--spacing-small);
}
.sg-portal-header-pattern-variant__links-card .sg-portal-header__tabs {
gap: var(--spacing-large);
}
@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
.sg-portal-header__main {
gap: var(--spacing-small) var(--spacing-large);
@@ -2409,6 +2425,18 @@ section + section {
height: auto;
}
.sg-card.sg-object-card--notification {
width: var(--layout-notification-card-width);
min-width: 0;
max-width: none;
height: auto;
--surface-object-card-lower-segment: var(--surface-notification-card-lower-segment);
}
.sg-notification-card__actions {
justify-content: flex-end;
}
.sg-object-card-content-basic {
margin-top: var(--layout-content-card-margin-top-desktop);
}
@@ -2420,6 +2448,12 @@ section + section {
max-width: none;
}
.sg-card.sg-object-card--notification {
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);
}