Added styling to radio GOVUK

mysociety · Jan 15, 2024 · d4d47d0 · d4d47d0
1 parent b16df27
commit d4d47d0
Showing 1 changed file with 44 additions and 15 deletions.
diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss
@@ -165,7 +165,7 @@ $govuk-small-input-visible-size: 24px;
 
 .govuk-multi-select__label {
   display: inline-block;
-  padding: 8px 0px 5px $govuk-small-input-size;
+  padding: 10px 0px 10px $govuk-small-input-size;
   cursor: pointer;
   touch-action: manipulation;
   font-size: 1.1875rem;
@@ -179,6 +179,35 @@ $govuk-small-input-visible-size: 24px;
     }
   }
 
+  &:has(> input[type="checkbox"]){
+    &:after {
+      // Check icon
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: $govuk-small-input-visible-size / 2;
+      left: $govuk-small-input-visible-size / 2;
+      clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
+      border: solid 10px $govuk-input-border-color;
+      opacity: 0;
+    }
+  }
+
+  &:has(> input[type="radio"]){
+    &:after {
+      // Circle icon
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      width: 14px;
+      height: 14px;
+      clip-path: circle(50%);
+      opacity: 0;
+      background-color: $govuk-input-border-color;
+    }
+  }
+
   &:before {
     content: "";
     box-sizing: border-box;
@@ -211,20 +240,20 @@ $govuk-small-input-visible-size: 24px;
   }
 }
 
-.govuk-multi-select--checkboxes {
-  .govuk-multi-select__label {
-    &:after {
-      content: "";
-      box-sizing: border-box;
-      position: absolute;
-      top: $govuk-small-input-visible-size / 2;
-      left: $govuk-small-input-visible-size / 2;
-      clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
-      border: solid 10px $govuk-input-border-color;
-      opacity: 0;
-    }
-  }
-}
+// .govuk-multi-select--checkboxes {
+//   .govuk-multi-select__label {
+//     &:after {
+//       content: "";
+//       box-sizing: border-box;
+//       position: absolute;
+//       top: $govuk-small-input-visible-size / 2;
+//       left: $govuk-small-input-visible-size / 2;
+//       clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
+//       border: solid 10px $govuk-input-border-color;
+//       opacity: 0;
+//     }
+//   }
+// }
 
 .govuk-multi-select--radio, .multi-select-presets {
   .govuk-multi-select__label {