Add radiobutton styling to survey

client/src/components/icons/Tick.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>tick</title>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72"/>
   </svg>
 </template>

client/src/components/inputs/BaseInput.vue

@@ -34,77 +34,3 @@
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .base-input-container {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    margin-right: 10px;
-    cursor: pointer;
-    width: auto;
-
-    svg {
-      width: 15px;
-    }
-
-    &__input {
-      display: none;
-    }
-
-    &__input:checked + &__checkbox {
-      border: 0;
-      background-color: $color-brand;
-
-      svg {
-        display: block;
-        fill: $color-white;
-      }
-    }
-
-    &__icon {
-      width: 20px;
-      height: 20px;
-      display: flex;
-      border: 2px solid $color-silver-dark;
-      justify-content: center;
-      align-items: center;
-      box-sizing: border-box;
-      margin-right: 10px;
-      transition: background-color 0.5s;
-    }
-
-    &__checkbox {
-      border-radius: 3px;
-
-      svg {
-        display: none;
-        transition: all 0.7s;
-      }
-    }
-
-    &__radiobutton {
-      border-radius: 20px;
-
-      svg {
-        display: none;
-        fill: $color-brand;
-        width: 12px;
-      }
-    }
-
-    &__input:checked + &__radiobutton {
-      border-color: $color-brand;
-
-      svg {
-        display: block;
-      }
-    }
-
-    &__label {
-      font-family: $sans-serif-font-family;
-    }
-  }
-</style>

client/src/pages/survey.vue

@@ -68,6 +68,7 @@
         });
 
         survey.css = css;
+        survey.showProgressBar = 'bottom';
 
         return survey;
       }

client/src/styles/_forms.scss

@@ -15,6 +15,7 @@
   &--error {
     border-color: $color-accent-3-dark;
   }
+
 }
 
 .skillbox-textarea {
@@ -22,9 +23,111 @@
   height: 120px;
 }
 
-
 .skillbox-auto-grow {
   overflow: hidden;
   resize: none;
   outline: 0;
 }
+
+.base-input-container {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 10px;
+  cursor: pointer;
+  width: auto;
+
+  svg {
+    width: 15px;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__input:checked + &__checkbox {
+    border: 0;
+    background-color: $color-brand;
+
+    svg {
+      display: block;
+      fill: $color-white;
+    }
+  }
+
+  &__icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    border: 2px solid $color-silver-dark;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    margin-right: 10px;
+    transition: background-color 0.5s;
+  }
+
+  &__checkbox {
+    border-radius: 3px;
+
+    svg {
+      display: none;
+      transition: all 0.7s;
+    }
+  }
+
+  &__radiobutton {
+    border-radius: 20px;
+
+    svg {
+      display: none;
+      fill: $color-brand;
+      width: 12px;
+    }
+  }
+
+  &__input:checked + &__radiobutton {
+    border-color: $color-brand;
+
+    svg {
+      display: block;
+    }
+  }
+
+  &__label {
+    font-family: $sans-serif-font-family;
+  }
+
+  $base: &;
+
+  &--survey {
+    margin-bottom: $small-spacing;
+
+    #{$base}__input:checked + #{$base}__radiobutton {
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="%2317A887" r="25" cx="50" cy="50"></circle></svg>');
+      background-size: 12px 12px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      width: 20px;
+      height: 20px;
+    }
+
+    #{$base}__label-container {
+      display: -ms-grid;
+      display: grid;
+      grid-template-columns: 30px 1fr;
+      align-items: start;
+      justify-content: center;
+    }
+
+    #{$base}__label {
+      grid-row: 1;
+      grid-column: 2;
+      line-height: 1.5;
+    }
+
+    #{$base}__radiobutton {
+      margin-top: 1px;
+    }
+  }
+}

client/src/styles/_survey.scss

@@ -25,4 +25,9 @@
     width: 100%;
     margin-bottom: $medium-spacing;
   }
+
+  &__radiogroup-group {
+    display: flex;
+    flex-direction: column;
+  }
 }

client/src/survey.config.js

@@ -103,12 +103,12 @@ export const css = {
     'itemValue': 'sv_q_mt_item_value skillbox-input'
   },
   'radiogroup': {
-    'root': 'sv_qcbc form-inline',
+    'root': 'survey__radiogroup-group',
-    'item': 'radio',
+    'item': 'base-input-container base-input-container--survey',
-    'label': '',
+    'label': 'base-input-container__label-container',
-    'itemControl': '',
+    'itemControl': 'base-input-container__input',
-    'controlLabel': '',
+    'controlLabel': 'base-input-container__label',
-    'materialDecorator': 'circle',
+    'materialDecorator': 'base-input-container__radiobutton base-input-container__icon',
     'other': 'sv_q_radiogroup_other skillbox-input',
     'clearButton': 'sv_q_radiogroup_clear button',
     'column': 'sv_q_select_column'