mirror of https://github.com/vector-im/riot-web
Fix Styled Checkbox and Radio Button disabled state
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/21833/head
parent
3dcf525382
commit
26e763d135
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue