css files created for each components

regarding #78 Co-authored-by: Martin Wagner <martin.wagner@fau.de>
amosproj · Jun 10, 2021 · e4d07ee · e4d07ee
1 parent e7dcd97
commit e4d07ee
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 25 deletions.
diff --git a/frontend/src/components/details/charts_tables.css b/frontend/src/components/details/charts_tables.css
@@ -1,3 +1,5 @@
+@import url('theme.css');
+
 /* Chart related Styling */
 
 /* Reconfiguration of the title style on chart  */

diff --git a/frontend/src/components/details/navbar.css b/frontend/src/components/details/navbar.css
@@ -1,3 +1,5 @@
+@import url('theme.css');
+
 /* Style the navigation menu */
 .navbar {
     width: 100%;

diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css
@@ -1,3 +1,5 @@
+@import url('theme.css');
+
 /* Reconfiguration of the header bar */
 .HeaderContainer {
     height: 70;

diff --git a/frontend/src/components/sidebar/sidebar.css b/frontend/src/components/sidebar/sidebar.css
@@ -1,3 +1,5 @@
+@import url('theme.css');
+
 /* Reconfiguration of  the icon style on the side bar */
 .SideBarIconStyle {
     font-family: inherit;

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -3,32 +3,8 @@
 @import url('components/header/header.css');
 @import url('components/details/charts_tables.css');
 @import url('components/sidebar/sidebar.css');
+@import url('theme.css');
 
-/* Project wide definition of stlye */
-:root {
-    /* --global--concept--size */
-    --global--header--color: #ededed;
-    --global--icon--color: #00b300;
-    --global--panel--color: 2rem;
-    --global--text--color: 0.5rem;
-
-    /* --global--concept--PropertyCamelCase */
-    --global--header-title--FontSize: 24px;
-    --global--header-icon-title--FontSize: 35px;
-    --global--header-back-icon-title--FontSize: 20px;
-    --global--panel-title--FontSize: 22px;
-    --global--icon-title--FontSize: 18px;
-    --global--text--FontSize: 18px;
-    --global--text-label--FontSize: 16px;
-    --global--text-title--FontSize: 20px;
-    --global--text-subtitle--FontSize: 19px;
-    --global--chart-items--FontSize: 10px;
-    --global--table-items--FontSize: 10px;
-    --global--button-title--FontSize: 14px;
-
-    /* --global--state--PropertyCamelCase */
-    --global--hover--BackgroundColor: #ccc;
-}
 
 /* css resets */
 /* Box sizing rules */

diff --git a/frontend/src/theme.css b/frontend/src/theme.css
@@ -0,0 +1,25 @@
+/* Project wide definition of stlye */
+:root {
+    /* --global--concept--size */
+    --global--header--color: #ededed;
+    --global--icon--color: #00b300;
+    --global--panel--color: 2rem;
+    --global--text--color: 0.5rem;
+
+    /* --global--concept--PropertyCamelCase */
+    --global--header-title--FontSize: 24px;
+    --global--header-icon-title--FontSize: 35px;
+    --global--header-back-icon-title--FontSize: 20px;
+    --global--panel-title--FontSize: 22px;
+    --global--icon-title--FontSize: 18px;
+    --global--text--FontSize: 18px;
+    --global--text-label--FontSize: 16px;
+    --global--text-title--FontSize: 20px;
+    --global--text-subtitle--FontSize: 19px;
+    --global--chart-items--FontSize: 10px;
+    --global--table-items--FontSize: 10px;
+    --global--button-title--FontSize: 14px;
+
+    /* --global--state--PropertyCamelCase */
+    --global--hover--BackgroundColor: #ccc;
+}