kwikid-components-react
Version:
KwikID's Component Library in React
281 lines (259 loc) • 9.04 kB
JavaScript
;
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");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
const KwikUIStyleInputCheckboxWrapper = exports.KwikUIStyleInputCheckboxWrapper = _styledComponents.default.div`
display: flex;
flex-direction: column;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
& > *:not(:last-child) {
margin-bottom: 0.5rem;
}
`;
const KwikUIStyleInputCheckboxContainer = exports.KwikUIStyleInputCheckboxContainer = _styledComponents.default.div`
/* padding: 0.25px var(--kwikui-space-xxs) !important;
border: 0px !important;
outline: 0px !important; */
box-shadow: none !important;
${_Input.KwikUIStyleInputContainerBase}
${_Input.KwikUIStyleInputStatus}
${_Input.KwikUIStyleInputContainerDisabled}
${_Input.KwikUIStyleInputContainerSize}
${_Input.KwikUIStyleInputContainerShape}
align-items: flex-start !important;
&:hover {
${_ref => {
let {
disabled
} = _ref;
return !disabled && (0, _styledComponents.css)`
cursor: pointer !important;
// border-color: var(--kwikui-color-primary);
background-color: var(--kwikui-color-white);
// box-shadow: 0 0 8px -3px var(--kwikui-color-primary) !important;
/* box-shadow: 0px 2px 12px -3px var(--kwikui-color-disabled-active); */
box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1);
`;
}}
${_ref2 => {
let {
disabled
} = _ref2;
return disabled && (0, _styledComponents.css)`
cursor: not-allowed !important;
`;
}}
}
& > *:not(:last-child) {
margin-right: 0.25rem;
}
input[type="checkbox"] {
appearance: none;
box-sizing: content-box;
outline: 1px solid var(--kwikui-color-disabled);
border: 2px solid transparent;
box-shadow: 0px 0px 5px -2px var(--kwikui-color-disabled) !important;
cursor: pointer;
margin: 0px;
flex: none; // To override parent container's flex properties and not cause side effects.
&:hover {
${_ref3 => {
let {
disabled
} = _ref3;
return !disabled && (0, _styledComponents.css)`
background-color: var(--kwikui-color-white);
// box-shadow: 0 0 8px -3px var(--kwikui-color-disabled) !important;
box-shadow: 0px 2px 12px -3px var(--kwikui-color-disabled-active);
filter: brightness(1.1);
transform: scale(1);
`;
}}
${_ref4 => {
let {
disabled
} = _ref4;
return disabled && (0, _styledComponents.css)`
cursor: not-allowed;
transform: scale(1);
`;
}}
}
&:active {
${_ref5 => {
let {
disabled
} = _ref5;
return !disabled && (0, _styledComponents.css)`
filter: saturate(0.7);
transform: scale(1);
`;
}}
${_ref6 => {
let {
disabled
} = _ref6;
return disabled && (0, _styledComponents.css)`
cursor: not-allowed;
transform: scale(1);
`;
}}
}
&:not(:checked) {
background-color: var(--kwikui-color-white);
${_ref7 => {
let {
disabled
} = _ref7;
return disabled && (0, _styledComponents.css)`
background-color: var(--kwikui-color-disabled-hover);
outline-color: var(--kwikui-color-disabled);
border-color: transparent;
`;
}}
}
&:checked {
outline-color: transparent;
background-color: var(--kwikui-color-primary);
border: 2px solid var(--kwikui-color-primary);
${_ref8 => {
let {
disabled
} = _ref8;
return disabled && (0, _styledComponents.css)`
background-color: var(--kwikui-color-disabled-hover);
border-color: var(--kwikui-color-disabled);
`;
}}
/* Use ::before to add the SVG icon */
&::before {
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");
display: block;
text-align: center;
margin-top: -1px; // To adjust the border-width of input.
${_ref9 => {
let {
disabled
} = _ref9;
return disabled && (0, _styledComponents.css)`
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");
`;
}}
${_Input.KwikUIStyleInputSize}
}
}
${_ref10 => {
let {
size
} = _ref10;
switch (size) {
case _Size.IKwikUISize.S:
{
return (0, _styledComponents.css)`
width: var(--kwikui-font-size-m);
height: var(--kwikui-font-size-m);
font-size: var(--kwikui-font-size-m);
line-height: calc(var(--kwikui-font-size-m) * 1.5);
`;
}
case _Size.IKwikUISize.M:
{
return (0, _styledComponents.css)`
width: var(--kwikui-font-size-l);
height: var(--kwikui-font-size-l);
font-size: var(--kwikui-font-size-l);
line-height: calc(var(--kwikui-font-size-l) * 1.5);
`;
}
case _Size.IKwikUISize.L:
{
return (0, _styledComponents.css)`
width: var(--kwikui-font-size-xl);
height: var(--kwikui-font-size-xl);
font-size: var(--kwikui-font-size-xl);
line-height: calc(var(--kwikui-font-size-xl) * 1.5);
`;
}
case _Size.IKwikUISize.XL:
{
return (0, _styledComponents.css)`
width: var(--kwikui-font-size-xxl);
height: var(--kwikui-font-size-xxl);
font-size: var(--kwikui-font-size-xxl);
line-height: calc(var(--kwikui-font-size-xxl) * 1.5);
`;
}
}
}}
${_Input.KwikUIStyleInputShape}
}
`;
const KwikUIStyleInputCheckboxLabel = exports.KwikUIStyleInputCheckboxLabel = _styledComponents.default.div`
width: 100%;
font-size: var(--kwikui-font-size-m);
-webkit-user-select: none;
-ms-user-select: none;
user-select: none !important;
&:hover {
${_ref11 => {
let {
disabled
} = _ref11;
return !disabled && (0, _styledComponents.css)`
cursor: pointer !important;
`;
}}
${_ref12 => {
let {
disabled
} = _ref12;
return disabled && (0, _styledComponents.css)`
cursor: not-allowed !important;
`;
}}
}
${_ref13 => {
let {
size
} = _ref13;
switch (size) {
case _Size.IKwikUISize.S:
return (0, _styledComponents.css)`
padding-left: calc(0.5 * var(--kwikui-space-s));
font-size: var(--kwikui-font-size-s);
line-height: calc(var(--kwikui-font-size-s) + 4px);
`;
case _Size.IKwikUISize.M:
return (0, _styledComponents.css)`
padding-left: calc(0.5 * var(--kwikui-space-m));
font-size: var(--kwikui-font-size-m);
line-height: calc(var(--kwikui-font-size-m) + 4px);
`;
case _Size.IKwikUISize.L:
return (0, _styledComponents.css)`
padding-left: calc(0.5 * var(--kwikui-space-l));
font-size: var(--kwikui-font-size-l);
line-height: calc(var(--kwikui-font-size-l) + 4px);
`;
case _Size.IKwikUISize.XL:
return (0, _styledComponents.css)`
padding-left: calc(0.5 * var(--kwikui-space-xl));
font-size: var(--kwikui-font-size-xl);
line-height: calc(var(--kwikui-font-size-xl) + 4px);
`;
}
}}
`;
const KwikUIStyleInputCheckboxMessagesContainer = exports.KwikUIStyleInputCheckboxMessagesContainer = _styledComponents.default.div`
width: 100%;
margin-left: 0.25rem;
font-size: 0.9rem;
`;