Fixed #8125 - Button navigation issues (#8483)

* Fixed #8125 - Button navigation issues

* Work for #8125 - Button navigation issues - fixed circles should be aligned to survey edges

* Work for #8125 - Button navigation issues - fixed circles should be aligned to survey edges

* Updated etalons

* Updated etalons

---------

Co-authored-by: tsv2013 <[email protected]>

src/defaultV2-theme/blocks/sd-progress-buttons.scss

@@ -18,12 +18,12 @@
   padding: calcSize(4) calcSize(5) calcSize(2) calcSize(5);
   display: flex;
   flex-direction: column;
-  transition: 0.25s padding ease-out;
 }
 
 .sd-progress-buttons__list-container {
   display: flex;
   overflow: hidden;
+  margin: 0 calcSize(-0.75);
 }
 
 .sd-progress-buttons__connector {
@@ -81,14 +81,14 @@
 
       .sd-progress-buttons__button-background {
         position: absolute;
-        width: 100%;
-        height: 100%;
+        width: calcSize(2.5);
+        height: calcSize(2);
         top: calcSize(-0.5);
-        left: calcSize(-0.5);
+        left: calcSize(-1.25);
         background-color: $background-dim;
         z-index: -2;
-        border: calcSize(0.5) solid $background-dim;
-        border-radius: 50%;
+        // border: calcSize(0.5) solid $background-dim;
+        // border-radius: 50%;
       }
 
       .sd-progress-buttons__button-content {
@@ -109,11 +109,15 @@
 
   li:hover .sd-progress-buttons__button {
     color: $primary;
-    padding: calcSize(0.25);
+    padding: calcSize(0.5);
     margin: calcSize(0.25);
-    border: calcSize(0.75) solid $primary;
+    border: calcSize(0.5) solid $primary;
     background-color: $primary-foreground;
 
+    .sd-progress-buttons__button-background {
+      left: calcSize(-0.75);
+    }
+
     .sd-progress-buttons__button-content {
       top: calcSize(-0.75);
       left: calcSize(-0.75);
@@ -149,8 +153,12 @@
       border: calcSize(0.5) solid $primary;
       background-color: $primary-foreground;
       color: $primary;
-      padding: calcSize(0.25);
-      margin: calcSize(0.5);
+      padding: calcSize(0.5);
+      margin: calcSize(0.25);
+
+      .sd-progress-buttons__button-background {
+        left: calcSize(-0.75);
+      }
 
       .sd-progress-buttons__button-content {
         border: calcSize(0.5) solid $primary;
@@ -225,6 +233,10 @@
 }
 
 .sd-progress-buttons--numbered {
+  .sd-progress-buttons__list-container {
+    margin: 0 calcSize(-1);
+  }
+
   .sd-progress-buttons__list {
     li {
       &:not(:first-child)>.sd-progress-buttons__connector {
@@ -236,15 +248,27 @@
       .sd-progress-buttons__button {
         width: calcSize(2);
         height: calcSize(2);
+
+        .sd-progress-buttons__button-background {
+          height: calcSize(3);
+          width: calcSize(4.5);
+        }
+
       }
 
       &:hover .sd-progress-buttons__button {
-        padding: calcSize(0.25);
+        padding: calcSize(0.5);
       }
     }
   }
 }
 
+.sd-progress-buttons--with-titles {
+  .sd-progress-buttons__list-container {
+    margin: 0;
+  }
+}
+
 .sd-root-modern--mobile,
 .sd-progress-buttons--no-titles {
   .sd-progress-buttons__list {

src/progress-buttons.ts

@@ -97,7 +97,7 @@ export class ProgressButtons extends Base {
   }
   public get progressWidth(): string {
     if (this.isFitToSurveyWidth) {
-      return this.survey.width;
+      return this.survey.renderedWidth;
     }
     return "";
   }