Fix: changed outlines to box-shadow

This commit is contained in:
nizune
2021-07-05 21:06:08 +02:00
parent a9e6f9073a
commit d636168908
7 changed files with 20 additions and 10 deletions

View File

@@ -1,7 +1,7 @@
import styled from "styled-components";
export default styled.select`
padding: 8px;
padding: 10px;
border-radius: 6px;
font-family: inherit;
color: var(--secondary-foreground);
@@ -10,11 +10,11 @@ export default styled.select`
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
transition: box-shadow 0.3s;
transition: box-shadow .2s ease-in-out;
cursor: pointer;
width: 100%;
&:focus {
box-shadow: 0 0 0 2pt var(--accent);
box-shadow: 0 0 0 1.5pt var(--accent);
}
`;

View File

@@ -8,6 +8,7 @@ export default styled.input<Props>`
z-index: 1;
padding: 8px 16px;
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
color: var(--foreground);
@@ -17,13 +18,14 @@ export default styled.input<Props>`
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
transition: box-shadow .2s ease-in-out;
&:hover {
background: var(--secondary-background);
}
&:focus {
outline: 2px solid var(--accent);
box-shadow: 0 0 0 1.5pt var(--accent);
}
${(props) =>

View File

@@ -1,5 +1,5 @@
.container {
font-size: 0.875rem;
font-size: .875rem;
line-height: 20px;
position: relative;
}