dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(button): focus state

Browse Source
This commit is contained in:
Dan Head
2021-02-02 23:40:59 +00:00
parent 41f7665b2f
commit 358ae543b0
1 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/button.js
View File

@@ -1,12 +1,27 @@
import React from "react"; import React from "react";
import styled from "@emotion/styled"; import styled from "@emotion/styled";
import { css } from "@emotion/react";
const Container = styled.button` const Container = styled.button`
background-color: transparent; background-color: transparent;
margin: 0; margin: 0;
padding: 4px 8px; padding: 4px 8px;
border: 1px solid var(--color-black); border: 1px solid var(--color-dark);
border-radius: 4px; 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 }) { export default function Button({ children, ...other }) {