@alfalab/core-components-switch 5.0.0 → 5.1.0-snapshot-92b8690

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.
Files changed (52) hide show
  1. package/default.css +11 -11
  2. package/default.module.css.js +1 -1
  3. package/default.module.css.js.map +1 -1
  4. package/dynamic-mixins/Component.d.ts +124 -0
  5. package/dynamic-mixins/Component.js +58 -0
  6. package/dynamic-mixins/Component.js.map +1 -0
  7. package/dynamic-mixins/default.css +43 -0
  8. package/dynamic-mixins/default.module.css.js +8 -0
  9. package/dynamic-mixins/default.module.css.js.map +1 -0
  10. package/dynamic-mixins/index.css +100 -0
  11. package/dynamic-mixins/index.d.ts +1 -0
  12. package/dynamic-mixins/index.js +10 -0
  13. package/dynamic-mixins/index.js.map +1 -0
  14. package/dynamic-mixins/index.module.css.js +8 -0
  15. package/dynamic-mixins/index.module.css.js.map +1 -0
  16. package/dynamic-mixins/inverted.css +43 -0
  17. package/dynamic-mixins/inverted.module.css.js +8 -0
  18. package/dynamic-mixins/inverted.module.css.js.map +1 -0
  19. package/dynamic-mixins/types/colors.d.ts +1 -0
  20. package/dynamic-mixins/types/colors.js +3 -0
  21. package/dynamic-mixins/types/colors.js.map +1 -0
  22. package/esm/default.css +11 -11
  23. package/esm/default.module.css.js +1 -1
  24. package/esm/default.module.css.js.map +1 -1
  25. package/esm/index.css +19 -19
  26. package/esm/index.module.css.js +1 -1
  27. package/esm/index.module.css.js.map +1 -1
  28. package/esm/inverted.css +11 -11
  29. package/esm/inverted.module.css.js +1 -1
  30. package/esm/inverted.module.css.js.map +1 -1
  31. package/index.css +19 -19
  32. package/index.module.css.js +1 -1
  33. package/index.module.css.js.map +1 -1
  34. package/inverted.css +11 -11
  35. package/inverted.module.css.js +1 -1
  36. package/inverted.module.css.js.map +1 -1
  37. package/modern/default.css +11 -11
  38. package/modern/default.module.css.js +1 -1
  39. package/modern/default.module.css.js.map +1 -1
  40. package/modern/index.css +19 -19
  41. package/modern/index.module.css.js +1 -1
  42. package/modern/index.module.css.js.map +1 -1
  43. package/modern/inverted.css +11 -11
  44. package/modern/inverted.module.css.js +1 -1
  45. package/modern/inverted.module.css.js.map +1 -1
  46. package/moderncssm/default.module.css +11 -0
  47. package/moderncssm/index.module.css +19 -0
  48. package/moderncssm/inverted.module.css +11 -0
  49. package/package.json +4 -4
  50. package/src/default.module.css +1 -1
  51. package/src/index.module.css +1 -1
  52. package/src/inverted.module.css +1 -1
package/esm/index.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --switch-border-color: transparent;
24
24
  --switch-error-color: var(--color-light-text-negative);
25
25
  --switch-icon-color: var(--color-static-neutral-0);
