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

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