From 3ba4a22b7c5517d5ac7dd3b3e5399431c2bb232e Mon Sep 17 00:00:00 2001
From: Alexey Bezhan <al@fueledbylemons.com>
Date: Wed, 27 Feb 2019 15:44:52 +0000
Subject: [PATCH] Add checkboxes-nested CSS rules

---
 .../stylesheets/components/checkboxes.scss    | 44 +++++++++++++++++++
 app/assets/stylesheets/main.scss              |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 app/assets/stylesheets/components/checkboxes.scss

diff --git a/app/assets/stylesheets/components/checkboxes.scss b/app/assets/stylesheets/components/checkboxes.scss
new file mode 100644
index 000000000..40ca600d4
--- /dev/null
+++ b/app/assets/stylesheets/components/checkboxes.scss
@@ -0,0 +1,44 @@
+.checkboxes-nested {
+
+  margin-bottom: 10px;
+
+  .multiple-choice {
+
+    $circle-diameter: 39px;
+    $border-thickness: 4px;
+    $border-indent: ($circle-diameter / 2) - ($border-thickness / 2);
+    $border-colour: $border-colour;
+
+    float: none;
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: $border-indent;
+      width: $border-thickness;
+      height: 100%;
+      background: $border-colour;
+    }
+
+    label {
+      float: none;
+    }
+
+    [type=checkbox]+label::before {
+      // To overlap the grey inset line
+      background: $white;
+    }
+
+    ul {
+      // To equalise the spacing between the line and the top/bottom of
+      // the radio
+      margin-top: 5px;
+      margin-bottom: -5px;
+      padding-left: 12px;
+    }
+
+  }
+
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 1db1fcff1..a12340dca 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -47,6 +47,7 @@ $path: '/static/images/';
 @import 'components/api-key';
 @import 'components/vendor/previous-next-navigation';
 @import 'components/radios';
+@import 'components/checkboxes';
 @import 'components/pill';
 @import 'components/secondary-button';
 @import 'components/show-more';