81 lines
1.5 KiB
TypeScript
81 lines
1.5 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
export const Wrapper = styled.div`
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
--btn-height: ${props => props.buttonHeight || '40px'};
|
|
--btn-width: ${props => props.buttonWidth || '100px'};
|
|
|
|
height: var(--btn-height);
|
|
width: var(--btn-width);
|
|
`;
|
|
|
|
export const Top = styled.button`
|
|
border: 0;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
box-sizing: border-box;
|
|
background: ${props => props.primaryColor || props.theme.primary};
|
|
color: #FFF;
|
|
font-weight: 600;
|
|
text-shadow: 0 -1.5px .5px ${props => props.secondaryColor || props.theme.primaryDark};
|
|
padding: 0;
|
|
border-radius: 3px;
|
|
height: var(--btn-height);
|
|
width: var(--btn-width);
|
|
position: absolute;
|
|
top: -4px;
|
|
left: 0;
|
|
user-select: none;
|
|
transition: top .15s;
|
|
outline: none;
|
|
|
|
&:active {
|
|
top: 0;
|
|
}
|
|
&:focus-visible {
|
|
filter: brightness(1.2);
|
|
}
|
|
|
|
${props => props.isLoading && `
|
|
text-shadow: none;
|
|
color: transparent;
|
|
cursor: wait;
|
|
|
|
& img {
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes load {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: calc(50% - 12px);
|
|
left: calc(50% - 12px);
|
|
height: 18px;
|
|
width: 18px;
|
|
border: 3px solid #FFF;
|
|
border-left-color: transparent;
|
|
border-radius: 100px;
|
|
animation: load .5s linear infinite;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
export const Bottom = styled.div`
|
|
box-sizing: border-box;
|
|
background: ${props => props.secondaryColor || props.theme.primaryDark};
|
|
border-radius: 3px;
|
|
height: var(--btn-height);
|
|
width: var(--btn-width);
|
|
`;
|