@alfalab/core-components-switch 4.5.6 → 4.5.7-snapshot-1393ffa
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/Component.js +18 -23
- package/Component.js.map +1 -0
- package/cssm/Component.js +3 -2
- package/cssm/Component.js.map +1 -0
- package/cssm/default.module.css +2 -35
- package/cssm/index.js +1 -0
- package/cssm/index.js.map +1 -0
- package/cssm/index.module.css +12 -43
- package/cssm/inverted.module.css +2 -35
- package/{Component.d.ts → cssm/src/Component.d.ts} +6 -8
- package/cssm/src/index.d.ts +1 -0
- package/cssm/src/types/colors.d.ts +1 -0
- package/cssm/types/colors.js +1 -0
- package/cssm/types/colors.js.map +1 -0
- package/default.css +13 -47
- package/default.module.css.js +8 -0
- package/default.module.css.js.map +1 -0
- package/esm/Component.js +4 -9
- package/esm/Component.js.map +1 -0
- package/esm/default.css +13 -47
- package/esm/default.module.css.js +6 -0
- package/esm/default.module.css.js.map +1 -0
- package/esm/index.css +27 -59
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -0
- package/esm/index.module.css.js +6 -0
- package/esm/index.module.css.js.map +1 -0
- package/esm/inverted.css +13 -47
- package/esm/inverted.module.css.js +6 -0
- package/esm/inverted.module.css.js.map +1 -0
- package/{cssm → esm/src}/Component.d.ts +6 -8
- package/esm/src/index.d.ts +1 -0
- package/esm/src/types/colors.d.ts +1 -0
- package/esm/types/colors.js +1 -0
- package/esm/types/colors.js.map +1 -0
- package/index.css +27 -59
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.module.css.js +8 -0
- package/index.module.css.js.map +1 -0
- package/inverted.css +13 -47
- package/inverted.module.css.js +8 -0
- package/inverted.module.css.js.map +1 -0
- package/modern/Component.js +4 -9
- package/modern/Component.js.map +1 -0
- package/modern/default.css +13 -47
- package/modern/default.module.css.js +6 -0
- package/modern/default.module.css.js.map +1 -0
- package/modern/index.css +27 -59
- package/modern/index.js +1 -0
- package/modern/index.js.map +1 -0
- package/modern/index.module.css.js +6 -0
- package/modern/index.module.css.js.map +1 -0
- package/modern/inverted.css +13 -47
- package/modern/inverted.module.css.js +6 -0
- package/modern/inverted.module.css.js.map +1 -0
- package/{esm → modern/src}/Component.d.ts +6 -8
- package/modern/src/index.d.ts +1 -0
- package/modern/src/types/colors.d.ts +1 -0
- package/modern/types/colors.js +1 -0
- package/modern/types/colors.js.map +1 -0
- package/moderncssm/Component.js +1 -0
- package/moderncssm/Component.js.map +1 -0
- package/moderncssm/default.module.css +0 -13
- package/moderncssm/index.js +1 -0
- package/moderncssm/index.js.map +1 -0
- package/moderncssm/index.module.css +0 -18
- package/moderncssm/inverted.module.css +0 -13
- package/{modern → moderncssm/src}/Component.d.ts +6 -8
- package/moderncssm/src/index.d.ts +1 -0
- package/moderncssm/src/types/colors.d.ts +1 -0
- package/moderncssm/types/colors.js +1 -0
- package/moderncssm/types/colors.js.map +1 -0
- package/package.json +4 -4
- package/src/Component.d.ts +124 -0
- package/src/index.d.ts +1 -0
- package/src/types/colors.d.ts +1 -0
- package/types/colors.js +1 -0
- package/types/colors.js.map +1 -0
- package/cssm/index.d.ts +0 -1
- package/cssm/types/colors.d.ts +0 -2
- package/cssm/vars.css +0 -14
- package/esm/index.d.ts +0 -1
- package/esm/types/colors.d.ts +0 -2
- package/index.d.ts +0 -1
- package/modern/index.d.ts +0 -1
- package/modern/types/colors.d.ts +0 -2
- package/moderncssm/Component.d.ts +0 -126
- package/moderncssm/index.d.ts +0 -1
- package/moderncssm/types/colors.d.ts +0 -2
- package/moderncssm/vars.css +0 -14
- package/types/colors.d.ts +0 -2
package/default.css
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
4
2
|
--color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
|
|
5
3
|
--color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
|
|
6
4
|
--color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
|
|
@@ -8,70 +6,38 @@
|
|
|
8
6
|
--color-light-status-positive: #0cc44d;
|
|
9
7
|
--color-light-status-positive-hover: #04b545;
|
|
10
8
|
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
11
|
-
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
12
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
13
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
9
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
14
10
|
} :root {
|
|
15
|
-
|
|
16
|
-
/* Hard */
|
|
17
|
-
|
|
18
|
-
/* Up */
|
|
19
|
-
|
|
20
|
-
/* Hard up */
|
|
21
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
25
|
-
|
|
26
|
-
/* новые значения, используйте их */
|
|
27
|
-
|
|
28
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
29
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
30
|
-
} :root {
|
|
31
|
-
} :root {
|
|
32
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
33
11
|
--switch-label-color: var(--color-light-text-primary);
|
|
34
12
|
--switch-hint-color: var(--color-light-text-secondary);
|
|
35
13
|
--switch-bg-color: var(--color-light-neutral-translucent-700);
|
|
36
|
-
|
|
37
|
-
/* inverted */
|
|
38
|
-
|
|
39
|
-
/* hover */
|
|
40
14
|
--switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
|
|
41
|
-
|
|
42
|
-
/* checked */
|
|
43
15
|
--switch-checked-bg-color: var(--color-light-status-positive);
|
|
44
16
|
--switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
|
|
45
|
-
|
|
46
|
-
/* disabled */
|
|
47
17
|
--switch-disabled-color: var(--color-light-text-secondary);
|
|
48
18
|
--switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
|
|
49
|
-
|
|
50
|
-
/* disabled checked */
|
|
51
19
|
--switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
|
|
52
|
-
|
|
53
|
-
/* icon */
|
|
54
20
|
--switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
|
|
55
|
-
} .
|
|
21
|
+
} .switch__switch_3fzcb {
|
|
56
22
|
background-color: var(--switch-bg-color)
|
|
57
|
-
} .
|
|
23
|
+
} .switch__switch_3fzcb:hover {
|
|
58
24
|
background-color: var(--switch-hover-bg-color);
|
|
59
|
-
} .
|
|
25
|
+
} .switch__label_3fzcb {
|
|
60
26
|
color: var(--switch-label-color);
|
|
61
|
-
} .
|
|
27
|
+
} .switch__hint_3fzcb {
|
|
62
28
|
color: var(--switch-hint-color);
|
|
63
|
-
} .
|
|
29
|
+
} .switch__checked_3fzcb .switch__switch_3fzcb {
|
|
64
30
|
background-color: var(--switch-checked-bg-color)
|
|
65
|
-
} .
|
|
31
|
+
} .switch__checked_3fzcb .switch__switch_3fzcb:hover {
|
|
66
32
|
background-color: var(--switch-checked-hover-bg-color);
|
|
67
|
-
} .
|
|
33
|
+
} .switch__disabled_3fzcb .switch__label_3fzcb {
|
|
68
34
|
color: var(--switch-disabled-color);
|
|
69
|
-
} .
|
|
35
|
+
} .switch__disabled_3fzcb .switch__hint_3fzcb {
|
|
70
36
|
color: var(--switch-disabled-color);
|
|
71
|
-
} .
|
|
37
|
+
} .switch__disabled_3fzcb .switch__switch_3fzcb {
|
|
72
38
|
background-color: var(--switch-disabled-bg-color)
|
|
73
|
-
} .
|
|
39
|
+
} .switch__disabled_3fzcb .switch__switch_3fzcb:before {
|
|
74
40
|
background-color: var(--switch-icon-disabled-color);
|
|
75
|
-
} .
|
|
41
|
+
} .switch__disabled_3fzcb.switch__checked_3fzcb .switch__switch_3fzcb {
|
|
76
42
|
background-color: var(--switch-disabled-checked-bg-color);
|
|
77
43
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./default.css');
|
|
4
|
+
|
|
5
|
+
var defaultStyles = {"switch":"switch__switch_3fzcb","label":"switch__label_3fzcb","hint":"switch__hint_3fzcb","checked":"switch__checked_3fzcb","disabled":"switch__disabled_3fzcb"};
|
|
6
|
+
|
|
7
|
+
module.exports = defaultStyles;
|
|
8
|
+
//# sourceMappingURL=default.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '../../vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-color);\n }\n}\n\n.label {\n color: var(--switch-label-color);\n}\n\n.hint {\n color: var(--switch-hint-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-color);\n}\n"],"names":[],"mappings":";;;;AAEgB,oBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
|
package/esm/Component.js
CHANGED
|
@@ -4,15 +4,9 @@ import mergeRefs from 'react-merge-refs';
|
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { dom } from '@alfalab/core-components-shared/esm';
|
|
6
6
|
import { useFocus } from '@alfalab/hooks';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var styles = {"component":"switch__component_agi88","start":"switch__start_agi88","center":"switch__center_agi88","addons":"switch__addons_agi88","block":"switch__block_agi88","switch":"switch__switch_agi88","content":"switch__content_agi88","label":"switch__label_agi88","errorMessage":"switch__errorMessage_agi88","hint":"switch__hint_agi88","reversed":"switch__reversed_agi88","checked":"switch__checked_agi88","disabled":"switch__disabled_agi88","focused":"switch__focused_agi88"};
|
|
12
|
-
require('./index.css')
|
|
13
|
-
|
|
14
|
-
var invertedStyles = {"switch":"switch__switch_1kqnc","label":"switch__label_1kqnc","hint":"switch__hint_1kqnc","checked":"switch__checked_1kqnc","disabled":"switch__disabled_1kqnc"};
|
|
15
|
-
require('./inverted.css')
|
|
7
|
+
import defaultStyles from './default.module.css.js';
|
|
8
|
+
import styles from './index.module.css.js';
|
|
9
|
+
import invertedStyles from './inverted.module.css.js';
|
|
16
10
|
|
|
17
11
|
var colorStyles = {
|
|
18
12
|
default: defaultStyles,
|
|
@@ -51,3 +45,4 @@ var Switch = forwardRef(function (_a, ref) {
|
|
|
51
45
|
Switch.displayName = 'Switch';
|
|
52
46
|
|
|
53
47
|
export { Switch };
|
|
48
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/Component.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { dom } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { Colors } from './types/colors';\n\nimport defaultStyles from './default.module.css';\nimport styles from './index.module.css';\nimport invertedStyles from './inverted.module.css';\n\nconst colorStyles = {\n default: defaultStyles,\n inverted: invertedStyles,\n};\n\ntype Align = 'start' | 'center';\n\nexport type SwitchProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'\n> & {\n /**\n * Управление состоянием вкл/выкл компонента\n */\n checked?: boolean;\n\n /**\n * Текст подписи к переключателю\n */\n label?: ReactNode;\n\n /**\n * Текст подсказки снизу\n */\n hint?: ReactNode;\n\n /**\n * Переключатель будет отрисован справа от контента\n */\n reversed?: boolean;\n\n /**\n * Выравнивание\n */\n align?: Align;\n\n /**\n * Дополнительный слот\n */\n addons?: React.ReactNode;\n\n /**\n * Растягивать ли компонент на всю ширину\n */\n block?: boolean;\n\n /**\n * Управление состоянием включен / выключен\n */\n disabled?: boolean;\n\n /**\n * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости\n * Используйте props disabled\n * Управление состоянием активен / неактивен\n */\n inactive?: boolean;\n\n /**\n * Отображение ошибки\n */\n error?: ReactNode | boolean;\n\n /**\n * Обработчик переключения компонента\n */\n onChange?: (\n event: ChangeEvent<HTMLInputElement>,\n payload: {\n checked: boolean;\n name: InputHTMLAttributes<HTMLInputElement>['name'];\n },\n ) => void;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Набор цветов для компонента\n * @default default\n */\n colors?: Colors;\n};\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n reversed = false,\n checked = false,\n align = 'start',\n addons,\n block,\n disabled,\n inactive,\n error,\n label,\n hint,\n name,\n value,\n className,\n onChange,\n dataTestId,\n colors = 'default',\n ...restProps\n },\n ref,\n ) => {\n const labelRef = useRef<HTMLLabelElement>(null);\n\n const [focused] = useFocus(labelRef, 'keyboard');\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e, { checked: e.target.checked, name });\n }\n };\n\n const errorMessage = typeof error === 'boolean' ? '' : error;\n\n return (\n <label\n className={cn(styles.component, styles[align], className, {\n [styles.disabled]: disabled || inactive,\n [colorStyles[colors].disabled]: disabled || inactive,\n\n [styles.checked]: checked,\n [colorStyles[colors].checked]: checked,\n\n [styles.reversed]: reversed,\n [styles.focused]: focused,\n [styles.block]: block,\n })}\n ref={mergeRefs([labelRef, ref])}\n >\n <input\n type='checkbox'\n onChange={handleChange}\n disabled={disabled || inactive}\n checked={checked}\n name={name}\n value={value}\n data-test-id={dataTestId}\n {...restProps}\n />\n\n <span className={cn(styles.switch, colorStyles[colors].switch)} />\n\n {(label || hint || errorMessage) && (\n <span className={styles.content}>\n {label && (\n <span className={cn(styles.label, colorStyles[colors].label)}>\n {label}\n </span>\n )}\n {hint && !errorMessage && (\n <span className={cn(styles.hint, colorStyles[colors].hint)}>\n {hint}\n </span>\n )}\n\n {errorMessage && (\n <span className={styles.errorMessage} role='alert'>\n {errorMessage}\n </span>\n )}\n </span>\n )}\n\n {addons && (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <span className={styles.addons} onClick={dom.preventDefault}>\n {addons}\n </span>\n )}\n </label>\n );\n },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":[],"mappings":"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"}
|
package/esm/default.css
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
4
2
|
--color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
|
|
5
3
|
--color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
|
|
6
4
|
--color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
|
|
@@ -8,70 +6,38 @@
|
|
|
8
6
|
--color-light-status-positive: #0cc44d;
|
|
9
7
|
--color-light-status-positive-hover: #04b545;
|
|
10
8
|
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
11
|
-
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
12
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
13
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
9
|
+
--color-light-text-secondary: rgba(4, 4, 19, 0.55);
|
|
14
10
|
} :root {
|
|
15
|
-
|
|
16
|
-
/* Hard */
|
|
17
|
-
|
|
18
|
-
/* Up */
|
|
19
|
-
|
|
20
|
-
/* Hard up */
|
|
21
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
22
|
-
|
|
23
|
-
/* новые значения, используйте их */
|
|
24
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
25
|
-
|
|
26
|
-
/* новые значения, используйте их */
|
|
27
|
-
|
|
28
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
29
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
30
|
-
} :root {
|
|
31
|
-
} :root {
|
|
32
|
-
} /* сбрасывает синюю подсветку при нажатии */ :root {
|
|
33
11
|
--switch-label-color: var(--color-light-text-primary);
|
|
34
12
|
--switch-hint-color: var(--color-light-text-secondary);
|
|
35
13
|
--switch-bg-color: var(--color-light-neutral-translucent-700);
|
|
36
|
-
|
|
37
|
-
/* inverted */
|
|
38
|
-
|
|
39
|
-
/* hover */
|
|
40
14
|
--switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
|
|
41
|
-
|
|
42
|
-
/* checked */
|
|
43
15
|
--switch-checked-bg-color: var(--color-light-status-positive);
|
|
44
16
|
--switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
|
|
45
|
-
|
|
46
|
-
/* disabled */
|
|
47
17
|
--switch-disabled-color: var(--color-light-text-secondary);
|
|
48
18
|
--switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
|
|
49
|
-
|
|
50
|
-
/* disabled checked */
|
|
51
19
|
--switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
|
|
52
|
-
|
|
53
|
-
/* icon */
|
|
54
20
|
--switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
|
|
55
|
-
} .
|
|
21
|
+
} .switch__switch_3fzcb {
|
|
56
22
|
background-color: var(--switch-bg-color)
|
|
57
|
-
} .
|
|
23
|
+
} .switch__switch_3fzcb:hover {
|
|
58
24
|
background-color: var(--switch-hover-bg-color);
|
|
59
|
-
} .
|
|
25
|
+
} .switch__label_3fzcb {
|
|
60
26
|
color: var(--switch-label-color);
|
|
61
|
-
} .
|
|
27
|
+
} .switch__hint_3fzcb {
|
|
62
28
|
color: var(--switch-hint-color);
|
|
63
|
-
} .
|
|
29
|
+
} .switch__checked_3fzcb .switch__switch_3fzcb {
|
|
64
30
|
background-color: var(--switch-checked-bg-color)
|
|
65
|
-
} .
|
|
31
|
+
} .switch__checked_3fzcb .switch__switch_3fzcb:hover {
|
|
66
32
|
background-color: var(--switch-checked-hover-bg-color);
|
|
67
|
-
} .
|
|
33
|
+
} .switch__disabled_3fzcb .switch__label_3fzcb {
|
|
68
34
|
color: var(--switch-disabled-color);
|
|
69
|
-
} .
|
|
35
|
+
} .switch__disabled_3fzcb .switch__hint_3fzcb {
|
|
70
36
|
color: var(--switch-disabled-color);
|
|
71
|
-
} .
|
|
37
|
+
} .switch__disabled_3fzcb .switch__switch_3fzcb {
|
|
72
38
|
background-color: var(--switch-disabled-bg-color)
|
|
73
|
-
} .
|
|
39
|
+
} .switch__disabled_3fzcb .switch__switch_3fzcb:before {
|
|
74
40
|
background-color: var(--switch-icon-disabled-color);
|
|
75
|
-
} .
|
|
41
|
+
} .switch__disabled_3fzcb.switch__checked_3fzcb .switch__switch_3fzcb {
|
|
76
42
|
background-color: var(--switch-disabled-checked-bg-color);
|
|
77
43
|
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './default.css';
|
|
2
|
+
|
|
3
|
+
var defaultStyles = {"switch":"switch__switch_3fzcb","label":"switch__label_3fzcb","hint":"switch__hint_3fzcb","checked":"switch__checked_3fzcb","disabled":"switch__disabled_3fzcb"};
|
|
4
|
+
|
|
5
|
+
export { defaultStyles as default };
|
|
6
|
+
//# sourceMappingURL=default.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '../../vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-color);\n }\n}\n\n.label {\n color: var(--switch-label-color);\n}\n\n.hint {\n color: var(--switch-hint-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-color);\n}\n"],"names":[],"mappings":";;AAEgB,oBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
|
package/esm/index.css
CHANGED
|
@@ -1,60 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
|
-
} /* deprecated */ :root {
|
|
1
|
+
:root {
|
|
4
2
|
--color-light-status-info: #2288fa;
|
|
5
3
|
--color-light-text-negative: #ec2d20;
|
|
6
|
-
--color-static-neutral-0: #fff;
|
|
7
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
8
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
4
|
+
--color-static-neutral-0: #fff;
|
|
9
5
|
} :root {
|
|
10
|
-
|
|
11
|
-
/* Hard */
|
|
12
|
-
|
|
13
|
-
/* Up */
|
|
14
|
-
|
|
15
|
-
/* Hard up */
|
|
16
|
-
} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
17
|
-
--border-radius-xl: 16px; /* deprecated */ /* deprecated */ /* deprecated */
|
|
6
|
+
--border-radius-xl: 16px;
|
|
18
7
|
--border-radius-circle: 50%;
|
|
19
|
-
|
|
20
|
-
/* новые значения, используйте их */
|
|
21
8
|
--border-radius-16: var(--border-radius-xl);
|
|
22
9
|
} :root {
|
|
23
|
-
--gap-3xs: 2px;
|
|
24
|
-
--gap-2xs: 4px;
|
|
25
|
-
--gap-s: 12px;
|
|
26
|
-
--gap-m: 16px;
|
|
27
|
-
|
|
28
|
-
/* новые значения, используйте их */
|
|
29
|
-
|
|
30
|
-
/* no-unit может приводить к проблемам в calc (#1559) */
|
|
31
|
-
/* stylelint-disable-next-line length-zero-no-unit */
|
|
10
|
+
--gap-3xs: 2px;
|
|
11
|
+
--gap-2xs: 4px;
|
|
12
|
+
--gap-s: 12px;
|
|
13
|
+
--gap-m: 16px;
|
|
32
14
|
--gap-0: 0px;
|
|
33
15
|
--gap-2: var(--gap-3xs);
|
|
34
16
|
--gap-4: var(--gap-2xs);
|
|
35
17
|
--gap-12: var(--gap-s);
|
|
36
18
|
--gap-16: var(--gap-m);
|
|
37
|
-
} :root {
|
|
38
19
|
} :root {
|
|
39
20
|
--focus-color: var(--color-light-status-info);
|
|
40
21
|
--disabled-cursor: not-allowed;
|
|
41
|
-
}
|
|
22
|
+
} :root {
|
|
42
23
|
--switch-border-color: transparent;
|
|
43
24
|
--switch-error-color: var(--color-light-text-negative);
|
|
44
|
-
|
|
45
|
-
/* inverted */
|
|
46
|
-
|
|
47
|
-
/* hover */
|
|
48
|
-
|
|
49
|
-
/* checked */
|
|
50
|
-
|
|
51
|
-
/* disabled */
|
|
52
|
-
|
|
53
|
-
/* disabled checked */
|
|
54
|
-
|
|
55
|
-
/* icon */
|
|
56
25
|
--switch-icon-color: var(--color-static-neutral-0);
|
|
57
|
-
} .
|
|
26
|
+
} .switch__component_vepxo {
|
|
58
27
|
display: inline-flex;
|
|
59
28
|
align-items: flex-start;
|
|
60
29
|
margin: var(--gap-0);
|
|
@@ -62,20 +31,20 @@
|
|
|
62
31
|
border: 0;
|
|
63
32
|
cursor: pointer;
|
|
64
33
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
65
|
-
} .
|
|
34
|
+
} .switch__component_vepxo input {
|
|
66
35
|
opacity: 0;
|
|
67
36
|
position: absolute;
|
|
68
|
-
} .
|
|
37
|
+
} .switch__start_vepxo {
|
|
69
38
|
align-items: flex-start;
|
|
70
|
-
} .
|
|
39
|
+
} .switch__center_vepxo {
|
|
71
40
|
align-items: center;
|
|
72
|
-
} .
|
|
41
|
+
} .switch__addons_vepxo {
|
|
73
42
|
margin-left: auto;
|
|
74
43
|
padding-left: var(--gap-16);
|
|
75
44
|
line-height: 24px;
|
|
76
|
-
} .
|
|
45
|
+
} .switch__block_vepxo {
|
|
77
46
|
width: 100%;
|
|
78
|
-
} .
|
|
47
|
+
} .switch__switch_vepxo {
|
|
79
48
|
position: relative;
|
|
80
49
|
border-radius: var(--border-radius-16);
|
|
81
50
|
width: 36px;
|
|
@@ -85,7 +54,7 @@
|
|
|
85
54
|
border: 2px solid var(--switch-border-color);
|
|
86
55
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
87
56
|
box-sizing: border-box;
|
|
88
|
-
} .
|
|
57
|
+
} .switch__switch_vepxo:before {
|
|
89
58
|
content: '';
|
|
90
59
|
position: absolute;
|
|
91
60
|
top: var(--gap-0);
|
|
@@ -97,42 +66,41 @@
|
|
|
97
66
|
background-color: var(--switch-icon-color);
|
|
98
67
|
box-sizing: border-box;
|
|
99
68
|
transition: transform 0.2s ease;
|
|
100
|
-
} .
|
|
69
|
+
} .switch__content_vepxo {
|
|
101
70
|
margin-left: var(--gap-12);
|
|
102
71
|
flex-grow: 1;
|
|
103
|
-
} .
|
|
72
|
+
} .switch__label_vepxo {
|
|
104
73
|
font-size: 16px;
|
|
105
74
|
line-height: 24px;
|
|
106
75
|
font-weight: 400;
|
|
107
76
|
display: block;
|
|
108
|
-
} .
|
|
77
|
+
} .switch__label_vepxo:not(:only-child) {
|
|
109
78
|
margin-bottom: var(--gap-4);
|
|
110
|
-
} .
|
|
79
|
+
} .switch__errorMessage_vepxo {
|
|
111
80
|
font-size: 14px;
|
|
112
81
|
line-height: 18px;
|
|
113
82
|
font-weight: 400;
|
|
114
83
|
color: var(--switch-error-color);
|
|
115
|
-
} .
|
|
84
|
+
} .switch__hint_vepxo {
|
|
116
85
|
font-size: 14px;
|
|
117
86
|
line-height: 18px;
|
|
118
87
|
font-weight: 400;
|
|
119
88
|
display: block;
|
|
120
|
-
}
|
|
89
|
+
} .switch__component_vepxo.switch__reversed_vepxo {
|
|
121
90
|
flex-direction: row-reverse;
|
|
122
|
-
} .
|
|
91
|
+
} .switch__reversed_vepxo .switch__content_vepxo {
|
|
123
92
|
margin-right: var(--gap-16);
|
|
124
93
|
margin-left: var(--gap-0);
|
|
125
|
-
} .
|
|
94
|
+
} .switch__reversed_vepxo .switch__addons_vepxo {
|
|
126
95
|
margin-left: var(--gap-0);
|
|
127
96
|
padding-left: var(--gap-0);
|
|
128
97
|
margin-right: auto;
|
|
129
98
|
padding-right: var(--gap-16);
|
|
130
|
-
}
|
|
131
|
-
/* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
|
|
99
|
+
} .switch__checked_vepxo .switch__switch_vepxo:before {
|
|
132
100
|
transform: translateX(16px);
|
|
133
|
-
}
|
|
101
|
+
} .switch__disabled_vepxo {
|
|
134
102
|
cursor: var(--disabled-cursor);
|
|
135
|
-
}
|
|
103
|
+
} .switch__focused_vepxo .switch__switch_vepxo {
|
|
136
104
|
outline: 2px solid var(--focus-color);
|
|
137
105
|
outline-offset: 2px;
|
|
138
106
|
}
|
package/esm/index.js
CHANGED
package/esm/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
|
|
3
|
+
var styles = {"component":"switch__component_vepxo","start":"switch__start_vepxo","center":"switch__center_vepxo","addons":"switch__addons_vepxo","block":"switch__block_vepxo","switch":"switch__switch_vepxo","content":"switch__content_vepxo","label":"switch__label_vepxo","errorMessage":"switch__errorMessage_vepxo","hint":"switch__hint_vepxo","reversed":"switch__reversed_vepxo","checked":"switch__checked_vepxo","disabled":"switch__disabled_vepxo","focused":"switch__focused_vepxo"};
|
|
4
|
+
|
|
5
|
+
export { styles as default };
|
|
6
|
+
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '../../vars/src/index.css';\n@import './vars.css';\n\n.component {\n display: inline-flex;\n align-items: flex-start;\n margin: var(--gap-0);\n padding: var(--gap-0);\n border: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.component input {\n opacity: 0;\n position: absolute;\n}\n\n.start {\n align-items: flex-start;\n}\n\n.center {\n align-items: center;\n}\n\n.addons {\n margin-left: auto;\n padding-left: var(--gap-16);\n line-height: 24px;\n}\n\n.block {\n width: 100%;\n}\n\n.switch {\n position: relative;\n border-radius: var(--border-radius-16);\n width: 36px;\n height: 20px;\n margin: var(--gap-2);\n flex-shrink: 0;\n border: 2px solid var(--switch-border-color);\n transition: background-color 0.2s ease, border-color 0.2s ease;\n box-sizing: border-box;\n}\n\n.switch:before {\n content: '';\n position: absolute;\n top: var(--gap-0);\n left: var(--gap-0);\n bottom: var(--gap-0);\n right: var(--gap-16);\n display: block;\n border-radius: var(--border-radius-circle);\n background-color: var(--switch-icon-color);\n box-sizing: border-box;\n transition: transform 0.2s ease;\n}\n\n.content {\n margin-left: var(--gap-12);\n flex-grow: 1;\n}\n\n.label {\n @mixin paragraph_primary_medium;\n display: block;\n}\n\n.label:not(:only-child) {\n margin-bottom: var(--gap-4);\n}\n\n.errorMessage {\n @mixin paragraph_component_secondary;\n color: var(--switch-error-color);\n}\n\n.hint {\n @mixin paragraph_component_secondary;\n display: block;\n}\n\n/* Reversed state */\n\n.component.reversed {\n flex-direction: row-reverse;\n}\n\n.reversed .content {\n margin-right: var(--gap-16);\n margin-left: var(--gap-0);\n}\n\n.reversed .addons {\n margin-left: var(--gap-0);\n padding-left: var(--gap-0);\n margin-right: auto;\n padding-right: var(--gap-16);\n}\n\n/* Checked state */\n\n.checked .switch:before {\n /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */\n transform: translateX(16px);\n}\n\n/* Disabled state */\n\n.disabled {\n cursor: var(--disabled-cursor);\n}\n\n/* Focused state */\n\n.focused .switch {\n @mixin focus-outline;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,yBAAyB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,uBAAuB,CAAC,OAAO,CAAC,qBAAqB,CAAC,cAAc,CAAC,4BAA4B,CAAC,MAAM,CAAC,oBAAoB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC,SAAS,CAAC,uBAAuB,CAAC;;;;"}
|