@megafon/ui-core 8.9.0 → 8.10.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 +3 -0
- package/dist/es/components/Carousel/Carousel.js +7 -7
- package/dist/es/components/Carousel/useGradient.js +2 -1
- package/dist/es/components/Modal/_ModalContent/ModalContent.js +0 -1
- 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 +3 -0
- package/dist/lib/components/Carousel/Carousel.js +7 -7
- package/dist/lib/components/Carousel/useGradient.js +2 -1
- package/dist/lib/components/Modal/_ModalContent/ModalContent.js +0 -1
- 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}@media screen and (max-width:1023px){.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{display:none}}.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(--
|
|
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}@media screen and (max-width:1023px){.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{display:none}}.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,8 @@ export interface ICarouselProps {
|
|
|
79
80
|
navTheme?: NavThemeType;
|
|
80
81
|
/** Эффект анимации */
|
|
81
82
|
effectTheme?: EffectThemeType;
|
|
83
|
+
/** Тема стрелок */
|
|
84
|
+
arrowTheme?: ArrowThemeType;
|
|
82
85
|
/** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
|
|
83
86
|
noSwipingSelector?: string;
|
|
84
87
|
/** Свайп к слайду, по которому произведен клик */
|
|
@@ -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,8 @@ 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$arrowTheme = _ref.arrowTheme,
|
|
127
|
+
arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.PURPLE : _ref$arrowTheme,
|
|
126
128
|
noSwipingSelector = _ref.noSwipingSelector,
|
|
127
129
|
children = _ref.children,
|
|
128
130
|
pagination = _ref.pagination,
|
|
@@ -357,23 +359,21 @@ var Carousel = function Carousel(_ref) {
|
|
|
357
359
|
},
|
|
358
360
|
className: cn('arrow', {
|
|
359
361
|
prev: true,
|
|
360
|
-
locked: isLocked
|
|
362
|
+
locked: isLocked || !loop && isBeginning
|
|
361
363
|
}, [prevClass]),
|
|
362
364
|
onClick: handlePrevClick,
|
|
363
|
-
|
|
364
|
-
theme: ArrowTheme.PURPLE
|
|
365
|
+
theme: arrowTheme
|
|
365
366
|
}), /*#__PURE__*/React.createElement(NavArrow, {
|
|
366
367
|
dataAttrs: {
|
|
367
368
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
|
|
368
369
|
},
|
|
369
370
|
className: cn('arrow', {
|
|
370
371
|
next: true,
|
|
371
|
-
locked: isLocked
|
|
372
|
+
locked: isLocked || !loop && isEnd
|
|
372
373
|
}, [nextClass]),
|
|
373
374
|
view: "next",
|
|
374
375
|
onClick: handleNextClick,
|
|
375
|
-
|
|
376
|
-
theme: ArrowTheme.PURPLE
|
|
376
|
+
theme: arrowTheme
|
|
377
377
|
}));
|
|
378
378
|
};
|
|
379
379
|
export default Carousel;
|
|
@@ -19,8 +19,9 @@ export default (function (gradient, swiper) {
|
|
|
19
19
|
return undefined;
|
|
20
20
|
}
|
|
21
21
|
var setCurrentSlidesGap = function setCurrentSlidesGap() {
|
|
22
|
+
var _a;
|
|
22
23
|
var currentBreakpoint = swiperInstance.currentBreakpoint;
|
|
23
|
-
var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
|
|
24
|
+
var currentSpaceBetweenValue = (_a = slidesSettings[currentBreakpoint]) === null || _a === void 0 ? void 0 : _a.spaceBetween;
|
|
24
25
|
setSlidesGap(currentSpaceBetweenValue);
|
|
25
26
|
};
|
|
26
27
|
setCurrentSlidesGap();
|
|
@@ -146,7 +146,6 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
146
146
|
'sticky-footer': isStickyFooter,
|
|
147
147
|
'static-header': isStaticHeader,
|
|
148
148
|
'transition-end': isTransitionEndStep,
|
|
149
|
-
'native-scroll': isEnabledNativeScroll,
|
|
150
149
|
'out-side-buttons': isOutSideHeaderButtons
|
|
151
150
|
}, classes === null || classes === void 0 ? void 0 : classes.containerWrap),
|
|
152
151
|
style: {
|
|
@@ -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}@media screen and (max-width:1023px){.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{display:none}}.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(--
|
|
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}@media screen and (max-width:1023px){.mfui-carousel__swiper_gradient:after,.mfui-carousel__swiper_gradient:before{display:none}}.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,8 @@ export interface ICarouselProps {
|
|
|
79
80
|
navTheme?: NavThemeType;
|
|
80
81
|
/** Эффект анимации */
|
|
81
82
|
effectTheme?: EffectThemeType;
|
|
83
|
+
/** Тема стрелок */
|
|
84
|
+
arrowTheme?: ArrowThemeType;
|
|
82
85
|
/** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
|
|
83
86
|
noSwipingSelector?: string;
|
|
84
87
|
/** Свайп к слайду, по которому произведен клик */
|
|
@@ -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,8 @@ 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$arrowTheme = _ref.arrowTheme,
|
|
193
|
+
arrowTheme = _ref$arrowTheme === void 0 ? _NavArrow.Theme.PURPLE : _ref$arrowTheme,
|
|
192
194
|
noSwipingSelector = _ref.noSwipingSelector,
|
|
193
195
|
children = _ref.children,
|
|
194
196
|
pagination = _ref.pagination,
|
|
@@ -423,23 +425,21 @@ var Carousel = function Carousel(_ref) {
|
|
|
423
425
|
},
|
|
424
426
|
className: cn('arrow', {
|
|
425
427
|
prev: true,
|
|
426
|
-
locked: isLocked
|
|
428
|
+
locked: isLocked || !loop && isBeginning
|
|
427
429
|
}, [prevClass]),
|
|
428
430
|
onClick: handlePrevClick,
|
|
429
|
-
|
|
430
|
-
theme: _NavArrow.Theme.PURPLE
|
|
431
|
+
theme: arrowTheme
|
|
431
432
|
}), /*#__PURE__*/React.createElement(_NavArrow["default"], {
|
|
432
433
|
dataAttrs: {
|
|
433
434
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
|
|
434
435
|
},
|
|
435
436
|
className: cn('arrow', {
|
|
436
437
|
next: true,
|
|
437
|
-
locked: isLocked
|
|
438
|
+
locked: isLocked || !loop && isEnd
|
|
438
439
|
}, [nextClass]),
|
|
439
440
|
view: "next",
|
|
440
441
|
onClick: handleNextClick,
|
|
441
|
-
|
|
442
|
-
theme: _NavArrow.Theme.PURPLE
|
|
442
|
+
theme: arrowTheme
|
|
443
443
|
}));
|
|
444
444
|
};
|
|
445
445
|
var _default = exports["default"] = Carousel;
|
|
@@ -26,8 +26,9 @@ var _default = exports["default"] = function _default(gradient, swiper) {
|
|
|
26
26
|
return undefined;
|
|
27
27
|
}
|
|
28
28
|
var setCurrentSlidesGap = function setCurrentSlidesGap() {
|
|
29
|
+
var _a;
|
|
29
30
|
var currentBreakpoint = swiperInstance.currentBreakpoint;
|
|
30
|
-
var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
|
|
31
|
+
var currentSpaceBetweenValue = (_a = slidesSettings[currentBreakpoint]) === null || _a === void 0 ? void 0 : _a.spaceBetween;
|
|
31
32
|
setSlidesGap(currentSpaceBetweenValue);
|
|
32
33
|
};
|
|
33
34
|
setCurrentSlidesGap();
|
|
@@ -155,7 +155,6 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
155
155
|
'sticky-footer': isStickyFooter,
|
|
156
156
|
'static-header': isStaticHeader,
|
|
157
157
|
'transition-end': isTransitionEndStep,
|
|
158
|
-
'native-scroll': isEnabledNativeScroll,
|
|
159
158
|
'out-side-buttons': isOutSideHeaderButtons
|
|
160
159
|
}, classes === null || classes === void 0 ? void 0 : classes.containerWrap),
|
|
161
160
|
style: {
|
|
@@ -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.10.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": "207f640b146b0854bcd25ac004f04f639109d23b"
|
|
108
108
|
}
|