26
- } .switch__component_57i6y {
26
+ } .switch__component_1en13 {
27
27
  display: inline-flex;
28
28
  align-items: flex-start;
29
29
  margin: var(--gap-0);
@@ -31,20 +31,20 @@
31
31
  border: 0;
32
32
  cursor: pointer;
33
33
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
34
- } .switch__component_57i6y input {
34
+ } .switch__component_1en13 input {
35
35
  opacity: 0;
36
36
  position: absolute;
37
- } .switch__start_57i6y {
37
+ } .switch__start_1en13 {
38
38
  align-items: flex-start;
39
- } .switch__center_57i6y {
39
+ } .switch__center_1en13 {
40
40
  align-items: center;
41
- } .switch__addons_57i6y {
41
+ } .switch__addons_1en13 {
42
42
  margin-left: auto;
43
43
  padding-left: var(--gap-16);
44
44
  line-height: 24px;
45
- } .switch__block_57i6y {
45
+ } .switch__block_1en13 {
46
46
  width: 100%;
47
- } .switch__switch_57i6y {
47
+ } .switch__switch_1en13 {
48
48
  position: relative;
49
49
  border-radius: var(--border-radius-16);
50
50
  width: 36px;
@@ -54,7 +54,7 @@
54
54
  border: 2px solid var(--switch-border-color);
55
55
  transition: background-color 0.2s ease, border-color 0.2s ease;
56
56
  box-sizing: border-box;
57
- } .switch__switch_57i6y:before {
57
+ } .switch__switch_1en13:before {
58
58
  content: '';
59
59
  position: absolute;
60
60
  top: var(--gap-0);
@@ -66,41 +66,41 @@
66
66
  background-color: var(--switch-icon-color);
67
67
  box-sizing: border-box;
68
68
  transition: transform 0.2s ease;
69
- } .switch__content_57i6y {
69
+ } .switch__content_1en13 {
70
70
  margin-left: var(--gap-12);
71
71
  flex-grow: 1;
72
- } .switch__label_57i6y {
72
+ } .switch__label_1en13 {
73
73
  font-size: 16px;
74
74
  line-height: 24px;
75
75
  font-weight: 400;
76
76
  display: block;
77
- } .switch__label_57i6y:not(:only-child) {
77
+ } .switch__label_1en13:not(:only-child) {
78
78
  margin-bottom: var(--gap-4);
79
- } .switch__errorMessage_57i6y {
79
+ } .switch__errorMessage_1en13 {
80
80
  font-size: 14px;
81
81
  line-height: 18px;
82
82
  font-weight: 400;
83
83
  color: var(--switch-error-color);
84
- } .switch__hint_57i6y {
84
+ } .switch__hint_1en13 {
85
85
  font-size: 14px;
86
86
  line-height: 18px;
87
87
  font-weight: 400;
88
88
  display: block;
89
- } .switch__component_57i6y.switch__reversed_57i6y {
89
+ } .switch__component_1en13.switch__reversed_1en13 {
90
90
  flex-direction: row-reverse;
91
- } .switch__reversed_57i6y .switch__content_57i6y {
91
+ } .switch__reversed_1en13 .switch__content_1en13 {
92
92
  margin-right: var(--gap-16);
93
93
  margin-left: var(--gap-0);
94
- } .switch__reversed_57i6y .switch__addons_57i6y {
94
+ } .switch__reversed_1en13 .switch__addons_1en13 {
95
95
  margin-left: var(--gap-0);
96
96
  padding-left: var(--gap-0);
97
97
  margin-right: auto;
98
98
  padding-right: var(--gap-16);
99
- } .switch__checked_57i6y .switch__switch_57i6y:before {
99
+ } .switch__checked_1en13 .switch__switch_1en13:before {
100
100
  transform: translateX(16px);
101
- } .switch__disabled_57i6y {
101
+ } .switch__disabled_1en13 {
102
102
  cursor: var(--disabled-cursor);
103
- } .switch__focused_57i6y .switch__switch_57i6y {
103
+ } .switch__focused_1en13 .switch__switch_1en13 {
104
104
  outline: 2px solid var(--focus-color);
105
105
  outline-offset: 2px;
106
106
  }
