Add matrix styling in surveys

client/src/styles/_forms.scss

@@ -154,4 +154,13 @@ $icon-size: 20px;
       margin-top: 1px;
     }
   }
+
+  &--matrix {
+    margin: 0;
+
+    #{$base}__label-container {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 }

client/src/styles/_survey.scss

@@ -2,6 +2,7 @@
   &__page-title {
     @include main-title;
     margin-bottom: $large-spacing*2;
+
     span {
       @include main-title;
     }
@@ -22,6 +23,7 @@
   &__question-title {
     @include heading-4;
     margin-bottom: $medium-spacing;
+
     > span > span { // weird survey.js html structure
       @include heading-4;
       line-height: $default-line-height;
@@ -57,6 +59,7 @@
   }
 
   $progress-margin-right: 140px;
+
   &__progress {
     background-color: $color-silver-light;
     height: 0.3em;
@@ -67,6 +70,10 @@
     margin-right: $progress-margin-right;
     box-sizing: border-box;
     display: flex;
+
+    > span {
+      display: none;
+    }
   }
 
   &__radiogroup-group, &__checkbox-group {
@@ -102,11 +109,51 @@
   &__completed-text {
     @include regular-text;
   }
+
+  &__matrix {
+    width: 100%;
+  }
+
+}
+
+.matrix {
+  margin-bottom: $large-spacing;
+
+  &__row {
+    display: table-row;
+    border-top: 1px solid $color-silver;
+  }
+
+  &__cell {
+    display: table-cell;
+    padding: $small-spacing/2 0;
+    text-align: left;
+    vertical-align: middle;
+    @include small-text;
+  }
+
+  thead {
+    th {
+      text-align: right;
+      @include small-text;
+      vertical-align: bottom;
+      padding: $small-spacing/2 $small-spacing;
+    }
+  }
+
+  &__radio {
+    margin: 0;
+  }
+
+  &__label {
+    display: flex;
+  }
 }
 
 .question {
 
   $question: &;
+
   &--error #{$question}__input {
     border-color: $color-error;
     box-shadow: none;

client/src/survey.config.js

@@ -73,11 +73,18 @@ export const css = {
     'root': ''
   },
   'matrix': {
-    'root': 'table table-striped',
+    'root': 'survey__matrix matrix',
-    'label': 'sv_q_m_label',
+    'label': 'base-input-container__label-container matrix__label',
-    'cellText': 'sv_q_m_cell_text',
+    'item': 'survey__matrix-item',
-    'cellTextSelected': 'sv_q_m_cell_selected bg-primary',
+    'itemValue': 'survey__matrix-item matrix__item base-input-container__input',
-    'cellLabel': 'sv_q_m_cell_label'
+    // 'itemChecked': 'survey__matrix-checked',
+    // 'itemDecorator': 'survey__matrix-decorator',
+    'materialDecorator': 'base-input-container__radiobutton base-input-container__icon matrix__radio',
+    'row': 'survey__radiogroup-group matrix__row',
+    'cell': 'base-input-container base-input-container--survey base-input-container--matrix matrix__cell',
+    'cellText': 'survey__matrix-cell-text',
+    'cellTextSelected': 'survey__matrix-cell-text--selected',
+    'cellLabel': 'survey__matrix-cell-label'
   },
   'matrixdropdown': {
     'root': 'table'