Skip to content

Instantly share code, notes, and snippets.

@danbruegge

danbruegge/Button.jsx

Last active December 8, 2017 11:41
Show Gist options
  • Save danbruegge/9b55768e147ebe5d324550f9be122dc7 to your computer and use it in GitHub Desktop.
Save danbruegge/9b55768e147ebe5d324550f9be122dc7 to your computer and use it in GitHub Desktop.
Download ZIP
Button.jsx
Raw
Button.jsx
import Button from 'app/components/Form/Button';
export default Button.extend`
border-radius: 8rem;
font-family: 'Fira Sans', sans-serif;
font-size: 1rem;
line-height: 1;
text-transform: none;
${styleOnInfo}
${styleOnHighlight}
${styleOnLight}
`;
function styleOnInfo({ theme, info }) {
return info && `
background-color: #fff;
border-color: ${theme.colors.main(40)};
color: ${theme.colors.main(80)};
font-size: 0.78rem;
text-transform: uppercase;
:active,
:focus {
color: #fff;
background-color: ${theme.colors.main(60)};
}
`;
}
function styleOnHighlight({ theme, highlight }) {
return highlight && `
background-color: ${theme.colors.green()};
font-size: 0.78rem;
letter-spacing: 0.0225rem;
text-transform: uppercase;
:active,
:focus {
background-color: ${theme.colors.green(80)};
}
`;
}
function styleOnLight({ theme, light }) {
return light && `
background-color: #fff;
color: ${theme.colors.black(60)};
:active,
:focus {
background-color: ${theme.colors.black(10)};
}
`;
}
@sashless
Copy link

sashless commented Dec 8, 2017 •
edited
Loading 

import Button from 'app/components/Form/Button';

export default Button.extend`
    border-radius: 8rem;
    font-family: 'Fira Sans', sans-serif;
    font-size: 1rem;
    line-height: 1;
    text-transform: none;
    ${styleOnInfo}
    ${styleOnHighlight}
    ${styleOnLight}
`;

function styleOnInfo({ theme, info }) {
    return info && `
        background-color: #fff;
        border-color: ${theme.colors.main(40)};
        color: ${theme.colors.main(80)};
        font-size: 0.78rem;
        text-transform: uppercase;

        :active,
        :focus {
            color: #fff;
            background-color: ${theme.colors.main(60)};
        }
    `;
}

function styleOnHighlight({ theme, highlight }) {
    return highlight && `
        background-color: ${theme.colors.green()};
        font-size: 0.78rem;
        letter-spacing: 0.0225rem;
        text-transform: uppercase;

        :active,
        :focus {
            background-color: ${theme.colors.green(80)};
        }
    `;
}

function styleOnLight({ theme, light }) {
    return light && `
        background-color: #fff;
        color: ${theme.colors.black(60)};

        :active,
        :focus {
            background-color: ${theme.colors.black(10)};
        }
    `;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment