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,68 @@
+/* ========================================================= */
+/* Patterns: Portal Header                                   */
+/* ========================================================= */
+
+.sg-portal-header {
+  --surface-tab-selected: var(--surface-portal-header-tab);
+  --surface-tab-unselected: var(--surface-portal-header-tab-active);
+  --text-tab-selected: var(--text-portal-header-tab);
+  --text-tab-unselected: var(--text-portal-header-tab-active);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--layout-page-content-inset-inline);
+  border: var(--border-none);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-none);
+  background: var(--surface-portal-header);
+}
+
+.sg-portal-header__main {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "brand menu"
+    "tabs tabs";
+  gap: var(--spacing-large);
+  min-width: 0;
+}
+
+.sg-portal-header__brand {
+  grid-area: brand;
+  margin: 0;
+  padding-left: 0;
+  font-size: var(--font-size-portal-header-brand);
+  color: var(--text-portal-header-brand);
+}
+
+.sg-portal-header__tabs {
+  grid-area: tabs;
+  width: 100%;
+}
+
+.sg-portal-header__menu-wrap {
+  grid-area: menu;
+  justify-self: end;
+}
+
+.sg-portal-header-pattern-variant {
+  margin-bottom: var(--spacing-large);
+}
+
+.sg-portal-header-pattern-variant__label {
+  margin: 0 0 var(--spacing-small) 0;
+}
+
+.sg-portal-header-pattern-variant__next-element {
+  margin-top: 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);
+  }
+}