feat(button): focus state
This commit is contained in:
@@ -1,12 +1,27 @@
|
||||
import React from "react";
|
||||
import styled from "@emotion/styled";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const Container = styled.button`
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--color-black);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-dark);
|
||||
font-size: var(--font-size-md);
|
||||
${props =>
|
||||
props.float &&
|
||||
css`
|
||||
float: ${props.float};
|
||||
`}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px var(--color-dark);
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
box-shadow: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function Button({ children, ...other }) {
|
||||
|
||||
Reference in New Issue
Block a user