sriracha-ui
Version:
A react style library build with styled-components, and material ui theme.
123 lines (118 loc) • 3.7 kB
JavaScript
import { css } from "styled-components";
import { cursorStyle, boxShadow, hoverShadow } from "../../../maps";
export default css`
color: ${(props) =>
!props.color
? "auto"
: props.theme.colors[props.color]
? props.theme.colors[props.color]
: props.color};
background: ${(props) =>
!props.bg
? "auto"
: props.theme.colors[props.bg]
? props.theme.colors[props.bg]
: props.bg};
border: ${(props) =>
props.border ? props.border : `0.2rem inset ${props.theme.colors.gray6}`};
border-style: ${(props) => (props.bs ? props.bs : "auto")};
border-width: ${(props) => (props.bw ? props.bw : "auto")};
border-radius: ${(props) =>
props.radius ? props.radius : props.theme.borderRadius};
border-color: ${(props) =>
props.theme.colors[props.bc]
? props.theme.colors[props.bc]
: props.bc
? props.bc
: "auto"};
opacity: ${(props) => (props.opacity ? props.opacity : "none")};
box-shadow: ${(props) =>
props.theme.shadows[props.shadow]
? props.theme.shadows[props.shadow]
: props.shadow
? props.shadow
: boxShadow};
transition: color 0.5s, background 0.5s, box-shadow 0.5s;
&:hover {
color: ${(props) =>
!props.hvrColor
? "auto"
: props.theme.colors[props.hvrColor]
? props.theme.colors[props.hvrColor]
: props.hvrColor};
background: ${(props) =>
!props.hvrBg
? "auto"
: props.theme.colors[props.hvrBg]
? props.theme.colors[props.hvrBg]
: props.hvrBg};
border: ${(props) =>
props.hvrBorder
? props.hvrBorder
: props.border
? props.border
: `0.2rem solid ${props.theme.colors.gray3}`};
border-style: ${(props) =>
props.hvrBs ? props.hvrBs : props.bs ? props.bs : "auto"};
border-width: ${(props) =>
props.hvrBw ? props.hvrBw : props.bw ? props.bw : "auto"};
border-color: ${(props) =>
props.theme.colors[props.hvrBc]
? props.theme.colors[props.hvrBc]
: props.hvrBc
? props.hvrBc
: props.theme.colors[props.bc]
? props.theme.colors[props.bc]
: props.bc
? props.bc
: "auto"};
box-shadow: ${(props) =>
props.theme.shadows[props.hvrShadow]
? props.theme.shadows[props.hvrShadow]
: props.hvrShadow
? props.hvrShadow
: hoverShadow};
cursor: ${cursorStyle};
}
&:focus {
color: ${(props) =>
!props.fcsColor
? "auto"
: props.theme.colors[props.fcsColor]
? props.theme.colors[props.fcsColor]
: props.fcsColor};
background: ${(props) =>
!props.fcsBg
? "auto"
: props.theme.colors[props.fcsBg]
? props.theme.colors[props.fcsBg]
: props.fcsBg};
border: ${(props) =>
props.fcsBorder
? props.fcsBorder
: props.border
? props.border
: `0.2rem solid ${props.theme.colors.gray3}`};
border-style: ${(props) =>
props.fcsBs ? props.fcsBs : props.bs ? props.bs : "auto"};
border-width: ${(props) =>
props.fcsBw ? props.fcsBw : props.bw ? props.bw : "auto"};
border-color: ${(props) =>
props.theme.colors[props.fcsBc]
? props.theme.colors[props.fcsBc]
: props.fcsBc
? props.fcsBc
: props.theme.colors[props.bc]
? props.theme.colors[props.bc]
: props.bc
? props.bc
: "auto"};
box-shadow: ${(props) =>
props.theme.shadows[props.fcsShadow]
? props.theme.shadows[props.fcsShadow]
: props.fcsShadow
? props.fcsShadow
: hoverShadow};
cursor: ${cursorStyle};
}
`;