Fix disabled input styles for mantine v6
This commit is contained in:
parent
13f48711a9
commit
757eddd6f1
3 changed files with 31 additions and 3 deletions
|
@ -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;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in a new issue