@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
78 lines (76 loc) • 1.46 kB
JavaScript
import styled, { css } from 'styled-components';
export const StyledIconWrapper = styled.span`
align-items: center;
cursor: ${_ref => {
let {
$isDisabled,
$isOnClick
} = _ref;
return $isOnClick && !$isDisabled ? 'pointer' : 'inherit';
}};
display: inline-flex;
min-height: ${_ref2 => {
let {
$size
} = _ref2;
return `${$size}px`;
}};
justify-content: center;
opacity: ${_ref3 => {
let {
$isDisabled
} = _ref3;
return $isDisabled ? 0.5 : 1;
}};
position: relative;
transition: opacity 0.3s ease;
min-width: ${_ref4 => {
let {
$size
} = _ref4;
return `${$size}px`;
}};
// To insure that stacked icons have the same size as normal icons.
&&.fa-stack {
height: fit-content;
width: fit-content;
line-height: ${_ref5 => {
let {
$size
} = _ref5;
return $size;
}}px;
}
`;
export const StyledIcon = styled.i`
color: ${_ref6 => {
let {
$color,
theme
} = _ref6;
return $color || theme.headline;
}};
display: ${_ref7 => {
let {
$isStacked
} = _ref7;
return $isStacked ? undefined : 'inline-flex';
}};
font-size: ${_ref8 => {
let {
$fontSize
} = _ref8;
return `${$fontSize}px`;
}};
${_ref9 => {
let {
$fontSize,
$size
} = _ref9;
return $fontSize !== $size && css`
top: 50%;
transform: translateY(-50%);
`;
}}
`;
//# sourceMappingURL=Icon.styles.js.map