@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';
import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledAmountControl = styled.div`
    background-color: ${({
  theme
}) => theme['202']};
    display: flex;
    width: fit-content;
    border-radius: 3px;
    transition: opacity 0.2s ease;
    height: 28px;

    ${({
  $isDisabled
}) => $isDisabled && css`
            opacity: 0.5;
            pointer-events: none;
        `}
`;
export const StyledInputWrapper = styled.div`
    background-color: ${({
  theme
}) => theme['408']};
`;
export const StyledAmountControlInput = styled.input`
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    height: 28px;
    width: ${({
  $shouldShowWideInput
}) => $shouldShowWideInput ? 90 : 55}px;
    text-align: center;
    cursor: ${({
  $hasFocus
}) => $hasFocus ? 'text' : 'pointer'};

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible {
                ${keyboardFocusHighlightingRingCss}
            }
        `}

    ${({
  $displayState
}) => $displayState === 'maxAmount' && css`
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        `}
    ${({
  $displayState,
  $shouldShowIcon
}) => $displayState === 'default' && !$shouldShowIcon && css`
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        `};
`;
export const StyledAmountControlPseudoInput = styled.div`
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    height: 28px;
    min-width: ${({
  $shouldShowWideInput
}) => $shouldShowWideInput ? 90 : 55}px;
    padding: 1px 8px;
    text-align: center;
    cursor: pointer;
    user-select: none;

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

    border-bottom-left-radius: ${({
  $shouldShowRightIcon
}) => $shouldShowRightIcon ? '3px' : 'unset'};
    border-top-left-radius: ${({
  $shouldShowRightIcon
}) => $shouldShowRightIcon ? '3px' : 'unset'};
`;
export const StyledMotionAmountControlButton = styled(motion.button)`
    align-items: center;
    background-color: ${({
  theme,
  $color
}) => $color ?? theme['408']};
    display: flex;
    justify-content: center;
    //overflow: hidden;
    transition: background-color 0.2s ease-in-out;

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible {
                ${keyboardFocusHighlightingRingCss}
            }
        `};

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