survey-react 1.9.134 → 1.9.136

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/defaultV2.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.134
2
+ * surveyjs - Survey JavaScript library v1.9.136
3
3
  * Copyright (c) 2015-2024 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -1692,6 +1692,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1692
1692
  white-space: nowrap;
1693
1693
  }
1694
1694
 
1695
+ .sv-list__item-text--wrap span {
1696
+ white-space: normal;
1697
+ word-wrap: break-word;
1698
+ }
1699
+
1695
1700
  .sv-list__container {
1696
1701
  position: relative;
1697
1702
  display: flex;
@@ -1978,8 +1983,6 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
1978
1983
  padding-bottom: var(--sd-base-padding);
1979
1984
  background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
1980
1985
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1981
- display: flex;
1982
- flex-direction: column;
1983
1986
  }
1984
1987
 
1985
1988
  .sd-element--with-frame.sd-element--compact {
@@ -2061,6 +2064,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
2061
2064
  }
2062
2065
  .sd-element--with-frame.sd-question--error-bottom {
2063
2066
  padding-bottom: 0;
2067
+ display: flex;
2068
+ flex-direction: column;
2064
2069
  }
2065
2070
  .sd-element--with-frame.sd-question--error-bottom > .sd-question__content {
2066
2071
  margin-bottom: var(--sd-base-padding);
@@ -2667,7 +2672,7 @@ textarea.sd-input:disabled:not(.sd-input--disabled) {
2667
2672
  background-clip: padding-box;
2668
2673
  }
2669
2674
 
2670
- .sd-root-modern:not(.sd-root-modern--mobile) .sd-table__cell:not(.sd-table__cell--actions):not(.sd-table__cell--action):not(.sd-table__cell--empty.sd-table__cell--error) {
2675
+ .sd-table.sd-table--columnsautowidth .sd-table__cell:not(.sd-table__cell--actions):not(.sd-table__cell--action):not(.sd-table__cell--empty.sd-table__cell--error) {
2671
2676
  width: 10000px;
2672
2677
  }
2673
2678
 
@@ -4251,6 +4256,8 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4251
4256
  padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4252
4257
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4253
4258
  border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
4259
+ max-width: 100%;
4260
+ box-sizing: border-box;
4254
4261
  }
4255
4262
 
4256
4263
  .sv-tagbox__item-text {
@@ -4259,6 +4266,11 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4259
4266
  text-align: center;
4260
4267
  font-weight: 600;
4261
4268
  }
4269
+ .sv-tagbox__item-text span {
4270
+ display: block;
4271
+ text-overflow: ellipsis;
4272
+ overflow: hidden;
4273
+ }
4262
4274
 
4263
4275
  .sv-tagbox__item:hover .sd-tagbox-item_clean-button,
4264
4276
  .sv-tagbox__item:focus .sd-tagbox-item_clean-button,
@@ -4531,7 +4543,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4531
4543
  }
4532
4544
 
4533
4545
  .sd-html {
4534
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4535
4546
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
4536
4547
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
4537
4548
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -4542,9 +4553,9 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4542
4553
  line-height: var(--sjs-article-font-default-lineHeight, 28px);
4543
4554
  text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
4544
4555
  text-transform: var(--sjs-article-font-default-textCase, "none");
4556
+ color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
4545
4557
  }
4546
4558
  .sd-html h1 {
4547
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4548
4559
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
4549
4560
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
4550
4561
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -4557,7 +4568,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4557
4568
  text-transform: var(--sjs-article-font-xx-large-textCase, "none");
4558
4569
  }
4559
4570
  .sd-html h2 {
4560
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4561
4571
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
4562
4572
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
4563
4573
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -4570,7 +4580,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4570
4580
  text-transform: var(--sjs-article-font-x-large-textCase, "none");
4571
4581
  }
