fix(sbb-selection-panel): fix transition of border-width [second atte…

…mpt] (#2469)
sbb-design-systems · Mar 11, 2024 · 942bf45 · 942bf45
1 parent eee3651
commit 942bf45
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/src/components/selection-panel/selection-panel.scss b/src/components/selection-panel/selection-panel.scss
@@ -75,20 +75,28 @@ $open-anim-opacity-to: 1;
   position: relative;
   width: 100%;
   background-color: var(--sbb-selection-panel-background);
+  border-radius: var(--sbb-selection-panel-border-radius);
+
+  // To provide a smooth transition of width, we use box-shadow to imitate border.
+  box-shadow: inset 0 0 0 var(--sbb-selection-panel-border-width)
+    var(--sbb-selection-panel-border-color);
+
+  transition: {
+    duration: var(--sbb-selection-panel-animation-duration);
+    timing-function: var(--sbb-animation-easing);
+    property: box-shadow;
+  }
 
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    border: var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);
-    border-radius: var(--sbb-selection-panel-border-radius);
-
-    transition: {
-      duration: var(--sbb-selection-panel-animation-duration);
-      timing-function: var(--sbb-animation-easing);
-      property: border-color, border-width;
+  // For high contrast mode we need a real border
+  @include sbb.if-forced-colors {
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      border: var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);
+      border-radius: var(--sbb-selection-panel-border-radius);
     }
   }
 }