@chayns-components/core/lib/esm/components/input/Input.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';
export const StyledInput = styled.div`
    opacity: ${_ref => {
  let {
    $isDisabled
  } = _ref;
  return $isDisabled ? 0.5 : 1;
}};
    display: flex;
    width: 100%;
`;
export const StyledInputContentWrapper = styled.div`
    align-items: center;
    background-color: ${_ref2 => {
  let {
    theme,
    $shouldChangeColor
  } = _ref2;
  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
}};
    border: 1px solid
        ${_ref3 => {
  let {
    theme,
    $isInvalid
  } = _ref3;
  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
}};
    color: ${_ref4 => {
  let {
    theme
  } = _ref4;
  return theme['006'];
}};
    display: flex;
    justify-content: space-between;
    width: 100%;
    transition: opacity 0.3s ease;

    ${_ref5 => {
  let {
    $size
  } = _ref5;
  return $size === 'small' && css`
            height: 32px;
        `;
}}

    ${_ref6 => {
  let {
    $shouldShowOnlyBottomBorder,
    $size
  } = _ref6;
  return !$shouldShowOnlyBottomBorder && css`
            min-height: ${$size === 'medium' ? '42px' : '32px'};
        `;
}}

    ${_ref7 => {
  let {
    $shouldRoundRightCorners,
    $shouldShowOnlyBottomBorder,
    theme
  } = _ref7;
  if ($shouldShowOnlyBottomBorder) {
    return css`
                border-top: none;
                border-right: none;
                border-left: none;
                background-color: transparent;
                border-color: ${theme['408']};
            `;
  }
  if ($shouldRoundRightCorners) {
    return css`
                border-radius: 3px;
            `;
  }
  return css`
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            border-right: none;
        `;
}}
`;
export const StyledInputContent = styled.div`
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: ${_ref8 => {
  let {
    $shouldShowOnlyBottomBorder
  } = _ref8;
  return !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0';
}};
    position: relative;
`;
export const StyledInputField = styled.input`
    background: none;
    border: none;
    color: ${_ref9 => {
  let {
    theme,
    $isInvalid
  } = _ref9;
  return $isInvalid ? theme.wrong : theme.text;
}};
    padding: 0;
    width: ${_ref0 => {
  let {
    $placeholderWidth
  } = _ref0;
  return `calc(100% - ${$placeholderWidth}px)`;
}};
    line-height: 1em;

    ${_ref1 => {
  let {
    $shouldShowCenteredContent
  } = _ref1;
  return $shouldShowCenteredContent && css`
            text-align: center;
        `;
}}
`;
export const StyledMotionInputLabelWrapper = styled(motion.label)`
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    line-height: 1.3;
    pointer-events: none;
    position: absolute;
    user-select: none;
    max-width: 100%;
`;
export const StyledMotionInputElement = styled(motion.div)`
    display: flex;
`;
export const StyledInputLabel = styled.label`
    line-height: 1.3;
    pointer-events: none;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: ${_ref10 => {
  let {
    theme,
    $isInvalid
  } = _ref10;
  return $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`;
}};
`;
export const StyledMotionInputClearIcon = styled(motion.div)`
    align-items: center;
    border-left: ${_ref11 => {
  let {
    $shouldShowOnlyBottomBorder
  } = _ref11;
  return $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)';
}};
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    height: ${_ref12 => {
  let {
    $size
  } = _ref12;
  return $size === 'medium' ? '40px' : '30px';
}};
    justify-content: center;
    width: ${_ref13 => {
  let {
    $size
  } = _ref13;
  return $size === 'medium' ? '40px' : '30px';
}};
`;
export const StyledInputIconWrapper = styled.div`
    align-items: baseline;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin-left: 10px;
`;
export const StyledInputRightElement = styled.div`
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    overflow: hidden;
    flex: 0 0 auto;
`;
//# sourceMappingURL=Input.styles.js.map