@vchasno/ui-kit 0.3.18 → 0.3.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/Datepicker/types/components/Switch/Switch.d.ts +2 -2
- package/dist/Menu/types/components/Switch/Switch.d.ts +2 -2
- package/dist/ProjectsPopover/types/components/Switch/Switch.d.ts +2 -2
- package/dist/Select/index.cjs.js +3 -3
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +3 -3
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Switch/Switch.d.ts +2 -2
- package/dist/SelectCreatable/index.cjs.js +1 -1
- package/dist/SelectCreatable/index.js +1 -1
- package/dist/SelectCreatable/types/components/Switch/Switch.d.ts +2 -2
- package/dist/Snackbar/index.cjs.js +16 -8
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +16 -8
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Switch/Switch.d.ts +2 -2
- package/dist/css/_theme.css +3 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +16 -8
- package/dist/index.js.map +1 -1
- package/dist/types/components/Switch/Switch.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { LoadingFeedback, Sizable } from '../types';
|
|
2
3
|
import './Switch.global.css';
|
|
3
|
-
|
|
4
|
-
export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
4
|
+
export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
|
|
5
5
|
className?: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
value?: boolean;
|
package/dist/css/_theme.css
CHANGED
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
--vchasno-ui-input-font-color-disabled: #b6cadb;
|
|
32
32
|
--vchasno-ui-label-color-default: #6b8091;
|
|
33
33
|
--vchasno-ui-label-color-focused: #6b5fff;
|
|
34
|
-
--vchasno-ui-checkbox-bg-color: #
|
|
35
|
-
--vchasno-ui-checkbox-outline-color: #
|
|
34
|
+
--vchasno-ui-checkbox-bg-color: #3069fe;
|
|
35
|
+
--vchasno-ui-checkbox-outline-color: #d9eaff;
|
|
36
36
|
--vchasno-ui-checkbox-disabled-bg: #b6cadb;
|
|
37
37
|
--vchasno-ui-checkbox-border-color: #b6cadb;
|
|
38
38
|
--vchasno-ui-checkbox-icon-color: #fff;
|
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
--vchasno-ui-pagination-border-color: #6b5fff;
|
|
62
62
|
--vchasno-ui-pagination-hover-bg-color: rgb(0 0 0 / 10%);
|
|
63
63
|
--vchasno-ui-pagination-size: 32px;
|
|
64
|
+
--vchasno-ui-switch-height: 30px;
|
|
64
65
|
--vchasno-ui-switch-color-bg: #b6cadb;
|
|
65
66
|
--vchasno-ui-switch-spinner-color: #b6cadb;
|
|
66
67
|
--vchasno-ui-switch-circle-color: #fff;
|
package/dist/index.d.ts
CHANGED
|
@@ -164,7 +164,7 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
164
164
|
}
|
|
165
165
|
declare const Spinner: React.FC<SpinnerProps>;
|
|
166
166
|
|
|
167
|
-
interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
167
|
+
interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
|
|
168
168
|
className?: string;
|
|
169
169
|
label?: string;
|
|
170
170
|
value?: boolean;
|
package/dist/index.js
CHANGED
|
@@ -236,7 +236,7 @@ var Spinner = function (_a) {
|
|
|
236
236
|
React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
237
237
|
};
|
|
238
238
|
|
|
239
|
-
var css_248z$l = ".vchasno-ui-button {\n display: inline-flex;\n min-height:
|
|
239
|
+
var css_248z$l = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n min-width: 40px;\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n min-height: 50px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n box-shadow: inset 0 -2px 0 rgb(139 163 182 / 50%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
|
|
240
240
|
styleInject(css_248z$l);
|
|
241
241
|
|
|
242
242
|
var Button = React$1.forwardRef(function (_a, ref) {
|
|
@@ -278,7 +278,7 @@ var LabelText = function (_a) {
|
|
|
278
278
|
React$1.createElement("sup", null, "*")));
|
|
279
279
|
};
|
|
280
280
|
|
|
281
|
-
var css_248z$i = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n
|
|
281
|
+
var css_248z$i = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n height: 50px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 16px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n background-color: var(--vchasno-ui-input-bg-color);\n outline: solid 3px transparent;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: var(--vchasno-ui-input-bg-color-disabled);\n color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
282
282
|
styleInject(css_248z$i);
|
|
283
283
|
|
|
284
284
|
var Input = function (_a) {
|
|
@@ -605,12 +605,17 @@ var Alert = function (_a) {
|
|
|
605
605
|
closeNode));
|
|
606
606
|
};
|
|
607
607
|
|
|
608
|
-
var css_248z$8 = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n
|
|
608
|
+
var css_248z$8 = ".vchasno-ui-switch {\n --vchasno-ui-switc-hcircle-size: calc(var(--vchasno-ui-switch-height) - 4px);\n\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: var(--vchasno-ui-switch-height);\n}\n\n.vchasno-ui-switch.--sm {\n --vchasno-ui-switch-height: 20px;\n}\n\n.vchasno-ui-switch.--md {\n --vchasno-ui-switch-height: 30px;\n}\n\n.vchasno-ui-switch.--lg {\n --vchasno-ui-switch-height: 40px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n height: var(--vchasno-ui-switch-height, 20px);\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n aspect-ratio: 36/20;\n background: var(--vchasno-ui-switch-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n background: var(--vchasno-ui-switch-active-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n cursor: default;\n opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n height: var(--vchasno-ui-switc-hcircle-size);\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n aspect-ratio: 1/1;\n background-color: var(--vchasno-ui-switch-circle-color);\n transform: translate(2px, 2px);\n transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(18px, 2px);\n}\n\n.vchasno-ui-switch.--md .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(26px, 2px);\n}\n\n.vchasno-ui-switch.--lg .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(34px, 2px);\n}\n\n.vchasno-ui-spinner {\n color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n margin-left: 12px;\n color: var(--vchasno-ui-input-font-color);\n font-size: var(--vchasno-ui-input-font-size);\n user-select: none;\n}\n";
|
|
609
609
|
styleInject(css_248z$8);
|
|
610
610
|
|
|
611
|
+
var spinnerSizeMap = {
|
|
612
|
+
sm: 16,
|
|
613
|
+
md: 26,
|
|
614
|
+
lg: 36,
|
|
615
|
+
};
|
|
611
616
|
var Switch = React$1.forwardRef(function (_a, ref) {
|
|
612
|
-
var className = _a.className, label = _a.label, onChange = _a.onChange, onChecked = _a.onChecked, value = _a.value, _b = _a.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = _a.disabled, loading = _a.loading, id = _a.id, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id"]);
|
|
613
|
-
var
|
|
617
|
+
var className = _a.className, label = _a.label, onChange = _a.onChange, onChecked = _a.onChecked, value = _a.value, _b = _a.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = _a.disabled, loading = _a.loading, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id", "size"]);
|
|
618
|
+
var _d = React$1.useState(defaultChecked), checked = _d[0], setChecked = _d[1];
|
|
614
619
|
var isFullParentControlled = typeof value === 'boolean';
|
|
615
620
|
var inputChecked = isFullParentControlled ? value : checked;
|
|
616
621
|
var handleChange = function (event) {
|
|
@@ -620,10 +625,13 @@ var Switch = React$1.forwardRef(function (_a, ref) {
|
|
|
620
625
|
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
621
626
|
onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.target.checked, event);
|
|
622
627
|
};
|
|
623
|
-
return (React$1.createElement("label", { className: cn('vchasno-ui-switch',
|
|
628
|
+
return (React$1.createElement("label", { className: cn('vchasno-ui-switch', "--".concat(size), {
|
|
629
|
+
'vchasno-ui-switch__active': inputChecked,
|
|
630
|
+
'vchasno-ui-switch__disabled': disabled,
|
|
631
|
+
}, className) },
|
|
624
632
|
React$1.createElement("span", { className: "vchasno-ui-switch--bg" },
|
|
625
633
|
React$1.createElement("input", __assign({}, rest, { ref: ref, disabled: disabled, id: id, type: "checkbox", hidden: true, onChange: handleChange, checked: inputChecked })),
|
|
626
|
-
React$1.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && React$1.createElement(Spinner, { width:
|
|
634
|
+
React$1.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && (React$1.createElement(Spinner, { width: spinnerSizeMap[size], height: spinnerSizeMap[size] })))),
|
|
627
635
|
label && React$1.createElement("span", { className: "vchasno-ui-switch--label" }, label)));
|
|
628
636
|
});
|
|
629
637
|
Switch.displayName = 'Switch';
|
|
@@ -698,7 +706,7 @@ var Tabs = function (_a) {
|
|
|
698
706
|
React$1.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
699
707
|
};
|
|
700
708
|
|
|
701
|
-
var css_248z$6 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #
|
|
709
|
+
var css_248z$6 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #3069fe);\n outline: 2px solid var(--vchasno-ui-checkbox-outline-color, #d9eaff);\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
702
710
|
styleInject(css_248z$6);
|
|
703
711
|
|
|
704
712
|
var Checkbox = React$1.forwardRef(function (_a, ref) {
|