@sbb-esta/lyne-elements-dev 4.7.0-dev.1773217608 → 4.7.0-dev.1773224724

package/standard-theme.css

@@ -1604,6 +1604,26 @@ summary {
   --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
   --_sbb-form-field-floating-label-transform: 0.53125rem;
   --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
+  --sbb-header-background: var(--sbb-background-color-1);
+  --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-header-inset-inline-end: 0;
+  --sbb-header-position: fixed;
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  --sbb-header-action-color: var(--sbb-color-1);
+  --sbb-header-action-background-color: transparent;
+  --sbb-header-action-min-height: var(--sbb-size-element-s);
+  --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-header-action-transition-easing: var(--sbb-animation-easing);
+  --sbb-header-action-border-color: transparent;
+  --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-header-action-active-border-width: var(--sbb-border-width-2x);
+  --sbb-header-action-active-border-color: var(--sbb-header-action-color);
+  --sbb-header-first-item-icon-shift: 0.125rem;
+  --sbb-header-environment-background-color: var(--sbb-color-granite);
+  --sbb-header-environment-color: var(--sbb-color-1-negative);
+  --sbb-header-environment-size: 2.375rem;
+  --sbb-header-environment-rotate: 45deg;
   --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
   --sbb-lead-container-background-color: var(--sbb-background-color-1);
@@ -1734,6 +1754,9 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-header-action-border-color: CanvasText;
+    --sbb-header-action-color: LinkText;
+    --sbb-header-action-active-border-width: 0;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-visual-checkbox-selection-color: Canvas;
@@ -1753,7 +1776,6 @@ summary {
   --sbb-train-formation-wagon-width: 5rem;
   --sbb-train-formation-wagon-height: 2.5rem;
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
-  --sbb-header-height: var(--sbb-spacing-fixed-14x);
   --sbb-time-input-max-width: 3.625rem;
   --sbb-overlay-default-z-index: 1000;
   --sbb-cursor-default: default;
@@ -1779,9 +1801,6 @@ summary {
     var(--sbb-spacing-fixed-1x);
   --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
 }
-:root:has(sbb-header[size=s]) {
-  --sbb-header-height: 3.25rem;
-}
 :root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
   --sbb-focus-outline-style: none;
 }
@@ -1848,17 +1867,14 @@ summary {
     --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
     --_sbb-form-field-floating-label-transform: 0.65625rem;
     --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
   }
   :root {
-    --sbb-header-height: var(--sbb-spacing-fixed-24x);
     --sbb-time-input-max-width: 4.0625rem;
   }
-  :root:has(sbb-header[size=s]) {
-    --sbb-header-height: var(--sbb-spacing-fixed-14x);
-  }
 }
 @media (min-width: calc(90rem)) {
   :root {
@@ -2111,6 +2127,26 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   }
 }
 
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}
+
+:root:has(sbb-header[size=m]) {
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+}
+
+:root:has(sbb-header[size=s]) {
+  --sbb-header-height: 3.25rem;
+}
+
+@media (min-width: calc(64rem)) {
+  :root:has(sbb-header[size=m]) {
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+  }
+  :root:has(sbb-header[size=s]) {
+    --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  }
+}
 sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
   --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
 }
@@ -2361,10 +2397,6 @@ sbb-sidebar:has(sbb-sidebar-title) {
   --sbb-sidebar__padding-block-start: 0;
 }
 
-sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
-  margin-block-start: var(--sbb-header-height);
-}
-
 .sbb-select-trigger {
   width: 100%;
   height: var(--sbb-size-element-xs);