@vchasno/ui-kit 0.3.18 → 0.3.19
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/dist/Snackbar/index.cjs.js +2 -2
- package/dist/Snackbar/index.js +2 -2
- package/dist/css/_theme.css +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
|
@@ -240,7 +240,7 @@ var Spinner = function (_a) {
|
|
|
240
240
|
React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
241
241
|
};
|
|
242
242
|
|
|
243
|
-
var css_248z$n = ".vchasno-ui-button {\n display: inline-flex;\n min-height:
|
|
243
|
+
var css_248z$n = ".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";
|
|
244
244
|
styleInject(css_248z$n);
|
|
245
245
|
|
|
246
246
|
var Button = React$1.forwardRef(function (_a, ref) {
|
|
@@ -512,7 +512,7 @@ Switch.displayName = 'Switch';
|
|
|
512
512
|
var css_248z$9 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--active-color);\n transition:\n width var(--vchasno-ui-transition-duration-sec, 0.3s),\n left var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n background-color var(--vchasno-ui-transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--active-color);\n content: '';\n transition: height var(--vchasno-ui-transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
513
513
|
styleInject(css_248z$9);
|
|
514
514
|
|
|
515
|
-
var css_248z$8 = ".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, #
|
|
515
|
+
var css_248z$8 = ".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";
|
|
516
516
|
styleInject(css_248z$8);
|
|
517
517
|
|
|
518
518
|
var Checkbox = React$1.forwardRef(function (_a, ref) {
|
package/dist/Snackbar/index.js
CHANGED
|
@@ -218,7 +218,7 @@ var Spinner = function (_a) {
|
|
|
218
218
|
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
219
219
|
};
|
|
220
220
|
|
|
221
|
-
var css_248z$n = ".vchasno-ui-button {\n display: inline-flex;\n min-height:
|
|
221
|
+
var css_248z$n = ".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";
|
|
222
222
|
styleInject(css_248z$n);
|
|
223
223
|
|
|
224
224
|
var Button = React__default.forwardRef(function (_a, ref) {
|
|
@@ -490,7 +490,7 @@ Switch.displayName = 'Switch';
|
|
|
490
490
|
var css_248z$9 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--active-color);\n transition:\n width var(--vchasno-ui-transition-duration-sec, 0.3s),\n left var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n background-color var(--vchasno-ui-transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--active-color);\n content: '';\n transition: height var(--vchasno-ui-transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
491
491
|
styleInject(css_248z$9);
|
|
492
492
|
|
|
493
|
-
var css_248z$8 = ".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, #
|
|
493
|
+
var css_248z$8 = ".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";
|
|
494
494
|
styleInject(css_248z$8);
|
|
495
495
|
|
|
496
496
|
var Checkbox = React__default.forwardRef(function (_a, ref) {
|
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;
|
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) {
|
|
@@ -698,7 +698,7 @@ var Tabs = function (_a) {
|
|
|
698
698
|
React$1.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
699
699
|
};
|
|
700
700
|
|
|
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, #
|
|
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, #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
702
|
styleInject(css_248z$6);
|
|
703
703
|
|
|
704
704
|
var Checkbox = React$1.forwardRef(function (_a, ref) {
|