package/esm/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- var styles = {"component":"switch__component_57i6y","start":"switch__start_57i6y","center":"switch__center_57i6y","addons":"switch__addons_57i6y","block":"switch__block_57i6y","switch":"switch__switch_57i6y","content":"switch__content_57i6y","label":"switch__label_57i6y","errorMessage":"switch__errorMessage_57i6y","hint":"switch__hint_57i6y","reversed":"switch__reversed_57i6y","checked":"switch__checked_57i6y","disabled":"switch__disabled_57i6y","focused":"switch__focused_57i6y"};
3
+ var styles = {"component":"switch__component_1en13","start":"switch__start_1en13","center":"switch__center_1en13","addons":"switch__addons_1en13","block":"switch__block_1en13","switch":"switch__switch_1en13","content":"switch__content_1en13","label":"switch__label_1en13","errorMessage":"switch__errorMessage_1en13","hint":"switch__hint_1en13","reversed":"switch__reversed_1en13","checked":"switch__checked_1en13","disabled":"switch__disabled_1en13","focused":"switch__focused_1en13"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/esm/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-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;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-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;;;;"}
package/esm/inverted.css CHANGED
@@ -18,26 +18,26 @@
18
18
  --switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
19
19
  --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
20
20
  --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
21
- } .switch__switch_19x10 {
21
+ } .switch__switch_1e2qe {
22
22
  background-color: var(--switch-bg-inverted-color)
23
- } .switch__switch_19x10:hover {
23
+ } .switch__switch_1e2qe:hover {
24
24
  background-color: var(--switch-hover-bg-inverted-color);
25
- } .switch__label_19x10 {
25
+ } .switch__label_1e2qe {
26
26
  color: var(--switch-label-inverted-color);
27
- } .switch__hint_19x10 {
27
+ } .switch__hint_1e2qe {
28
28
  color: var(--switch-hint-inverted-color);
29
- } .switch__checked_19x10 .switch__switch_19x10 {
29
+ } .switch__checked_1e2qe .switch__switch_1e2qe {
30
30
  background-color: var(--switch-checked-bg-inverted-color)
31
- } .switch__checked_19x10 .switch__switch_19x10:hover {
31
+ } .switch__checked_1e2qe .switch__switch_1e2qe:hover {
32
32
  background-color: var(--switch-checked-hover-bg-inverted-color);
33
- } .switch__disabled_19x10 .switch__label_19x10 {
33
+ } .switch__disabled_1e2qe .switch__label_1e2qe {
34
34
  color: var(--switch-disabled-inverted-color);
35
- } .switch__disabled_19x10 .switch__hint_19x10 {
35
+ } .switch__disabled_1e2qe .switch__hint_1e2qe {
36
36
  color: var(--switch-disabled-inverted-color);
37
- } .switch__disabled_19x10 .switch__switch_19x10 {
37
+ } .switch__disabled_1e2qe .switch__switch_1e2qe {
38
38
  background-color: var(--switch-disabled-bg-inverted-color)
39
- } .switch__disabled_19x10 .switch__switch_19x10:before {
39
+ } .switch__disabled_1e2qe .switch__switch_1e2qe:before {
40
40
  background-color: var(--switch-icon-disabled-inverted-color);
41
- } .switch__disabled_19x10.switch__checked_19x10 .switch__switch_19x10 {
41
+ } .switch__disabled_1e2qe.switch__checked_1e2qe .switch__switch_1e2qe {
42
42
  background-color: var(--switch-disabled-checked-bg-inverted-color);
43
43
  }
package/esm/inverted.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './inverted.css';
2
2
 
