From 1363a29778836e3e52aef4cfb11f0d34986dfbda Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 3 Mar 2019 17:55:32 +0100
Subject: [PATCH] add initial styles for radio groups

---
 static/css/utils/radio.scss | 67 ++++++++++---------------------------
 1 file changed, 17 insertions(+), 50 deletions(-)

diff --git a/static/css/utils/radio.scss b/static/css/utils/radio.scss
index f32cf073a..3a8a87d85 100644
--- a/static/css/utils/radio.scss
+++ b/static/css/utils/radio.scss
@@ -1,6 +1,14 @@
-
 /* CUSTOM RADIO BOXES */
-/* Completely replaces legacy radiobox */
+/* Completely replaces native radiobox */
+
+.radio-group {
+  display: flex;
+}
+
+.radio-group__option {
+  min-width: 30px;
+}
+
 .radio {
   position: relative;
   display: inline-block;
@@ -16,55 +24,26 @@
 
   label {
     display: block;
-    height: 24px;
-    width: 24px;
+    height: 48px;
+    min-width: 48px;
+    padding: 0 7px;
     background-color: #f3f3f3;
     box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05);
     border: 2px solid var(--color-primary);
-    border-radius: 4px;
-    color: white;
+    color: var(--color-font);
     cursor: pointer;
   }
 
-  label::before,
-  label::after {
-    position: absolute;
-    display: block;
-    top: 12px;
-    left: 8px;
-    height: 2px;
-    width: 8px;
-    background-color: var(--color-font);
-  }
-
   :checked + label {
-    background-color: var(--color-primary);
+    background-color: #dedede;
   }
 
-  [type="radio"]:focus + label {
+  :focus + label {
     border-color: #3273dc;
-    box-shadow: 0 0 0 0.125em rgba(50,115,220,.25);
+    box-shadow: 0 0 0.125em 0 rgba(50,115,220,0.8);
     outline: 0;
   }
 
-  :checked + label::before,
-  :checked + label::after {
-    content: '';
-  }
-
-  :checked + label::before {
-    background-color: white;
-    transform: rotate(45deg);
-    left: 4px;
-  }
-
-  :checked + label::after {
-    background-color: white;
-    transform: rotate(-45deg);
-    top: 11px;
-    width: 13px;
-  }
-
   [disabled] + label {
     pointer-events: none;
     border: none;
@@ -72,15 +51,3 @@
     filter: grayscale(1);
   }
 }
-
-.radio::before {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  right: 2px;
-  bottom: 2px;
-  border-radius: 4px;
-  border: 2px solid white;
-  z-index: -1;
-}