fix(styles): stepper scss (#3105)

swisspost · May 23, 2024 · ccb936d · ccb936d
1 parent fef81fc
commit ccb936d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git a/packages/internet-header/src/components/post-klp-login-widget/readme.md b/packages/internet-header/src/components/post-klp-login-widget/readme.md
@@ -25,6 +25,13 @@ Type: `Promise<void>`
 
 
 
+## CSS Custom Properties
+
+| Name                                                                                                                                                                                                                                                                                                                                                                    | Description |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `------------------------------------------------------------------------------------------------ Copyright 2014 by Swiss Post, Information Technology Services ------------------------------------------------------------------------------------------------ $Id$ ------------------------------------------------------------------------------------------------` |             |
+
+
 ## Dependencies
 
 ### Used by

diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @use './../mixins/icons' as icons-mx;
 @use './../mixins/size' as size-mx;
 @use './../mixins/utilities';
@@ -27,25 +29,25 @@
   overflow: hidden;
 
   // the first column is half a step wide to make sure the separators are the same size even on small screens
-  grid-template-columns: stepper.$stepper-indicator-size / 2;
+  grid-template-columns: math.div(stepper.$stepper-indicator-size, 2);
 
   // all other columns are 1 fraction of the available space ase we don't know the number of steps
   grid-auto-columns: minmax(0, 1fr);
 
   // we use a padding and negative margin on the last step for the same reason we need the first column
-  padding-inline-end: stepper.$stepper-indicator-size / 2;
+  padding-inline-end: math.div(stepper.$stepper-indicator-size, 2);
 }
 
 .stepper-item {
   grid-row: 1;
   position: relative;
 
   &:not(:first-child) {
-    padding-inline-start: stepper.$stepper-link-spacing / 2;
+    padding-inline-start: math.div(stepper.$stepper-link-spacing, 2);
   }
 
   &:not(:last-child) {
-    padding-inline-end: stepper.$stepper-link-spacing / 2;
+    padding-inline-end: math.div(stepper.$stepper-link-spacing, 2);
     grid-column: span 2;
   }
 
@@ -55,7 +57,7 @@
     content: '';
     display: block;
     position: absolute;
-    inset-block-start: (stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2;
+    inset-block-start: math.div((stepper.$stepper-indicator-size - stepper.$stepper-bar-height), 2);
     height: stepper.$stepper-bar-height;
     background-color: stepper.$stepper-bar-color;
     inset-inline: 0 0;
@@ -106,7 +108,7 @@
 
   .stepper-item:last-child > & {
     margin-inline-start: auto;
-    margin-inline-end: -1 * stepper.$stepper-indicator-size / 2; // negative margin matching the container padding
+    margin-inline-end: -1 * math.div(stepper.$stepper-indicator-size, 2); // negative margin matching the container padding
     text-align: end;
   }
 
@@ -159,23 +161,29 @@
   @include icons-mx.icon(2105);
   display: block;
   position: absolute;
-  top: (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2;
+  top: math.div((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size), 2);
   z-index: 1;
   height: stepper.$stepper-indicator-check-icon-size;
   width: stepper.$stepper-indicator-check-icon-size;
   transition: stepper.$stepper-indicator-transition;
   color: stepper.$stepper-indicator-color;
 
   .stepper-item:first-child > & {
-    left: (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2;
+    left: math.div(
+      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
+      2
+    );
   }
 
   .stepper-item:not(:first-child, :last-child) > & {
-    left: calc(50% - #{stepper.$stepper-indicator-check-icon-size / 2});
+    left: calc(50% - #{math.div(stepper.$stepper-indicator-check-icon-size, 2)});
   }
 
   .stepper-item:last-child > & {
-    right: (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2;
+    right: math.div(
+      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
+      2
+    );
   }
 
   // show only for completed steps
@@ -229,7 +237,10 @@
     // progress bar
     &::before {
       grid-row: -1;
-      margin-block-start: (stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2;
+      margin-block-start: math.div(
+        (stepper.$stepper-indicator-size - stepper.$stepper-bar-height),
+        2
+      );
       position: static;
     }