fix(progressbar): display % in black if the value is too low

fix gravitee-io/issues#1304
gravitee-io · Jun 12, 2018 · a100776 · a100776
1 parent aa228e2
commit a100776
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/progressbar/progress-bar.html b/src/components/progressbar/progress-bar.html
@@ -16,7 +16,7 @@
 
 -->
 <div class="progress">
-  <div class="progress-bar" ng-class="{'progress-bar-success': $ctrl.value >= 95, 'progress-bar-warning': $ctrl.value < 95 && $ctrl.value >= 80 , 'progress-bar-danger': $ctrl.value < 80}" role="progressbar" aria-valuenow="{{$ctrl.value | number: 0 }}" aria-valuemin="0" aria-valuemax="100" ng-style="{width: $ctrl.value + '%'}">
+  <div class="progress-bar" ng-class="{'progress-bar-success': $ctrl.value >= 95, 'progress-bar-warning': $ctrl.value < 95 && $ctrl.value >= 80 , 'progress-bar-danger': $ctrl.value < 80 && $ctrl.value >= 30, 'progress-bar-fatal': $ctrl.value < 30 }" role="progressbar" aria-valuenow="{{$ctrl.value | number: 0 }}" aria-valuemin="0" aria-valuemax="100" ng-style="{width: $ctrl.value + '%'}">
     {{$ctrl.value | number: 0 }}%
   </div>
 </div>
diff --git a/src/management/api/proxy/backend/healthcheck/_healthcheck.scss b/src/management/api/proxy/backend/healthcheck/_healthcheck.scss
@@ -32,3 +32,8 @@ md-sidenav.healthcheck {
 .configuration-card fieldset.form-disabled {
   background-color: #E1E2E1;
 }
+
+.progress-bar-fatal {
+  background-color: #d9534f;
+  color: black;
+}