Fix disabled input styles for mantine v6

This commit is contained in:
jeffvli 2023-02-06 01:52:07 -08:00
parent 13f48711a9
commit 757eddd6f1
3 changed files with 31 additions and 3 deletions

View file

@ -83,6 +83,10 @@ const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
opacity: 0.6; opacity: 0.6;
} }
& [data-disabled='true'] {
opacity: 0.6;
}
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
`; `;
@ -130,6 +134,10 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
opacity: 0.6; opacity: 0.6;
} }
& [data-disabled='true'] {
opacity: 0.6;
}
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
`; `;
@ -159,6 +167,10 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
opacity: 0.6; opacity: 0.6;
} }
& [data-disabled='true'] {
opacity: 0.6;
}
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
`; `;
@ -188,6 +200,10 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
opacity: 0.6; opacity: 0.6;
} }
& [data-disabled='true'] {
opacity: 0.6;
}
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
`; `;
@ -217,6 +233,10 @@ const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
opacity: 0.6; opacity: 0.6;
} }
& [data-disabled='true'] {
opacity: 0.6;
}
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
`; `;
@ -242,6 +262,10 @@ const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
opacity: 0.6; opacity: 0.6;
} }
& [data-disabled='true'] {
opacity: 0.6;
}
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
`; `;

View file

@ -17,6 +17,10 @@ const StyledSegmentedControl = styled(MantineSegmentedControl)<MantineSegmentedC
opacity: 0.6; opacity: 0.6;
} }
& [data-disabled='true'] {
opacity: 0.6;
}
& .mantine-SegmentedControl-active { & .mantine-SegmentedControl-active {
color: var(--input-active-fg); color: var(--input-active-fg);
background-color: var(--input-active-bg); background-color: var(--input-active-bg);

View file

@ -20,7 +20,7 @@ const StyledSelect = styled(MantineSelect)`
background: var(--input-bg); background: var(--input-bg);
} }
& .mantine-Select-disabled { & [data-disabled='true'] {
background: var(--input-bg); background: var(--input-bg);
opacity: 0.6; opacity: 0.6;
} }
@ -76,8 +76,8 @@ const StyledMultiSelect = styled(MantineMultiSelect)`
background: var(--input-select-bg); background: var(--input-select-bg);
} }
& .mantine-MultiSelect-disabled { & [data-disabled='true'] {
background: var(--input-select-bg); background: var(--input-bg);
opacity: 0.6; opacity: 0.6;
} }