jobiqo-cl/lib/src/components/02-atoms/01-forms/14-radios/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);

/**
 * @file styles.ts
 *
 * @fileoverview Styles for the radio button elements.
 */
const StyledRadio = styled__default.input `
  appearance: none;
  width: ${props => props.theme.radios.width};
  height: ${props => props.theme.radios.height};
  border-radius: ${props => props.theme.radios.borderRadius};
  vertical-align: middle;
  margin-bottom: ${props => props.theme.radios.marginBottom};
  position: relative;
  cursor: pointer;
  outline: 0;
  overflow: hidden;
  border-width: ${props => props.theme.radios.borderWidth};
  border-style: ${props => props.theme.radios.borderStyle};
  border-color: ${props => props.theme.radios.borderColor};
  background: ${props => props.theme.radios.background};

  &:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    border-radius: ${props => props.theme.radios.borderRadius};
    border-style: ${props => props.theme.radios.borderStyle};
    border-color: ${props => props.theme.radios.inner.borderColor};
    border-width: ${props => props.theme.radios.inner.borderWidth};
    background: ${props => props.theme.radios.inner.background};
    transition: all 0.1s;
    transform: translate3d(50%, 50%, 0);
  }

  &:checked:after {
    transform: translate3d(-50%, -50%, 0);
  }
`;
const StyledLabel = styled__default.label `
  margin-left: 0.5rem;
`;

exports.StyledLabel = StyledLabel;
exports.StyledRadio = StyledRadio;