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

Fix Styled Checkbox and Radio Button disabled state
This commit is contained in:
Michael Telatynski 2020-06-17 17:39:47 +01:00 committed by GitHub
commit 13a25f37a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 12 deletions

View File

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

View File

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