vinyl-component-blocks/src/components/form-control/styled.ts

Modular, Reusable, and Styled UI Component Library. Stop repeating work, install, call, use, modify.

import styled from "styled-components";

export const StyledFormControl = styled.div`
    box-sizing: border-box;
    position: relative;
    margin-bottom: 20px;
`;

interface StyledLabelProps {
    focused: boolean;
    error: boolean;
}

export const StyledLabel = styled.label<StyledLabelProps>`
    display: block;
    position: relative;
    z-index: 2;
    transform: ${pr => pr.focused ? 'translateY(0)' : 'translateY(20px)'};
    opacity: ${pr => pr.focused ? 1 : 0};
    visibility: ${pr => pr.focused ? 'visible' : 'hidden'};
    transition: all 0.2s ease-in;
    font-size: 0.8em;
    font-weight: 500;
    margin-bottom: 5px;
    color: ${pr => pr.error ? '#d93848' : '#000'};
`;

const StyledCaption = styled.span`
    position: absolute;
    font-size: 0.75em;
`;

export const StyledError = styled(StyledCaption)`
    color: #d93848;
`;
export const StyledHint = styled(StyledCaption)`
    color: #545454;
    font-style: italic;
`;