39 lines
886 B
TypeScript
39 lines
886 B
TypeScript
|
import styled from "styled-components";
|
||
|
|
|
||
|
|
type StyledButtonProps = {
|
||
|
|
$active?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
const StyledButton = styled.button<StyledButtonProps>`
|
||
|
|
background-color: rgb(225, 225, 225);
|
||
|
|
border: ${({ $active }) =>
|
||
|
|
$active ? "2px solid rgb(0, 120, 215)" : "1px solid rgb(173, 173, 173)"};
|
||
|
|
font-family: ${({ theme }) => theme.formats.systemFont};
|
||
|
|
font-size: 12px;
|
||
|
|
height: 23px;
|
||
|
|
transition: all 0.25s ease;
|
||
|
|
width: 73px;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
border: 2px solid rgb(0, 120, 215);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: rgb(229, 241, 251);
|
||
|
|
border: 1px solid rgb(0, 120, 215);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background-color: rgb(204, 228, 247);
|
||
|
|
border: 1px solid rgb(0, 84, 153);
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:disabled {
|
||
|
|
background-color: rgb(204, 204, 204);
|
||
|
|
border: 1px solid rgb(191, 191, 191);
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default StyledButton;
|