@procore/core-react/dist/RadioButton/RadioButton.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var dataQa = {
  focused: 'core-radio-focused'
};
var radioButtonSize = 20;
export var StyledRadioButton = /*#__PURE__*/styled.label.withConfig({
  displayName: "StyledRadioButton",
  componentId: "core-12_44_0__sc-nd95zs-0"
})(["color:", ";display:flex;position:relative;vertical-align:middle;& + &{margin-top:", "px;}", " ", ""], colors.gray15, spacing.md, function (_ref) {
  var $error = _ref.$error;
  return $error && css(["", ":before,", ":checked:not(:disabled) + ", ":before{border-color:", ";}", ":checked:disabled + ", ":before{border-color:", ";}"], StyledRadioButtonLabel, StyledRadioButtonInput, StyledRadioButtonLabel, colors.red50, StyledRadioButtonInput, StyledRadioButtonLabel, colors.gray85);
}, function (_ref2) {
  var $children = _ref2.$children;
  return $children && css(["", "{&:before{margin-right:", "px;}}"], StyledRadioButtonLabel, spacing.md);
});
export var StyledRadioButtonLabel = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledRadioButtonLabel",
  componentId: "core-12_44_0__sc-nd95zs-1"
})(["", ";cursor:default;display:flex;&:before{background:", ";border-radius:100%;border:2px solid ", ";content:'';display:inline-block;flex:0;height:", "px;min-width:", "px;width:", "px;}"], getTypographyIntent('body'), colors.white, colors.gray50, radioButtonSize, radioButtonSize, radioButtonSize);
export var StyledRadioButtonInput = /*#__PURE__*/styled.input.withConfig({
  displayName: "StyledRadioButtonInput",
  componentId: "core-12_44_0__sc-nd95zs-2"
})(["left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;&:focus:not(:checked),&[data-qa=", "]:not(:checked){&:not(:disabled) + ", ":before{", "}}&:focus:checked:not(:disabled),&[data-qa=", "]:checked:not(:disabled){+ ", ":before{box-shadow:0 0 0 2px ", ";}}&:checked + ", ":before{border:6px solid ", ";}&:disabled + ", ":before{border-color:", ";}&:disabled:checked + ", ":before{border-color:", ";}"], dataQa.focused, StyledRadioButtonLabel, getFocus(), dataQa.focused, StyledRadioButtonLabel, colors.blue40, StyledRadioButtonLabel, colors.blue50, StyledRadioButtonLabel, colors.gray85, StyledRadioButtonLabel, colors.blue85);
//# sourceMappingURL=RadioButton.styles.js.map