Add styling for survey progress bar

client/src/styles/_survey.scss

@@ -26,8 +26,58 @@
     margin-bottom: $medium-spacing;
   }
 
+  &__body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    //grid-template-areas: "content content" "navigation progress";
+
+    &--completed {
+      flex-direction: column;
+    }
+  }
+
+  &__page {
+    width: 100%;
+    //grid-area: content;
+    order: 1;
+  }
+
+  &__footer {
+    //grid-area: navigation;
+    order: 2;
+  }
+
+  $progress-margin-right: 120px;
+  &__progress {
+    background-color: $color-silver;
+    height: 0.3em;
+    order: 3;
+    width: 40%;
+    //grid-area: progress;
+    position: relative;
+    margin-right: $progress-margin-right;
+    box-sizing: border-box;
+    display: flex;
+    align-content: center;
+  }
+
+  &__progress-bar {
+    background-color: $color-brand;
+
+    height: 100%;
+
+    > span {
+      position: absolute;
+      right: -$progress-margin-right;
+      top: -0.25em;
+      @include regular-text;
+    }
+
     &__radiogroup-group {
       display: flex;
       flex-direction: column;
+
+    }
   }
 }

client/src/survey.config.js

@@ -1,26 +1,26 @@
 export const css = {
   'root': 'survey',
-  'header': '',
-  'body': '',
+  'header': 'survey__header',
+  'body': 'survey__body',
   'bodyEmpty': '',
-  'footer': '',
+  'footer': 'survey__footer',
   'navigationButton': 'button button--primary',
-  'completedPage': '',
+  'completedPage': 'survey__body--completed',
   'navigation': {
     'complete': 'button button--primary',
     'prev': 'button button--primary',
     'next': 'button button--primary',
     'start': 'button button--primary'
   },
-  'progress': 'progress center-block mx-auto mb-4',
-  'progressBar': 'progress-bar',
+  'progress': 'survey__progress',
+  'progressBar': 'survey__progress-bar',
   'page': {
-    'root': '',
+    'root': 'survey__page',
     'title': '',
     'survey__page-description': ''
   },
-  'pageTitle': '',
-  'pageDescription': 'small',
+  'pageTitle': 'survey__page-title',
+  'pageDescription': 'survey__page-description',
   'row': 'sv_row',
   'question': {
     'mainRoot': 'survey__question question',
@@ -126,9 +126,9 @@ export const css = {
     'root': 'btn-group',
     'item': 'btn btn-default btn-secondary',
     'selected': 'active',
-    'minText': 'sv_q_rating_min_text',
-    'itemText': 'sv_q_rating_item_text',
-    'maxText': 'sv_q_rating_max_text'
+    'minText': '',
+    'itemText': '',
+    'maxText': ''
   },
   'text': 'survey__input skillbox-input',
   'expression': 'survey__input skillbox-input',
@@ -141,7 +141,7 @@ export const css = {
     'removeFile': 'sv_q_file_remove'
   },
   'saveData': {
-    'root': '',
+    'root': 'save-data',
     'saving': 'alert alert-info',
     'error': 'alert alert-danger',
     'success': 'alert alert-success',