style: fix Manuel's review

sbb-design-systems · Aug 9, 2024 · e50fbd0 · e50fbd0
1 parent 2f7ab18
commit e50fbd0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/elements/core/styles/mixins/link.scss b/src/elements/core/styles/mixins/link.scss
@@ -57,7 +57,7 @@
 @mixin link-hover-rules {
   @include mediaqueries.hover-mq($hover: true) {
     color: var(--sbb-link-color-hover);
-    text-decoration: underline;
+    text-decoration: var(--sbb-link-hover-text-decoration, underline);
   }
 }
 

diff --git a/src/elements/link-list/link-list-anchor/link-list-anchor.scss b/src/elements/link-list/link-list-anchor/link-list-anchor.scss
@@ -10,16 +10,44 @@
 
 ::slotted([data-link]) {
   --sbb-link-text-decoration: none;
+  --sbb-link-hover-text-decoration: none;
+  --sbb-link-padding: var(--sbb-spacing-fixed-1x) 0 var(--sbb-spacing-fixed-1x)
+    var(--sbb-spacing-fixed-4x);
+  --sbb-link-color-hover: var(--sbb-color-charcoal);
+  --sbb-link-color-active: var(--sbb-color-granite);
+
+  border-inline-start: var(--sbb-border-width-1x) solid var(--sbb-link-list-anchor-border-color);
+
+  :host([negative]) & {
+    --sbb-link-color-normal: var(--sbb-color-smoke);
+    --sbb-link-color-hover: var(--sbb-color-milk);
+    --sbb-link-color-active: var(--sbb-color-smoke);
+  }
+}
+
+::slotted([data-link]:is(:active, [data-active]):not([disabled])) {
+  --sbb-link-list-anchor-border-color: var(--sbb-color-iron);
+
+  :host([negative]) & {
+    --sbb-link-list-anchor-border-color: var(--sbb-color-silver);
+  }
+}
+
+::slotted([data-link]:hover:not([disabled])) {
+  --sbb-link-list-anchor-border-color: var(--sbb-color-charcoal);
+
+  :host([negative]) & {
+    --sbb-link-list-anchor-border-color: var(--sbb-color-milk);
+  }
 }
 
 .sbb-link-list-anchor {
   @include sbb.list-reset;
 
   display: flex;
-  gap: var(--sbb-spacing-fixed-2x);
   flex-flow: column;
-  margin-inline-start: var(--sbb-spacing-fixed-4x);
-  padding-inline-start: var(--sbb-spacing-fixed-4x);
-  padding-block: var(--sbb-spacing-fixed-1x);
-  border-inline-start: var(--sbb-border-width-1x) solid var(--sbb-link-list-anchor-border-color);
+
+  > li {
+    margin-inline-start: var(--sbb-spacing-fixed-4x);
+  }
 }
diff --git a/src/elements/link-list/link-list-anchor/link-list-anchor.stories.ts b/src/elements/link-list/link-list-anchor/link-list-anchor.stories.ts
@@ -22,6 +22,7 @@ const links = ['Refunds', 'Lost property office', 'Complaints', 'Praise', 'Repor
 const LinkTemplate = (args: Args): TemplateResult => html`
   <sbb-block-link
     href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
+    target="_blank"
   >
     ${args.linkTitle}
   </sbb-block-link>