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