4572
4582
  .sd-html h3 {
4573
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4574
4583
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
4575
4584
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
4576
4585
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -4585,7 +4594,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4585
4594
  .sd-html h4,
4586
4595
  .sd-html h5,
4587
4596
  .sd-html h6 {
4588
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4589
4597
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
4590
4598
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
4591
4599
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -4601,7 +4609,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4601
4609
  .sd-html span,
4602
4610
  .sd-html div,
4603
4611
  .sd-html p {
4604
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4605
4612
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
4606
4613
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
4607
4614
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -4650,6 +4657,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
4650
4657
  justify-content: center;
4651
4658
  }
4652
4659
 
4660
+ .sd-html--nested {
4661
+ color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4662
+ }
4663
+
4653
4664
  .sd-expression {
4654
4665
  color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
4655
4666
  font-size: var(--sjs-font-size, 16px);
@@ -5636,7 +5647,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5636
5647
 
5637
5648
  .sd-body--empty,
5638
5649
  .sd-body--loading {
5639
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5640
5650
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5641
5651
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5642
5652
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -5647,10 +5657,10 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5647
5657
  line-height: var(--sjs-article-font-default-lineHeight, 28px);
5648
5658
  text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
5649
5659
  text-transform: var(--sjs-article-font-default-textCase, "none");
5660
+ color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
5650
5661
  }
5651
5662
  .sd-body--empty h1,
5652
5663
  .sd-body--loading h1 {
5653
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5654
5664
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
5655
5665
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
5656
5666
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -5664,7 +5674,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5664
5674
  }
5665
5675
  .sd-body--empty h2,
5666
5676
  .sd-body--loading h2 {
5667
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5668
5677
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
5669
5678
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
5670
5679
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -5678,7 +5687,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5678
5687
  }
5679
5688
  .sd-body--empty h3,
5680
5689
  .sd-body--loading h3 {
5681
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5682
5690
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
5683
5691
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
5684
5692
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -5696,7 +5704,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5696
5704
  .sd-body--loading h4,
5697
5705
  .sd-body--loading h5,
5698
5706
  .sd-body--loading h6 {
5699
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5700
5707
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
5701
5708
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
5702
5709
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -5716,7 +5723,6 @@ legend + sv-ng-rating-item + .sd-rating__item-smiley {
5716
5723
  .sd-body--loading span,
5717
5724
  .sd-body--loading div,
5718
5725
  .sd-body--loading p {
5719
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
5720
5726
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
5721
5727
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
5722
5728
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -6040,7 +6046,6 @@ svg.sd-action--icon {
6040
6046
  box-sizing: border-box;
6041
6047
  text-align: center;
6042
6048
  height: auto;
6043
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
6044
6049
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
6045
6050
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
6046
6051
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -6051,10 +6056,10 @@ svg.sd-action--icon {
6051
6056
  line-height: var(--sjs-article-font-default-lineHeight, 28px);
6052
6057
  text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
6053
6058
  text-transform: var(--sjs-article-font-default-textCase, "none");
6059
+ color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
6054
6060
  }
6055
6061
  .sd-completedpage h1,
6056
6062
  .sd-completed-before-page h1 {
6057
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
6058
6063
  font-size: var(--sjs-article-font-xx-large-fontSize, calc(4 * (var(--sjs-font-size, 16px))));
6059
6064
  text-decoration: var(--sjs-article-font-xx-large-textDecoration, "none");
6060
6065
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -6068,7 +6073,6 @@ svg.sd-action--icon {
6068
6073
  }
6069
6074
  .sd-completedpage h2,
6070
6075
  .sd-completed-before-page h2 {
6071
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
6072
6076
  font-size: var(--sjs-article-font-x-large-fontSize, calc(3 * (var(--sjs-font-size, 16px))));
6073
6077
  text-decoration: var(--sjs-article-font-x-large-textDecoration, "none");
6074
6078
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -6082,7 +6086,6 @@ svg.sd-action--icon {
6082
6086
  }
6083
6087
  .sd-completedpage h3,
6084
6088
  .sd-completed-before-page h3 {
6085
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
6086
6089
  font-size: var(--sjs-article-font-large-fontSize, calc(2 * (var(--sjs-font-size, 16px))));
6087
6090
  text-decoration: var(--sjs-article-font-large-textDecoration, "none");
6088
6091
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -6100,7 +6103,6 @@ svg.sd-action--icon {
6100
6103
  .sd-completed-before-page h4,
6101
6104
  .sd-completed-before-page h5,
6102
6105
  .sd-completed-before-page h6 {
6103
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
6104
6106
  font-size: var(--sjs-article-font-medium-fontSize, calc(1.5 * (var(--sjs-font-size, 16px))));
6105
6107
  text-decoration: var(--sjs-article-font-medium-textDecoration, "none");
6106
6108
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -6120,7 +6122,6 @@ svg.sd-action--icon {
6120
6122
  .sd-completed-before-page span,
6121
6123
  .sd-completed-before-page div,
6122
6124
  .sd-completed-before-page p {
6123
- color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
6124
6125
  font-size: var(--sjs-article-font-default-fontSize, var(--sjs-font-size, 16px));
6125
6126
  text-decoration: var(--sjs-article-font-default-textDecoration, "none");
6126
6127
  font-family: var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family)));
@@ -6243,21 +6244,22 @@ svg.sd-action--icon {
6243
6244
  display: block;
6244
6245
  content: "";
6245
6246
  height: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6246
- background-color: var(--sjs-navigation-default, #bcbcbc);
6247
+ background-color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
6248
+ opacity: 0.5;
6247
6249
  position: absolute;
6248
6250
  bottom: calc(1.125 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6249
6251
  right: calc(50% + 4px);
6250
6252
  width: calc(100% - 4px);
6251
6253
  pointer-events: none;
6252
6254
  }
6253
- .sd-progress-buttons__list li:after {
6255
+ .sd-progress-buttons__list li .sd-progress-buttons__button {
6256
+ position: relative;
6254
6257
  display: flex;
6255
6258
  content: attr(data-page-number);
6256
6259
  width: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6257
6260
  height: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6258
6261
  margin: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6259
6262
  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
6260
- background-color: var(--sjs-navigation-default, #bcbcbc);
6261
6263
  border-radius: 50%;
6262
6264
  align-self: center;
6263
6265
  z-index: 1;
@@ -6267,29 +6269,70 @@ svg.sd-action--icon {
6267
6269
  justify-content: center;
6268
6270
  color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
6269
6271
  }
6270
- .sd-progress-buttons__list li:hover:after {
6272
+ .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-background {
6273
+ position: absolute;
6274
+ width: 100%;
6275
+ height: 100%;
6276
+ top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6277
+ left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6278
+ background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
6279
+ z-index: -2;
6280
+ border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
6281
+ border-radius: 50%;
6282
+ }
6283
+ .sd-progress-buttons__list li .sd-progress-buttons__button .sd-progress-buttons__button-content {
6284
+ position: absolute;
6285
+ width: 100%;
6286
+ height: 100%;
6287
+ top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6288
+ left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6289
+ background-color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
6290
+ opacity: 0.5;
6291
+ z-index: -1;
6292
+ border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
6293
+ border-radius: 50%;
6294
+ }
6295
+ .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
6271
6296
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
6272
6297
  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6273
6298
  margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6274
6299
  border: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
6275
6300
  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
6276
6301
  }
6302
+ .sd-progress-buttons__list li:hover .sd-progress-buttons__button .sd-progress-buttons__button-content {
6303
+ top: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6304
+ left: calc(-0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6305
+ border: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
6306
+ background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
6307
+ opacity: 1;
6308
+ }
6277
6309
  .sd-progress-buttons__list .sd-progress-buttons__list-element--passed:not(:first-child) > .sd-progress-buttons__connector {
6278
6310
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
6311
+ opacity: 1;
6312
+ }
6313
+ .sd-progress-buttons__list .sd-progress-buttons__list-element--passed .sd-progress-buttons__button {
6314
+ background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
6279
6315
  }
6280
- .sd-progress-buttons__list .sd-progress-buttons__list-element--passed:after {
6316
+ .sd-progress-buttons__list .sd-progress-buttons__list-element--passed .sd-progress-buttons__button .sd-progress-buttons__button-content {
6281
6317
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
6318
+ opacity: 1;
6282
6319
  }
6283
6320
  .sd-progress-buttons__list .sd-progress-buttons__list-element--current:not(:first-child) > .sd-progress-buttons__connector {
6284
6321
  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
6322
+ opacity: 1;
6285
6323
  }
6286
- .sd-progress-buttons__list .sd-progress-buttons__list-element--current:after {
6324
+ .sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button {
6287
6325
  border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
6288
6326
  background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
6289
6327
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
6290
6328
  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6291
6329
  margin: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6292
6330
  }
6331
+ .sd-progress-buttons__list .sd-progress-buttons__list-element--current .sd-progress-buttons__button .sd-progress-buttons__button-content {
6332
+ border: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
6333
+ background-color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
6334
+ opacity: 1;
6335
+ }
6293
6336
 
6294
6337
  .sd-progress-buttons__page-title {
6295
6338
  display: flex;
@@ -6344,11 +6387,11 @@ svg.sd-action--icon {
6344
6387
  right: calc(50% + 8px);
6345
6388
  width: calc(100% - 8px);
6346
6389
  }
6347
- .sd-progress-buttons--numbered .sd-progress-buttons__list li:after {
6390
+ .sd-progress-buttons--numbered .sd-progress-buttons__list li .sd-progress-buttons__button {
6348
6391
  width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6349
6392
  height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6350
6393
  }
6351
- .sd-progress-buttons--numbered .sd-progress-buttons__list li:hover:after {
6394
+ .sd-progress-buttons--numbered .sd-progress-buttons__list li:hover .sd-progress-buttons__button {
6352
6395
  padding: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
6353
6396
  }
6354
6397