@megafon/ui-core 3.0.0-beta.0 → 3.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +66 -0
- package/dist/es/colors/ColorItem/ColorItem.css +1 -55
- package/dist/es/colors/ColorItem/ColorItem.js +1 -1
- package/dist/es/colors/Colors.css +0 -55
- package/dist/es/colors/Colors.js +64 -4
- package/dist/es/colors/colorsData.js +78 -78
- package/dist/es/components/Accordion/Accordion.css +0 -54
- package/dist/es/components/Accordion/Accordion.d.ts +1 -1
- package/dist/es/components/Accordion/Accordion.js +10 -5
- package/dist/es/components/Banner/Banner.css +1 -55
- package/dist/es/components/Banner/BannerDot.css +0 -54
- package/dist/es/components/Button/Button.css +30 -78
- package/dist/es/components/Calendar/Calendar.css +0 -54
- package/dist/es/components/Calendar/components/Day/Day.css +1 -55
- package/dist/es/components/Calendar/components/Month/Month.css +0 -54
- package/dist/es/components/Calendar/components/Month/Month.js +21 -5
- package/dist/es/components/Carousel/Carousel.css +1 -55
- package/dist/es/components/Checkbox/Checkbox.css +3 -57
- package/dist/es/components/Checkbox/Checkbox.d.ts +3 -25
- package/dist/es/components/Checkbox/Checkbox.js +71 -89
- package/dist/es/components/ContentArea/ContentArea.css +4 -4
- package/dist/es/components/Grid/GridColumn.css +0 -54
- package/dist/es/components/Header/Header.css +2 -56
- package/dist/es/components/InputLabel/InputLabel.css +0 -54
- package/dist/es/components/List/List.css +2 -56
- package/dist/es/components/List/ListItem.css +0 -54
- package/dist/es/components/Logo/Logo.css +0 -54
- package/dist/es/components/NavArrow/NavArrow.css +1 -55
- package/dist/es/components/Notification/Notification.css +3 -3
- package/dist/es/components/Pagination/Pagination.css +0 -54
- package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
- package/dist/es/components/Paragraph/Paragraph.css +2 -56
- package/dist/es/components/Preloader/Preloader.css +3 -57
- package/dist/es/components/RadioButton/RadioButton.css +1 -55
- package/dist/es/components/Search/Search.css +1 -55
- package/dist/es/components/Select/Select.css +2 -56
- package/dist/es/components/Select/Select.d.ts +1 -1
- package/dist/es/components/Switcher/Switcher.css +1 -55
- package/dist/es/components/Tabs/Tabs.css +10 -64
- package/dist/es/components/TextField/TextField.css +3 -57
- package/dist/es/components/TextLink/TextLink.css +1 -55
- package/dist/es/components/Tile/Tile.css +0 -54
- package/dist/es/components/Tooltip/Tooltip.css +0 -54
- package/dist/es/components/Tooltip/Tooltip.d.ts +3 -2
- package/dist/es/components/Tooltip/Tooltip.js +2 -9
- package/dist/lib/colors/ColorItem/ColorItem.css +1 -55
- package/dist/lib/colors/ColorItem/ColorItem.js +1 -1
- package/dist/lib/colors/Colors.css +0 -55
- package/dist/lib/colors/Colors.js +63 -4
- package/dist/lib/colors/colorsData.js +78 -78
- package/dist/lib/components/Accordion/Accordion.css +0 -54
- package/dist/lib/components/Accordion/Accordion.d.ts +1 -1
- package/dist/lib/components/Accordion/Accordion.js +9 -4
- package/dist/lib/components/Banner/Banner.css +1 -55
- package/dist/lib/components/Banner/BannerDot.css +0 -54
- package/dist/lib/components/Button/Button.css +30 -78
- package/dist/lib/components/Calendar/Calendar.css +0 -54
- package/dist/lib/components/Calendar/components/Day/Day.css +1 -55
- package/dist/lib/components/Calendar/components/Month/Month.css +0 -54
- package/dist/lib/components/Calendar/components/Month/Month.js +20 -4
- package/dist/lib/components/Carousel/Carousel.css +1 -55
- package/dist/lib/components/Checkbox/Checkbox.css +3 -57
- package/dist/lib/components/Checkbox/Checkbox.d.ts +3 -25
- package/dist/lib/components/Checkbox/Checkbox.js +76 -124
- package/dist/lib/components/ContentArea/ContentArea.css +4 -4
- package/dist/lib/components/Grid/GridColumn.css +0 -54
- package/dist/lib/components/Header/Header.css +2 -56
- package/dist/lib/components/InputLabel/InputLabel.css +0 -54
- package/dist/lib/components/List/List.css +2 -56
- package/dist/lib/components/List/ListItem.css +0 -54
- package/dist/lib/components/Logo/Logo.css +0 -54
- package/dist/lib/components/NavArrow/NavArrow.css +1 -55
- package/dist/lib/components/Notification/Notification.css +3 -3
- package/dist/lib/components/Pagination/Pagination.css +0 -54
- package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css +2 -2
- package/dist/lib/components/Paragraph/Paragraph.css +2 -56
- package/dist/lib/components/Preloader/Preloader.css +3 -57
- package/dist/lib/components/RadioButton/RadioButton.css +1 -55
- package/dist/lib/components/Search/Search.css +1 -55
- package/dist/lib/components/Select/Select.css +2 -56
- package/dist/lib/components/Select/Select.d.ts +1 -1
- package/dist/lib/components/Switcher/Switcher.css +1 -55
- package/dist/lib/components/Tabs/Tabs.css +10 -64
- package/dist/lib/components/TextField/TextField.css +3 -57
- package/dist/lib/components/TextLink/TextLink.css +1 -55
- package/dist/lib/components/Tile/Tile.css +0 -54
- package/dist/lib/components/Tooltip/Tooltip.css +0 -54
- package/dist/lib/components/Tooltip/Tooltip.d.ts +3 -2
- package/dist/lib/components/Tooltip/Tooltip.js +1 -8
- package/package.json +4 -4
- package/{dist/es/styles → styles}/base.css +0 -0
- package/dist/lib/styles/base.css +0 -54
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-radio-button__input {
|
|
56
2
|
position: absolute;
|
|
57
3
|
top: 0;
|
|
@@ -100,7 +46,7 @@ h5 {
|
|
|
100
46
|
background-color: var(--base);
|
|
101
47
|
}
|
|
102
48
|
.mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
|
|
103
|
-
border: 6px solid var(--
|
|
49
|
+
border: 6px solid var(--brandGreen);
|
|
104
50
|
}
|
|
105
51
|
.mfui-radio-button__label:hover .mfui-radio-button__custom-input:before {
|
|
106
52
|
border-color: var(--buttonHoverGreen);
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-search {
|
|
56
2
|
font-family: inherit;
|
|
57
3
|
font-size: 15px;
|
|
@@ -221,5 +167,5 @@ h5 {
|
|
|
221
167
|
color: var(--fury);
|
|
222
168
|
}
|
|
223
169
|
.mfui-search__notice_success {
|
|
224
|
-
color: var(--
|
|
170
|
+
color: var(--brandGreen);
|
|
225
171
|
}
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-select {
|
|
56
2
|
font-family: inherit;
|
|
57
3
|
font-size: 15px;
|
|
@@ -262,10 +208,10 @@ h5 {
|
|
|
262
208
|
border-color: var(--content);
|
|
263
209
|
}
|
|
264
210
|
.mfui-select_valid .mfui-select__control {
|
|
265
|
-
border-color: var(--
|
|
211
|
+
border-color: var(--brandGreen) !important;
|
|
266
212
|
}
|
|
267
213
|
.mfui-select_valid .mfui-select__text {
|
|
268
|
-
color: var(--
|
|
214
|
+
color: var(--brandGreen);
|
|
269
215
|
}
|
|
270
216
|
.mfui-select_error .mfui-select__control {
|
|
271
217
|
border-color: var(--fury) !important;
|
|
@@ -132,7 +132,7 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
|
|
|
132
132
|
handleClosed: () => void;
|
|
133
133
|
handleClickOutside: (e: MouseEvent) => void;
|
|
134
134
|
handleOpenDropdown: () => void;
|
|
135
|
-
handleSelectItem: (e: React.
|
|
135
|
+
handleSelectItem: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
136
136
|
handleHoverItem: (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
137
137
|
handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
138
138
|
handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-switcher {
|
|
56
2
|
top: 22px;
|
|
57
3
|
right: 28px;
|
|
@@ -78,7 +24,7 @@ h5 {
|
|
|
78
24
|
transition: all 0.3s;
|
|
79
25
|
}
|
|
80
26
|
.mfui-switcher_checked {
|
|
81
|
-
background-color: var(--
|
|
27
|
+
background-color: var(--brandGreen);
|
|
82
28
|
}
|
|
83
29
|
.mfui-switcher_checked .mfui-switcher__pointer {
|
|
84
30
|
left: 18px;
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-tabs__swiper {
|
|
56
2
|
font-family: inherit;
|
|
57
3
|
font-size: 15px;
|
|
@@ -134,12 +80,12 @@ h5 {
|
|
|
134
80
|
fill: var(--content);
|
|
135
81
|
}
|
|
136
82
|
.mfui-tabs__tab-inner:hover {
|
|
137
|
-
color: var(--
|
|
138
|
-
fill: var(--
|
|
83
|
+
color: var(--brandGreen);
|
|
84
|
+
fill: var(--brandGreen);
|
|
139
85
|
}
|
|
140
86
|
.mfui-tabs__tab-inner_current {
|
|
141
|
-
color: var(--
|
|
142
|
-
fill: var(--
|
|
87
|
+
color: var(--brandGreen);
|
|
88
|
+
fill: var(--brandGreen);
|
|
143
89
|
}
|
|
144
90
|
.mfui-tabs__tab-icon {
|
|
145
91
|
width: 32px;
|
|
@@ -163,7 +109,7 @@ h5 {
|
|
|
163
109
|
bottom: 0;
|
|
164
110
|
left: 0;
|
|
165
111
|
height: 2px;
|
|
166
|
-
background-color: var(--
|
|
112
|
+
background-color: var(--brandGreen);
|
|
167
113
|
-webkit-transition-duration: 0.3s;
|
|
168
114
|
transition-duration: 0.3s;
|
|
169
115
|
}
|
|
@@ -289,13 +235,13 @@ h5 {
|
|
|
289
235
|
}
|
|
290
236
|
.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
|
|
291
237
|
left: 0;
|
|
292
|
-
background: -webkit-gradient(linear, left top, right top, from(var(--
|
|
293
|
-
background: linear-gradient(to right, var(--
|
|
238
|
+
background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), to(transparent));
|
|
239
|
+
background: linear-gradient(to right, var(--brandGreen), transparent);
|
|
294
240
|
}
|
|
295
241
|
.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
|
|
296
242
|
right: 0;
|
|
297
|
-
background: -webkit-gradient(linear, right top, left top, from(var(--
|
|
298
|
-
background: linear-gradient(to left, var(--
|
|
243
|
+
background: -webkit-gradient(linear, right top, left top, from(var(--brandGreen)), to(transparent));
|
|
244
|
+
background: linear-gradient(to left, var(--brandGreen), transparent);
|
|
299
245
|
}
|
|
300
246
|
.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
|
|
301
247
|
border-color: var(--stcBlack5);
|
|
@@ -317,5 +263,5 @@ h5 {
|
|
|
317
263
|
}
|
|
318
264
|
.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
|
|
319
265
|
background-color: var(--stcWhite);
|
|
320
|
-
fill: var(--
|
|
266
|
+
fill: var(--brandGreen);
|
|
321
267
|
}
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-text-field {
|
|
56
2
|
font-family: inherit;
|
|
57
3
|
font-size: 15px;
|
|
@@ -185,10 +131,10 @@ h5 {
|
|
|
185
131
|
}
|
|
186
132
|
.mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
|
|
187
133
|
.mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field {
|
|
188
|
-
border-color: var(--
|
|
134
|
+
border-color: var(--brandGreen);
|
|
189
135
|
}
|
|
190
136
|
.mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__icon {
|
|
191
|
-
fill: var(--
|
|
137
|
+
fill: var(--brandGreen);
|
|
192
138
|
}
|
|
193
139
|
.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
|
|
194
140
|
.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field {
|
|
@@ -219,7 +165,7 @@ h5 {
|
|
|
219
165
|
color: var(--fury);
|
|
220
166
|
}
|
|
221
167
|
.mfui-text-field__text_success {
|
|
222
|
-
color: var(--
|
|
168
|
+
color: var(--brandGreen);
|
|
223
169
|
}
|
|
224
170
|
.mfui-text-field_disabled .mfui-text-field__field-wrapper {
|
|
225
171
|
background-color: var(--spbSky1) !important;
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-text-link {
|
|
56
2
|
font-family: inherit;
|
|
57
3
|
font-size: inherit;
|
|
@@ -94,7 +40,7 @@ h5 {
|
|
|
94
40
|
color: var(--systemBlue);
|
|
95
41
|
}
|
|
96
42
|
.mfui-text-link_color_green {
|
|
97
|
-
color: var(--
|
|
43
|
+
color: var(--brandGreen);
|
|
98
44
|
}
|
|
99
45
|
.mfui-text-link_color_gray {
|
|
100
46
|
color: var(--spbSky3);
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-tile {
|
|
56
2
|
color: var(--content);
|
|
57
3
|
background-color: var(--background);
|
|
@@ -1,57 +1,3 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--green: #00B956;
|
|
3
|
-
--purple: #731982;
|
|
4
|
-
--base: #FFFFFF;
|
|
5
|
-
--content: #333333;
|
|
6
|
-
--spbSky0: #F6F6F6;
|
|
7
|
-
--spbSky1: #EDEDED;
|
|
8
|
-
--spbSky2: #D8D8D8;
|
|
9
|
-
--spbSky3: #999999;
|
|
10
|
-
--warmRedC: #EB5A40;
|
|
11
|
-
--137C: #FFA717;
|
|
12
|
-
--311C: #5BD9E5;
|
|
13
|
-
--reflexBlue: #444189;
|
|
14
|
-
--fury: #F62434;
|
|
15
|
-
--systemBlue: #34AAF2;
|
|
16
|
-
--background: #FFFFFF;
|
|
17
|
-
--buttonHoverGreen: #10E272;
|
|
18
|
-
--buttonhoverPurple: #534455;
|
|
19
|
-
--buttonDown: #404D46;
|
|
20
|
-
--gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
|
|
21
|
-
--gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
|
|
22
|
-
--gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
|
|
23
|
-
--STCWhite: #FFFFFF;
|
|
24
|
-
--STCBlack: #333333;
|
|
25
|
-
--STCWhite5: #FFFFFF0D;
|
|
26
|
-
--STCWhite10: #FFFFFF1A;
|
|
27
|
-
--STCWhite20: #FFFFFF33;
|
|
28
|
-
--STCWhite50: #FFFFFF80;
|
|
29
|
-
--STCBlack5: #3333330D;
|
|
30
|
-
--STCBlack10: #3333331A;
|
|
31
|
-
--STCBlack20: #33333333;
|
|
32
|
-
--STCBlack50: #33333380;
|
|
33
|
-
--green80: #0CDC78;
|
|
34
|
-
--green20: #DDFFEC;
|
|
35
|
-
--purple80: #AA67C1;
|
|
36
|
-
--purple20: #FFEEFF;
|
|
37
|
-
--warmRedC80: #FF765D;
|
|
38
|
-
--warmRedC20: #FFCFC7;
|
|
39
|
-
--137C80: #FFB945;
|
|
40
|
-
--137C20: #FFEDD1;
|
|
41
|
-
--311C80: #62E3FF;
|
|
42
|
-
--311C20: #E1FAFF;
|
|
43
|
-
--reflexBlue80: #554FC9;
|
|
44
|
-
--reflexBlue20: #EBEAFF;
|
|
45
|
-
--fury80: #F8505D;
|
|
46
|
-
--fury20: #FFC5C9;
|
|
47
|
-
}
|
|
48
|
-
h1,
|
|
49
|
-
h2,
|
|
50
|
-
h3,
|
|
51
|
-
h4,
|
|
52
|
-
h5 {
|
|
53
|
-
margin: 0;
|
|
54
|
-
}
|
|
55
1
|
.mfui-tooltip {
|
|
56
2
|
z-index: 100;
|
|
57
3
|
visibility: hidden;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { AccessibilityEventTypeNative } from '@megafon/ui-helpers';
|
|
2
3
|
import './Tooltip.less';
|
|
3
4
|
export declare const Placement: {
|
|
4
5
|
readonly LEFT: "left";
|
|
@@ -46,9 +47,9 @@ export interface ITooltipProps {
|
|
|
46
47
|
contentShadow?: string;
|
|
47
48
|
};
|
|
48
49
|
/** Обработчик на открытие */
|
|
49
|
-
onOpen?: (e:
|
|
50
|
+
onOpen?: (e: AccessibilityEventTypeNative) => void;
|
|
50
51
|
/** Обработчик на закрытие */
|
|
51
|
-
onClose?: (e:
|
|
52
|
+
onClose?: (e: AccessibilityEventTypeNative | FocusEvent) => void;
|
|
52
53
|
}
|
|
53
54
|
declare const Tooltip: React.FC<ITooltipProps>;
|
|
54
55
|
export default Tooltip;
|
|
@@ -35,8 +35,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
35
35
|
|
|
36
36
|
var TOOLTIP_PADDING_FOR_FLIP = 14;
|
|
37
37
|
var MOUSE_KEY = 'mousedown';
|
|
38
|
-
var KEYBOARD_ENTER_KEY = 'Enter';
|
|
39
|
-
var KEYBOARD_NUMPAD_ENTER_KEY = 'NumpadEnter';
|
|
40
38
|
var TOUCH_KEY = 'touchstart';
|
|
41
39
|
var Placement = {
|
|
42
40
|
LEFT: 'left',
|
|
@@ -45,11 +43,6 @@ var Placement = {
|
|
|
45
43
|
BOTTOM: 'bottom'
|
|
46
44
|
};
|
|
47
45
|
exports.Placement = Placement;
|
|
48
|
-
|
|
49
|
-
var checkEventIsClickOrEnterPress = function checkEventIsClickOrEnterPress(e) {
|
|
50
|
-
return e.type === TOUCH_KEY || e.type === MOUSE_KEY || e.code === KEYBOARD_ENTER_KEY || e.code === KEYBOARD_NUMPAD_ENTER_KEY;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
46
|
var Paddings = {
|
|
54
47
|
NONE: 'none',
|
|
55
48
|
SMALL: 'small',
|
|
@@ -169,7 +162,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
169
162
|
}
|
|
170
163
|
}, [isOpen, onOpen, setIsOpen]);
|
|
171
164
|
var handleClick = (0, _react.useCallback)(function (e) {
|
|
172
|
-
if (!
|
|
165
|
+
if (!(0, _uiHelpers.checkNativeEventIsClickOrEnterPress)(e)) {
|
|
173
166
|
return;
|
|
174
167
|
}
|
|
175
168
|
|