From 045af4c6b7163879520a91ffb78c2388e3344a62 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Fri, 5 Jun 2020 18:22:09 +0200
Subject: [PATCH] improve inputs

---
 input.scss | 55 +++++++++++++++++++++++++++++++++++++++++++++---------
 styles.css | 46 +++++++++++++++++++++++++++++++++++----------
 2 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/input.scss b/input.scss
index f566ba6..a33a634 100644
--- a/input.scss
+++ b/input.scss
@@ -168,23 +168,60 @@ textarea, .textarea {
     font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
 }
 
-span.checkbox, span.radio {
+span.radio {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
-    -webkit-user-select: none;
     user-select: none;
 
     label {
+        order: 3;
         cursor: pointer;
     }
-}
 
-span.checkbox input[type="checkbox"], span.radio input[type="radio"] {
-    position: relative;
-    vertical-align: middle;
-    bottom: 1px;
-    margin-right: 5px;
-    cursor: pointer;
+    input {
+        order: 1;
+        opacity: 0;
+        cursor: pointer;
+
+        &:checked ~ .checkmark {
+            background-color: var(--button-colored-background);
+        }
+
+        &:checked ~ .checkmark:after {
+            display: block;
+        }
+    }
+
+    .checkmark {
+        position: relative;
+        order: 2;
+        height: 15px;
+        width: 15px;
+        margin-right: 10px;
+        background-color: #eee;
+        border-radius: 50%;
+
+        &:after {
+            content: "";
+            position: absolute;
+            display: none;
+            top: 5px;
+            left: 5px;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background: #fff;
+        }
+    }
+
+    &:hover input ~ .checkmark {
+        background-color: var(--input-icon-color);
+        cursor: pointer;
+    }
 }
 
 input[type="range"] {
diff --git a/styles.css b/styles.css
index 202c804..7a2f86f 100644
--- a/styles.css
+++ b/styles.css
@@ -3699,20 +3699,46 @@ textarea, .textarea {
   box-sizing: border-box;
   font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; }
 
-span.checkbox, span.radio {
+span.radio {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+  -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  -webkit-user-select: none;
   user-select: none; }
-  span.checkbox label, span.radio label {
+  span.radio label {
+    order: 3;
+    cursor: pointer; }
+  span.radio input {
+    order: 1;
+    opacity: 0;
+    cursor: pointer; }
+    span.radio input:checked ~ .checkmark {
+      background-color: var(--button-colored-background); }
+    span.radio input:checked ~ .checkmark:after {
+      display: block; }
+  span.radio .checkmark {
+    position: relative;
+    order: 2;
+    height: 15px;
+    width: 15px;
+    margin-right: 10px;
+    background-color: #eee;
+    border-radius: 50%; }
+    span.radio .checkmark:after {
+      content: "";
+      position: absolute;
+      display: none;
+      top: 5px;
+      left: 5px;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: #fff; }
+  span.radio:hover input ~ .checkmark {
+    background-color: var(--input-icon-color);
     cursor: pointer; }
-
-span.checkbox input[type="checkbox"], span.radio input[type="radio"] {
-  position: relative;
-  vertical-align: middle;
-  bottom: 1px;
-  margin-right: 5px;
-  cursor: pointer; }
 
 input[type="range"] {
   border: none;