@fluent-windows/core/Radio/Radio.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var root = function root(theme) {
  return {
    width: 20,
    height: 20,
    borderRadius: '50%',
    position: 'relative',
    display: 'inline-block',
    border: '2px solid',
    cursor: 'pointer',
    overflow: 'hidden',
    transition: theme.transitions.radio,
    backgroundColor: theme.colors.white["default"],
    // checked false
    borderColor: theme.colors.standard["default"],
    '&:hover': {
      borderColor: theme.colors.standard.dark1
    },
    // input element
    '& > input': {
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      cursor: 'pointer'
    }
  };
};

var checked = function checked(theme) {
  return {
    borderColor: theme.colors.primary["default"],
    '&:hover': {
      borderColor: theme.colors.primary["default"]
    }
  };
};

var disabled = function disabled(theme) {
  return {
    backgroundColor: theme.colors.standard.light1,
    borderColor: theme.colors.standard["default"],
    cursor: 'not-allowed',
    pointerEvents: 'none',
    '& > input': {
      cursor: 'not-allowed',
      pointerEvents: 'none'
    }
  };
};

var circle = function circle(theme) {
  return {
    borderRadius: '50%',
    transition: theme.transitions.radio,
    backgroundColor: theme.colors.black["default"],
    position: 'absolute',
    left: '50%',
    top: '50%',
    width: 12,
    height: 12,
    marginLeft: -6,
    marginTop: -6,
    opacity: 0
  };
};

var circleChecked = {
  opacity: 1
};

var circleDisabled = function circleDisabled(theme) {
  return {
    backgroundColor: theme.colors.standard.dark3
  };
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    checked: checked(theme),
    disabled: disabled(theme),
    circle: circle(theme),
    circleChecked: circleChecked,
    circleDisabled: circleDisabled(theme)
  };
};

exports.styles = styles;