UNPKG

kwikid-components-react

Version:

KwikID's Component Library in React

bitbucket.org/team360noscope/kwikid-components-react

107 lines (106 loc) • 11.3 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.KwikUIStyleInputCheckboxWrapper = exports.KwikUIStyleInputCheckboxMessagesContainer = exports.KwikUIStyleInputCheckboxLabel = exports.KwikUIStyleInputCheckboxContainer = void 0; var _styledComponents = _interopRequireWildcard(require("styled-components")); var _Size = require("../../../../shared/definitions/Size"); var _Input = require("../../../../shared/styles/Input.style"); var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21; function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } const KwikUIStyleInputCheckboxWrapper = exports.KwikUIStyleInputCheckboxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-content: flex-start;\n justify-content: flex-start;\n align-items: flex-start;\n\n & > *:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n"]))); const KwikUIStyleInputCheckboxContainer = exports.KwikUIStyleInputCheckboxContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /* padding: 0.25px var(--kwikui-space-xxs) !important;\n border: 0px !important;\n outline: 0px !important; */\n box-shadow: none !important;\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n align-items: flex-start !important;\n\n &:hover {\n ", "\n ", "\n }\n\n & > *:not(:last-child) {\n margin-right: 0.25rem;\n }\n\n input[type=\"checkbox\"] {\n appearance: none;\n box-sizing: content-box;\n outline: 1px solid var(--kwikui-color-disabled);\n border: 2px solid transparent;\n box-shadow: 0px 0px 5px -2px var(--kwikui-color-disabled) !important;\n cursor: pointer;\n margin: 0px;\n flex: none; // To override parent container's flex properties and not cause side effects.\n\n &:hover {\n ", "\n ", "\n }\n\n &:active {\n ", "\n ", "\n }\n\n &:not(:checked) {\n background-color: var(--kwikui-color-white);\n\n ", "\n }\n\n &:checked {\n outline-color: transparent;\n background-color: var(--kwikui-color-primary);\n border: 2px solid var(--kwikui-color-primary);\n\n ", "\n\n /* Use ::before to add the SVG icon */\n &::before {\n content: url(\"data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.89163 13.2687L9.16582 17.5427L18.7085 8' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n display: block;\n\n text-align: center;\n margin-top: -1px; // To adjust the border-width of input.\n\n ", "\n\n ", "\n }\n }\n\n ", "\n\n ", "\n }\n"])), _Input.KwikUIStyleInputContainerBase, _Input.KwikUIStyleInputStatus, _Input.KwikUIStyleInputContainerDisabled, _Input.KwikUIStyleInputContainerSize, _Input.KwikUIStyleInputContainerShape, _ref => { let { disabled } = _ref; return !disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n cursor: pointer !important;\n // border-color: var(--kwikui-color-primary);\n background-color: var(--kwikui-color-white);\n // box-shadow: 0 0 8px -3px var(--kwikui-color-primary) !important;\n /* box-shadow: 0px 2px 12px -3px var(--kwikui-color-disabled-active); */\n box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);\n "]))); }, _ref2 => { let { disabled } = _ref2; return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n cursor: not-allowed !important;\n "]))); }, _ref3 => { let { disabled } = _ref3; return !disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n background-color: var(--kwikui-color-white);\n // box-shadow: 0 0 8px -3px var(--kwikui-color-disabled) !important;\n box-shadow: 0px 2px 12px -3px var(--kwikui-color-disabled-active);\n filter: brightness(1.1);\n transform: scale(1);\n "]))); }, _ref4 => { let { disabled } = _ref4; return disabled && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n transform: scale(1);\n "]))); }, _ref5 => { let { disabled } = _ref5; return !disabled && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n filter: saturate(0.7);\n transform: scale(1);\n "]))); }, _ref6 => { let { disabled } = _ref6; return disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n cursor: not-allowed;\n transform: scale(1);\n "]))); }, _ref7 => { let { disabled } = _ref7; return disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n background-color: var(--kwikui-color-disabled-hover);\n outline-color: var(--kwikui-color-disabled);\n border-color: transparent;\n "]))); }, _ref8 => { let { disabled } = _ref8; return disabled && (0, _styledComponents.css)(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n background-color: var(--kwikui-color-disabled-hover);\n border-color: var(--kwikui-color-disabled);\n "]))); }, _ref9 => { let { disabled } = _ref9; return disabled && (0, _styledComponents.css)(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n content: url(\"data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.89163 13.2687L9.16582 17.5427L18.7085 8' stroke='%23808080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n "]))); }, _Input.KwikUIStyleInputSize, _ref0 => { let { size } = _ref0; switch (size) { case _Size.IKwikUISize.S: { return (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: var(--kwikui-font-size-m);\n height: var(--kwikui-font-size-m);\n font-size: var(--kwikui-font-size-m);\n line-height: calc(var(--kwikui-font-size-m) * 1.5);\n "]))); } case _Size.IKwikUISize.M: { return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n width: var(--kwikui-font-size-l);\n height: var(--kwikui-font-size-l);\n font-size: var(--kwikui-font-size-l);\n line-height: calc(var(--kwikui-font-size-l) * 1.5);\n "]))); } case _Size.IKwikUISize.L: { return (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n width: var(--kwikui-font-size-xl);\n height: var(--kwikui-font-size-xl);\n font-size: var(--kwikui-font-size-xl);\n line-height: calc(var(--kwikui-font-size-xl) * 1.5);\n "]))); } case _Size.IKwikUISize.XL: { return (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n width: var(--kwikui-font-size-xxl);\n height: var(--kwikui-font-size-xxl);\n font-size: var(--kwikui-font-size-xxl);\n line-height: calc(var(--kwikui-font-size-xxl) * 1.5);\n "]))); } } }, _Input.KwikUIStyleInputShape); const KwikUIStyleInputCheckboxLabel = exports.KwikUIStyleInputCheckboxLabel = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n width: 100%;\n font-size: var(--kwikui-font-size-m);\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none !important;\n\n &:hover {\n ", "\n ", "\n }\n\n ", "\n"])), _ref1 => { let { disabled } = _ref1; return !disabled && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n cursor: pointer !important;\n "]))); }, _ref10 => { let { disabled } = _ref10; return disabled && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n cursor: not-allowed !important;\n "]))); }, _ref11 => { let { size } = _ref11; switch (size) { case _Size.IKwikUISize.S: return (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n padding-left: calc(0.5 * var(--kwikui-space-s));\n font-size: var(--kwikui-font-size-s);\n line-height: calc(var(--kwikui-font-size-s) + 4px);\n "]))); case _Size.IKwikUISize.M: return (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n padding-left: calc(0.5 * var(--kwikui-space-m));\n font-size: var(--kwikui-font-size-m);\n line-height: calc(var(--kwikui-font-size-m) + 4px);\n "]))); case _Size.IKwikUISize.L: return (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n padding-left: calc(0.5 * var(--kwikui-space-l));\n font-size: var(--kwikui-font-size-l);\n line-height: calc(var(--kwikui-font-size-l) + 4px);\n "]))); case _Size.IKwikUISize.XL: return (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n padding-left: calc(0.5 * var(--kwikui-space-xl));\n font-size: var(--kwikui-font-size-xl);\n line-height: calc(var(--kwikui-font-size-xl) + 4px);\n "]))); } }); const KwikUIStyleInputCheckboxMessagesContainer = exports.KwikUIStyleInputCheckboxMessagesContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n width: 100%;\n margin-left: 0.25rem;\n font-size: 0.9rem;\n"])));