3
- var invertedStyles = {"switch":"switch__switch_19x10","label":"switch__label_19x10","hint":"switch__hint_19x10","checked":"switch__checked_19x10","disabled":"switch__disabled_19x10"};
3
+ var invertedStyles = {"switch":"switch__switch_1e2qe","label":"switch__label_1e2qe","hint":"switch__hint_1e2qe","checked":"switch__checked_1e2qe","disabled":"switch__disabled_1e2qe"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/esm/inverted.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
1
+ {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
package/index.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --switch-border-color: transparent;
24
24
  --switch-error-color: var(--color-light-text-negative);
25
25
  --switch-icon-color: var(--color-static-neutral-0);
26
- } .switch__component_57i6y {
26
+ } .switch__component_1en13 {
27
27
  display: inline-flex;
28
28
  align-items: flex-start;
29
29
  margin: var(--gap-0);
@@ -31,20 +31,20 @@
31
31
  border: 0;
32
32
  cursor: pointer;
33
33
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
34
- } .switch__component_57i6y input {
34
+ } .switch__component_1en13 input {
35
35
  opacity: 0;
36
36
  position: absolute;
37
- } .switch__start_57i6y {
37
+ } .switch__start_1en13 {
38
38
  align-items: flex-start;
39
- } .switch__center_57i6y {
39
+ } .switch__center_1en13 {
40
40
  align-items: center;
41
- } .switch__addons_57i6y {
41
+ } .switch__addons_1en13 {
42
42
  margin-left: auto;
43
43
  padding-left: var(--gap-16);
44
44
  line-height: 24px;
45
- } .switch__block_57i6y {
45
+ } .switch__block_1en13 {
46
46
  width: 100%;
47
- } .switch__switch_57i6y {
47
+ } .switch__switch_1en13 {
48
48
  position: relative;
49
49
  border-radius: var(--border-radius-16);
50
50
  width: 36px;
@@ -54,7 +54,7 @@
54
54
  border: 2px solid var(--switch-border-color);
55
55
  transition: background-color 0.2s ease, border-color 0.2s ease;
56
56
  box-sizing: border-box;
57
- } .switch__switch_57i6y:before {
57
+ } .switch__switch_1en13:before {
58
58
  content: '';
59
59
  position: absolute;
60
60
  top: var(--gap-0);
@@ -66,41 +66,41 @@
66
66
  background-color: var(--switch-icon-color);
67
67
  box-sizing: border-box;
68
68
  transition: transform 0.2s ease;
69
- } .switch__content_57i6y {
69
+ } .switch__content_1en13 {
70
70
  margin-left: var(--gap-12);
71
71
  flex-grow: 1;
72
- } .switch__label_57i6y {
72
+ } .switch__label_1en13 {
73
73
  font-size: 16px;
74
74
  line-height: 24px;
75
75
  font-weight: 400;
76
76
  display: block;
77
- } .switch__label_57i6y:not(:only-child) {
77
+ } .switch__label_1en13:not(:only-child) {
78
78
  margin-bottom: var(--gap-4);
79
- } .switch__errorMessage_57i6y {
79
+ } .switch__errorMessage_1en13 {
80
80
  font-size: 14px;
81
81
  line-height: 18px;
82
82
  font-weight: 400;
83
83
  color: var(--switch-error-color);
84
- } .switch__hint_57i6y {
84
+ } .switch__hint_1en13 {
85
85
  font-size: 14px;
86
86
  line-height: 18px;
87
87
  font-weight: 400;
88
88
  display: block;
89
- } .switch__component_57i6y.switch__reversed_57i6y {
89
+ } .switch__component_1en13.switch__reversed_1en13 {
90
90
  flex-direction: row-reverse;
91
- } .switch__reversed_57i6y .switch__content_57i6y {
91
+ } .switch__reversed_1en13 .switch__content_1en13 {
92
92
  margin-right: var(--gap-16);
93
93
  margin-left: var(--gap-0);
94
- } .switch__reversed_57i6y .switch__addons_57i6y {
94
+ } .switch__reversed_1en13 .switch__addons_1en13 {
95
95
  margin-left: var(--gap-0);
96
96
  padding-left: var(--gap-0);
97
97
  margin-right: auto;
98
98
  padding-right: var(--gap-16);
99
- } .switch__checked_57i6y .switch__switch_57i6y:before {
99
+ } .switch__checked_1en13 .switch__switch_1en13:before {
100
100
  transform: translateX(16px);
101
- } .switch__disabled_57i6y {
101
+ } .switch__disabled_1en13 {
102
102
  cursor: var(--disabled-cursor);
103
- } .switch__focused_57i6y .switch__switch_57i6y {
103
+ } .switch__focused_1en13 .switch__switch_1en13 {
104
104
  outline: 2px solid var(--focus-color);
105
105
  outline-offset: 2px;
106
106
  }
package/index.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./index.css');
4
4
 
5
- var styles = {"component":"switch__component_57i6y","start":"switch__start_57i6y","center":"switch__center_57i6y","addons":"switch__addons_57i6y","block":"switch__block_57i6y","switch":"switch__switch_57i6y","content":"switch__content_57i6y","label":"switch__label_57i6y","errorMessage":"switch__errorMessage_57i6y","hint":"switch__hint_57i6y","reversed":"switch__reversed_57i6y","checked":"switch__checked_57i6y","disabled":"switch__disabled_57i6y","focused":"switch__focused_57i6y"};
5
+ var styles = {"component":"switch__component_1en13","start":"switch__start_1en13","center":"switch__center_1en13","addons":"switch__addons_1en13","block":"switch__block_1en13","switch":"switch__switch_1en13","content":"switch__content_1en13","label":"switch__label_1en13","errorMessage":"switch__errorMessage_1en13","hint":"switch__hint_1en13","reversed":"switch__reversed_1en13","checked":"switch__checked_1en13","disabled":"switch__disabled_1en13","focused":"switch__focused_1en13"};
6
6
 
7
7
  module.exports = styles;
8
8
  //# sourceMappingURL=index.module.css.js.map
package/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-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;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-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;;;;"}
package/inverted.css CHANGED
@@ -18,26 +18,26 @@
18
18
  --switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
19
19
  --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
20
20
  --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
21
- } .switch__switch_19x10 {
21
+ } .switch__switch_1e2qe {
22
22
  background-color: var(--switch-bg-inverted-color)
23
- } .switch__switch_19x10:hover {
23
+ } .switch__switch_1e2qe:hover {
24
24
  background-color: var(--switch-hover-bg-inverted-color);
25
- } .switch__label_19x10 {
25
+ } .switch__label_1e2qe {
26
26
  color: var(--switch-label-inverted-color);
27
- } .switch__hint_19x10 {
27
+ } .switch__hint_1e2qe {
28
28
  color: var(--switch-hint-inverted-color);
29
- } .switch__checked_19x10 .switch__switch_19x10 {
29
+ } .switch__checked_1e2qe .switch__switch_1e2qe {
30
30
  background-color: var(--switch-checked-bg-inverted-color)
31
- } .switch__checked_19x10 .switch__switch_19x10:hover {
31
+ } .switch__checked_1e2qe .switch__switch_1e2qe:hover {
32
32
  background-color: var(--switch-checked-hover-bg-inverted-color);
33
- } .switch__disabled_19x10 .switch__label_19x10 {
33
+ } .switch__disabled_1e2qe .switch__label_1e2qe {
34
34
  color: var(--switch-disabled-inverted-color);
35
- } .switch__disabled_19x10 .switch__hint_19x10 {
35
+ } .switch__disabled_1e2qe .switch__hint_1e2qe {
36
36
  color: var(--switch-disabled-inverted-color);
37
- } .switch__disabled_19x10 .switch__switch_19x10 {
37
+ } .switch__disabled_1e2qe .switch__switch_1e2qe {
38
38
  background-color: var(--switch-disabled-bg-inverted-color)
39
- } .switch__disabled_19x10 .switch__switch_19x10:before {
39
+ } .switch__disabled_1e2qe .switch__switch_1e2qe:before {
40
40
  background-color: var(--switch-icon-disabled-inverted-color);
41
- } .switch__disabled_19x10.switch__checked_19x10 .switch__switch_19x10 {
41
+ } .switch__disabled_1e2qe.switch__checked_1e2qe .switch__switch_1e2qe {
42
42
  background-color: var(--switch-disabled-checked-bg-inverted-color);
43
43
  }
