@chayns-components/core/lib/cjs/components/amount-control/AmountControl.styles.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledMotionAmountControlButton = exports.StyledInputWrapper = exports.StyledAmountControlPseudoInput = exports.StyledAmountControlInput = exports.StyledAmountControl = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledAmountControl = exports.StyledAmountControl = _styledComponents.default.div`
    background-color: ${({
  theme
}) => theme['202']};
    display: flex;
    width: fit-content;
    border-radius: 3px;
    transition: opacity 0.2s ease;
    height: 28px;

    ${({
  $isDisabled
}) => $isDisabled && (0, _styledComponents.css)`
            opacity: 0.5;
            pointer-events: none;
        `}
`;
const StyledInputWrapper = exports.StyledInputWrapper = _styledComponents.default.div`
    background-color: ${({
  theme
}) => theme['408']};
`;
const StyledAmountControlInput = exports.StyledAmountControlInput = _styledComponents.default.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 && (0, _styledComponents.css)`
            &:focus-visible {
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
            }
        `}

    ${({
  $displayState
}) => $displayState === 'maxAmount' && (0, _styledComponents.css)`
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        `}
    ${({
  $displayState,
  $shouldShowIcon
}) => $displayState === 'default' && !$shouldShowIcon && (0, _styledComponents.css)`
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        `};
`;
const StyledAmountControlPseudoInput = exports.StyledAmountControlPseudoInput = _styledComponents.default.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'};
`;
const StyledMotionAmountControlButton = exports.StyledMotionAmountControlButton = (0, _styledComponents.default)(_react.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 && (0, _styledComponents.css)`
            &:focus-visible {
                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
            }
        `};

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