Make pose picker button easier to see on light backgrounds
This commit is contained in:
parent
fc71f5b5a5
commit
09846a4516
1 changed files with 5 additions and 2 deletions
|
@ -293,7 +293,7 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
|
||||||
{({ css, cx }) => (
|
{({ css, cx }) => (
|
||||||
<Button
|
<Button
|
||||||
variant="unstyled"
|
variant="unstyled"
|
||||||
boxShadow="md"
|
textShadow={`${theme.colors.blackAlpha["700"]} 0 1px 2px`}
|
||||||
d="flex"
|
d="flex"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
|
@ -307,10 +307,11 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
|
||||||
className={cx(
|
className={cx(
|
||||||
css`
|
css`
|
||||||
border: 1px solid transparent !important;
|
border: 1px solid transparent !important;
|
||||||
color: ${theme.colors.gray["300"]};
|
color: ${theme.colors.gray["100"]};
|
||||||
cursor: ${loading ? "wait" : "pointer"} !important;
|
cursor: ${loading ? "wait" : "pointer"} !important;
|
||||||
transition:
|
transition:
|
||||||
color 0.2s,
|
color 0.2s,
|
||||||
|
background: 0.2s,
|
||||||
border-color 0.2s !important;
|
border-color 0.2s !important;
|
||||||
padding-left: 0.75em;
|
padding-left: 0.75em;
|
||||||
padding-right: 0.5em;
|
padding-right: 0.5em;
|
||||||
|
@ -319,6 +320,8 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
|
||||||
&.is-open {
|
&.is-open {
|
||||||
border-color: ${theme.colors.gray["50"]} !important;
|
border-color: ${theme.colors.gray["50"]} !important;
|
||||||
color: ${theme.colors.gray["50"]};
|
color: ${theme.colors.gray["50"]};
|
||||||
|
background: ${theme.colors.blackAlpha["600"]};
|
||||||
|
text-shadow: transparent 0 1px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|
Loading…
Reference in a new issue