@megafon/ui-core 4.0.0-beta.6 → 4.0.0-beta.7

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 (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/components/Search/Search.css +21 -10
  3. package/dist/es/components/Search/Search.js +2 -1
  4. package/dist/es/components/Select/Select.css +13 -10
  5. package/dist/lib/components/Search/Search.css +21 -10
  6. package/dist/lib/components/Search/Search.js +2 -1
  7. package/dist/lib/components/Select/Select.css +13 -10
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.6...@megafon/ui-core@4.0.0-beta.7) (2022-07-13)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **select:** fix styles ([3e79c68](https://github.com/MegafonWebLab/megafon-ui/commit/3e79c68fecde72e515b7ef52d38d9188e51680f6))
12
+
13
+
14
+
15
+
16
+
6
17
  # [4.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.5...@megafon/ui-core@4.0.0-beta.6) (2022-07-05)
7
18
 
8
19
 
package/dist/es/components/Search/Search.css CHANGED
@@ -1,22 +1,24 @@
1
1
  @-webkit-keyframes listAppear {
2
2
  from {
3
+ -webkit-transform: translateY(-25px);
4
+ transform: translateY(-25px);
3
5
  opacity: 0;
4
6
  }
5
- 99% {
6
- opacity: 0.99;
7
- }
8
7
  to {
8
+ -webkit-transform: translateY(0);
9
+ transform: translateY(0);
9
10
  opacity: 1;
10
11
  }
11
12
  }
12
13
  @keyframes listAppear {
13
14
  from {
15
+ -webkit-transform: translateY(-25px);
16
+ transform: translateY(-25px);
14
17
  opacity: 0;
15
18
  }
16
- 99% {
17
- opacity: 0.99;
18
- }
19
19
  to {
20
+ -webkit-transform: translateY(0);
21
+ transform: translateY(0);
20
22
  opacity: 1;
21
23
  }
22
24
  }
@@ -51,11 +53,19 @@
51
53
  background-color: var(--base);
52
54
  outline: none;
53
55
  cursor: pointer;
56
+ -webkit-transition: border-color 0.3s;
57
+ transition: border-color 0.3s;
54
58
  -webkit-user-select: none;
55
59
  -moz-user-select: none;
56
60
  -ms-user-select: none;
57
61
  user-select: none;
58
62
  }
63
+ .mfui-search__control:not(.mfui-search__control_success):not(.mfui-search__control_error):hover {
64
+ border-color: var(--content);
65
+ }
66
+ .mfui-search__control_success {
67
+ border-color: var(--brandGreen);
68
+ }
59
69
  .mfui-search__control_error {
60
70
  border-color: var(--fury);
61
71
  }
@@ -176,8 +186,8 @@
176
186
  display: none;
177
187
  border-radius: 12px;
178
188
  background-color: var(--base);
179
- -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
180
- box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
189
+ -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
190
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
181
191
  }
182
192
  .mfui-search__icon {
183
193
  display: block;
@@ -207,7 +217,7 @@
207
217
  -webkit-box-sizing: border-box;
208
218
  box-sizing: border-box;
209
219
  max-height: 368px;
210
- padding: 12px 0;
220
+ padding: 16px;
211
221
  overflow-y: auto;
212
222
  }
213
223
  .mfui-search__list-item {
@@ -244,11 +254,12 @@
244
254
  }
245
255
  .mfui-search_open .mfui-search__list {
246
256
  display: block;
247
- border-color: var(--content);
248
257
  -webkit-animation-name: listAppear;
249
258
  animation-name: listAppear;
250
259
  -webkit-animation-duration: 0.3s;
251
260
  animation-duration: 0.3s;
261
+ -webkit-animation-timing-function: ease-in-out;
262
+ animation-timing-function: ease-in-out;
252
263
  }
253
264
  .mfui-search_open {
254
265
  z-index: 12;
package/dist/es/components/Search/Search.js CHANGED
@@ -182,7 +182,8 @@ var Search = function Search(_ref) {
182
182
  }, [className])
