OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix Styled Checkbox and Radio Button disabled state 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-06-17 14:24:11 +01:00
parent 3dcf525382
commit 26e763d135
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
res/css/views/elements/_StyledCheckbox.scss
View File

@ -70,5 +70,15 @@ limitations under the License.
& + label > *:not(.mx_Checkbox_background) { & + label > *:not(.mx_Checkbox_background) {
margin-left: 10px; 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);
}
} }
} }

27
res/css/views/elements/_StyledRadioButton.scss
View File

@ -20,7 +20,6 @@ limitations under the License.
*/ */
.mx_RadioButton { .mx_RadioButton {
$radio-circle-color: $muted-fg-color; $radio-circle-color: $muted-fg-color;
$active-radio-circle-color: $accent-color; $active-radio-circle-color: $accent-color;
position: relative; position: relative;
@ -76,22 +75,32 @@ limitations under the License.
border-radius: $font-8px; 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;
} }
} }
} }