Add checkbox styling

client/src/styles/_forms.scss

@@ -112,6 +112,15 @@
       height: 20px;
     }
 
+    #{$base}__input:checked + #{$base}__checkbox {
+      background-image: url('data:image/svg+xml;utf8,<svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon fill="%23FFFFFF" 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>');
+      background-size: 12px 12px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      width: 20px;
+      height: 20px;
+    }
+
     #{$base}__label-container {
       display: -ms-grid;
       display: grid;

client/src/styles/_survey.scss

@@ -62,6 +62,11 @@
     align-content: center;
   }
 
+  &__radiogroup-group, &__checkbox-group {
+    display: flex;
+    flex-direction: column;
+  }
+
   &__progress-bar {
     background-color: $color-brand;
 
@@ -74,10 +79,5 @@
       @include regular-text;
     }
 
-    &__radiogroup-group {
-      display: flex;
-      flex-direction: column;
-
-    }
   }
 }

client/src/survey.config.js

@@ -54,11 +54,12 @@ export const css = {
     'materialDecorator': 'checkbox-material'
   },
   'checkbox': {
-    'root': 'sv_qcbc sv_qcbx form-inline',
-    'item': 'checkbox',
-    'itemControl': '',
-    'controlLabel': '',
-    'materialDecorator': 'checkbox-material',
+    'root': 'survey__checkbox-group',
+    'item': 'base-input-container base-input-container--survey',
+    'itemControl': 'base-input-container__input',
+    'label': 'base-input-container__label-container',
+    'controlLabel': 'base-input-container__label',
+    'materialDecorator': 'base-input-container__checkbox base-input-container__icon',
     'other': 'sv_q_checkbox_other skillbox-input',
     'column': 'sv_q_select_column'
   },