vinyl-component-blocks/lib/components/button/styled.js

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

import styled from "styled-components";
import { heights, sidePaddings } from "../../config/sizes";
const typeColors = {
    default: {
        regular: '#0018cf',
        hover: '#2e27cc',
    },
    danger: {
        regular: '#d93848',
        hover: '#eb4d5d',
    },
    ghost: {
        regular: 'transparent',
        hover: '#dbdbdb',
    },
    secondary: {
        regular: '#000',
        hover: '#3d3d3d',
    }
};
/* Real tag is assigned dynamically */
export const StyledButton = styled.button `
    display: flex;
    align-items: center;
    justify-content: center;

    /* Add margin in case of loading or icon */
    & > *:nth-child(1) {
        margin-left: ${pr => pr.withText ? 7 : 0}px;
    }
    font-size: 15px;

    border: none;
    cursor: pointer;
    background-color: ${(pr) => typeColors[pr.innerType].regular};
    padding: 0 ${pr => sidePaddings[pr.size]}px;
    height: ${pr => heights[pr.size]}px;
    color: ${pr => pr.innerType === 'ghost'
    ? typeColors['default'].regular
    : '#fff'};
    ${pr => pr.disabled ? `
        background-color: #a6a6a6;
        color: #5e5e5e;
        cursor: not-allowed;

        &:hover {
            background-color: #a6a6a6 !important;
            color: #5e5e5e !important;
        }
    ` : ''}
    border-radius: 0;
    outline: none;

    &:focus {
        box-shadow: 0 0 0 1px #fff, 0 0 0 2px ${(pr) => typeColors[pr.innerType].regular};
    }
    &:hover {
        background-color: ${(pr) => typeColors[pr.innerType].hover};
    }
`;
export const StyledIcon = styled.div `
    height: 20px;
`;
//# sourceMappingURL=styled.js.map