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.
61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
import styled from 'styled-components';
|
|
import * as RadixCheckbox from '@radix-ui/react-checkbox';
|
|
import Icon from '../Icon';
|
|
const Container = styled.div `
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: ${({ theme }) => theme.gap.xxs.value};
|
|
cursor: pointer;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
`;
|
|
const CheckboxContainer = styled(RadixCheckbox.Root) `
|
|
transition:
|
|
background-color 0.3s ease,
|
|
border-color 0.3s ease;
|
|
|
|
width: ${({ theme }) => theme.width.sm.value};
|
|
height: ${({ theme }) => theme.height.sm.value};
|
|
border-radius: ${({ theme }) => theme.borderRadius['radius-sm'].value};
|
|
border-style: solid;
|
|
background-color: ${({ checked, theme }) => checked ? theme.backgroundColor.interactive['primary-default'].value : 'transparent'};
|
|
border-width: ${({ theme, checked }) => checked ? theme.borderWidth['width-zero'].value : theme.borderWidth['width-sm'].value};
|
|
border-color: ${({ theme }) => theme.borderColor.interactive.default.value};
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&[data-state='checked'] {
|
|
&:hover {
|
|
background-color: ${({ theme }) => theme.backgroundColor.interactive['primary-hover'].value};
|
|
}
|
|
&:disabled {
|
|
background-color: ${({ theme }) => theme.backgroundColor.interactive['primary-disabled'].value};
|
|
}
|
|
}
|
|
|
|
&[data-state='unchecked'] {
|
|
&:hover {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive['hover'].value};
|
|
}
|
|
&:disabled {
|
|
border-color: ${({ theme }) => theme.borderColor.interactive['disabled'].value};
|
|
}
|
|
}
|
|
|
|
&${Icon.prototype} {
|
|
padding: 0;
|
|
font-family: var(--ds-icons);
|
|
}
|
|
`;
|
|
export default {
|
|
Container,
|
|
CheckboxContainer,
|
|
};
|
|
//# sourceMappingURL=styles.js.map
|