UNPKG

@braineet/ui

Version:

Braineet design system

92 lines (89 loc) 5.4 kB
"use strict"; exports.__esModule = true; exports.StyledText = exports.StyledLabel = exports.RadioInput = exports.DefaultToggleInput = void 0; var _styledComponents = _interopRequireWildcard(require("styled-components")); var _utils = require("../../utils"); var _box = _interopRequireDefault(require("../box")); var _text = _interopRequireDefault(require("../text")); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } var StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_box.default).withConfig({ displayName: "styles__StyledLabel", componentId: "sc-gsfsw-0" })(["position:relative;display:inline-flex;align-items:center;flex-grow:0;padding:8px;box-sizing:border-box;cursor:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (p) { return !p.readOnly ? 'pointer' : 'default'; }, (0, _utils.borderRadius)(4), function (props) { return props.disabled && DisabledLabel; }, function (p) { return !p.readOnly && !p.checked && (0, _styledComponents.css)(["&:hover{background-color:", ";}"], function (props) { return props.theme.utils.lighten('black', 0.1); }); }, (0, _utils.borderRadius)(4), function (p) { return p.style; }, function (props) { return props.checked && CheckedToggle; }, function (props) { return props.disabled && DisabledToggle; }, function (props) { return props.error && ErrorToggle; }, function (p) { return p.stylesProps; }); var DefaultToggleInput = exports.DefaultToggleInput = _styledComponents.default.input.withConfig({ displayName: "styles__DefaultToggleInput", componentId: "sc-gsfsw-1" })(["position:relative;display:flex;align-items:center;justify-content:center;appearance:none;flex-shrink:0;cursor:pointer;"]); var StyledText = exports.StyledText = (0, _styledComponents.default)(_text.default).withConfig({ displayName: "styles__StyledText", componentId: "sc-gsfsw-2" })(["display:block;line-height:1;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-wrap:break-word;", ""], function (props) { return props.error && ErrorText; }); /** * Styles Label */ var DisabledLabel = (0, _styledComponents.css)(["cursor:not-allowed;"]); /** * Styles Toggle */ var CheckedToggle = (0, _styledComponents.css)(["background-color:", ";"], function (props) { return props.theme.colors.brand10; }); var DisabledToggle = (0, _styledComponents.css)(["opacity:", ";&:hover{background-color:transparent;}"], function (props) { return props.opacity || '0.24'; }); var ErrorToggle = (0, _styledComponents.css)(["background-color:", ";"], function (props) { return props.theme.colors.error10; }); var ErrorText = (0, _styledComponents.css)(["color:", ";"], function (props) { return props.theme.colors.error50; }); var RadioInput = exports.RadioInput = (0, _styledComponents.default)(DefaultToggleInput).withConfig({ displayName: "styles__RadioInput", componentId: "sc-gsfsw-3" })(["width:16px;height:16px;border:1px solid ", ";border-radius:16px;transition-property:background-color,border-color;transition-timing-function:ease;transition-duration:100ms;&:after{content:'';opacity:0;transition-property:opacity,transform;transition-timing-function:ease;transition-duration:0.3s;pointer-events:none;width:8px;height:8px;background-color:", ";border-radius:50%;position:absolute;top:calc(50% - 4px);left:calc(50% - 4px);transform:scale(0);}&:focus:not(:disabled,:focus-visible){border:1px solid ", ";}&:focus:not(:disabled,:focus-visible):checked{border:1px solid ", ";}&:focus-visible{outline-offset:2px;outline:2px solid ", ";}&:focus:not(:disabled):focus-visible{outline-offset:2px;outline:2px solid ", ";border:1px solid ", ";}&:focus:not(:disabled):focus-visible:checked{outline-offset:2px;outline:2px solid ", ";border:1px solid ", ";}&:checked{border:1px solid ", ";&:after{opacity:1;transform:scale(1);}}&:active{border:1px solid ", ";&:after{background-color:", ";}}"], function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.brand; }, function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.brand; }, function (p) { return p.theme.colors.brand; }, function (p) { return p.theme.colors.brand; }, function (p) { return p.theme.colors.black; }, function (p) { return p.theme.colors.brand; }, function (p) { return p.theme.colors.brand; }, function (p) { return p.theme.colors.brand; }, function (p) { return p.theme.colors.brand20; }, function (p) { return p.theme.colors.brand20; });