@megafon/ui-core 9.2.0 → 9.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/components/Modal/Modal.css +1 -1
- package/dist/es/components/Row/Row.css +1 -1
- package/dist/es/components/Row/Row.js +42 -8
- package/dist/lib/components/Modal/Modal.css +1 -1
- package/dist/lib/components/Row/Row.css +1 -1
- package/dist/lib/components/Row/Row.js +42 -8
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal__modal-content:focus-visible{outline:none}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-row:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-row:focus{outline:none}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-row:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-row:focus{outline:none}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-row__icon-container{height:52px;margin-right:16px;width:52px}}@media screen and (min-width:1280px){.mfui-9-row__icon-container{height:56px;width:56px}}.mfui-9-row__icon-container svg{fill:var(--content)}.mfui-9-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:12px}.mfui-9-row__icon-container_colored svg{fill:url(#row-icon-linear-gradient)}.mfui-9-row__gradient-defs{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.mfui-9-row__icon-container_gray-simple{background-color:var(--spbSky0);border-radius:12px}.mfui-9-row__icon,.mfui-9-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (max-width:767px){.mfui-9-row__icon,.mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}.mfui-9-row__header{margin-right:auto;padding-right:12px}.mfui-9-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-9-row__sub-title:not(.mfui-9-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-9-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (max-width:767px){.mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}@media screen and (min-width:768px){.mfui-9-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-9-row__arrow{margin-left:12px}}.mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-9-row__children{font-size:20px;line-height:28px}}.mfui-9-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-row_view_gray{background-color:var(--spbSky0)}.mfui-9-row_view_gray .mfui-9-row__icon-container{background-color:var(--base);border-radius:12px}.mfui-9-row_view_white{background-color:var(--base)}.mfui-9-row_pointer{cursor:pointer}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_pointer.mfui-9-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-9-row_pointer.mfui-9-row_view_gray:hover{background-color:var(--spbSky1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_has-arrow{padding-right:12px}@media screen and (min-width:768px){.mfui-9-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-9-row_has-arrow{padding-right:20px}}@media screen and (min-width:768px){.mfui-9-row_has-arrow.mfui-9-row_size_small{padding-right:16px}}@media screen and (max-width:767px){.mfui-9-row_has-icon{padding:12px}}@media screen and (min-width:768px){.mfui-9-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-9-row_size_small{padding:20px 24px}.mfui-9-row_size_small .mfui-9-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:40px;width:40px}}@media screen and (min-width:1024px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:48px;width:48px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon,.mfui-9-row_size_small .mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}@media screen and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}.mfui-9-row_size_small .mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-9-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { cnCreate, convert, filterDataAttrs, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
|
|
4
|
+
import useResolution from "../../hooks/useResolution";
|
|
4
5
|
import Header from "../Header/Header";
|
|
5
6
|
import Preloader from "../Preloader/Preloader";
|
|
6
7
|
import "./Row.css";
|
|
@@ -12,6 +13,7 @@ var ArrowRight = function ArrowRight(props) {
|
|
|
12
13
|
}));
|
|
13
14
|
};
|
|
14
15
|
var cn = cnCreate('mfui-9-row');
|
|
16
|
+
var ICON_GRADIENT_ID = 'row-icon-linear-gradient';
|
|
15
17
|
var Row = function Row(_ref) {
|
|
16
18
|
var title = _ref.title,
|
|
17
19
|
subTitle = _ref.subTitle,
|
|
@@ -41,6 +43,21 @@ var Row = function Row(_ref) {
|
|
|
41
43
|
var ElementType = href ? 'a' : 'div';
|
|
42
44
|
var isActive = !showLoader && (!!href || !!onClick);
|
|
43
45
|
var isSmallSize = size === 'small';
|
|
46
|
+
var isGraySimpleIcon = !isIconColored && (backgroundView === 'stroke' || backgroundView === 'shadow' || backgroundView === 'white');
|
|
47
|
+
var _useResolution = useResolution(),
|
|
48
|
+
isMobile = _useResolution.isMobile;
|
|
49
|
+
var getTitleStyle = function getTitleStyle() {
|
|
50
|
+
if (isMobile || isSmallSize) {
|
|
51
|
+
return {
|
|
52
|
+
as: 'h5',
|
|
53
|
+
space: 'tight'
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
as: 'h3',
|
|
58
|
+
space: 'wide'
|
|
59
|
+
};
|
|
60
|
+
};
|
|
44
61
|
var handleClick = function handleClick(e) {
|
|
45
62
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
46
63
|
};
|
|
@@ -50,7 +67,8 @@ var Row = function Row(_ref) {
|
|
|
50
67
|
view: backgroundView,
|
|
51
68
|
pointer: isActive,
|
|
52
69
|
'has-arrow': showArrow && !showLoader,
|
|
53
|
-
'auto-height': autoHeight
|
|
70
|
+
'auto-height': autoHeight,
|
|
71
|
+
'has-icon': !!icon
|
|
54
72
|
}, [className, classes.root]),
|
|
55
73
|
href: href,
|
|
56
74
|
target: href ? target : undefined,
|
|
@@ -62,23 +80,39 @@ var Row = function Row(_ref) {
|
|
|
62
80
|
className: cn('wrapper')
|
|
63
81
|
}, !!icon && /*#__PURE__*/React.createElement("div", {
|
|
64
82
|
className: cn('icon-container', {
|
|
65
|
-
colored: isIconColored
|
|
83
|
+
colored: isIconColored,
|
|
84
|
+
'gray-simple': isGraySimpleIcon
|
|
66
85
|
})
|
|
67
|
-
}, /*#__PURE__*/React.createElement("
|
|
86
|
+
}, isIconColored && /*#__PURE__*/React.createElement("svg", {
|
|
87
|
+
className: cn('gradient-defs'),
|
|
88
|
+
"aria-hidden": "true",
|
|
89
|
+
focusable: "false"
|
|
90
|
+
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
91
|
+
id: ICON_GRADIENT_ID,
|
|
92
|
+
x1: "0%",
|
|
93
|
+
y1: "0%",
|
|
94
|
+
x2: "100%",
|
|
95
|
+
y2: "100%"
|
|
96
|
+
}, /*#__PURE__*/React.createElement("stop", {
|
|
97
|
+
offset: "50%",
|
|
98
|
+
stopColor: "#00B956"
|
|
99
|
+
}), /*#__PURE__*/React.createElement("stop", {
|
|
100
|
+
offset: "100%",
|
|
101
|
+
stopColor: "#1EFA64"
|
|
102
|
+
})))), /*#__PURE__*/React.createElement("div", {
|
|
68
103
|
className: cn('icon')
|
|
69
104
|
}, icon)), /*#__PURE__*/React.createElement("div", {
|
|
70
105
|
className: cn('header')
|
|
71
|
-
}, /*#__PURE__*/React.createElement(Header, {
|
|
72
|
-
className: cn('title', [classes.title])
|
|
73
|
-
|
|
74
|
-
space: isSmallSize ? 'tight' : 'wide'
|
|
75
|
-
}, convert(title, titleConvertConfig)), !!subTitle && /*#__PURE__*/React.createElement("div", {
|
|
106
|
+
}, /*#__PURE__*/React.createElement(Header, _extends({
|
|
107
|
+
className: cn('title', [classes.title])
|
|
108
|
+
}, getTitleStyle()), convert(title, titleConvertConfig)), !!subTitle && /*#__PURE__*/React.createElement("div", {
|
|
76
109
|
className: cn('sub-title', [classes.subtitle])
|
|
77
110
|
}, convert(subTitle, textConvertConfig))), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
78
111
|
className: cn('children')
|
|
79
112
|
}, children), showArrow && /*#__PURE__*/React.createElement(ArrowRight, _extends({
|
|
80
113
|
className: cn('arrow')
|
|
81
114
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)))) : /*#__PURE__*/React.createElement(Preloader, {
|
|
115
|
+
sizeAll: isMobile ? 'small' : 'medium',
|
|
82
116
|
delay: false,
|
|
83
117
|
dataAttrs: {
|
|
84
118
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.preloader
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal__modal-content:focus-visible{outline:none}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-row:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-row:focus{outline:none}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-row:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-row:focus{outline:none}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-row__icon-container{height:52px;margin-right:16px;width:52px}}@media screen and (min-width:1280px){.mfui-9-row__icon-container{height:56px;width:56px}}.mfui-9-row__icon-container svg{fill:var(--content)}.mfui-9-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:12px}.mfui-9-row__icon-container_colored svg{fill:url(#row-icon-linear-gradient)}.mfui-9-row__gradient-defs{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.mfui-9-row__icon-container_gray-simple{background-color:var(--spbSky0);border-radius:12px}.mfui-9-row__icon,.mfui-9-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (max-width:767px){.mfui-9-row__icon,.mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}.mfui-9-row__header{margin-right:auto;padding-right:12px}.mfui-9-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-9-row__sub-title:not(.mfui-9-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-9-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (max-width:767px){.mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}@media screen and (min-width:768px){.mfui-9-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-9-row__arrow{margin-left:12px}}.mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-9-row__children{font-size:20px;line-height:28px}}.mfui-9-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-row_view_gray{background-color:var(--spbSky0)}.mfui-9-row_view_gray .mfui-9-row__icon-container{background-color:var(--base);border-radius:12px}.mfui-9-row_view_white{background-color:var(--base)}.mfui-9-row_pointer{cursor:pointer}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_pointer.mfui-9-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-9-row_pointer.mfui-9-row_view_gray:hover{background-color:var(--spbSky1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_has-arrow{padding-right:12px}@media screen and (min-width:768px){.mfui-9-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-9-row_has-arrow{padding-right:20px}}@media screen and (min-width:768px){.mfui-9-row_has-arrow.mfui-9-row_size_small{padding-right:16px}}@media screen and (max-width:767px){.mfui-9-row_has-icon{padding:12px}}@media screen and (min-width:768px){.mfui-9-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-9-row_size_small{padding:20px 24px}.mfui-9-row_size_small .mfui-9-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:40px;width:40px}}@media screen and (min-width:1024px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:48px;width:48px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon,.mfui-9-row_size_small .mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}@media screen and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}.mfui-9-row_size_small .mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-9-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
|
|
@@ -8,6 +8,7 @@ exports["default"] = void 0;
|
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _uiHelpers = require("@megafon/ui-helpers");
|
|
11
|
+
var _useResolution2 = _interopRequireDefault(require("../../hooks/useResolution"));
|
|
11
12
|
var _Header = _interopRequireDefault(require("../Header/Header"));
|
|
12
13
|
var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
|
|
13
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -21,6 +22,7 @@ var ArrowRight = function ArrowRight(props) {
|
|
|
21
22
|
}));
|
|
22
23
|
};
|
|
23
24
|
var cn = (0, _uiHelpers.cnCreate)('mfui-9-row');
|
|
25
|
+
var ICON_GRADIENT_ID = 'row-icon-linear-gradient';
|
|
24
26
|
var Row = function Row(_ref) {
|
|
25
27
|
var title = _ref.title,
|
|
26
28
|
subTitle = _ref.subTitle,
|
|
@@ -50,6 +52,21 @@ var Row = function Row(_ref) {
|
|
|
50
52
|
var ElementType = href ? 'a' : 'div';
|
|
51
53
|
var isActive = !showLoader && (!!href || !!onClick);
|
|
52
54
|
var isSmallSize = size === 'small';
|
|
55
|
+
var isGraySimpleIcon = !isIconColored && (backgroundView === 'stroke' || backgroundView === 'shadow' || backgroundView === 'white');
|
|
56
|
+
var _useResolution = (0, _useResolution2["default"])(),
|
|
57
|
+
isMobile = _useResolution.isMobile;
|
|
58
|
+
var getTitleStyle = function getTitleStyle() {
|
|
59
|
+
if (isMobile || isSmallSize) {
|
|
60
|
+
return {
|
|
61
|
+
as: 'h5',
|
|
62
|
+
space: 'tight'
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
return {
|
|
66
|
+
as: 'h3',
|
|
67
|
+
space: 'wide'
|
|
68
|
+
};
|
|
69
|
+
};
|
|
53
70
|
var handleClick = function handleClick(e) {
|
|
54
71
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
55
72
|
};
|
|
@@ -59,7 +76,8 @@ var Row = function Row(_ref) {
|
|
|
59
76
|
view: backgroundView,
|
|
60
77
|
pointer: isActive,
|
|
61
78
|
'has-arrow': showArrow && !showLoader,
|
|
62
|
-
'auto-height': autoHeight
|
|
79
|
+
'auto-height': autoHeight,
|
|
80
|
+
'has-icon': !!icon
|
|
63
81
|
}, [className, classes.root]),
|
|
64
82
|
href: href,
|
|
65
83
|
target: href ? target : undefined,
|
|
@@ -71,23 +89,39 @@ var Row = function Row(_ref) {
|
|
|
71
89
|
className: cn('wrapper')
|
|
72
90
|
}, !!icon && /*#__PURE__*/React.createElement("div", {
|
|
73
91
|
className: cn('icon-container', {
|
|
74
|
-
colored: isIconColored
|
|
92
|
+
colored: isIconColored,
|
|
93
|
+
'gray-simple': isGraySimpleIcon
|
|
75
94
|
})
|
|
76
|
-
}, /*#__PURE__*/React.createElement("
|
|
95
|
+
}, isIconColored && /*#__PURE__*/React.createElement("svg", {
|
|
96
|
+
className: cn('gradient-defs'),
|
|
97
|
+
"aria-hidden": "true",
|
|
98
|
+
focusable: "false"
|
|
99
|
+
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
|
|
100
|
+
id: ICON_GRADIENT_ID,
|
|
101
|
+
x1: "0%",
|
|
102
|
+
y1: "0%",
|
|
103
|
+
x2: "100%",
|
|
104
|
+
y2: "100%"
|
|
105
|
+
}, /*#__PURE__*/React.createElement("stop", {
|
|
106
|
+
offset: "50%",
|
|
107
|
+
stopColor: "#00B956"
|
|
108
|
+
}), /*#__PURE__*/React.createElement("stop", {
|
|
109
|
+
offset: "100%",
|
|
110
|
+
stopColor: "#1EFA64"
|
|
111
|
+
})))), /*#__PURE__*/React.createElement("div", {
|
|
77
112
|
className: cn('icon')
|
|
78
113
|
}, icon)), /*#__PURE__*/React.createElement("div", {
|
|
79
114
|
className: cn('header')
|
|
80
|
-
}, /*#__PURE__*/React.createElement(_Header["default"], {
|
|
81
|
-
className: cn('title', [classes.title])
|
|
82
|
-
|
|
83
|
-
space: isSmallSize ? 'tight' : 'wide'
|
|
84
|
-
}, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!subTitle && /*#__PURE__*/React.createElement("div", {
|
|
115
|
+
}, /*#__PURE__*/React.createElement(_Header["default"], (0, _extends2["default"])({
|
|
116
|
+
className: cn('title', [classes.title])
|
|
117
|
+
}, getTitleStyle()), (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!subTitle && /*#__PURE__*/React.createElement("div", {
|
|
85
118
|
className: cn('sub-title', [classes.subtitle])
|
|
86
119
|
}, (0, _uiHelpers.convert)(subTitle, _uiHelpers.textConvertConfig))), !showLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
87
120
|
className: cn('children')
|
|
88
121
|
}, children), showArrow && /*#__PURE__*/React.createElement(ArrowRight, (0, _extends2["default"])({
|
|
89
122
|
className: cn('arrow')
|
|
90
123
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)))) : /*#__PURE__*/React.createElement(_Preloader["default"], {
|
|
124
|
+
sizeAll: isMobile ? 'small' : 'medium',
|
|
91
125
|
delay: false,
|
|
92
126
|
dataAttrs: {
|
|
93
127
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.preloader
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "9.2.
|
|
3
|
+
"version": "9.2.2",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"simplebar-react": "^3.2.5",
|
|
105
105
|
"swiper": "^12.1.2"
|
|
106
106
|
},
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "e746dd0ee3ab2b7618370b83c507e11e456f8406"
|
|
108
108
|
}
|