package/inverted.module.css.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  require('./inverted.css');
4
4
 
5
- var invertedStyles = {"switch":"switch__switch_19x10","label":"switch__label_19x10","hint":"switch__hint_19x10","checked":"switch__checked_19x10","disabled":"switch__disabled_19x10"};
5
+ var invertedStyles = {"switch":"switch__switch_1e2qe","label":"switch__label_1e2qe","hint":"switch__hint_1e2qe","checked":"switch__checked_1e2qe","disabled":"switch__disabled_1e2qe"};
6
6
 
7
7
  module.exports = invertedStyles;
8
8
  //# sourceMappingURL=inverted.module.css.js.map
package/inverted.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;;;AAEgB,qBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
1
+ {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;;;AAEgB,qBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
package/modern/default.css CHANGED
@@ -18,26 +18,26 @@
18
18
  --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
19
19
  --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
20
20
  --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
21
- } .switch__switch_1lbvd {
21
+ } .switch__switch_154ok {
22
22
  background-color: var(--switch-bg-color)
23
- } .switch__switch_1lbvd:hover {
23
+ } .switch__switch_154ok:hover {
24
24
  background-color: var(--switch-hover-bg-color);
25
- } .switch__label_1lbvd {
25
+ } .switch__label_154ok {
26
26
  color: var(--switch-label-color);
27
- } .switch__hint_1lbvd {
27
+ } .switch__hint_154ok {
28
28
  color: var(--switch-hint-color);
29
- } .switch__checked_1lbvd .switch__switch_1lbvd {
29
+ } .switch__checked_154ok .switch__switch_154ok {
30
30
  background-color: var(--switch-checked-bg-color)
31
- } .switch__checked_1lbvd .switch__switch_1lbvd:hover {
31
+ } .switch__checked_154ok .switch__switch_154ok:hover {
32
32
  background-color: var(--switch-checked-hover-bg-color);
33
- } .switch__disabled_1lbvd .switch__label_1lbvd {
33
+ } .switch__disabled_154ok .switch__label_154ok {
34
34
  color: var(--switch-disabled-color);
35
- } .switch__disabled_1lbvd .switch__hint_1lbvd {
35
+ } .switch__disabled_154ok .switch__hint_154ok {
36
36
  color: var(--switch-disabled-color);
37
- } .switch__disabled_1lbvd .switch__switch_1lbvd {
37
+ } .switch__disabled_154ok .switch__switch_154ok {
38
38
  background-color: var(--switch-disabled-bg-color)
39
- } .switch__disabled_1lbvd .switch__switch_1lbvd:before {
39
+ } .switch__disabled_154ok .switch__switch_154ok:before {
40
40
  background-color: var(--switch-icon-disabled-color);
41
- } .switch__disabled_1lbvd.switch__checked_1lbvd .switch__switch_1lbvd {
41
+ } .switch__disabled_154ok.switch__checked_154ok .switch__switch_154ok {
42
42
  background-color: var(--switch-disabled-checked-bg-color);
43
43
  }
