@procore/core-react
Version:
React library of Procore Design Guidelines
128 lines • 7.07 kB
JavaScript
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-checkbox-focused'
};
export var checkboxSize = 20;
export var StyledCheckboxContainer = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledCheckboxContainer",
componentId: "core-12_44_0__sc-u63tye-0"
})(["color:", ";display:block;position:relative;& + &{margin-top:", "px;}"], colors.gray15, spacing.md);
function StyledIndeterminate() {
return css(["background-color:", ";content:'';height:2px;left:5px;position:absolute;top:9px;width:10px;border:none;"], colors.white);
}
function StyledChecked() {
return css(["background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik00MzMuNzkyIDcwNGwtMTc3Ljc5Mi0xNzIuNDE2IDY4LjkyOC01OS45NjggMTA4Ljg2NCAxMDUuNiAyNjUuMjgtMjU3LjIxNiA2OC45MjggNTkuOTY4eiI+PC9wYXRoPjwvc3ZnPg==');content:'';border:none;height:20px;width:20px;top:0;left:0;position:absolute;"]);
}
function StyledFakeChecked() {
var $disabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var $error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return css(["", ";", ""], StyledChecked(), function () {
if ($disabled && $error) {
return css(["background-color:", ";"], colors.red85);
}
if ($disabled) {
return css(["background-color:", ";"], colors.blue85);
}
if ($error) {
return css(["background-color:", ";"], colors.red50);
}
return css(["background-color:", ";"], colors.blue50);
});
}
function StyledFakeIndeterminate() {
var $disabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var $error = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return css(["border:none;&:before{", ";}", ""], StyledIndeterminate(), function () {
if ($disabled) {
return css(["background-color:", ";"], colors.gray85);
}
if ($error) {
return css(["background-color:", ";"], colors.red50);
}
return css(["background-color:", ";"], colors.blue50);
});
}
export var StyledCheckboxLabelWrapper = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledCheckboxLabelWrapper",
componentId: "core-12_44_0__sc-u63tye-1"
})(["padding-left:", "px;min-height:", "px;position:relative;", ""], function (_ref) {
var $hasLabel = _ref.$hasLabel;
return $hasLabel ? checkboxSize + spacing.md : checkboxSize;
}, checkboxSize, getTypographyIntent('body'));
export var StyledCheckboxLabel = /*#__PURE__*/styled.label.withConfig({
displayName: "StyledCheckboxLabel",
componentId: "core-12_44_0__sc-u63tye-2"
})(["user-select:none;&:before{background-color:", ";border-radius:2px;border:2px solid ", ";content:'';display:inline-block;height:", "px;width:", "px;min-width:", "px;top:0;left:0;position:absolute;}"], colors.white, colors.gray70, checkboxSize, checkboxSize, checkboxSize);
export var StyledCheckboxInput = /*#__PURE__*/styled.input.withConfig({
displayName: "StyledCheckboxInput",
componentId: "core-12_44_0__sc-u63tye-3"
})(["left:0;opacity:0;position:absolute;top:0;&:disabled:checked + ", " > ", ":before{background-color:", ";border-color:", ";}&:disabled + ", " > ", ":before{background-color:", ";border-color:", ";}", " &:checked + ", " > ", "{&:before{background-color:", ";border-color:", ";color:", ";}&:after{", "}}&:focus:not(:disabled),&[data-qa=", "]:not(:disabled){+ ", " > ", ":before{", "}}", ""], StyledCheckboxLabelWrapper, StyledCheckboxLabel, colors.blue85, colors.blue85, StyledCheckboxLabelWrapper, StyledCheckboxLabel, function (_ref2) {
var $indeterminate = _ref2.$indeterminate;
return $indeterminate ? colors.gray85 : colors.white;
}, colors.gray85, function (_ref3) {
var $error = _ref3.$error;
if ($error) {
return css(["& + ", " > ", ":before{border-color:", ";}&:disabled:checked + ", " > ", ":before{background-color:", ";border-color:", ";}"], StyledCheckboxLabelWrapper, StyledCheckboxLabel, colors.red50, StyledCheckboxLabelWrapper, StyledCheckboxLabel, colors.gray85, colors.gray85);
}
}, StyledCheckboxLabelWrapper, StyledCheckboxLabel, function (_ref4) {
var $error = _ref4.$error;
return $error ? colors.red50 : colors.blue50;
}, function (_ref5) {
var $error = _ref5.$error;
return $error ? colors.red50 : colors.blue50;
}, colors.white, StyledChecked(), dataQa.focused, StyledCheckboxLabelWrapper, StyledCheckboxLabel, getFocus(), function (_ref6) {
var $indeterminate = _ref6.$indeterminate,
$error = _ref6.$error;
if ($indeterminate) {
return css(["& + ", " > ", ":before,&:checked + ", " > ", ":before{background-color:", ";border-color:", ";color:", ";}& + ", " > ", ":after,&:checked + ", " > ", ":after{", "}"], StyledCheckboxLabelWrapper, StyledCheckboxLabel, StyledCheckboxLabelWrapper, StyledCheckboxLabel, $error ? colors.red50 : colors.blue50, $error ? colors.red50 : colors.blue50, colors.white, StyledCheckboxLabelWrapper, StyledCheckboxLabel, StyledCheckboxLabelWrapper, StyledCheckboxLabel, StyledIndeterminate());
}
});
export var StyledFakeCheckboxLabel = /*#__PURE__*/styled.span.withConfig({
displayName: "StyledFakeCheckboxLabel",
componentId: "core-12_44_0__sc-u63tye-4"
})(["", " display:block;min-height:", "px;padding-left:", "px;position:relative;user-select:none;cursor:pointer;", ""], getTypographyIntent('body'), checkboxSize, function (_ref7) {
var children = _ref7.children;
return children ? checkboxSize + spacing.md : checkboxSize;
}, function (_ref8) {
var $checked = _ref8.$checked,
$disabled = _ref8.$disabled;
if ($checked && $disabled) {
return css(["color:", ";"], colors.gray50);
}
if ($disabled) {
return css(["color:", ";"], colors.gray85);
}
});
export var StyledFakeCheckboxInput = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledFakeCheckboxInput",
componentId: "core-12_44_0__sc-u63tye-5"
})(["width:", "px;height:", "px;border-radius:2px;border:2px solid ", ";position:absolute;", " ", " ", " ", ""], checkboxSize, checkboxSize, colors.gray70, function (_ref9) {
var $checked = _ref9.$checked,
$disabled = _ref9.$disabled,
$error = _ref9.$error;
if ($checked) {
return StyledFakeChecked($disabled, $error);
}
}, function (_ref0) {
var $indeterminate = _ref0.$indeterminate,
$disabled = _ref0.$disabled,
$error = _ref0.$error;
if ($indeterminate) {
return StyledFakeIndeterminate($disabled, $error);
}
}, function (_ref1) {
var $error = _ref1.$error;
if ($error) {
return css(["border-color:", ";"], colors.red50);
}
}, function (_ref10) {
var $disabled = _ref10.$disabled;
if ($disabled) {
return css(["border-color:", ";"], colors.gray85);
}
});
//# sourceMappingURL=Checkbox.styles.js.map