vinyl-component-blocks/src/components/select/styled.ts

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

import styled from "styled-components";
import { ComponentSize, heights, sidePaddings } from "../../config/sizes";
import ArrowDown from '../../icons/ArrowDown';

interface StyledWrapperProps {
    width: string;
    innerSize: ComponentSize;
}

export const StyledWrapper = styled.div<StyledWrapperProps>`
    box-sizing: border-box;
    position: relative;
    width: ${pr => pr.width};
    height: ${ pr => heights[pr.innerSize]}px;
`;

export const StyledHeader = styled.div`
    box-sizing: border-box;
    position: relative;

    input:not([disabled]) {
        cursor: pointer;
    }
`;

interface StyledArrowProps {
    innerSize: ComponentSize;
    upwards: boolean;
}

export const StyledArrow = styled(ArrowDown).withConfig({
    shouldForwardProp: (prop, defPropValFN) =>
      !["innerSize", "upwards"].includes(prop) && defPropValFN(prop),
  })<StyledArrowProps>`
    box-sizing: border-box;
    position: absolute;
    right: ${ pr => sidePaddings[pr.innerSize]}px;
    top: 50%;
    transform: ${ pr => pr.upwards ? 'translateY(-50%) rotateZ(180deg)' : 'translateY(-50%)' };
    transition: transform 0.3s;

    pointer-events: none;
    height: 15px;
`;

interface StyledPopoverProps {
    width: string;
    visible: boolean;
}

export const StyledPopover = styled.div<StyledPopoverProps>`
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);

    width: ${pr => pr.width};
    box-sizing: border-box;
    padding: 15px 0;
    background-color: #fff;
    box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.2), 0px 4px 5px 1px rgba(0,0,0,0.14), 0px 1px 7px 1px rgba(0,0,0,0.12);

    transition: opacity 0.3s;

    visibility: ${pr => pr.visible ? 'visible' : 'hidden'};
    opacity: ${pr => pr.visible ? 1 : 0};
`;

export const List = styled.ul`
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
`;


interface ListItemProps {
    innerSize: ComponentSize;
}

export const ListItem = styled.li<ListItemProps>`
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 6px ${ pr => sidePaddings[pr.innerSize]}px;
    cursor: pointer;

    &:hover {
        background-color: #EEEEEE;
    }
`;