Merge pull request #4778 from matrix-org/t3chguy/notifications0

Fix Styled Checkbox and Radio Button disabled state

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);
+        }
     }
 }

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 {
+        &:checked {
-        + div {
+            & + div {
-            border-color: $active-radio-circle-color;
+                border-color: $active-radio-circle-color;
 
-            > div {
+                & > div {
-                background: $active-radio-circle-color;
+                    background: $active-radio-circle-color;
+                }
             }
         }
-    }
 
-    > input[type=radio]:disabled {
+        &:disabled {
-        + div {
+            & + div,
-            > div {
+            & + div + span {
-                display: none;
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            & + div {
+                border-color: $radio-circle-color;
+            }
+        }
+
+        &:checked:disabled {
+            & + div > div {
+                background-color: $radio-circle-color;
             }
         }
     }