ProgressBar: Update progressbar status paddings for Generic & Fluent (#30383)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

apps/demos/testing/etalons/CardView-FieldTemplate (fluent.blue.light).png

@@ -80,7 +80,6 @@
   top: 0;
   left: 0;
   width: auto;
-  height: 20px;
   font-size: 12px;
 }
 

apps/demos/testing/etalons/CardView-FieldTemplate (material.blue.light).png

@@ -73,9 +73,8 @@
 }
 
 .dx-progressbar-status {
-  margin-top: $progressbar-status-height;
+  padding-top: $progressbar-status-margin-top;
   color: $progressbar-label-color;
-  height: $progressbar-status-height;
 
   .dx-progressbar .dx-position-right & {
     padding-top: 0;

apps/demos/testing/etalons/CardView-FieldTemplate.png

@@ -4,13 +4,15 @@
 
 $progressbar-height: null !default;
 $progressbar-border-radius: $base-border-radius !default;
-$progressbar-status-height: 16px !default;
+$progressbar-status-margin-top: null !default;
 $progressbar-indeterminate-background-width: 90%;
 
 @if $size == "default" {
   $progressbar-height: 4px !default;
+  $progressbar-status-margin-top: 12px !default;
 }
 
 @else if $size == "compact" {
   $progressbar-height: 2px !default;
+  $progressbar-status-margin-top: 8px !default;
 }

apps/demos/testing/etalons/ProgressBar-Overview (fluent.blue.light).png

@@ -22,6 +22,14 @@ $generic-progress-bar-border: 1px solid $progressbar-border-color;
   border-radius: $generic-progressbar-border-radius;
 }
 
+.dx-progressbar-status {
+  padding-top: $progressbar-status-padding-top;
+
+  .dx-progressbar .dx-position-right & {
+    padding-top: 0;
+  }
+}
+
 .dx-progressbar-range {
   position: relative;
   border: 1px solid $progressbar-range-border-color;

apps/demos/testing/etalons/ProgressBar-Overview.png

@@ -2,3 +2,12 @@
 
 // adduse
 
+$progressbar-status-padding-top: null !default;
+
+@if $size == "default" {
+  $progressbar-status-padding-top: 8px !default;
+}
+
+@else if $size == "compact" {
+  $progressbar-status-padding-top: 4px !default;
+}