@chayns-components/core/lib/esm/components/truncation/Truncation.styles.js

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

import { motion } from 'motion/react';
import styled, { css } from 'styled-components';
import { ClampPosition } from '../../types/truncation';
import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledTruncation = styled.div`
    position: relative;
    overflow: hidden;
`;

// Fix framer-motion bug
export const StyledMotionTruncationContent = styled(motion.div)`
    overflow: hidden;
    position: relative;
`;
export const StyledTruncationPseudoContent = styled.div`
    visibility: hidden;
    position: absolute;
    width: 100%;
`;
export const StyledTruncationClampWrapper = styled.div`
    display: flex;

    ${({
  $position
}) => {
  switch ($position) {
    case ClampPosition.Left:
      return css`
                    justify-content: left;
                `;
    case ClampPosition.Middle:
      return css`
                    justify-content: center;
                `;
    default:
      return css`
                    justify-content: right;
                `;
  }
}}
`;
export const StyledTruncationClampFocusWrapper = styled.div`
    display: inline-block;
    border-radius: 3px;

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-within {
                transition: none;
                ${keyboardFocusHighlightingRingCss};
                color: inherit;
            }
        `}
`;
export const StyledTruncationClamp = styled.a`
    cursor: pointer;
    z-index: 2;
    display: inline-block;
    line-height: 1.2;
`;
//# sourceMappingURL=Truncation.styles.js.map