better radio input styles + animation

ui/scss/all.scss

@@ -26,4 +26,5 @@
 @import "component/_media.scss";
 @import "component/_divider.scss";
 @import "component/_checkbox.scss";
+@import "component/_radio.scss";
 @import "page/_show.scss";

ui/scss/component/_radio.scss

@@ -0,0 +1,55 @@
+$md-radio-checked-color: var(--color-primary);
+$md-radio-border-color: var(--input-border-color);
+$md-radio-size: 20px;
+$md-radio-checked-size: 10px;
+$md-radio-ripple-size: 15px;
+
+.form-field--radio {
+    position: relative;
+    margin: 8px 0;
+
+    label {
+      cursor: pointer;
+
+      &:before, &:after {
+        content: "";
+        position: absolute;
+        left:0;
+        top: 0;
+        border-radius: 50%;
+        transition: all .3s ease;
+        transition-property: transform, border-color;
+      }
+
+      &:before {
+        width: $md-radio-size;
+        height: $md-radio-size;
+        background: transparent;
+        border: 2px solid $md-radio-border-color;
+        cursor: pointer;
+      }
+
+      &:after {
+          top: $md-radio-size / 2 - $md-radio-checked-size / 2;
+          left: $md-radio-size / 2 - $md-radio-checked-size / 2;
+          width:$md-radio-checked-size;
+          height:$md-radio-checked-size;
+          transform: scale(0);
+          background:$md-radio-checked-color;
+      }
+
+    }
+
+    input[type="radio"] {
+        visibility: hidden;
+        margin-right: 16px;
+
+        &:checked + label:before {
+            border-color: $md-radio-checked-color;
+        }
+
+        &:checked + label:after {
+            transform: scale(1);
+        }
+    }
+}