183
183
  }), /*#__PURE__*/React.createElement("div", {
184
184
  className: cn('control', {
185
- error: verification === Verification.ERROR
185
+ error: verification === Verification.ERROR,
186
+ success: verification === Verification.VALID
186
187
  }, [classes === null || classes === void 0 ? void 0 : classes.control])
187
188
  }, /*#__PURE__*/React.createElement("label", {
188
189
  className: cn('search-wrapper', {
package/dist/es/components/Select/Select.css CHANGED
@@ -1,22 +1,24 @@
1
1
  @-webkit-keyframes listAppear {
2
2
  from {
3
+ -webkit-transform: translateY(-25px);
4
+ transform: translateY(-25px);
3
5
  opacity: 0;
4
6
  }
5
- 99% {
6
- opacity: 0.99;
7
- }
8
7
  to {
8
+ -webkit-transform: translateY(0);
9
+ transform: translateY(0);
9
10
  opacity: 1;
10
11
  }
11
12
  }
12
13
  @keyframes listAppear {
13
14
  from {
15
+ -webkit-transform: translateY(-25px);
16
+ transform: translateY(-25px);
14
17
  opacity: 0;
15
18
  }
16
- 99% {
17
- opacity: 0.99;
18
- }
19
19
  to {
20
+ -webkit-transform: translateY(0);
21
+ transform: translateY(0);
20
22
  opacity: 1;
21
23
  }
22
24
  }
@@ -155,8 +157,8 @@
155
157
  display: none;
156
158
  border-radius: 12px;
157
159
  background-color: var(--base);
158
- -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
159
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
160
+ -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
161
+ box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
160
162
  }
161
163
  .mfui-select__list-inner {
162
164
  -webkit-box-sizing: border-box;
@@ -212,7 +214,7 @@
212
214
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
213
215
  }
214
216
  .mfui-select__item-title_active {
215
- font-weight: bold;
217
+ font-weight: 600;
216
218
  }
217
219
  .mfui-select__list-item_hovered .mfui-select__item-title:after {
218
220
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
@@ -327,11 +329,12 @@
327
329
  }
328
330
  .mfui-select_open .mfui-select__list {
329
331
  display: block;
330
- border-color: var(--content);
331
332
  -webkit-animation-name: listAppear;
332
333
  animation-name: listAppear;
333
334
  -webkit-animation-duration: 0.3s;
334
335
  animation-duration: 0.3s;
336
+ -webkit-animation-timing-function: ease-in-out;
337
+ animation-timing-function: ease-in-out;
335
338
  }
336
339
  .mfui-select_open .mfui-select__control {
337
340
  border-color: var(--content);
package/dist/lib/components/Search/Search.css CHANGED
@@ -1,22 +1,24 @@
1
1
  @-webkit-keyframes listAppear {
2
2
  from {
3
+ -webkit-transform: translateY(-25px);
4
+ transform: translateY(-25px);
3
5
  opacity: 0;
4
6
  }
5
- 99% {
6
- opacity: 0.99;
7
- }
8
7
  to {
8
+ -webkit-transform: translateY(0);
9
+ transform: translateY(0);
9
10
  opacity: 1;
10
11
  }
11
12
  }
12
13
  @keyframes listAppear {
13
14
  from {
15
+ -webkit-transform: translateY(-25px);
16
+ transform: translateY(-25px);
14
17
  opacity: 0;
15
18
  }
16
- 99% {
17
- opacity: 0.99;
18
- }
19
19
  to {
20
+ -webkit-transform: translateY(0);
21
+ transform: translateY(0);
20
22
  opacity: 1;
21
23
  }
22
24
  }
@@ -51,11 +53,19 @@
51
53
  background-color: var(--base);
52
54
  outline: none;
53
55
  cursor: pointer;
56
+ -webkit-transition: border-color 0.3s;
57
+ transition: border-color 0.3s;
54
58
  -webkit-user-select: none;
55
59
  -moz-user-select: none;
56
60
  -ms-user-select: none;
57
61
  user-select: none;
58
62
  }
63
+ .mfui-search__control:not(.mfui-search__control_success):not(.mfui-search__control_error):hover {
64
+ border-color: var(--content);
65
+ }
66
+ .mfui-search__control_success {
67
+ border-color: var(--brandGreen);
68
+ }
59
69
  .mfui-search__control_error {
60
70
  border-color: var(--fury);
61
71
  }
@@ -176,8 +186,8 @@
176
186
  display: none;
177
187
  border-radius: 12px;
178
188
  background-color: var(--base);
179
- -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
180
- box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
189
+ -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
190
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
181
191
  }
182
192
  .mfui-search__icon {
183
193
  display: block;
@@ -207,7 +217,7 @@
207
217
  -webkit-box-sizing: border-box;
208
218
  box-sizing: border-box;
209
219
  max-height: 368px;
210
- padding: 12px 0;
220
+ padding: 16px;
211
221
  overflow-y: auto;
212
222
  }
213
223
  .mfui-search__list-item {
@@ -244,11 +254,12 @@
244
254
  }
245
255
  .mfui-search_open .mfui-search__list {
246
256
  display: block;
247
- border-color: var(--content);
248
257
  -webkit-animation-name: listAppear;
249
258
  animation-name: listAppear;
250
259
  -webkit-animation-duration: 0.3s;
251
260
  animation-duration: 0.3s;
261
+ -webkit-animation-timing-function: ease-in-out;
262
+ animation-timing-function: ease-in-out;
252
263
  }
253
264
  .mfui-search_open {
254
265
  z-index: 12;
package/dist/lib/components/Search/Search.js CHANGED
@@ -222,7 +222,8 @@ var Search = function Search(_ref) {
222
222
  }, [className])
223
223
  }), /*#__PURE__*/_react["default"].createElement("div", {
224
224
  className: cn('control', {
225
- error: verification === Verification.ERROR
225
+ error: verification === Verification.ERROR,
226
+ success: verification === Verification.VALID
226
227
  }, [classes === null || classes === void 0 ? void 0 : classes.control])
227
228
  }, /*#__PURE__*/_react["default"].createElement("label", {
228
229
  className: cn('search-wrapper', {
package/dist/lib/components/Select/Select.css CHANGED
@@ -1,22 +1,24 @@
1
1
  @-webkit-keyframes listAppear {
2
2
  from {
3
+ -webkit-transform: translateY(-25px);
4
+ transform: translateY(-25px);
3
5
  opacity: 0;
4
6
  }
5
- 99% {
6
- opacity: 0.99;
7
- }
8
7
  to {
8
+ -webkit-transform: translateY(0);
9
+ transform: translateY(0);
9
10
  opacity: 1;
10
11
  }
11
12
  }
12
13
  @keyframes listAppear {
13
14
  from {
15
+ -webkit-transform: translateY(-25px);
16
+ transform: translateY(-25px);
14
17
  opacity: 0;
15
18
  }
16
- 99% {
17
- opacity: 0.99;
18
- }
19
19
  to {
20
+ -webkit-transform: translateY(0);
21
+ transform: translateY(0);
20
22
  opacity: 1;
21
23
  }
22
24
  }
@@ -155,8 +157,8 @@
155
157
  display: none;
156
158
  border-radius: 12px;
157
159
  background-color: var(--base);
158
- -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
159
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
160
+ -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
161
+ box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
160
162
  }
161
163
  .mfui-select__list-inner {
162
164
  -webkit-box-sizing: border-box;
@@ -212,7 +214,7 @@
212
214
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
213
215
  }
214
216
  .mfui-select__item-title_active {
215
- font-weight: bold;
217
+ font-weight: 600;
216
218
  }
217
219
  .mfui-select__list-item_hovered .mfui-select__item-title:after {
218
220
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
@@ -327,11 +329,12 @@
327
329
  }
328
330
  .mfui-select_open .mfui-select__list {
329
331
  display: block;
330
- border-color: var(--content);
331
332
  -webkit-animation-name: listAppear;
332
333
  animation-name: listAppear;
333
334
  -webkit-animation-duration: 0.3s;
334
335
  animation-duration: 0.3s;
336
+ -webkit-animation-timing-function: ease-in-out;
337
+ animation-timing-function: ease-in-out;
335
338
  }
336
339
  .mfui-select_open .mfui-select__control {
337
340
  border-color: var(--content);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.0.0-beta.6",
3
+ "version": "4.0.0-beta.7",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -97,5 +97,5 @@
97
97
  "react-popper": "^2.2.3",
98
98
  "swiper": "^6.5.6"
99
99
  },
100
- "gitHead": "7c2d8ac800a977892811ac71bc542e7e193404da"
100
+ "gitHead": "b2d13b7f3887742ffca150ecb8e69c9adf8f0049"
101
101
  }