@hbsis.uikit/react/src/components/input-radio/styled-radio.js

Biblioteca ReactJS

import styled from 'styled-components'

const StyledRadio = styled.div`
  .Input-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 7px;
    text-transform: uppercase;
    color: #3b495e;
    margin-top: 5px;
  }

  .radio-items-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .radio-item {
      flex: 0 0 auto;
      height:20px;
      margin-bottom: 20px;
      input[type="radio"] {
        display: none;

        &:checked {
          & + label {
            &:before {
              box-shadow: inset 0 0 0 1px #afcef3, inset 0 0 0 5px #fff, inset 0 0 0 6px #6197c6;
              -webkit-transition: box-shadow .1s;
              transition: box-shadow .1s;
              width: 20px;
              height: 20px;
              background-color: #afcef3;
            }
          }
        }

        &:disabled {
          & + label {
            opacity: .8;
            cursor: not-allowed;
            color:#95A3B7;

            &:before {
              box-shadow: inset 0 0 0 5px #e5edf4;
              background-color: #c5d0e1;
            }
          }
        }

        &:focus {
          & + label {
            &:before {
              box-shadow: 0 0 0 3px #fff, 0 0 0 5px #20cbd3;
            }
          }
        }

        & + label {
          display: block;
          float:left;
          line-height:21px;
          cursor: pointer;
          font-size: 14px;
          height:20px;
          color: #3b495e;

          &:before {
            content: '';
            display: block;
            float:left;
            width: 20px;
            height: 20px;
            margin-right:9px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: inset 0 0 0 1px #c5d0e1 , inset 0 0 0 10px #fff, inset 0 0 0 11px #6197c6;
            -webkit-transition: box-shadow .1s;
            transition: box-shadow .1s;
          }
        }
      }
    }
  }
`

export default StyledRadio