@chayns-components/core/lib/cjs/components/icon/Icon.styles.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledUnicodeIcon = exports.StyledIconWrapper = exports.StyledIcon = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.span`
    align-items: center;
    cursor: ${({
  $isDisabled,
  $isOnClick
}) => $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};
    display: inline-flex;
    min-height: ${({
  $size
}) => `${$size}px`};
    justify-content: center;
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    position: relative;
    transition: opacity 0.3s ease;
    min-width: ${({
  $size
}) => `${$size}px`};

    ${({
  $shouldShowKeyboardHighlighting,
  $size
}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
            &:focus-visible {
                outline: none;
                color: inherit;
            }

            &:focus-visible::after {
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss};
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: ${$size + 14}px;
                height: ${$size + 14}px;
                transform: translate(-50%, -50%);
                pointer-events: none;
            }
        `}

    // To insure that stacked icons have the same size as normal icons.
    &&.fa-stack {
        height: fit-content;
        width: fit-content;
        line-height: ${({
  $size
}) => $size}px;
    }
`;
const StyledIcon = exports.StyledIcon = _styledComponents.default.i`
    color: ${({
  $color,
  theme
}) => $color || theme.iconColor || theme.text};
    display: ${({
  $isStacked
}) => $isStacked ? undefined : 'inline-flex'};
    font-size: ${({
  $fontSize
}) => `${$fontSize}px`};

    ${({
  $fontSize,
  $size
}) => $fontSize !== $size && (0, _styledComponents.css)`
            top: 50%;
            transform: translateY(-50%);
        `}
`;
const StyledUnicodeIcon = exports.StyledUnicodeIcon = _styledComponents.default.i`
    align-items: center;
    justify-content: center;
    display: flex;
    color: ${({
  theme
}) => theme.iconColor || theme.headline};

    &:before {
        content: ${({
  $icon
}) => `"\\${$icon}" !important`};
    }
    &:after {
        content: ${({
  theme,
  $icon
}) => {
  if (theme.iconStyle === 'fa-duotone') {
    return `"\\${$icon}" !important`;
  }
  return '';
}};
    }
`;
//# sourceMappingURL=Icon.styles.js.map