@sbb-esta/lyne-elements 2.4.1 → 2.5.1

package/core/styles/core.scss

@@ -327,3 +327,84 @@ sbb-train-formation[view='top'] sbb-train-wagon {
   --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
+
+// Skip animation for the container, content and sidebars when a sidebar requests it
+// (during initialization or if animation is disabled, but only during transition)
+sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+
+// Controls the start margin of the sbb-sidebar-content.
+// Whenever the sidebar with position start is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position start, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar:not([position='end']):is(
+          [data-state='closing'],
+          [data-state='closed'],
+          [mode='over'],
+          [data-mode-over-forced]
+        )
+    ),
+    :not(:has(> sbb-sidebar:not([position='end'])))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-start: 0;
+}
+
+// Controls the end margin of the sbb-sidebar-content.
+// Whenever the sidebar with position end is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position end, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar[position='end']:is(
+          [data-state='closing'],
+          [data-state='closed'],
+          [mode='over'],
+          [data-mode-over-forced]
+        )
+    ),
+    :not(:has(> sbb-sidebar[position='end']))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-end: 0;
+}
+
+// Toggles visibility of backdrop if there is an affected sidebar inside the container.
+sbb-sidebar-container:has(
+    > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
+        [data-state='opening'],
+        [data-state='opened']
+      )
+  ) {
+  --sbb-sidebar-container__backdrop-visibility: visible;
+  --sbb-sidebar-container-backdrop-opacity: 0.4;
+}
+
+// Move the current-page-border to the right side if the sidebar is right positioned
+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;
+}
+
+// Set the border radius at the left top side if the sidebar is right positioned
+sbb-icon-sidebar-content + sbb-icon-sidebar {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+}
+
+// If there is no close button, avoid reserving any space for the button in the sidebar title
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+// If there is a title, remove top spacing for the content
+sbb-sidebar:has(sbb-sidebar-title) {
+  --sbb-sidebar__padding-block-start: 0;
+}
+
+// Move container below header
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}

package/core/styles/mixins/link.scss

@@ -30,6 +30,20 @@
   --sbb-link-color-active: var(--sbb-color-silver);
 }
 
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-link-variables--active {
+  --sbb-link-color-normal: var(--sbb-color-black);
+  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-color: currentcolor;
+}
+
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-link-variables--active-negative {
+  --sbb-link-color-normal: var(--sbb-color-cement);
+  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-color: currentcolor;
+}
+
 @mixin link-variables {
   @include link-common-variables;
 

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -92,11 +92,13 @@ $sbb-color-milk: #f6f6f6;
 $sbb-color-red: #eb0000;
 $sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
 $sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
+$sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
 $sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
 $sbb-color-red-mode-dark: #ff3838;
 $sbb-color-red125: #c60018;
 $sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
 $sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
+$sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
 $sbb-color-red150: #a20013;
 $sbb-color-royal: #06348b;
 $sbb-color-royal125: #032668;
@@ -108,6 +110,7 @@ $sbb-color-white-alpha-30: rgba(255, 255, 255, 0.3);
 $sbb-color-white-alpha-50: rgba(255, 255, 255, 0.5);
 $sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
 $sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
+$sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
 $sbb-color-sky: #0079c7;
 $sbb-color-night: #143a85;
 $sbb-color-violet: #6f2282;

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Oct 2024 06:34:22 GMT
+ * Generated on Wed, 19 Mar 2025 15:25:09 GMT
  */
 
 @mixin lyne-design-tokens-css-variables {
@@ -144,11 +144,13 @@
   --sbb-color-red: #eb0000;
   --sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
   --sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
+  --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
   --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
   --sbb-color-red-mode-dark: #ff3838;
   --sbb-color-red125: #c60018;
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
+  --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
   --sbb-color-red150: #a20013;
   --sbb-color-royal: #06348b;
   --sbb-color-royal125: #032668;
@@ -160,6 +162,7 @@
   --sbb-color-white-alpha-50: rgba(255, 255, 255, 0.5);
   --sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
   --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
   --sbb-color-sky: #0079c7;
   --sbb-color-night: #143a85;
   --sbb-color-violet: #6f2282;

package/core.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Oct 2024 06:34:22 GMT
+ * Generated on Wed, 19 Mar 2025 15:25:09 GMT
  */
 *,
 ::before,
@@ -149,11 +149,13 @@
   --sbb-color-red: #eb0000;
   --sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
   --sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
+  --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
   --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
   --sbb-color-red-mode-dark: #ff3838;
   --sbb-color-red125: #c60018;
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
+  --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
   --sbb-color-red150: #a20013;
   --sbb-color-royal: #06348b;
   --sbb-color-royal125: #032668;
@@ -165,6 +167,7 @@
   --sbb-color-white-alpha-50: rgba(255, 255, 255, 0.5);
   --sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
   --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
   --sbb-color-sky: #0079c7;
   --sbb-color-night: #143a85;
   --sbb-color-violet: #6f2282;
@@ -1428,4 +1431,51 @@ sbb-train-formation[view=top] sbb-train-wagon {
   --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
   --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+}
+
+sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+
+sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is([data-state=closing],
+[data-state=closed],
+[mode=over],
+[data-mode-over-forced])),
+:not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-start: 0;
+}
+
+sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is([data-state=closing],
+[data-state=closed],
+[mode=over],
+[data-mode-over-forced])),
+:not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-end: 0;
+}
+
+sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], [data-mode-over-forced]):is([data-state=opening],
+[data-state=opened])) {
+  --sbb-sidebar-container__backdrop-visibility: visible;
+  --sbb-sidebar-container-backdrop-opacity: 0.4;
+}
+
+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;
+}
+
+sbb-icon-sidebar-content + sbb-icon-sidebar {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+}
+
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+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);
 }