@megafon/ui-core 8.9.0 → 8.11.0
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/Badges/CounterBadge/CounterBadge.css +1 -1
- package/dist/es/components/Banner/Banner.css +1 -1
- package/dist/es/components/Banner/Banner.js +6 -3
- package/dist/es/components/Calendar/components/_Day/Day.css +1 -1
- package/dist/es/components/Carousel/Carousel.css +1 -1
- package/dist/es/components/Carousel/Carousel.d.ts +5 -0
- package/dist/es/components/Carousel/Carousel.js +9 -7
- package/dist/es/components/Carousel/useGradient.js +4 -5
- package/dist/es/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/es/components/Modal/_ModalContent/ModalContent.js +11 -6
- package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.js +1 -0
- package/dist/es/components/NavArrow/NavArrow.css +1 -1
- package/dist/es/components/NavArrow/NavArrow.d.ts +6 -0
- package/dist/es/components/NavArrow/NavArrow.js +43 -5
- package/dist/es/components/Snackbar/SnackbarTimer/SnackbarTimer.css +1 -1
- package/dist/lib/components/Badges/CounterBadge/CounterBadge.css +1 -1
- package/dist/lib/components/Banner/Banner.css +1 -1
- package/dist/lib/components/Banner/Banner.js +5 -2
- package/dist/lib/components/Calendar/components/_Day/Day.css +1 -1
- package/dist/lib/components/Carousel/Carousel.css +1 -1
- package/dist/lib/components/Carousel/Carousel.d.ts +5 -0
- package/dist/lib/components/Carousel/Carousel.js +9 -7
- package/dist/lib/components/Carousel/useGradient.js +3 -4
- package/dist/lib/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/lib/components/Modal/_ModalContent/ModalContent.js +11 -6
- package/dist/lib/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.js +1 -0
- package/dist/lib/components/NavArrow/NavArrow.css +1 -1
- package/dist/lib/components/NavArrow/NavArrow.d.ts +6 -0
- package/dist/lib/components/NavArrow/NavArrow.js +44 -6
- package/dist/lib/components/Snackbar/SnackbarTimer/SnackbarTimer.css +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-counter-badge{display:-webkit-box;display:-ms-flexbox;display:flex
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-counter-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:12px;font-size:12px;font-weight:500;justify-content:center;line-height:14px;min-width:24px;padding:5px 6px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-counter-badge_limited{padding:5px 12px}@media screen and (min-width:1024px){.mfui-counter-badge_adaptive{font-size:15px;line-height:18px;min-width:28px}}.mfui-counter-badge_icon{padding:2px 4px 2px 12px}.mfui-counter-badge_adaptive.mfui-counter-badge_icon{padding:4px 4px 4px 12px}.mfui-counter-badge__icon{height:20px;margin-left:4px;min-width:20px;width:20px}.mfui-counter-badge_theme_light-blue{background-color:var(--sky20)}.mfui-counter-badge_theme_light-blue .mfui-counter-badge__icon{fill:var(--sky)}.mfui-counter-badge_theme_purple{background-color:var(--brandPurple20)}.mfui-counter-badge_theme_purple .mfui-counter-badge__icon{fill:var(--brandPurple)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;margin-top:32px}.mfui-banner__pagination_position_top-in{left:0;margin-top:0;padding:0 24px;position:absolute;top:16px;width:100%}@media screen and (min-width:1280px){.mfui-banner__pagination_position_top-in{padding:0 80px}}.mfui-banner__pagination_type_flat{gap:4px}@media screen and (min-width:1280px){.mfui-banner__pagination_type_flat{gap:10px}}.mfui-banner__pagination_align_left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_margin-top{margin-top:24px}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}
|
|
@@ -5,7 +5,7 @@ import "core-js/modules/es.array.map.js";
|
|
|
5
5
|
/* eslint-disable global-require */
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
|
|
8
|
-
import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
|
|
8
|
+
import NavArrow, { Theme as ArrowTheme, Size as ArrowSize } from "../NavArrow/NavArrow";
|
|
9
9
|
import BannerDot from "./BannerDot";
|
|
10
10
|
import SLIDES_SETTINGS from "./slidesSettings";
|
|
11
11
|
import "./Banner.css";
|
|
@@ -128,6 +128,7 @@ var Banner = function Banner(_ref) {
|
|
|
128
128
|
setIsIncreasedDelay = _React$useState16[1];
|
|
129
129
|
var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
|
|
130
130
|
var dotTimerDelay = delay / 1000;
|
|
131
|
+
var arrowSize = arrowTheme === ArrowTheme.WHITE ? ArrowSize.LARGE : ArrowSize.MIDDLE;
|
|
131
132
|
var rootRef = React.useRef(null);
|
|
132
133
|
var increaseAutoplayDelay = React.useCallback(function (_ref2) {
|
|
133
134
|
var params = _ref2.params,
|
|
@@ -229,7 +230,8 @@ var Banner = function Banner(_ref) {
|
|
|
229
230
|
},
|
|
230
231
|
onClick: handlePrevClick,
|
|
231
232
|
disabled: !loop && isBeginning,
|
|
232
|
-
theme: arrowTheme
|
|
233
|
+
theme: arrowTheme,
|
|
234
|
+
size: arrowSize
|
|
233
235
|
}), /*#__PURE__*/React.createElement(NavArrow, {
|
|
234
236
|
className: cn('arrow', {
|
|
235
237
|
next: true,
|
|
@@ -241,7 +243,8 @@ var Banner = function Banner(_ref) {
|
|
|
241
243
|
view: "next",
|
|
242
244
|
onClick: handleNextClick,
|
|
243
245
|
disabled: !loop && isEnd,
|
|
244
|
-
theme: arrowTheme
|
|
246
|
+
theme: arrowTheme,
|
|
247
|
+
size: arrowSize
|
|
245
248
|
}));
|
|
246
249
|
var renderPagination = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
|
|
247
250
|
className: cn('pagination', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--content);cursor:pointer;height:32px;line-height:24px;outline:none;padding:0 10px 8px 0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;line-height:18px}.mfui-day:last-child{padding-right:0}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day:not(:disabled):not(.mfui-day_active):hover:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:32px;left:0;position:absolute;top:0;width:32px;z-index:1}.mfui-
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--content);cursor:pointer;height:32px;line-height:24px;outline:none;padding:0 10px 8px 0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;line-height:18px}.mfui-day:last-child{padding-right:0}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day:not(:disabled):not(.mfui-day_active):hover:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:32px;left:0;position:absolute;top:0;width:32px;z-index:1}.mfui-day:not(:disabled):not(.mfui-day_active):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--brandGreen)}.mfui-day_active-modern:after{height:38px;width:38px}.mfui-day_active-modern:focus:after,.mfui-day_active-modern:hover:after{background-color:var(--brandGreen)!important;height:38px!important;width:38px!important}.mfui-day_disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-day:not(:disabled):not(.mfui-day_active):focus,.mfui-day_active,.mfui-day_active-modern:after{color:var(--stcWhite)}.mfui-day_active+.mfui-day:not(.mfui-day_monday).mfui-day_active:before,.mfui-day_between:hover+.mfui-day:not(.mfui-day_monday).mfui-day_active:before{background-color:var(--spbSky1);content:"";display:block;height:32px;left:-22px;position:absolute;top:0;width:32px;z-index:-1}.mfui-day_between{border-radius:0;position:relative}.mfui-day_between:before{left:-22px;padding:0 20px}.mfui-day_between:after,.mfui-day_between:before{background-color:var(--spbSky1);content:"";display:block;height:32px;position:absolute;top:0;z-index:-1}.mfui-day_between:after{right:-16px;width:40px}.mfui-day_last,.mfui-day_sunday{border-radius:50%}.mfui-day_last:after,.mfui-day_sunday:after{border-radius:50%;right:10px;width:32px}.mfui-day_last:after{right:0}.mfui-day_first,.mfui-day_monday{border-radius:50%}.mfui-day_first:before,.mfui-day_monday:before{border-radius:50%;left:0;padding:0;width:32px}.mfui-day_sunday.mfui-day_first{border-radius:50%}.mfui-day__label{position:relative;z-index:99}.mfui-day_modern{height:38px;width:100%}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after,.mfui-day_modern_active-modern:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:38px;left:0;position:absolute;top:0;width:38px;z-index:1}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern_active-modern:after{background-color:var(--brandGreen)}.mfui-day:not(:disabled):focus,.mfui-day_active-modern{color:var(--stcWhite)}.mfui-day_active-modern+.mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before,.mfui-day_between-modern:hover+.mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;left:-22px;position:absolute;top:0;width:40px;z-index:-1}.mfui-day_between-modern{border-radius:0;position:relative}.mfui-day_between-modern:before{left:-20px;padding:0 29px}.mfui-day_between-modern:after,.mfui-day_between-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;position:absolute;top:0;z-index:-1}.mfui-day_between-modern:after{right:-12px;width:45px}.mfui-day_last-modern,.mfui-day_sunday-modern{border-radius:50%}.mfui-day_last-modern:before,.mfui-day_sunday-modern:before{padding-left:8px}.mfui-day_last-modern:after,.mfui-day_sunday-modern:after{border-radius:50%;right:10px;width:38.29px}.mfui-day_last-modern:after{right:0}.mfui-day_first-modern,.mfui-day_monday-modern{border-radius:50%}.mfui-day_first-modern:before,.mfui-day_monday-modern:before{border-radius:50%;left:0;padding:0;width:38px}.mfui-day_sunday-modern.mfui-day_first-modern{border-radius:50%}.mfui-day__label_modern{font-size:15px;font-weight:400;line-height:24px;text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-carousel,.mfui-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-carousel,.mfui-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(transparent),to(var(--gradientColor)));background:linear-gradient(270deg,transparent 0,var(--gradientColor) 100%);left:0}.mfui-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(transparent));background:linear-gradient(270deg,var(--gradientColor) 0,transparent 100%);right:0}.mfui-carousel__swiper_gradient-color_default{--gradientColor:var(--background)}.mfui-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen)}.mfui-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack)}.mfui-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0)}.mfui-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1)}.mfui-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2)}.mfui-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-carousel__arrow{position:absolute;top:50%;-webkit-transform:translateY(calc(-50% - 20px));transform:translateY(calc(-50% - 20px));z-index:6}@media screen and (max-width:1023px){.mfui-carousel__arrow{display:none}}.mfui-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-carousel__arrow_locked{display:none}.mfui-carousel .swiper-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;border-radius:12px;order:2;padding-top:32px;width:100%}.mfui-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-carousel .swiper-pagination-bullet{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;justify-content:center;-webkit-transition:width .5s,background-color .3s;transition:width .5s,background-color .3s;width:8px}.mfui-carousel .swiper-pagination-bullet:before{border-radius:50%;content:"";display:block;height:100%;-webkit-transition:border-radius .5s;transition:border-radius .5s;width:100%}.mfui-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-carousel .swiper-pagination-bullet-active{cursor:default;width:20px}.mfui-carousel .swiper-pagination-bullet-active:before{border-radius:4px}.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { SwiperClass } from 'swiper/react';
|
|
3
3
|
import { PaginationOptions } from 'swiper/types';
|
|
4
|
+
import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
|
|
4
5
|
import './Carousel.scss';
|
|
5
6
|
export declare const NavTheme: {
|
|
6
7
|
readonly LIGHT: "light";
|
|
@@ -79,6 +80,10 @@ export interface ICarouselProps {
|
|
|
79
80
|
navTheme?: NavThemeType;
|
|
80
81
|
/** Эффект анимации */
|
|
81
82
|
effectTheme?: EffectThemeType;
|
|
83
|
+
/** Отключение стрелок */
|
|
84
|
+
disableArrows?: boolean;
|
|
85
|
+
/** Тема стрелок */
|
|
86
|
+
arrowTheme?: ArrowThemeType;
|
|
82
87
|
/** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
|
|
83
88
|
noSwipingSelector?: string;
|
|
84
89
|
/** Свайп к слайду, по которому произведен клик */
|
|
@@ -49,7 +49,7 @@ try {
|
|
|
49
49
|
FreeMode = Modules.FreeMode;
|
|
50
50
|
} catch (e) {
|
|
51
51
|
// eslint-disable-next-line no-console
|
|
52
|
-
console.warn("\n WARNING: megafon/ui-core is using the latest version of swiper
|
|
52
|
+
console.warn("\n WARNING: megafon/ui-core is using the latest version of swiper.\n For more information about server-side rendering\n please check the Carousel component documentation at:\n https://ui.megafon.ru/components/carousel\n ");
|
|
53
53
|
}
|
|
54
54
|
export var NavTheme = {
|
|
55
55
|
LIGHT: 'light',
|
|
@@ -123,6 +123,10 @@ var Carousel = function Carousel(_ref) {
|
|
|
123
123
|
navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
|
|
124
124
|
_ref$effectTheme = _ref.effectTheme,
|
|
125
125
|
effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
|
|
126
|
+
_ref$disableArrows = _ref.disableArrows,
|
|
127
|
+
disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows,
|
|
128
|
+
_ref$arrowTheme = _ref.arrowTheme,
|
|
129
|
+
arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.PURPLE : _ref$arrowTheme,
|
|
126
130
|
noSwipingSelector = _ref.noSwipingSelector,
|
|
127
131
|
children = _ref.children,
|
|
128
132
|
pagination = _ref.pagination,
|
|
@@ -357,23 +361,21 @@ var Carousel = function Carousel(_ref) {
|
|
|
357
361
|
},
|
|
358
362
|
className: cn('arrow', {
|
|
359
363
|
prev: true,
|
|
360
|
-
locked: isLocked
|
|
364
|
+
locked: isLocked || !loop && isBeginning || disableArrows
|
|
361
365
|
}, [prevClass]),
|
|
362
366
|
onClick: handlePrevClick,
|
|
363
|
-
|
|
364
|
-
theme: ArrowTheme.PURPLE
|
|
367
|
+
theme: arrowTheme
|
|
365
368
|
}), /*#__PURE__*/React.createElement(NavArrow, {
|
|
366
369
|
dataAttrs: {
|
|
367
370
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
|
|
368
371
|
},
|
|
369
372
|
className: cn('arrow', {
|
|
370
373
|
next: true,
|
|
371
|
-
locked: isLocked
|
|
374
|
+
locked: isLocked || !loop && isEnd || disableArrows
|
|
372
375
|
}, [nextClass]),
|
|
373
376
|
view: "next",
|
|
374
377
|
onClick: handleNextClick,
|
|
375
|
-
|
|
376
|
-
theme: ArrowTheme.PURPLE
|
|
378
|
+
theme: arrowTheme
|
|
377
379
|
}));
|
|
378
380
|
};
|
|
379
381
|
export default Carousel;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import {
|
|
3
|
-
import { breakpoints } from '@megafon/ui-helpers';
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
4
3
|
import throttle from 'lodash.throttle';
|
|
5
4
|
import throttleTime from "../../constants/throttleTime";
|
|
6
5
|
export default (function (gradient, swiper) {
|
|
@@ -13,14 +12,14 @@ export default (function (gradient, swiper) {
|
|
|
13
12
|
isLocked = swiper.isLocked;
|
|
14
13
|
var isGradientEnable = gradient && !isLocked;
|
|
15
14
|
useEffect(function () {
|
|
16
|
-
var
|
|
17
|
-
var isPossibleToSetGap = isGradientEnable && swiperInstance && !isTouch;
|
|
15
|
+
var isPossibleToSetGap = isGradientEnable && swiperInstance;
|
|
18
16
|
if (!isPossibleToSetGap) {
|
|
19
17
|
return undefined;
|
|
20
18
|
}
|
|
21
19
|
var setCurrentSlidesGap = function setCurrentSlidesGap() {
|
|
20
|
+
var _a;
|
|
22
21
|
var currentBreakpoint = swiperInstance.currentBreakpoint;
|
|
23
|
-
var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
|
|
22
|
+
var currentSpaceBetweenValue = (_a = slidesSettings[currentBreakpoint]) === null || _a === void 0 ? void 0 : _a.spaceBetween;
|
|
24
23
|
setSlidesGap(currentSpaceBetweenValue);
|
|
25
24
|
};
|
|
26
25
|
setCurrentSlidesGap();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}@media screen and (min-width:768px){.mfui-modal-content__header-icon{height:40px;min-width:40px;width:40px}}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}@media screen and (min-width:768px){.mfui-modal-content__header-icon{height:40px;min-width:40px;width:40px}}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
|
|
@@ -81,7 +81,7 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
81
81
|
setShowHeaderShadow = _React$useState2[1];
|
|
82
82
|
var showHeaderMain = !!showBackButton || !!headerTitle || !hideCloseButton;
|
|
83
83
|
var showHeader = showHeaderMain || !!headerAdditionalContent;
|
|
84
|
-
var isStickyHeader = showHeader &&
|
|
84
|
+
var isStickyHeader = showHeader && isStickyHeaderProps;
|
|
85
85
|
var isStaticHeader = showHeader && !isStickyHeaderProps;
|
|
86
86
|
var isStickyFooter = !!footer && !!isStickyFooterProps;
|
|
87
87
|
var isStaticFooter = !!footer && !isStickyFooterProps;
|
|
@@ -116,7 +116,8 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
116
116
|
}));
|
|
117
117
|
var renderHeader = /*#__PURE__*/React.createElement("div", {
|
|
118
118
|
className: cn('header', {
|
|
119
|
-
shadow: showHeaderShadow
|
|
119
|
+
shadow: showHeaderShadow,
|
|
120
|
+
'native-scroll': isEnabledNativeScroll && isStickyHeader
|
|
120
121
|
}, classes === null || classes === void 0 ? void 0 : classes.header),
|
|
121
122
|
ref: headerRef
|
|
122
123
|
}, !!isOutSideHeaderButtons && showBackButton && renderBackButton, !isOutSideHeaderButtons && showHeaderMain && /*#__PURE__*/React.createElement("div", {
|
|
@@ -130,7 +131,8 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
130
131
|
}, headerAdditionalContent));
|
|
131
132
|
var renderFooter = /*#__PURE__*/React.createElement("div", {
|
|
132
133
|
className: cn('footer', {
|
|
133
|
-
shadow: hasFooterShadow
|
|
134
|
+
shadow: hasFooterShadow,
|
|
135
|
+
'native-scroll': isEnabledNativeScroll && isStickyFooter
|
|
134
136
|
}, classes === null || classes === void 0 ? void 0 : classes.footer),
|
|
135
137
|
ref: footerRef
|
|
136
138
|
}, footer);
|
|
@@ -146,7 +148,6 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
146
148
|
'sticky-footer': isStickyFooter,
|
|
147
149
|
'static-header': isStaticHeader,
|
|
148
150
|
'transition-end': isTransitionEndStep,
|
|
149
|
-
'native-scroll': isEnabledNativeScroll,
|
|
150
151
|
'out-side-buttons': isOutSideHeaderButtons
|
|
151
152
|
}, classes === null || classes === void 0 ? void 0 : classes.containerWrap),
|
|
152
153
|
style: {
|
|
@@ -157,10 +158,14 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
157
158
|
ref: onSetContainerWrapRef,
|
|
158
159
|
onTransitionEnd: onTransitionEnd
|
|
159
160
|
}), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerInner), {
|
|
160
|
-
className: cn('container-inner',
|
|
161
|
+
className: cn('container-inner', {
|
|
162
|
+
'native-scroll': isEnabledNativeScroll
|
|
163
|
+
}, classes === null || classes === void 0 ? void 0 : classes.containerInner),
|
|
161
164
|
ref: containerInnerRef
|
|
162
165
|
}), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
|
|
163
|
-
className: cn('container-body',
|
|
166
|
+
className: cn('container-body', {
|
|
167
|
+
'native-scroll': isEnabledNativeScroll
|
|
168
|
+
}, classes === null || classes === void 0 ? void 0 : classes.containerBody),
|
|
164
169
|
ref: containerBodyRef,
|
|
165
170
|
onScroll: hasHeaderShadow ? handleChangeShadowState : undefined
|
|
166
171
|
}), isEnabledNativeScroll ? renderChildren : /*#__PURE__*/React.createElement(ScrollBar, scrollBarParams, renderChildren)), isStickyFooter && renderFooter));
|
|
@@ -36,6 +36,7 @@ var ModalMobileFullScreen = function ModalMobileFullScreen(_a) {
|
|
|
36
36
|
return /*#__PURE__*/React.createElement("div", {
|
|
37
37
|
className: cn()
|
|
38
38
|
}, /*#__PURE__*/React.createElement(ModalContent, _extends({}, restProps, {
|
|
39
|
+
containerWrapHeight: undefined,
|
|
39
40
|
classes: _extends(_extends({}, restClasses), {
|
|
40
41
|
containerWrap: cn('container-wrap', containerWrap),
|
|
41
42
|
containerInner: cn('container-inner', containerInner),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-nav-arrow_size_middle{height:40px;padding:4px;width:40px}.mfui-nav-arrow_size_large{height:64px;padding:12px;width:64px}.mfui-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-nav-arrow_theme_white .mfui-nav-arrow__icon{fill:var(--stcBlack)}
|
|
@@ -9,8 +9,13 @@ export declare const View: {
|
|
|
9
9
|
readonly PREV: "prev";
|
|
10
10
|
readonly NEXT: "next";
|
|
11
11
|
};
|
|
12
|
+
export declare const Size: {
|
|
13
|
+
readonly MIDDLE: "middle";
|
|
14
|
+
readonly LARGE: "large";
|
|
15
|
+
};
|
|
12
16
|
export type ThemeType = (typeof Theme)[keyof typeof Theme];
|
|
13
17
|
type ViewType = (typeof View)[keyof typeof View];
|
|
18
|
+
type SizeType = (typeof Size)[keyof typeof Size];
|
|
14
19
|
export interface INavArrowProps {
|
|
15
20
|
dataAttrs?: {
|
|
16
21
|
root?: Record<string, string>;
|
|
@@ -20,6 +25,7 @@ export interface INavArrowProps {
|
|
|
20
25
|
className?: string;
|
|
21
26
|
theme?: ThemeType;
|
|
22
27
|
view?: ViewType;
|
|
28
|
+
size?: SizeType;
|
|
23
29
|
disabled?: boolean;
|
|
24
30
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
25
31
|
}
|
|
@@ -2,20 +2,34 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
4
4
|
import "./NavArrow.css";
|
|
5
|
-
var
|
|
5
|
+
var ArrowLeft24 = function ArrowLeft24(props) {
|
|
6
6
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
7
7
|
viewBox: "0 0 32 32"
|
|
8
8
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
9
9
|
d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
|
|
10
10
|
}));
|
|
11
11
|
};
|
|
12
|
-
var
|
|
12
|
+
var ArrowRight24 = function ArrowRight24(props) {
|
|
13
13
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
14
14
|
viewBox: "0 0 32 32"
|
|
15
15
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
16
16
|
d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
|
|
17
17
|
}));
|
|
18
18
|
};
|
|
19
|
+
var ArrowLeft32 = function ArrowLeft32(props) {
|
|
20
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
21
|
+
viewBox: "0 0 40 40"
|
|
22
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
23
|
+
d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
|
|
24
|
+
}));
|
|
25
|
+
};
|
|
26
|
+
var ArrowRight32 = function ArrowRight32(props) {
|
|
27
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
28
|
+
viewBox: "0 0 40 40"
|
|
29
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
30
|
+
d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
|
|
31
|
+
}));
|
|
32
|
+
};
|
|
19
33
|
export var Theme = {
|
|
20
34
|
PURPLE: 'purple',
|
|
21
35
|
DARK: 'dark',
|
|
@@ -25,6 +39,10 @@ export var View = {
|
|
|
25
39
|
PREV: 'prev',
|
|
26
40
|
NEXT: 'next'
|
|
27
41
|
};
|
|
42
|
+
export var Size = {
|
|
43
|
+
MIDDLE: 'middle',
|
|
44
|
+
LARGE: 'large'
|
|
45
|
+
};
|
|
28
46
|
var cn = cnCreate('mfui-nav-arrow');
|
|
29
47
|
var NavArrow = function NavArrow(_ref) {
|
|
30
48
|
var dataAttrs = _ref.dataAttrs,
|
|
@@ -33,10 +51,29 @@ var NavArrow = function NavArrow(_ref) {
|
|
|
33
51
|
view = _ref$view === void 0 ? View.PREV : _ref$view,
|
|
34
52
|
_ref$theme = _ref.theme,
|
|
35
53
|
theme = _ref$theme === void 0 ? Theme.PURPLE : _ref$theme,
|
|
54
|
+
_ref$size = _ref.size,
|
|
55
|
+
size = _ref$size === void 0 ? Size.MIDDLE : _ref$size,
|
|
36
56
|
_ref$disabled = _ref.disabled,
|
|
37
57
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
38
58
|
onClick = _ref.onClick;
|
|
39
|
-
var
|
|
59
|
+
var getIcons = function getIcons() {
|
|
60
|
+
switch (size) {
|
|
61
|
+
case Size.LARGE:
|
|
62
|
+
return {
|
|
63
|
+
ArrowLeft: ArrowLeft32,
|
|
64
|
+
ArrowRight: ArrowRight32
|
|
65
|
+
};
|
|
66
|
+
default:
|
|
67
|
+
return {
|
|
68
|
+
ArrowLeft: ArrowLeft24,
|
|
69
|
+
ArrowRight: ArrowRight24
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
var renderIcon = function renderIcon() {
|
|
74
|
+
var _getIcons = getIcons(),
|
|
75
|
+
ArrowLeft = _getIcons.ArrowLeft,
|
|
76
|
+
ArrowRight = _getIcons.ArrowRight;
|
|
40
77
|
switch (view) {
|
|
41
78
|
case View.PREV:
|
|
42
79
|
return /*#__PURE__*/React.createElement(ArrowLeft, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow), {
|
|
@@ -47,11 +84,12 @@ var NavArrow = function NavArrow(_ref) {
|
|
|
47
84
|
className: cn('icon')
|
|
48
85
|
}));
|
|
49
86
|
}
|
|
50
|
-
}
|
|
87
|
+
};
|
|
51
88
|
return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
52
89
|
type: "button",
|
|
53
90
|
className: cn({
|
|
54
|
-
theme: theme
|
|
91
|
+
theme: theme,
|
|
92
|
+
size: size
|
|
55
93
|
}, className),
|
|
56
94
|
onClick: onClick,
|
|
57
95
|
disabled: disabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-snackbar-timer{color:var(--base);margin-right:8px}@-webkit-keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.mfui-snackbar-timer__timer{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-snackbar-timer{color:var(--base);margin-right:8px}@-webkit-keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.mfui-snackbar-timer__timer{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:24px;justify-content:center;width:24px}.mfui-snackbar-timer__timer svg{height:24px;position:absolute;width:24px}.mfui-snackbar-timer__timer-bg{fill:none;stroke:var(--spbSky0);stroke-width:1px}.mfui-snackbar-timer__timer-progress{-webkit-animation-name:snackbar-progress-bar;animation-name:snackbar-progress-bar;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;fill:none;stroke:var(--content);stroke-width:2px;stroke-dasharray:100;stroke-linecap:round}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-counter-badge{display:-webkit-box;display:-ms-flexbox;display:flex
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-counter-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:12px;font-size:12px;font-weight:500;justify-content:center;line-height:14px;min-width:24px;padding:5px 6px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-counter-badge_limited{padding:5px 12px}@media screen and (min-width:1024px){.mfui-counter-badge_adaptive{font-size:15px;line-height:18px;min-width:28px}}.mfui-counter-badge_icon{padding:2px 4px 2px 12px}.mfui-counter-badge_adaptive.mfui-counter-badge_icon{padding:4px 4px 4px 12px}.mfui-counter-badge__icon{height:20px;margin-left:4px;min-width:20px;width:20px}.mfui-counter-badge_theme_light-blue{background-color:var(--sky20)}.mfui-counter-badge_theme_light-blue .mfui-counter-badge__icon{fill:var(--sky)}.mfui-counter-badge_theme_purple{background-color:var(--brandPurple20)}.mfui-counter-badge_theme_purple .mfui-counter-badge__icon{fill:var(--brandPurple)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;margin-top:32px}.mfui-banner__pagination_position_top-in{left:0;margin-top:0;padding:0 24px;position:absolute;top:16px;width:100%}@media screen and (min-width:1280px){.mfui-banner__pagination_position_top-in{padding:0 80px}}.mfui-banner__pagination_type_flat{gap:4px}@media screen and (min-width:1280px){.mfui-banner__pagination_type_flat{gap:10px}}.mfui-banner__pagination_align_left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_margin-top{margin-top:24px}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}
|
|
@@ -138,6 +138,7 @@ var Banner = function Banner(_ref) {
|
|
|
138
138
|
setIsIncreasedDelay = _React$useState16[1];
|
|
139
139
|
var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
|
|
140
140
|
var dotTimerDelay = delay / 1000;
|
|
141
|
+
var arrowSize = arrowTheme === _NavArrow.Theme.WHITE ? _NavArrow.Size.LARGE : _NavArrow.Size.MIDDLE;
|
|
141
142
|
var rootRef = React.useRef(null);
|
|
142
143
|
var increaseAutoplayDelay = React.useCallback(function (_ref2) {
|
|
143
144
|
var params = _ref2.params,
|
|
@@ -239,7 +240,8 @@ var Banner = function Banner(_ref) {
|
|
|
239
240
|
},
|
|
240
241
|
onClick: handlePrevClick,
|
|
241
242
|
disabled: !loop && isBeginning,
|
|
242
|
-
theme: arrowTheme
|
|
243
|
+
theme: arrowTheme,
|
|
244
|
+
size: arrowSize
|
|
243
245
|
}), /*#__PURE__*/React.createElement(_NavArrow["default"], {
|
|
244
246
|
className: cn('arrow', {
|
|
245
247
|
next: true,
|
|
@@ -251,7 +253,8 @@ var Banner = function Banner(_ref) {
|
|
|
251
253
|
view: "next",
|
|
252
254
|
onClick: handleNextClick,
|
|
253
255
|
disabled: !loop && isEnd,
|
|
254
|
-
theme: arrowTheme
|
|
256
|
+
theme: arrowTheme,
|
|
257
|
+
size: arrowSize
|
|
255
258
|
}));
|
|
256
259
|
var renderPagination = /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
|
|
257
260
|
className: cn('pagination', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--content);cursor:pointer;height:32px;line-height:24px;outline:none;padding:0 10px 8px 0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;line-height:18px}.mfui-day:last-child{padding-right:0}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day:not(:disabled):not(.mfui-day_active):hover:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:32px;left:0;position:absolute;top:0;width:32px;z-index:1}.mfui-
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-day{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;-webkit-box-sizing:content-box;box-sizing:content-box;color:var(--content);cursor:pointer;height:32px;line-height:24px;outline:none;padding:0 10px 8px 0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;line-height:18px}.mfui-day:last-child{padding-right:0}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day:not(:disabled):not(.mfui-day_active):hover:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:32px;left:0;position:absolute;top:0;width:32px;z-index:1}.mfui-day:not(:disabled):not(.mfui-day_active):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day:not(:disabled):not(.mfui-day_active):focus:after,.mfui-day_active-modern:after,.mfui-day_active:after{background-color:var(--brandGreen)}.mfui-day_active-modern:after{height:38px;width:38px}.mfui-day_active-modern:focus:after,.mfui-day_active-modern:hover:after{background-color:var(--brandGreen)!important;height:38px!important;width:38px!important}.mfui-day_disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-day:not(:disabled):not(.mfui-day_active):focus,.mfui-day_active,.mfui-day_active-modern:after{color:var(--stcWhite)}.mfui-day_active+.mfui-day:not(.mfui-day_monday).mfui-day_active:before,.mfui-day_between:hover+.mfui-day:not(.mfui-day_monday).mfui-day_active:before{background-color:var(--spbSky1);content:"";display:block;height:32px;left:-22px;position:absolute;top:0;width:32px;z-index:-1}.mfui-day_between{border-radius:0;position:relative}.mfui-day_between:before{left:-22px;padding:0 20px}.mfui-day_between:after,.mfui-day_between:before{background-color:var(--spbSky1);content:"";display:block;height:32px;position:absolute;top:0;z-index:-1}.mfui-day_between:after{right:-16px;width:40px}.mfui-day_last,.mfui-day_sunday{border-radius:50%}.mfui-day_last:after,.mfui-day_sunday:after{border-radius:50%;right:10px;width:32px}.mfui-day_last:after{right:0}.mfui-day_first,.mfui-day_monday{border-radius:50%}.mfui-day_first:before,.mfui-day_monday:before{border-radius:50%;left:0;padding:0;width:32px}.mfui-day_sunday.mfui-day_first{border-radius:50%}.mfui-day__label{position:relative;z-index:99}.mfui-day_modern{height:38px;width:100%}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after,.mfui-day_modern_active-modern:after{background-color:var(--spbSky0);border-radius:50%!important;color:var(--content);content:"";height:38px;left:0;position:absolute;top:0;width:38px;z-index:1}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):hover:after{background-color:var(--spbSky0);color:var(--content)}.mfui-day_modern:not(:disabled):not(.mfui-day_active-modern):focus:after,.mfui-day_modern_active-modern:after{background-color:var(--brandGreen)}.mfui-day:not(:disabled):focus,.mfui-day_active-modern{color:var(--stcWhite)}.mfui-day_active-modern+.mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before,.mfui-day_between-modern:hover+.mfui-day:not(.mfui-day_monday-modern).mfui-day_active-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;left:-22px;position:absolute;top:0;width:40px;z-index:-1}.mfui-day_between-modern{border-radius:0;position:relative}.mfui-day_between-modern:before{left:-20px;padding:0 29px}.mfui-day_between-modern:after,.mfui-day_between-modern:before{background-color:var(--spbSky1);content:"";display:block;height:38px;position:absolute;top:0;z-index:-1}.mfui-day_between-modern:after{right:-12px;width:45px}.mfui-day_last-modern,.mfui-day_sunday-modern{border-radius:50%}.mfui-day_last-modern:before,.mfui-day_sunday-modern:before{padding-left:8px}.mfui-day_last-modern:after,.mfui-day_sunday-modern:after{border-radius:50%;right:10px;width:38.29px}.mfui-day_last-modern:after{right:0}.mfui-day_first-modern,.mfui-day_monday-modern{border-radius:50%}.mfui-day_first-modern:before,.mfui-day_monday-modern:before{border-radius:50%;left:0;padding:0;width:38px}.mfui-day_sunday-modern.mfui-day_first-modern{border-radius:50%}.mfui-day__label_modern{font-size:15px;font-weight:400;line-height:24px;text-align:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-carousel,.mfui-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-carousel,.mfui-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(transparent),to(var(--gradientColor)));background:linear-gradient(270deg,transparent 0,var(--gradientColor) 100%);left:0}.mfui-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(transparent));background:linear-gradient(270deg,var(--gradientColor) 0,transparent 100%);right:0}.mfui-carousel__swiper_gradient-color_default{--gradientColor:var(--background)}.mfui-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen)}.mfui-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack)}.mfui-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0)}.mfui-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1)}.mfui-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2)}.mfui-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-carousel__arrow{position:absolute;top:50%;-webkit-transform:translateY(calc(-50% - 20px));transform:translateY(calc(-50% - 20px));z-index:6}@media screen and (max-width:1023px){.mfui-carousel__arrow{display:none}}.mfui-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-carousel__arrow_locked{display:none}.mfui-carousel .swiper-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;border-radius:12px;order:2;padding-top:32px;width:100%}.mfui-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-carousel .swiper-pagination-bullet{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;justify-content:center;-webkit-transition:width .5s,background-color .3s;transition:width .5s,background-color .3s;width:8px}.mfui-carousel .swiper-pagination-bullet:before{border-radius:50%;content:"";display:block;height:100%;-webkit-transition:border-radius .5s;transition:border-radius .5s;width:100%}.mfui-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-carousel .swiper-pagination-bullet-active{cursor:default;width:20px}.mfui-carousel .swiper-pagination-bullet-active:before{border-radius:4px}.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { SwiperClass } from 'swiper/react';
|
|
3
3
|
import { PaginationOptions } from 'swiper/types';
|
|
4
|
+
import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
|
|
4
5
|
import './Carousel.scss';
|
|
5
6
|
export declare const NavTheme: {
|
|
6
7
|
readonly LIGHT: "light";
|
|
@@ -79,6 +80,10 @@ export interface ICarouselProps {
|
|
|
79
80
|
navTheme?: NavThemeType;
|
|
80
81
|
/** Эффект анимации */
|
|
81
82
|
effectTheme?: EffectThemeType;
|
|
83
|
+
/** Отключение стрелок */
|
|
84
|
+
disableArrows?: boolean;
|
|
85
|
+
/** Тема стрелок */
|
|
86
|
+
arrowTheme?: ArrowThemeType;
|
|
82
87
|
/** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
|
|
83
88
|
noSwipingSelector?: string;
|
|
84
89
|
/** Свайп к слайду, по которому произведен клик */
|
|
@@ -115,7 +115,7 @@ try {
|
|
|
115
115
|
FreeMode = Modules.FreeMode;
|
|
116
116
|
} catch (e) {
|
|
117
117
|
// eslint-disable-next-line no-console
|
|
118
|
-
console.warn("\n WARNING: megafon/ui-core is using the latest version of swiper
|
|
118
|
+
console.warn("\n WARNING: megafon/ui-core is using the latest version of swiper.\n For more information about server-side rendering\n please check the Carousel component documentation at:\n https://ui.megafon.ru/components/carousel\n ");
|
|
119
119
|
}
|
|
120
120
|
var NavTheme = exports.NavTheme = {
|
|
121
121
|
LIGHT: 'light',
|
|
@@ -189,6 +189,10 @@ var Carousel = function Carousel(_ref) {
|
|
|
189
189
|
navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
|
|
190
190
|
_ref$effectTheme = _ref.effectTheme,
|
|
191
191
|
effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
|
|
192
|
+
_ref$disableArrows = _ref.disableArrows,
|
|
193
|
+
disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows,
|
|
194
|
+
_ref$arrowTheme = _ref.arrowTheme,
|
|
195
|
+
arrowTheme = _ref$arrowTheme === void 0 ? _NavArrow.Theme.PURPLE : _ref$arrowTheme,
|
|
192
196
|
noSwipingSelector = _ref.noSwipingSelector,
|
|
193
197
|
children = _ref.children,
|
|
194
198
|
pagination = _ref.pagination,
|
|
@@ -423,23 +427,21 @@ var Carousel = function Carousel(_ref) {
|
|
|
423
427
|
},
|
|
424
428
|
className: cn('arrow', {
|
|
425
429
|
prev: true,
|
|
426
|
-
locked: isLocked
|
|
430
|
+
locked: isLocked || !loop && isBeginning || disableArrows
|
|
427
431
|
}, [prevClass]),
|
|
428
432
|
onClick: handlePrevClick,
|
|
429
|
-
|
|
430
|
-
theme: _NavArrow.Theme.PURPLE
|
|
433
|
+
theme: arrowTheme
|
|
431
434
|
}), /*#__PURE__*/React.createElement(_NavArrow["default"], {
|
|
432
435
|
dataAttrs: {
|
|
433
436
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
|
|
434
437
|
},
|
|
435
438
|
className: cn('arrow', {
|
|
436
439
|
next: true,
|
|
437
|
-
locked: isLocked
|
|
440
|
+
locked: isLocked || !loop && isEnd || disableArrows
|
|
438
441
|
}, [nextClass]),
|
|
439
442
|
view: "next",
|
|
440
443
|
onClick: handleNextClick,
|
|
441
|
-
|
|
442
|
-
theme: _NavArrow.Theme.PURPLE
|
|
444
|
+
theme: arrowTheme
|
|
443
445
|
}));
|
|
444
446
|
};
|
|
445
447
|
var _default = exports["default"] = Carousel;
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var _uiHelpers = require("@megafon/ui-helpers");
|
|
10
9
|
var _lodash = _interopRequireDefault(require("lodash.throttle"));
|
|
11
10
|
var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
|
|
12
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
@@ -20,14 +19,14 @@ var _default = exports["default"] = function _default(gradient, swiper) {
|
|
|
20
19
|
isLocked = swiper.isLocked;
|
|
21
20
|
var isGradientEnable = gradient && !isLocked;
|
|
22
21
|
(0, _react.useEffect)(function () {
|
|
23
|
-
var
|
|
24
|
-
var isPossibleToSetGap = isGradientEnable && swiperInstance && !isTouch;
|
|
22
|
+
var isPossibleToSetGap = isGradientEnable && swiperInstance;
|
|
25
23
|
if (!isPossibleToSetGap) {
|
|
26
24
|
return undefined;
|
|
27
25
|
}
|
|
28
26
|
var setCurrentSlidesGap = function setCurrentSlidesGap() {
|
|
27
|
+
var _a;
|
|
29
28
|
var currentBreakpoint = swiperInstance.currentBreakpoint;
|
|
30
|
-
var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
|
|
29
|
+
var currentSpaceBetweenValue = (_a = slidesSettings[currentBreakpoint]) === null || _a === void 0 ? void 0 : _a.spaceBetween;
|
|
31
30
|
setSlidesGap(currentSpaceBetweenValue);
|
|
32
31
|
};
|
|
33
32
|
setCurrentSlidesGap();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}@media screen and (min-width:768px){.mfui-modal-content__header-icon{height:40px;min-width:40px;width:40px}}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}@media screen and (min-width:768px){.mfui-modal-content__header-icon{height:40px;min-width:40px;width:40px}}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
|
|
@@ -90,7 +90,7 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
90
90
|
setShowHeaderShadow = _React$useState2[1];
|
|
91
91
|
var showHeaderMain = !!showBackButton || !!headerTitle || !hideCloseButton;
|
|
92
92
|
var showHeader = showHeaderMain || !!headerAdditionalContent;
|
|
93
|
-
var isStickyHeader = showHeader &&
|
|
93
|
+
var isStickyHeader = showHeader && isStickyHeaderProps;
|
|
94
94
|
var isStaticHeader = showHeader && !isStickyHeaderProps;
|
|
95
95
|
var isStickyFooter = !!footer && !!isStickyFooterProps;
|
|
96
96
|
var isStaticFooter = !!footer && !isStickyFooterProps;
|
|
@@ -125,7 +125,8 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
125
125
|
}));
|
|
126
126
|
var renderHeader = /*#__PURE__*/React.createElement("div", {
|
|
127
127
|
className: cn('header', {
|
|
128
|
-
shadow: showHeaderShadow
|
|
128
|
+
shadow: showHeaderShadow,
|
|
129
|
+
'native-scroll': isEnabledNativeScroll && isStickyHeader
|
|
129
130
|
}, classes === null || classes === void 0 ? void 0 : classes.header),
|
|
130
131
|
ref: headerRef
|
|
131
132
|
}, !!isOutSideHeaderButtons && showBackButton && renderBackButton, !isOutSideHeaderButtons && showHeaderMain && /*#__PURE__*/React.createElement("div", {
|
|
@@ -139,7 +140,8 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
139
140
|
}, headerAdditionalContent));
|
|
140
141
|
var renderFooter = /*#__PURE__*/React.createElement("div", {
|
|
141
142
|
className: cn('footer', {
|
|
142
|
-
shadow: hasFooterShadow
|
|
143
|
+
shadow: hasFooterShadow,
|
|
144
|
+
'native-scroll': isEnabledNativeScroll && isStickyFooter
|
|
143
145
|
}, classes === null || classes === void 0 ? void 0 : classes.footer),
|
|
144
146
|
ref: footerRef
|
|
145
147
|
}, footer);
|
|
@@ -155,7 +157,6 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
155
157
|
'sticky-footer': isStickyFooter,
|
|
156
158
|
'static-header': isStaticHeader,
|
|
157
159
|
'transition-end': isTransitionEndStep,
|
|
158
|
-
'native-scroll': isEnabledNativeScroll,
|
|
159
160
|
'out-side-buttons': isOutSideHeaderButtons
|
|
160
161
|
}, classes === null || classes === void 0 ? void 0 : classes.containerWrap),
|
|
161
162
|
style: {
|
|
@@ -166,10 +167,14 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
166
167
|
ref: onSetContainerWrapRef,
|
|
167
168
|
onTransitionEnd: onTransitionEnd
|
|
168
169
|
}), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerInner), {
|
|
169
|
-
className: cn('container-inner',
|
|
170
|
+
className: cn('container-inner', {
|
|
171
|
+
'native-scroll': isEnabledNativeScroll
|
|
172
|
+
}, classes === null || classes === void 0 ? void 0 : classes.containerInner),
|
|
170
173
|
ref: containerInnerRef
|
|
171
174
|
}), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
|
|
172
|
-
className: cn('container-body',
|
|
175
|
+
className: cn('container-body', {
|
|
176
|
+
'native-scroll': isEnabledNativeScroll
|
|
177
|
+
}, classes === null || classes === void 0 ? void 0 : classes.containerBody),
|
|
173
178
|
ref: containerBodyRef,
|
|
174
179
|
onScroll: hasHeaderShadow ? handleChangeShadowState : undefined
|
|
175
180
|
}), isEnabledNativeScroll ? renderChildren : /*#__PURE__*/React.createElement(_ScrollBar["default"], scrollBarParams, renderChildren)), isStickyFooter && renderFooter));
|
|
@@ -45,6 +45,7 @@ var ModalMobileFullScreen = function ModalMobileFullScreen(_a) {
|
|
|
45
45
|
return /*#__PURE__*/React.createElement("div", {
|
|
46
46
|
className: cn()
|
|
47
47
|
}, /*#__PURE__*/React.createElement(_ModalContent["default"], (0, _extends2["default"])({}, restProps, {
|
|
48
|
+
containerWrapHeight: undefined,
|
|
48
49
|
classes: (0, _extends2["default"])((0, _extends2["default"])({}, restClasses), {
|
|
49
50
|
containerWrap: cn('container-wrap', containerWrap),
|
|
50
51
|
containerInner: cn('container-inner', containerInner),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-nav-arrow_size_middle{height:40px;padding:4px;width:40px}.mfui-nav-arrow_size_large{height:64px;padding:12px;width:64px}.mfui-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-nav-arrow_theme_white .mfui-nav-arrow__icon{fill:var(--stcBlack)}
|
|
@@ -9,8 +9,13 @@ export declare const View: {
|
|
|
9
9
|
readonly PREV: "prev";
|
|
10
10
|
readonly NEXT: "next";
|
|
11
11
|
};
|
|
12
|
+
export declare const Size: {
|
|
13
|
+
readonly MIDDLE: "middle";
|
|
14
|
+
readonly LARGE: "large";
|
|
15
|
+
};
|
|
12
16
|
export type ThemeType = (typeof Theme)[keyof typeof Theme];
|
|
13
17
|
type ViewType = (typeof View)[keyof typeof View];
|
|
18
|
+
type SizeType = (typeof Size)[keyof typeof Size];
|
|
14
19
|
export interface INavArrowProps {
|
|
15
20
|
dataAttrs?: {
|
|
16
21
|
root?: Record<string, string>;
|
|
@@ -20,6 +25,7 @@ export interface INavArrowProps {
|
|
|
20
25
|
className?: string;
|
|
21
26
|
theme?: ThemeType;
|
|
22
27
|
view?: ViewType;
|
|
28
|
+
size?: SizeType;
|
|
23
29
|
disabled?: boolean;
|
|
24
30
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
25
31
|
}
|
|
@@ -4,27 +4,41 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports["default"] = exports.View = exports.Theme = void 0;
|
|
7
|
+
exports["default"] = exports.View = exports.Theme = exports.Size = 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
11
|
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); }
|
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
|
-
var
|
|
14
|
+
var ArrowLeft24 = function ArrowLeft24(props) {
|
|
15
15
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
16
16
|
viewBox: "0 0 32 32"
|
|
17
17
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
18
18
|
d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
|
|
19
19
|
}));
|
|
20
20
|
};
|
|
21
|
-
var
|
|
21
|
+
var ArrowRight24 = function ArrowRight24(props) {
|
|
22
22
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
23
23
|
viewBox: "0 0 32 32"
|
|
24
24
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
25
25
|
d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
|
|
26
26
|
}));
|
|
27
27
|
};
|
|
28
|
+
var ArrowLeft32 = function ArrowLeft32(props) {
|
|
29
|
+
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
30
|
+
viewBox: "0 0 40 40"
|
|
31
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
32
|
+
d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
|
|
33
|
+
}));
|
|
34
|
+
};
|
|
35
|
+
var ArrowRight32 = function ArrowRight32(props) {
|
|
36
|
+
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
37
|
+
viewBox: "0 0 40 40"
|
|
38
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
39
|
+
d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
|
|
40
|
+
}));
|
|
41
|
+
};
|
|
28
42
|
var Theme = exports.Theme = {
|
|
29
43
|
PURPLE: 'purple',
|
|
30
44
|
DARK: 'dark',
|
|
@@ -34,6 +48,10 @@ var View = exports.View = {
|
|
|
34
48
|
PREV: 'prev',
|
|
35
49
|
NEXT: 'next'
|
|
36
50
|
};
|
|
51
|
+
var Size = exports.Size = {
|
|
52
|
+
MIDDLE: 'middle',
|
|
53
|
+
LARGE: 'large'
|
|
54
|
+
};
|
|
37
55
|
var cn = (0, _uiHelpers.cnCreate)('mfui-nav-arrow');
|
|
38
56
|
var NavArrow = function NavArrow(_ref) {
|
|
39
57
|
var dataAttrs = _ref.dataAttrs,
|
|
@@ -42,10 +60,29 @@ var NavArrow = function NavArrow(_ref) {
|
|
|
42
60
|
view = _ref$view === void 0 ? View.PREV : _ref$view,
|
|
43
61
|
_ref$theme = _ref.theme,
|
|
44
62
|
theme = _ref$theme === void 0 ? Theme.PURPLE : _ref$theme,
|
|
63
|
+
_ref$size = _ref.size,
|
|
64
|
+
size = _ref$size === void 0 ? Size.MIDDLE : _ref$size,
|
|
45
65
|
_ref$disabled = _ref.disabled,
|
|
46
66
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
47
67
|
onClick = _ref.onClick;
|
|
48
|
-
var
|
|
68
|
+
var getIcons = function getIcons() {
|
|
69
|
+
switch (size) {
|
|
70
|
+
case Size.LARGE:
|
|
71
|
+
return {
|
|
72
|
+
ArrowLeft: ArrowLeft32,
|
|
73
|
+
ArrowRight: ArrowRight32
|
|
74
|
+
};
|
|
75
|
+
default:
|
|
76
|
+
return {
|
|
77
|
+
ArrowLeft: ArrowLeft24,
|
|
78
|
+
ArrowRight: ArrowRight24
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
var renderIcon = function renderIcon() {
|
|
83
|
+
var _getIcons = getIcons(),
|
|
84
|
+
ArrowLeft = _getIcons.ArrowLeft,
|
|
85
|
+
ArrowRight = _getIcons.ArrowRight;
|
|
49
86
|
switch (view) {
|
|
50
87
|
case View.PREV:
|
|
51
88
|
return /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow), {
|
|
@@ -56,11 +93,12 @@ var NavArrow = function NavArrow(_ref) {
|
|
|
56
93
|
className: cn('icon')
|
|
57
94
|
}));
|
|
58
95
|
}
|
|
59
|
-
}
|
|
96
|
+
};
|
|
60
97
|
return /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
61
98
|
type: "button",
|
|
62
99
|
className: cn({
|
|
63
|
-
theme: theme
|
|
100
|
+
theme: theme,
|
|
101
|
+
size: size
|
|
64
102
|
}, className),
|
|
65
103
|
onClick: onClick,
|
|
66
104
|
disabled: disabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-snackbar-timer{color:var(--base);margin-right:8px}@-webkit-keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.mfui-snackbar-timer__timer{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-snackbar-timer{color:var(--base);margin-right:8px}@-webkit-keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes snackbar-progress-bar{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.mfui-snackbar-timer__timer{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;height:24px;justify-content:center;width:24px}.mfui-snackbar-timer__timer svg{height:24px;position:absolute;width:24px}.mfui-snackbar-timer__timer-bg{fill:none;stroke:var(--spbSky0);stroke-width:1px}.mfui-snackbar-timer__timer-progress{-webkit-animation-name:snackbar-progress-bar;animation-name:snackbar-progress-bar;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;fill:none;stroke:var(--content);stroke-width:2px;stroke-dasharray:100;stroke-linecap:round}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.11.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@babel/preset-env": "^7.8.6",
|
|
51
51
|
"@babel/preset-react": "^7.8.3",
|
|
52
52
|
"@babel/preset-typescript": "^7.8.3",
|
|
53
|
-
"@megafon/ui-icons": "^3.
|
|
53
|
+
"@megafon/ui-icons": "^3.12.0",
|
|
54
54
|
"@svgr/core": "^2.4.1",
|
|
55
55
|
"@testing-library/jest-dom": "^6.5.0",
|
|
56
56
|
"@testing-library/react": "^16.0.1",
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"simplebar-react": "^3.2.5",
|
|
105
105
|
"swiper": "^11.1.1"
|
|
106
106
|
},
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "8b5230c1f266abd6da16ddc142f60205cc065c42"
|
|
108
108
|
}
|