robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(styles): replace deprecated step-nav Sass division

Browse Source
This commit is contained in:
robbond
2026-11-03 13:15:47 +00:00
parent 697b1adc5f
commit adcf017d49
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/sass/patterns/_step-by-step-nav.scss
+12 -10
View File
@@ -1,6 +1,8 @@
// Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
// Note - this code for prototype purposes only. It is not production code.
@use "sass:math";
$stroke-width: 2px;
$stroke-width-large: 3px;
$number-circle-size: 26px;
@@ -19,12 +21,12 @@ $top-border: solid 2px govuk-colour("mid-grey");
@mixin step-nav-line-position {
left: 0;
margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
margin-left: math.div($number-circle-size, 2) - math.div($stroke-width, 2);
}
@mixin step-nav-line-position-large {
left: 0;
margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
margin-left: math.div($number-circle-size-large, 2) - math.div($stroke-width-large, 2);
border-width: $stroke-width-large;
}
@@ -149,8 +151,8 @@ $top-border: solid 2px govuk-colour("mid-grey");
z-index: 6;
bottom: 0;
left: 0;
margin-left: $number-circle-size / 4;
width: $number-circle-size / 2;
margin-left: math.div($number-circle-size, 4);
width: math.div($number-circle-size, 2);
height: 0;
border-bottom: solid $stroke-width govuk-colour("mid-grey");
}
@@ -171,8 +173,8 @@ $top-border: solid 2px govuk-colour("mid-grey");
.app-step-nav--large & {
@include govuk-media-query($from: tablet) {
&:before {
margin-left: $number-circle-size-large / 4;
width: $number-circle-size-large / 2;
margin-left: math.div($number-circle-size-large, 4);
width: math.div($number-circle-size-large, 2);
border-width: $stroke-width-large;
}
@@ -418,9 +420,9 @@ $top-border: solid 2px govuk-colour("mid-grey");
z-index: 5;
top: 0.6em; // position the dot to align with the first row of text in the link
left: -(govuk-spacing(6) + govuk-spacing(3));
margin-top: -($stroke-width / 2);
margin-left: ($number-circle-size / 2);
width: $number-circle-size / 2;
margin-top: -(math.div($stroke-width, 2));
margin-left: math.div($number-circle-size, 2);
width: math.div($number-circle-size, 2);
height: $stroke-width;
background: govuk-colour("black");
}
@@ -429,7 +431,7 @@ $top-border: solid 2px govuk-colour("mid-grey");
@include govuk-media-query($from: tablet) {
&:before {
left: -(govuk-spacing(9));
margin-left: ($number-circle-size-large / 2);
margin-left: math.div($number-circle-size-large, 2);
height: $stroke-width-large;
}
}