@chayns-components/core/lib/esm/components/amount-control/AmountControl.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 StyledAmountControl = styled.div`
    background-color: ${_ref => {
  let {
    theme
  } = _ref;
  return theme['202'];
}};
    display: flex;
    width: fit-content;
    border-radius: 3px;
    overflow: hidden;
    transition: opacity 0.2s ease;

    ${_ref2 => {
  let {
    $isDisabled
  } = _ref2;
  return $isDisabled && css`
            opacity: 0.5;
            pointer-events: none;
        `;
}}
`;
export const StyledAmountControlInput = styled.input`
    background-color: ${_ref3 => {
  let {
    theme
  } = _ref3;
  return theme['202'];
}};
    color: ${_ref4 => {
  let {
    theme
  } = _ref4;
  return theme.text;
}};
    border: none;
    height: 28px;
    width: ${_ref5 => {
  let {
    $shouldShowWideInput
  } = _ref5;
  return $shouldShowWideInput ? 90 : 55;
}}px;
    text-align: center;
    cursor: ${_ref6 => {
  let {
    $hasFocus
  } = _ref6;
  return $hasFocus ? 'text' : 'pointer';
}};

    ${_ref7 => {
  let {
    $displayState
  } = _ref7;
  return $displayState !== 'normal' && css`
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        `;
}}
    ${_ref8 => {
  let {
    $displayState,
    $shouldShowIcon
  } = _ref8;
  return $displayState === 'default' && !$shouldShowIcon && css`
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        `;
}};
`;
export const StyledAmountControlPseudoInput = styled.div`
    background-color: ${_ref9 => {
  let {
    theme
  } = _ref9;
  return theme['202'];
}};
    color: ${_ref0 => {
  let {
    theme
  } = _ref0;
  return theme.text;
}};
    border: none;
    height: 28px;
    min-width: ${_ref1 => {
  let {
    $shouldShowWideInput
  } = _ref1;
  return $shouldShowWideInput ? 90 : 55;
}}px;
    padding: 0 8px;
    text-align: center;
    cursor: pointer;
    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;

    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
`;
export const StyledMotionAmountControlButton = styled(motion.button)`
    overflow: hidden;
    background-color: ${_ref10 => {
  let {
    $color
  } = _ref10;
  return $color ?? 'rgba(255, 255, 255, 0.2)';
}};
    transition: background-color 0.2s ease-in-out;
    height: 28px;
    width: ${_ref11 => {
  let {
    $isWide
  } = _ref11;
  return $isWide ? 40 : 28;
}}px;

    ${_ref12 => {
  let {
    $isDisabled
  } = _ref12;
  return $isDisabled && css`
            opacity: 0.5;
        `;
}}
`;
//# sourceMappingURL=AmountControl.styles.js.map