EN · DE · RU · FR · ES

#2729: ConsumptionBar.module.scss

projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss SCSS stylesheet, projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss 56 lines · 41 code · 1 comments · 14 blank
Purpose: React webapp: ConsumptionBar.module.scss. ConsumptionBar.module.scss is part of the ProjectForge open-source project management application.

Source (first 100 lines)

@import "../../../assets/style/theming";

.consumption {
  margin-top: 4px;
}

div.progress {
  // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

div.progress div {
}

div.progress-none {
  background-color: #eeeeee;
}

div.progress-done {
  background-color: #eeeeee;
}

div.progress-done div {
  background-color: map_get($theme-colors, success);
}

div.progress-80 {
  background-color: #eeeeee;
}

div.progress-80 div {
  background-color: #fffe2e;
}

div.progress-90 {
  background-color: #eeeeee;
}

div.progress-90 div {
  background-color: map_get($theme-colors, warning);
}

div.progress-overbooked {
  background-color: map_get($theme-colors, danger);
}

div.progress-overbooked div {
  background-color: map_get($theme-colors, warning);
}

div.progress-overbooked-min {
  background-color: map_get($theme-colors, danger);
}

div.progress-overbooked-min div {
  background-color: #eeeeee;
}

Git History

3490f27f1 fix calendar and timesheet page
a595e2836 Consumption bar finished (in comparison to old Wicket version).
65de7e568 use bootstraps progress bar in consumption bar
a45f08da5 fix mixins.scss usage
82a7cc0be Consumption bars in Task tree.

3490f27f1

fix calendar and timesheet page
3490f27f105c220263fa22ff716d907beb75c5a5
diff --git a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
index 2d63cf43b..378a15a24 100644
--- a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
+++ b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
@@ -1,7 +1,7 @@
 @import "../../../assets/style/theming";
 
 .consumption {
-  margin-top: 20px;
+  margin-top: 4px;
 }
 
 div.progress {

a595e2836

Consumption bar finished (in comparison to old Wicket version).
a595e283651489f79234ab69504562630737cd57
diff --git a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
index 0f42c3ca5..2d63cf43b 100644
--- a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
+++ b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
@@ -1,30 +1,14 @@
 @import "../../../assets/style/theming";
 
 .consumption {
-  width: 20em;
   margin-top: 20px;
 }
 
 div.progress {
-  margin-top: 5px;
-  margin-bottom: 0;
-  line-height: 10px;
-  width: 50px;
-  height: 8px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #aaa;
-  display: inline-block !important;
-  background-image: none;
-  overflow: hidden;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 div.progress div {
-  display: block !important;
-  border-right: 1px solid #555;
-  height: 8px;
 }
 
 div.progress-none {
@@ -44,7 +28,7 @@ div.progress-80 {
 }
 
 div.progress-80 div {
-  background-color: map_get($theme-colors, info);
+  background-color: #fffe2e;
 }
 
 div.progress-90 {

65de7e568

use bootstraps progress bar in consumption bar
65de7e568a462bb9b5c27d34b6418e465de1a9cd
diff --git a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
index 30c3fad7c..0f42c3ca5 100644
--- a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
+++ b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
@@ -1,3 +1,10 @@
+@import "../../../assets/style/theming";
+
+.consumption {
+  width: 20em;
+  margin-top: 20px;
+}
+
 div.progress {
   margin-top: 5px;
   margin-bottom: 0;
@@ -29,7 +36,7 @@ div.progress-done {
 }
 
 div.progress-done div {
-  background-color: #099900;
+  background-color: map_get($theme-colors, success);
 }
 
 div.progress-80 {
@@ -37,7 +44,7 @@ div.progress-80 {
 }
 
 div.progress-80 div {
-  background-color: #ffff00;
+  background-color: map_get($theme-colors, info);
 }
 
 div.progress-90 {
@@ -45,19 +52,19 @@ div.progress-90 {
 }
 
 div.progress-90 div {
-  background-color: #ff8000;
+  background-color: map_get($theme-colors, warning);
 }
 
 div.progress-overbooked {
-  background-color: #ff0000;
+  background-color: map_get($theme-colors, danger);
 }
 
 div.progress-overbooked div {
-  background-color: #ff8000;
+  background-color: map_get($theme-colors, warning);
 }
 
 div.progress-overbooked-min {
-  background-color: #ff0000;
+  background-color: map_get($theme-colors, danger);
 }
 
 div.progress-overbooked-min div {

a45f08da5

fix mixins.scss usage
a45f08da571a5954582de8bb22a7e5991d19ef7a
diff --git a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
index 453b8c106..30c3fad7c 100644
--- a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
+++ b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
@@ -1,5 +1,3 @@
-@import url(../../../assets/style/mixins.scss);
-
 div.progress {
   margin-top: 5px;
   margin-bottom: 0;

82a7cc0be

Consumption bars in Task tree.
82a7cc0bec6a706e4fb4ac2d4d756dea6eb91530
diff --git a/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
new file mode 100644
index 000000000..453b8c106
--- /dev/null
+++ b/projectforge-webapp/src/containers/panel/task/ConsumptionBar.module.scss
@@ -0,0 +1,67 @@
+@import url(../../../assets/style/mixins.scss);
+
+div.progress {
+  margin-top: 5px;
+  margin-bottom: 0;
+  line-height: 10px;
+  width: 50px;
+  height: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #aaa;
+  display: inline-block !important;
+  background-image: none;
+  overflow: hidden;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+div.progress div {
+  display: block !important;
+  border-right: 1px solid #555;
+  height: 8px;
+}
+
+div.progress-none {
+  background-color: #eeeeee;
+}
+
+div.progress-done {
+  background-color: #eeeeee;
+}
+
+div.progress-done div {
+  background-color: #099900;
+}
+
+div.progress-80 {
+  background-color: #eeeeee;
+}
+
+div.progress-80 div {
+  background-color: #ffff00;
+}
+
+div.progress-90 {
+  background-color: #eeeeee;
+}
+
+div.progress-90 div {
+  background-color: #ff8000;
+}
+
+div.progress-overbooked {