package/modern/default.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './default.css';
2
2
 
3
- const defaultStyles = {"switch":"switch__switch_1lbvd","label":"switch__label_1lbvd","hint":"switch__hint_1lbvd","checked":"switch__checked_1lbvd","disabled":"switch__disabled_1lbvd"};
3
+ const defaultStyles = {"switch":"switch__switch_154ok","label":"switch__label_154ok","hint":"switch__hint_154ok","checked":"switch__checked_154ok","disabled":"switch__disabled_154ok"};
4
4
 
5
5
  export { defaultStyles as default };
6
6
  //# sourceMappingURL=default.module.css.js.map
package/modern/default.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-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,sBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
1
+ {"version":3,"file":"default.module.css.js","sources":["src/default.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-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,sBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
package/modern/index.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --switch-border-color: transparent;
24
24
  --switch-error-color: var(--color-light-text-negative);
25
25
  --switch-icon-color: var(--color-static-neutral-0);
26
- } .switch__component_57i6y {
26
+ } .switch__component_1en13 {
27
27
  display: inline-flex;
28
28
  align-items: flex-start;
29
29
  margin: var(--gap-0);
@@ -31,20 +31,20 @@
31
31
  border: 0;
32
32
  cursor: pointer;
33
33
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
34
- } .switch__component_57i6y input {
34
+ } .switch__component_1en13 input {
35
35
  opacity: 0;
36
36
  position: absolute;
37
- } .switch__start_57i6y {
37
+ } .switch__start_1en13 {
38
38
  align-items: flex-start;
39
- } .switch__center_57i6y {
39
+ } .switch__center_1en13 {
40
40
  align-items: center;
41
- } .switch__addons_57i6y {
41
+ } .switch__addons_1en13 {
42
42
  margin-left: auto;
43
43
  padding-left: var(--gap-16);
44
44
  line-height: 24px;
45
- } .switch__block_57i6y {
45
+ } .switch__block_1en13 {
46
46
  width: 100%;
47
- } .switch__switch_57i6y {
47
+ } .switch__switch_1en13 {
48
48
  position: relative;
49
49
  border-radius: var(--border-radius-16);
50
50
  width: 36px;
@@ -54,7 +54,7 @@
54
54
  border: 2px solid var(--switch-border-color);
55
55
  transition: background-color 0.2s ease, border-color 0.2s ease;
56
56
  box-sizing: border-box;
57
- } .switch__switch_57i6y:before {
57
+ } .switch__switch_1en13:before {
58
58
  content: '';
59
59
  position: absolute;
60
60
  top: var(--gap-0);
@@ -66,41 +66,41 @@
66
66
  background-color: var(--switch-icon-color);
67
67
  box-sizing: border-box;
68
68
  transition: transform 0.2s ease;
69
- } .switch__content_57i6y {
69
+ } .switch__content_1en13 {
70
70
  margin-left: var(--gap-12);
71
71
  flex-grow: 1;
72
- } .switch__label_57i6y {
72
+ } .switch__label_1en13 {
73
73
  font-size: 16px;
74
74
  line-height: 24px;
75
75
  font-weight: 400;
76
76
  display: block;
77
- } .switch__label_57i6y:not(:only-child) {
77
+ } .switch__label_1en13:not(:only-child) {
78
78
  margin-bottom: var(--gap-4);
79
- } .switch__errorMessage_57i6y {
79
+ } .switch__errorMessage_1en13 {
80
80
  font-size: 14px;
81
81
  line-height: 18px;
82
82
  font-weight: 400;
83
83
  color: var(--switch-error-color);
84
- } .switch__hint_57i6y {
84
+ } .switch__hint_1en13 {
85
85
  font-size: 14px;
86
86
  line-height: 18px;
87
87
  font-weight: 400;
88
88
  display: block;
89
- } .switch__component_57i6y.switch__reversed_57i6y {
89
+ } .switch__component_1en13.switch__reversed_1en13 {
90
90
  flex-direction: row-reverse;
91
- } .switch__reversed_57i6y .switch__content_57i6y {
91
+ } .switch__reversed_1en13 .switch__content_1en13 {
92
92
  margin-right: var(--gap-16);
93
93
  margin-left: var(--gap-0);
94
- } .switch__reversed_57i6y .switch__addons_57i6y {
94
+ } .switch__reversed_1en13 .switch__addons_1en13 {
95
95
  margin-left: var(--gap-0);
96
96
  padding-left: var(--gap-0);
97
97
  margin-right: auto;
98
98
  padding-right: var(--gap-16);
99
- } .switch__checked_57i6y .switch__switch_57i6y:before {
99
+ } .switch__checked_1en13 .switch__switch_1en13:before {
100
100
  transform: translateX(16px);
101
- } .switch__disabled_57i6y {
101
+ } .switch__disabled_1en13 {
102
102
  cursor: var(--disabled-cursor);
103
- } .switch__focused_57i6y .switch__switch_57i6y {
103
+ } .switch__focused_1en13 .switch__switch_1en13 {
104
104
  outline: 2px solid var(--focus-color);
105
105
  outline-offset: 2px;
106
106
  }
package/modern/index.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './index.css';
2
2
 
3
- const styles = {"component":"switch__component_57i6y","start":"switch__start_57i6y","center":"switch__center_57i6y","addons":"switch__addons_57i6y","block":"switch__block_57i6y","switch":"switch__switch_57i6y","content":"switch__content_57i6y","label":"switch__label_57i6y","errorMessage":"switch__errorMessage_57i6y","hint":"switch__hint_57i6y","reversed":"switch__reversed_57i6y","checked":"switch__checked_57i6y","disabled":"switch__disabled_57i6y","focused":"switch__focused_57i6y"};
3
+ const styles = {"component":"switch__component_1en13","start":"switch__start_1en13","center":"switch__center_1en13","addons":"switch__addons_1en13","block":"switch__block_1en13","switch":"switch__switch_1en13","content":"switch__content_1en13","label":"switch__label_1en13","errorMessage":"switch__errorMessage_1en13","hint":"switch__hint_1en13","reversed":"switch__reversed_1en13","checked":"switch__checked_1en13","disabled":"switch__disabled_1en13","focused":"switch__focused_1en13"};
4
4
 
5
5
  export { styles as default };
6
6
  //# sourceMappingURL=index.module.css.js.map
package/modern/index.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-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,eAAe,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;;;;"}
1
+ {"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-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,eAAe,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;;;;"}
package/modern/inverted.css CHANGED
@@ -18,26 +18,26 @@
18
18
  --switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
19
19
  --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
20
20
  --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
21
- } .switch__switch_19x10 {
21
+ } .switch__switch_1e2qe {
22
22
  background-color: var(--switch-bg-inverted-color)
23
- } .switch__switch_19x10:hover {
23
+ } .switch__switch_1e2qe:hover {
24
24
  background-color: var(--switch-hover-bg-inverted-color);
25
- } .switch__label_19x10 {
25
+ } .switch__label_1e2qe {
26
26
  color: var(--switch-label-inverted-color);
27
- } .switch__hint_19x10 {
27
+ } .switch__hint_1e2qe {
28
28
  color: var(--switch-hint-inverted-color);
29
- } .switch__checked_19x10 .switch__switch_19x10 {
29
+ } .switch__checked_1e2qe .switch__switch_1e2qe {
30
30
  background-color: var(--switch-checked-bg-inverted-color)
31
- } .switch__checked_19x10 .switch__switch_19x10:hover {
31
+ } .switch__checked_1e2qe .switch__switch_1e2qe:hover {
32
32
  background-color: var(--switch-checked-hover-bg-inverted-color);
33
- } .switch__disabled_19x10 .switch__label_19x10 {
33
+ } .switch__disabled_1e2qe .switch__label_1e2qe {
34
34
  color: var(--switch-disabled-inverted-color);
35
- } .switch__disabled_19x10 .switch__hint_19x10 {
35
+ } .switch__disabled_1e2qe .switch__hint_1e2qe {
36
36
  color: var(--switch-disabled-inverted-color);
37
- } .switch__disabled_19x10 .switch__switch_19x10 {
37
+ } .switch__disabled_1e2qe .switch__switch_1e2qe {
38
38
  background-color: var(--switch-disabled-bg-inverted-color)
39
- } .switch__disabled_19x10 .switch__switch_19x10:before {
39
+ } .switch__disabled_1e2qe .switch__switch_1e2qe:before {
40
40
  background-color: var(--switch-icon-disabled-inverted-color);
41
- } .switch__disabled_19x10.switch__checked_19x10 .switch__switch_19x10 {
41
+ } .switch__disabled_1e2qe.switch__checked_1e2qe .switch__switch_1e2qe {
42
42
  background-color: var(--switch-disabled-checked-bg-inverted-color);
43
43
  }
