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

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

import styled, { css } from 'styled-components';
import { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledIconWrapper = styled.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 && css`
            &:focus-visible {
                outline: none;
                color: inherit;
            }

            &:focus-visible::after {
                ${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;
    }
`;
export const StyledIcon = styled.i`
    color: ${({
  $color,
  theme
}) => $color || theme.iconColor || theme.text};
    display: ${({
  $isStacked
}) => $isStacked ? undefined : 'inline-flex'};
    font-size: ${({
  $fontSize
}) => `${$fontSize}px`};

    ${({
  $fontSize,
  $size
}) => $fontSize !== $size && css`
            top: 50%;
            transform: translateY(-50%);
        `}
`;
export const StyledUnicodeIcon = styled.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