@npm.tangocode/tc_ui_components/src/components/RadioGroup/style.ts

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

import styled , { StyledComponentClass } from 'styled-components';
import { COLOR_PALETTE } from '../../constants/colors';
import * as React from 'react';

export const Title = styled.span`
    display:flex;
    align-items: center;
    margin-left: 6px;
    font-family: "Varela Round";
    font-size: 12px;
    letter-spacing: 1px;
    text-align: left;
    color: ${COLOR_PALETTE.GREY_DARK_1};
`;

export const RadioLabel = styled.label`
    margin-left: 5px;
    &:before {
        content: '';
        background: ${COLOR_PALETTE.GREY_DARK_1};
        border-radius: 100%;
        border: 1px solid ${COLOR_PALETTE.BLACK};
        display: inline-block;
        width: 16px;
        height: 16px;
        position: relative;
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        margin-right: 5px;
        -webkit-transition: all 250ms ease;
        transition: all 250ms ease;
    }
`;

export const RadioWrapper = styled.div`
    margin: 8px;
    & input:checked + label::before {
        background-color: ${COLOR_PALETTE.WHITE};
        -webkit-box-shadow: inset 0 0 0 4px #454954;
        box-shadow: inset 0 0 0 4px #454954;  
    }
`;

export const RadioInput = styled.input`
    position: absolute;
    display:none;
    &:checked + label {
        background: ${COLOR_PALETTE.WHITE};
    }
`;