Update radio buttons [SCI-10913]

app/assets/stylesheets/application.tailwind.css

@@ -2,6 +2,7 @@
 @import "tailwind/buttons";
 @import "tailwind/modals";
 @import "tailwind/flyouts";
+@import "tailwind/radio";
 @import "tailwind/loader.css";
 
 @tailwind base;

app/assets/stylesheets/shared_styles/elements/radio_buttons.scss

@@ -1,5 +1,5 @@
 // scss-lint:disable SelectorDepth QualifyingElement
-
+/*
 :root {
   --sci-radio-size: 16px;
 }
@@ -85,3 +85,4 @@ input[type="radio"].sci-radio {
     }
   }
 }
+*/

app/assets/stylesheets/tailwind/radio.css

@@ -0,0 +1,42 @@
+@layer components {
+
+  .sci-radio-container {
+    @apply inline-block h-4 w-4 relative;
+  }
+
+  input[type="radio"].sci-radio {
+    @apply cursor-pointer shrink-0 h-4 w-4 m-0 opacity-0 relative z-[2];
+  }
+
+  input[type="radio"].sci-radio + .sci-radio-label {
+    @apply inline-block shrink-0 h-4 w-4 absolute left-0;
+  }
+
+  input[type="radio"].sci-radio + .sci-radio-label::before {
+    @apply border-[1px] border-solid border-sn-black rounded-full text-white text-center transition-all
+           h-4 w-4 left-0 absolute;
+    content: "";
+  }
+
+  input[type="radio"].sci-radio + .sci-radio-label::after{
+    @apply bg-white rounded-full text-white text-center transition-all
+            absolute w-2.5 h-2.5 top-[3px] left-[3px] ;
+    content: "";
+  }
+
+  input[type="radio"].sci-radio:checked + .sci-radio-label::before {
+    @apply !border-sn-blue;
+  }
+
+  input[type="radio"].sci-radio:checked + .sci-radio-label::after {
+    @apply !bg-sn-science-blue;
+  }
+
+  input[type="radio"].sci-radio:disabled + .sci-radio-label::before {
+    @apply !border-sn-sleepy-grey;
+  }
+
+  input[type="radio"].sci-radio:checked:disabled + .sci-radio-label::after {
+    @apply !bg-sn-sleepy-grey;
+  }
+}

app/views/design_elements/_radio.html.erb

@@ -0,0 +1,19 @@
+<h1>Radio</h1>
+<div class="flex flex-items gap-8 p-6">
+  <div class="sci-radio-container">
+    <input type="radio" name="test_1" class="sci-radio">
+    <span class="sci-radio-label">
+  </div>
+  <div class="sci-radio-container">
+    <input type="radio" name="test_1" class="sci-radio" checked>
+    <span class="sci-radio-label">
+  </div>
+  <div class="sci-radio-container">
+    <input type="radio" name="test_2" class="sci-radio" disabled>
+    <span class="sci-radio-label">
+  </div>
+  <div class="sci-radio-container">
+    <input type="radio" name="test_2" class="sci-radio" checked disabled>
+    <span class="sci-radio-label">
+  </div>
+</div>

app/views/design_elements/index.html.erb

@@ -10,6 +10,8 @@
   end
 %>
 
+<%= render partial: 'radio' %>
+
 <%= render partial: 'select' %>
 
 <%= render partial: 'modals' %>