mirror of
https://github.com/luxfi/financial.git
synced 2026-10-30 16:55:56 +00:00
zeekay
3d5244bb4c
Regulated banking platform marketing site covering: - Fiat, crypto, stablecoins, digital securities - CEX, DEX, AMM - 200+ countries - Payments, treasury, and banking infrastructure Built on Next.js static export, deployed via hanzoai/spa on lux-k8s. Migrated from luxfi/bank v1-archive branch.
74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import styled from 'styled-components';
|
|
import * as RadixRadioGroup from '@radix-ui/react-radio-group';
|
|
const Root = styled(RadixRadioGroup.Root) `
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.gap.xxs.value};
|
|
`;
|
|
const ItemContainer = styled.div `
|
|
display: flex;
|
|
align-items: center;
|
|
gap: ${({ theme }) => theme.gap.xxs.value};
|
|
`;
|
|
const Indicator = styled.div `
|
|
width: ${({ theme }) => theme.width.xxs.value};
|
|
height: ${({ theme }) => theme.height.xxs.value};
|
|
border-radius: ${({ theme }) => theme.borderRadius['radius-full'].value};
|
|
border: none;
|
|
`;
|
|
const Item = styled(RadixRadioGroup.Item) `
|
|
transition:
|
|
background-color 0.3s ease,
|
|
border-color 0.3s ease;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: ${({ theme }) => theme.padding.xxxs.value};
|
|
border-radius: ${({ theme }) => theme.borderRadius['radius-full'].value};
|
|
background: transparent;
|
|
border-width: ${({ theme }) => theme.borderWidth['width-sm'].value};
|
|
border-style: solid;
|
|
cursor: pointer;
|
|
|
|
&[data-state='checked'] {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive.primary.value};
|
|
${Indicator} {
|
|
background-color: ${({ theme }) => theme.backgroundColor.interactive['primary-default'].value};
|
|
}
|
|
|
|
&:hover {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive.primary.value};
|
|
${Indicator} {
|
|
background-color: ${({ theme }) => theme.backgroundColor.interactive['primary-hover'].value};
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive.disabled.value};
|
|
background-color: ${({ theme }) => theme.backgroundColor.interactive['primary-disabled'].value};
|
|
${Indicator} {
|
|
background-color: ${({ theme }) => theme.backgroundColor.interactive['primary-disabled'].value};
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-state='unchecked'] {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive.default.value};
|
|
|
|
&:hover {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive.hover.value};
|
|
}
|
|
|
|
&:disabled {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive.disabled.value};
|
|
}
|
|
}
|
|
`;
|
|
export default {
|
|
Root,
|
|
Item,
|
|
ItemContainer,
|
|
Indicator,
|
|
};
|
|
//# sourceMappingURL=styles.js.map
|