From 26e763d13513e0df51201e4ef8f72cdfc1dd7f63 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 17 Jun 2020 14:24:11 +0100
Subject: [PATCH] Fix Styled Checkbox and Radio Button disabled state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/elements/_StyledCheckbox.scss   | 10 ++++++
 .../views/elements/_StyledRadioButton.scss    | 33 ++++++++++++-------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.scss
index 5f5447e861..aab448605c 100644
--- a/res/css/views/elements/_StyledCheckbox.scss
+++ b/res/css/views/elements/_StyledCheckbox.scss
@@ -70,5 +70,15 @@ limitations under the License.
         & + label > *:not(.mx_Checkbox_background) {
             margin-left: 10px;
         }
+
+        &:disabled + label {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        &:checked:disabled + label > .mx_Checkbox_background {
+            background-color: $muted-fg-color;
+            border-color: rgba($muted-fg-color, 0.5);
+        }
     }
 }
diff --git a/res/css/views/elements/_StyledRadioButton.scss b/res/css/views/elements/_StyledRadioButton.scss
index a3ae823079..c2edb359dc 100644
--- a/res/css/views/elements/_StyledRadioButton.scss
+++ b/res/css/views/elements/_StyledRadioButton.scss
@@ -20,7 +20,6 @@ limitations under the License.
 */
 
 .mx_RadioButton {
-
     $radio-circle-color: $muted-fg-color;
     $active-radio-circle-color: $accent-color;
     position: relative;
@@ -76,22 +75,32 @@ limitations under the License.
                 border-radius: $font-8px;
             }
         }
-    }
 
-    > input[type=radio]:checked {
-        + div {
-            border-color: $active-radio-circle-color;
+        &:checked {
+            & + div {
+                border-color: $active-radio-circle-color;
 
-            > div {
-                background: $active-radio-circle-color;
+                & > div {
+                    background: $active-radio-circle-color;
+                }
             }
         }
-    }
 
-    > input[type=radio]:disabled {
-        + div {
-            > div {
-                display: none;
+        &:disabled {
+            & + div,
+            & + div + span {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            & + div {
+                border-color: $radio-circle-color;
+            }
+        }
+
+        &:checked:disabled {
+            & + div > div {
+                background-color: $radio-circle-color;
             }
         }
     }