package/modern/inverted.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './inverted.css';
2
2
 
3
- const invertedStyles = {"switch":"switch__switch_19x10","label":"switch__label_19x10","hint":"switch__hint_19x10","checked":"switch__checked_19x10","disabled":"switch__disabled_19x10"};
3
+ const invertedStyles = {"switch":"switch__switch_1e2qe","label":"switch__label_1e2qe","hint":"switch__hint_1e2qe","checked":"switch__checked_1e2qe","disabled":"switch__disabled_1e2qe"};
4
4
 
5
5
  export { invertedStyles as default };
6
6
  //# sourceMappingURL=inverted.module.css.js.map
package/modern/inverted.module.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;AAEgB,uBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}
1
+ {"version":3,"file":"inverted.module.css.js","sources":["src/inverted.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n@import './vars.css';\n\n.switch {\n background-color: var(--switch-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-hover-bg-inverted-color);\n }\n}\n\n.label {\n color: var(--switch-label-inverted-color);\n}\n\n.hint {\n color: var(--switch-hint-inverted-color);\n}\n\n.checked .switch {\n background-color: var(--switch-checked-bg-inverted-color);\n\n &:hover {\n background-color: var(--switch-checked-hover-bg-inverted-color);\n }\n}\n\n.disabled .label {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .hint {\n color: var(--switch-disabled-inverted-color);\n}\n\n.disabled .switch {\n background-color: var(--switch-disabled-bg-inverted-color);\n\n &:before {\n background-color: var(--switch-icon-disabled-inverted-color);\n }\n}\n\n.disabled.checked .switch {\n background-color: var(--switch-disabled-checked-bg-inverted-color);\n}\n"],"names":[],"mappings":";;AAEgB,uBAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,qBAAqB,CAAC,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,wBAAwB,CAAC;;;;"}