Sync styleguide 2026.05.18.1

2026-06-03 16:25:03 +02:00
parent 70272e81d6
commit 543d3e5af5
66 changed files with 22706 additions and 0 deletions
@@ -0,0 +1,186 @@
+/* ========================================================= */
+/* Layouts: Card Listen Seite                                */
+/* ========================================================= */
+
+.sg-card-list-page {
+  display: flex;
+  flex-direction: column;
+}
+
+.sg-card-list-page-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--layout-card-list-drawer-width);
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 220ms ease;
+  background: var(--surface-card-list-drawer);
+  color: var(--text-card-list-drawer);
+  box-shadow: var(--shadow-overlay);
+  z-index: 1000;
+  overflow-y: auto;
+}
+
+.sg-card-list-page-drawer[data-open="true"] {
+  transform: translateX(0);
+}
+
+.sg-card-list-page-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--layout-page-content-inset-inline);
+}
+
+.sg-card-list-page-drawer__title {
+  margin: 0;
+  color: inherit;
+}
+
+.sg-card-list-page-drawer__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--layout-page-content-inset-inline)
+    var(--card-segment-padding-vertical)
+    var(--layout-page-content-inset-inline);
+}
+
+.sg-card-list-page > * + * {
+  margin-top: var(--spacing-large);
+}
+
+.sg-card-list-page > .sg-options-row {
+  margin-top: var(--spacing-large);
+}
+
+.sg-card-list-page > .sg-card-list-page__intro-block {
+  margin-top: calc(var(--spacing-large) - 0.5rem);
+}
+
+.sg-card-list-page__intro-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+}
+
+.sg-card-list-page__title-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  width: fit-content;
+  max-width: 100%;
+}
+
+.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+  width: min(60vw, 100%);
+}
+
+@media (max-width: 767px) {
+  .sg-card-list-page-drawer {
+    display: none;
+  }
+
+  .sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+    width: 100%;
+  }
+}
+
+.sg-card-list-page__object-grid,
+.sg-card-list-page__navigation {
+  width: 100%;
+}
+
+.sg-vsf-drawer-card {
+  --surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
+  --surface-card: var(--surface-vsf-drawer-object-card-body);
+  --surface-card-body: var(--surface-vsf-drawer-object-card-body);
+  --text-card-header: var(--text-vsf-drawer-object-card-heading);
+  --text-card-body: var(--text-vsf-drawer-object-card-body);
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  align-self: stretch;
+  height: auto;
+}
+
+.sg-vsf-drawer-card__content {
+  color: var(--text-vsf-drawer-object-card-body);
+}
+
+.sg-vsf-drawer-card .sg-text-layout-pattern__two-column,
+.sg-vsf-drawer-card .sg-text-layout-pattern__column {
+  color: var(--text-vsf-drawer-object-card-body);
+}
+
+.sg-vsf-drawer-card .sg-text-layout-pattern__two-column {
+  gap: var(--layout-vsf-drawer-object-card-column-gap);
+}
+
+.sg-vsf-drawer-card__actions-segment {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--spacing-large);
+  background: var(--surface-vsf-drawer-object-card-body);
+}
+
+.sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button {
+  height: auto;
+  width: 100%;
+}
+
+#vsf-business-model-toggle.sg-interaction-element.sg-button {
+  background: var(--surface-portal-header-tab);
+  color: var(--text-portal-header-tab);
+}
+
+.sg-inline-controls-card {
+  --surface-card-body: var(--surface-card-segment-neutral);
+}
+
+.sg-card-segment.sg-inline-header-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+}
+
+.sg-card-segment.sg-inline-controls-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-small);
+  flex-wrap: nowrap;
+}
+
+.sg-vsf-drawer-object-card__heading {
+  color: var(--text-vsf-drawer-object-card-heading);
+  margin: 0;
+}
+
+.sg-analysis-intro-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.sg-analysis-intro-block .sg-heading-h2 {
+  margin: 0;
+}
+
+.sg-analysis-intro-block .sg-text-layout-pattern__sample {
+  margin: 0;
+  color: var(--text-vsf-drawer-object-card-body);
+}
+