@transferwise/components 0.0.0-experimental-0ced391 → 0.0.0-experimental-0acf14e
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.js +3 -3
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.js.map +1 -1
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs +3 -3
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs.map +1 -1
- package/build/main.css +2 -2
- package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -2
- package/build/styles/main.css +2 -2
- package/package.json +1 -1
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +2 -2
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.less +1 -1
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx +3 -3
- package/src/main.css +2 -2
|
@@ -42,7 +42,7 @@ function ExpressiveMoneyInput({
|
|
|
42
42
|
...currencySelector
|
|
43
43
|
});
|
|
44
44
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
45
|
-
className: clsx.clsx('wds-money-input
|
|
45
|
+
className: clsx.clsx('wds-expressive-money-input', className),
|
|
46
46
|
children: [/*#__PURE__*/jsxRuntime.jsx(Label.Label, {
|
|
47
47
|
id: labelId,
|
|
48
48
|
htmlFor: inputId,
|
|
@@ -56,7 +56,7 @@ function ExpressiveMoneyInput({
|
|
|
56
56
|
'aria-describedby': customAlertId
|
|
57
57
|
} : {}),
|
|
58
58
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
59
|
-
className: "wds-money-input-
|
|
59
|
+
className: "wds-expressive-money-input-currency-selector",
|
|
60
60
|
children: selector
|
|
61
61
|
}), /*#__PURE__*/jsxRuntime.jsx(AmountInput.AmountInput, {
|
|
62
62
|
id: inputId,
|
|
@@ -70,7 +70,7 @@ function ExpressiveMoneyInput({
|
|
|
70
70
|
onChange: onAmountChange,
|
|
71
71
|
onFocusChange: onFocusChange
|
|
72
72
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
73
|
-
className: clsx.clsx('d-flex align-items-center', 'wds-money-input-
|
|
73
|
+
className: clsx.clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron'),
|
|
74
74
|
children: /*#__PURE__*/jsxRuntime.jsx(Chevron.Chevron, {
|
|
75
75
|
shouldShow: Boolean(showChevron)
|
|
76
76
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput';\nimport { Chevron } from './Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = (props: { id: string; labelId: string }) => ReactNode;\ntype CurrencySelectorType =\n | DefaultCurrencySelectorInstanceType\n | CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n };\n showChevron?: boolean;\n autoFocus?: boolean;\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n const selector =\n typeof currencySelector === 'function' ? (\n currencySelector({ id: currencyId, labelId })\n ) : (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n );\n\n return (\n <div className={clsx('wds-money-input
|
|
1
|
+
{"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput';\nimport { Chevron } from './Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = (props: { id: string; labelId: string }) => ReactNode;\ntype CurrencySelectorType =\n | DefaultCurrencySelectorInstanceType\n | CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n };\n showChevron?: boolean;\n autoFocus?: boolean;\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n const selector =\n typeof currencySelector === 'function' ? (\n currencySelector({ id: currencyId, labelId })\n ) : (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n );\n\n return (\n <div className={clsx('wds-expressive-money-input', className)}>\n <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n {label}\n </Label>\n <div\n className={clsx('d-flex')}\n role=\"group\"\n aria-labelledby={labelId}\n {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n >\n <div className=\"wds-expressive-money-input-currency-selector\">{selector}</div>\n <AmountInput\n id={inputId}\n describedById={currencyId}\n amount={amount}\n currency={currency}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n loading={loading}\n onChange={onAmountChange}\n onFocusChange={onFocusChange}\n />\n <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n <Chevron shouldShow={Boolean(showChevron)} />\n </div>\n </div>\n <AnimatePresence initial={false}>\n {inlinePrompt && (\n <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n <motion.div\n key={customAlertId}\n initial={{ opacity: 0, height: 0 }}\n animate={{\n opacity: 1,\n height: 'auto',\n transition: { delay: 0.75, duration: 0.3 },\n }}\n exit={{ opacity: 0, height: 0 }}\n >\n {inlinePrompt.sentiment ? (\n <InlinePrompt id={customAlertId} sentiment={inlinePrompt.sentiment}>\n {inlinePrompt.message}\n </InlinePrompt>\n ) : (\n <Body>{inlinePrompt.message}</Body>\n )}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","selector","id","_jsx","CurrencySelector","_jsxs","clsx","children","Label","htmlFor","role","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","InlinePrompt","message","Body"],"mappings":"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"}
|
|
@@ -38,7 +38,7 @@ function ExpressiveMoneyInput({
|
|
|
38
38
|
...currencySelector
|
|
39
39
|
});
|
|
40
40
|
return /*#__PURE__*/jsxs("div", {
|
|
41
|
-
className: clsx('wds-money-input
|
|
41
|
+
className: clsx('wds-expressive-money-input', className),
|
|
42
42
|
children: [/*#__PURE__*/jsx(LabelNamespace, {
|
|
43
43
|
id: labelId,
|
|
44
44
|
htmlFor: inputId,
|
|
@@ -52,7 +52,7 @@ function ExpressiveMoneyInput({
|
|
|
52
52
|
'aria-describedby': customAlertId
|
|
53
53
|
} : {}),
|
|
54
54
|
children: [/*#__PURE__*/jsx("div", {
|
|
55
|
-
className: "wds-money-input-
|
|
55
|
+
className: "wds-expressive-money-input-currency-selector",
|
|
56
56
|
children: selector
|
|
57
57
|
}), /*#__PURE__*/jsx(AmountInput, {
|
|
58
58
|
id: inputId,
|
|
@@ -66,7 +66,7 @@ function ExpressiveMoneyInput({
|
|
|
66
66
|
onChange: onAmountChange,
|
|
67
67
|
onFocusChange: onFocusChange
|
|
68
68
|
}), /*#__PURE__*/jsx("div", {
|
|
69
|
-
className: clsx('d-flex align-items-center', 'wds-money-input-
|
|
69
|
+
className: clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron'),
|
|
70
70
|
children: /*#__PURE__*/jsx(Chevron, {
|
|
71
71
|
shouldShow: Boolean(showChevron)
|
|
72
72
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput';\nimport { Chevron } from './Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = (props: { id: string; labelId: string }) => ReactNode;\ntype CurrencySelectorType =\n | DefaultCurrencySelectorInstanceType\n | CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n };\n showChevron?: boolean;\n autoFocus?: boolean;\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n const selector =\n typeof currencySelector === 'function' ? (\n currencySelector({ id: currencyId, labelId })\n ) : (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n );\n\n return (\n <div className={clsx('wds-money-input
|
|
1
|
+
{"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../body';\nimport { Label } from '../label/Label';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useId, type ReactNode } from 'react';\n\nimport { type Props as CurrencySelectorProps, CurrencySelector } from './CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput';\nimport { Chevron } from './Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt/InlinePrompt';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n CurrencySelectorProps,\n 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = (props: { id: string; labelId: string }) => ReactNode;\ntype CurrencySelectorType =\n | DefaultCurrencySelectorInstanceType\n | CustomCurrencySelectorInstanceType;\n\nexport type Props = {\n label?: ReactNode;\n currencySelector?: CurrencySelectorType;\n amount?: AmountType;\n currency: CurrencyType;\n inlinePrompt?: {\n sentiment?: InlinePromptProps['sentiment'];\n message: InlinePromptProps['children'];\n };\n showChevron?: boolean;\n autoFocus?: boolean;\n loading?: boolean;\n onAmountChange: (amount: AmountType) => void;\n onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\nexport default function ExpressiveMoneyInput({\n label,\n currency,\n currencySelector = { options: [] } as DefaultCurrencySelectorInstanceType,\n amount,\n onAmountChange,\n className,\n inlinePrompt,\n showChevron,\n autoFocus,\n loading,\n onFocusChange,\n}: Props) {\n const inputId = useId();\n const labelId = useId();\n const customAlertId = useId();\n const currencyId = useId();\n\n const selector =\n typeof currencySelector === 'function' ? (\n currencySelector({ id: currencyId, labelId })\n ) : (\n <CurrencySelector\n id={currencyId}\n labelId={labelId}\n currency={currency}\n {...currencySelector}\n />\n );\n\n return (\n <div className={clsx('wds-expressive-money-input', className)}>\n <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n {label}\n </Label>\n <div\n className={clsx('d-flex')}\n role=\"group\"\n aria-labelledby={labelId}\n {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n >\n <div className=\"wds-expressive-money-input-currency-selector\">{selector}</div>\n <AmountInput\n id={inputId}\n describedById={currencyId}\n amount={amount}\n currency={currency}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n loading={loading}\n onChange={onAmountChange}\n onFocusChange={onFocusChange}\n />\n <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n <Chevron shouldShow={Boolean(showChevron)} />\n </div>\n </div>\n <AnimatePresence initial={false}>\n {inlinePrompt && (\n <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n <motion.div\n key={customAlertId}\n initial={{ opacity: 0, height: 0 }}\n animate={{\n opacity: 1,\n height: 'auto',\n transition: { delay: 0.75, duration: 0.3 },\n }}\n exit={{ opacity: 0, height: 0 }}\n >\n {inlinePrompt.sentiment ? (\n <InlinePrompt id={customAlertId} sentiment={inlinePrompt.sentiment}>\n {inlinePrompt.message}\n </InlinePrompt>\n ) : (\n <Body>{inlinePrompt.message}</Body>\n )}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </div>\n );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","selector","id","_jsx","CurrencySelector","_jsxs","clsx","children","Label","htmlFor","role","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","InlinePrompt","message","Body"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -4497,12 +4497,12 @@ button.np-link {
|
|
|
4497
4497
|
.wds-chevron-hidden {
|
|
4498
4498
|
width: 0;
|
|
4499
4499
|
}
|
|
4500
|
-
.wds-money-input-
|
|
4500
|
+
.wds-expressive-money-input-currency-selector {
|
|
4501
4501
|
flex-shrink: 0;
|
|
4502
4502
|
margin-right: 24px;
|
|
4503
4503
|
margin-right: var(--size-24);
|
|
4504
4504
|
}
|
|
4505
|
-
.wds-money-input-
|
|
4505
|
+
.wds-expressive-money-input-chevron {
|
|
4506
4506
|
transform: translateY(-5%);
|
|
4507
4507
|
}
|
|
4508
4508
|
.np-navigation-option {
|
|
@@ -48,11 +48,11 @@
|
|
|
48
48
|
.wds-chevron-hidden {
|
|
49
49
|
width: 0;
|
|
50
50
|
}
|
|
51
|
-
.wds-money-input-
|
|
51
|
+
.wds-expressive-money-input-currency-selector {
|
|
52
52
|
flex-shrink: 0;
|
|
53
53
|
margin-right: 24px;
|
|
54
54
|
margin-right: var(--size-24);
|
|
55
55
|
}
|
|
56
|
-
.wds-money-input-
|
|
56
|
+
.wds-expressive-money-input-chevron {
|
|
57
57
|
transform: translateY(-5%);
|
|
58
58
|
}
|
package/build/styles/main.css
CHANGED
|
@@ -4497,12 +4497,12 @@ button.np-link {
|
|
|
4497
4497
|
.wds-chevron-hidden {
|
|
4498
4498
|
width: 0;
|
|
4499
4499
|
}
|
|
4500
|
-
.wds-money-input-
|
|
4500
|
+
.wds-expressive-money-input-currency-selector {
|
|
4501
4501
|
flex-shrink: 0;
|
|
4502
4502
|
margin-right: 24px;
|
|
4503
4503
|
margin-right: var(--size-24);
|
|
4504
4504
|
}
|
|
4505
|
-
.wds-money-input-
|
|
4505
|
+
.wds-expressive-money-input-chevron {
|
|
4506
4506
|
transform: translateY(-5%);
|
|
4507
4507
|
}
|
|
4508
4508
|
.np-navigation-option {
|
package/package.json
CHANGED
|
@@ -48,11 +48,11 @@
|
|
|
48
48
|
.wds-chevron-hidden {
|
|
49
49
|
width: 0;
|
|
50
50
|
}
|
|
51
|
-
.wds-money-input-
|
|
51
|
+
.wds-expressive-money-input-currency-selector {
|
|
52
52
|
flex-shrink: 0;
|
|
53
53
|
margin-right: 24px;
|
|
54
54
|
margin-right: var(--size-24);
|
|
55
55
|
}
|
|
56
|
-
.wds-money-input-
|
|
56
|
+
.wds-expressive-money-input-chevron {
|
|
57
57
|
transform: translateY(-5%);
|
|
58
58
|
}
|
|
@@ -69,7 +69,7 @@ export default function ExpressiveMoneyInput({
|
|
|
69
69
|
);
|
|
70
70
|
|
|
71
71
|
return (
|
|
72
|
-
<div className={clsx('wds-money-input
|
|
72
|
+
<div className={clsx('wds-expressive-money-input', className)}>
|
|
73
73
|
<Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>
|
|
74
74
|
{label}
|
|
75
75
|
</Label>
|
|
@@ -79,7 +79,7 @@ export default function ExpressiveMoneyInput({
|
|
|
79
79
|
aria-labelledby={labelId}
|
|
80
80
|
{...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}
|
|
81
81
|
>
|
|
82
|
-
<div className="wds-money-input-
|
|
82
|
+
<div className="wds-expressive-money-input-currency-selector">{selector}</div>
|
|
83
83
|
<AmountInput
|
|
84
84
|
id={inputId}
|
|
85
85
|
describedById={currencyId}
|
|
@@ -91,7 +91,7 @@ export default function ExpressiveMoneyInput({
|
|
|
91
91
|
onChange={onAmountChange}
|
|
92
92
|
onFocusChange={onFocusChange}
|
|
93
93
|
/>
|
|
94
|
-
<div className={clsx('d-flex align-items-center', 'wds-money-input-
|
|
94
|
+
<div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>
|
|
95
95
|
<Chevron shouldShow={Boolean(showChevron)} />
|
|
96
96
|
</div>
|
|
97
97
|
</div>
|
package/src/main.css
CHANGED
|
@@ -4497,12 +4497,12 @@ button.np-link {
|
|
|
4497
4497
|
.wds-chevron-hidden {
|
|
4498
4498
|
width: 0;
|
|
4499
4499
|
}
|
|
4500
|
-
.wds-money-input-
|
|
4500
|
+
.wds-expressive-money-input-currency-selector {
|
|
4501
4501
|
flex-shrink: 0;
|
|
4502
4502
|
margin-right: 24px;
|
|
4503
4503
|
margin-right: var(--size-24);
|
|
4504
4504
|
}
|
|
4505
|
-
.wds-money-input-
|
|
4505
|
+
.wds-expressive-money-input-chevron {
|
|
4506
4506
|
transform: translateY(-5%);
|
|
4507
4507
|
}
|
|
4508
4508
|
.np-navigation-option {
|