97 lines
2.2 KiB
JavaScript
97 lines
2.2 KiB
JavaScript
import styled, { css } from "styled-components";
|
|
|
|
import Base from "../themes/base";
|
|
import NoUserSelect from "../utils/commonStyles";
|
|
|
|
const Container = styled.div`
|
|
display: inline-block;
|
|
`;
|
|
|
|
const ToggleButtonContainer = styled.label`
|
|
position: absolute;
|
|
-webkit-appearance: none;
|
|
align-items: start;
|
|
outline: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
|
|
${NoUserSelect};
|
|
|
|
display: grid;
|
|
grid-template-columns: min-content auto;
|
|
grid-gap: 8px;
|
|
|
|
${(props) =>
|
|
props.isDisabled
|
|
? css`
|
|
cursor: default;
|
|
`
|
|
: css`
|
|
cursor: pointer;
|
|
`}
|
|
|
|
svg {
|
|
${(props) =>
|
|
props.isChecked
|
|
? css`
|
|
rect {
|
|
fill: ${props.isDisabled && props.theme.isBase
|
|
? props.theme.toggleButton.fillColorOff
|
|
: props.theme.toggleButton.fillColorDefault} !important;
|
|
|
|
&:hover {
|
|
opacity: ${!props.isDisabled && "0.85"};
|
|
}
|
|
}
|
|
|
|
circle {
|
|
fill: ${props.theme.toggleButton.fillCircleColor};
|
|
opacity: ${props.isDisabled && "0.6"};
|
|
}
|
|
|
|
opacity: ${props.isDisabled && "0.6"};
|
|
`
|
|
: css`
|
|
rect {
|
|
fill: ${props.theme.toggleButton.fillColorOff};
|
|
}
|
|
circle {
|
|
fill: ${props.theme.toggleButton.fillCircleColorOff};
|
|
opacity: ${props.isDisabled && "0.6"};
|
|
}
|
|
|
|
opacity: ${props.isDisabled && "0.6"};
|
|
|
|
&:hover {
|
|
rect {
|
|
fill: ${!props.isDisabled &&
|
|
props.theme.toggleButton.hoverFillColorOff};
|
|
}
|
|
}
|
|
`}
|
|
${(props) =>
|
|
props.theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
|
|
}
|
|
|
|
.toggle-button {
|
|
min-width: 28px;
|
|
}
|
|
|
|
.toggle-button-text {
|
|
color: ${(props) =>
|
|
props.isDisabled
|
|
? props.theme.text.disableColor
|
|
: props.theme.text.color};
|
|
}
|
|
`;
|
|
|
|
ToggleButtonContainer.defaultProps = { theme: Base };
|
|
|
|
const HiddenInput = styled.input`
|
|
opacity: 0.0001;
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: -1;
|
|
`;
|
|
|
|
export { ToggleButtonContainer, HiddenInput, Container };
|