63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
/**
|
|
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
|
|
*/
|
|
import * as styled from 'styled-components';
|
|
import {theme, Theme} from 'components/shared/theme';
|
|
|
|
const {
|
|
spacing,
|
|
typography: {primaryFontSize},
|
|
colors
|
|
} = theme;
|
|
const paddings = Theme.paddings;
|
|
|
|
export const RadioGroup = styled.default.div`
|
|
display: flex;
|
|
`;
|
|
|
|
export const RadioWrapper = styled.default.div<{disabled?: boolean}>`
|
|
padding: ${paddings.small};
|
|
display: flex;
|
|
|
|
${({disabled}) =>
|
|
disabled &&
|
|
styled.css`
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
`}
|
|
`;
|
|
|
|
export const RadioButtonContainer = styled.default.div`
|
|
margin-right: ${spacing.xSmall};
|
|
align-self: center;
|
|
|
|
input {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
}
|
|
`;
|
|
|
|
export const VisibleCheckBox = styled.default.div<{checked?: boolean}>`
|
|
border: 2px solid ${colors.gray400};
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: ${primaryFontSize};
|
|
height: ${primaryFontSize};
|
|
border-radius: 50%;
|
|
|
|
${({checked}) =>
|
|
checked &&
|
|
styled.css`
|
|
border: none;
|
|
background-color: ${colors.red};
|
|
|
|
div {
|
|
background-color: ${colors.black};
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
}
|
|
`}
|
|
`;
|