Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
align-items: center;
box-sizing: initial;
`
const Circle = styled.div<{ active: boolean }>`
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: ${(p) => (p.active ? p.theme.colors.active : p.theme.controls.color)};
opacity: ${(p) => (p.active ? 0 : 1)};
transform: translate(-50%,-50%);
transition: all 0.4s ease-in-out 0s;
`
const Step = styled.div<{ active: boolean, cursor: string }>`
position: relative;
width: ${(p) => (p.active ? '24px' : '6px')};
height: 6px;
border-radius: 6px;
padding: 10px 7px;
transition: width 0.5s ease-in-out 0s;
cursor: ${(p) => p.cursor};
`
const StepLine = styled.div<{ active: boolean }>`
height: 6px;
border-radius: 6px;
background: ${(p) => p.color || p.theme.controls.activeGradient};
box-shadow: ${(p) => `0px 6px 12px ${p.active && transparentize(0.6, p.color || p.theme.colors.active)}`};
opacity: ${(p) => (p.active ? 1 : 0)};
transition: all 0.5s ease-in-out 0s;
`
padding: ${({ gutter }) => gutter}px;
border-radius: 3px;
background-color: ${({ color }) => Color.get800(color)};
color: ${({ color }) => Color.get100(color)};
&:hover {
background-color: ${({ color }) => Color.get600(color)};
color: ${({ color }) => Color.get50(color)};
}
`
const StyledControls = styled.div`
display: flex;
`
const GainIndicator = styled.div`
user-select: none;
margin-left: 0.5rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
line-height: 0;
font-size: 13px;
`
const StyledLabelForm = styled.form`
flex: 1;
display: flex;
justify-content: flex-start;
& input {
display: flex;
justify-content: flex-start;
align-items: center;
width: ${({ width }) => width}px;
height: ${({ height }) => height}px;
background: ${({ color }) => Color.get800(color)};
border-radius: 3px;
color: ${({ color }) => Color.get500(color)};
&:hover {
background: ${({ color }) => Color.get700(color)};
color: ${({ color }) => Color.get100(color)};
}
`
const StyledButtonLabel = styled.div`
margin-left: ${({ gutter }) => gutter}px;
font-size: 16px;
`
function AddTrackButton({ color, onClick }: Props) {
const { panelWidth, cellSize, gutter } = usePrefs()
return (
Add...
gain: $PropertyType,
activeTrackID: $PropertyType
}
type DispatchProps = {
changeTrackGain: (trackId: string, gain: number) => void
}
type Props = OwnProps & StateProps & DispatchProps
const StyledGainController = styled.div`
height: ${({ size }) => size}px;
padding: ${({ gutter }) => gutter}px;
`
const GainIndicator = styled.div`
user-select: none;
text-align: center;
color: ${({ color }) => Color.get100(color)};
font-size: 11px;
`
function GainController({
color,
size,
gutter,
gain,
activeTrackID,
changeTrackGain
}: Props) {
if (!activeTrackID) return <div>
</div>
font-size: 20px;
`};
${media.phablet`
text-align: center !important;
`};
`;
const Album = styled.h3`
color: ${colors.lightGrey};
font-weight: 400;
font-size: 16px;
`;
const AudioFeatures = styled.div`
${mixins.flexCenter};
flex-direction: column;
`;
const Features = styled.div`
display: grid;
grid-template-columns: repeat(5, minmax(100px, 1fr));
width: 100%;
margin-bottom: 50px;
text-align: center;
border-top: 1px solid ${colors.grey};
border-left: 1px solid ${colors.grey};
${media.thone`
grid-template-columns: repeat(2, minmax(100px, 1fr));
`};
${media.phablet`
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
`};
`;
const Feature = styled.div`
padding: 15px 10px;
const Title = styled.p`
color: ${(props: { theme: Theme }) => props.theme.folderColor};
font-size: 19px;
font-weight: 500;
display: inline-block;
`;
const Content = styled.ul`
display: grid;
grid-gap: 12px 20px;
grid-template-columns: repeat(auto-fit, 260px);
grid-auto-rows: 54px;
padding-left: 0;
`;
const Options = styled.div`
margin-left: 6px;
`;
const HeaderNav = styled.nav`
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex: 1 1 auto;
max-width: 45px;
position: relative;
top: -10px;
@media (max-width: ${media.mobile}), (max-height: ${media.mobile}) {
display: none;
}
`;
const HeaderNavList = styled.div`
transform: rotate(-90deg) translate3d(-50%, 0, 0);
display: flex;
flex-direction: row-reverse;
`;
const HeaderNavLink = styled(NavLink)`
padding: 20px;
color: ${props => rgba(props.theme.colorText, 0.8)};
text-decoration: none;
font-weight: 500;
position: relative;
transition: color 0.3s ease 0.1s;
line-height: 1;
&:hover,
&:active,
import Container from '../Container'
import CurrencySelector from './CurrencySelector'
import InputFormatter from './InputFormatter'
const Wrapper = styled.div`
${base}
padding: 1.5rem 0;
width: 100%;
`
const StyledContainer = styled(Container)`
display: flex;
justify-content: space-between;
`
const RelativeWrapper = styled.div`
position: relative;
flex: 1 1 auto;
margin-left: 1rem;
`
const Input = styled.input`
${base}
display: block;
width: 100%;
outline: none;
appearance: none;
caret-color: currentColor;
padding: 0;
text-align: right;
border: 0px solid transparent;
border-radius: ${borderRadius};