@chayns-components/core/lib/esm/components/file-select/FileSelect.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 { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledFileSelect = styled.div``;
export const StyledFileSelectWrapper = styled.div`
    display: flex;

    cursor: ${({
  $isDisabled
}) => $isDisabled ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
`;
export const StyledUploadedFilesList = styled.div`
    ${({
  $shouldShowBorder,
  theme
}) => $shouldShowBorder && css`
            border-top: 1px solid ${theme.headline};
        `}
`;
export const StyledFileSelectContainer = styled.div`
    border: ${({
  theme
}) => theme.text} 1px dashed;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    justify-content: center;
    width: 100%;

    ${({
  $isImageSelection
}) => $isImageSelection && css`
            border-left: none;
        `}

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible {
                transition: none;
                ${keyboardFocusHighlightingRingCss}
            }
        `}
`;
export const StyledFileSelectText = styled.p`
    color: ${({
  theme
}) => theme.text};
`;
export const StyledMotionFileSelectList = styled(motion.div)``;
//# sourceMappingURL=FileSelect.styles.js.map