@megafon/ui-core 9.0.0-alpha.8 → 9.0.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/Accordion/Accordion.css +1 -1
- package/dist/es/components/Accordion/Accordion.js +1 -3
- package/dist/es/components/Badges/CounterBadge/CounterBadge.js +1 -2
- package/dist/es/components/Badges/InfoBadge/InfoBadge.js +28 -16
- package/dist/es/components/Badges/PriceBadge/PriceBadge.js +28 -16
- package/dist/es/components/Badges/StatusBadge/StatusBadge.css +1 -1
- package/dist/es/components/Badges/StatusBadge/StatusBadge.js +16 -7
- package/dist/es/components/Badges/TimerBadge/TimerBadge.d.ts +2 -0
- package/dist/es/components/Badges/TimerBadge/TimerBadge.js +6 -2
- package/dist/es/components/Buttons/Button/Button.css +1 -1
- package/dist/es/components/Buttons/Button/Button.d.ts +4 -0
- package/dist/es/components/Buttons/Button/Button.js +37 -12
- package/dist/es/components/Buttons/ButtonClose/ButtonClose.css +1 -1
- package/dist/es/components/Buttons/ButtonClose/ButtonClose.js +1 -2
- package/dist/es/components/Calendar/components/_Month/Month.js +2 -6
- package/dist/es/components/Carousel/Carousel.css +1 -1
- package/dist/es/components/Carousel/Carousel.d.ts +7 -0
- package/dist/es/components/Carousel/Carousel.js +7 -1
- package/dist/es/components/Checkbox/Checkbox.css +1 -1
- package/dist/es/components/Checkbox/Checkbox.js +3 -2
- package/dist/es/components/Chips/Chips/Chip.css +1 -1
- package/dist/es/components/Chips/Chips/Chip.js +4 -6
- package/dist/es/components/Chips/Chips/Chips.d.ts +4 -0
- package/dist/es/components/Chips/Chips/Chips.js +8 -0
- package/dist/es/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.d.ts +8 -0
- package/dist/es/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.js +10 -7
- package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.css +1 -1
- package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.d.ts +7 -0
- package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.js +7 -0
- package/dist/es/components/Chips/ChipsSuggest/ChipsSuggest.d.ts +4 -2
- package/dist/es/components/Chips/ChipsSuggest/ChipsSuggest.js +3 -0
- package/dist/es/components/ContentArea/ContentArea.css +1 -1
- package/dist/es/components/ContentArea/ContentArea.d.ts +3 -2
- package/dist/es/components/ContentArea/ContentArea.js +5 -0
- package/dist/es/components/ContentView/ContentView.css +1 -1
- package/dist/es/components/ContentView/ContentView.d.ts +15 -4
- package/dist/es/components/ContentView/ContentView.js +16 -3
- package/dist/es/components/Counter/Counter.css +1 -1
- package/dist/es/components/Counter/Counter.js +2 -2
- package/dist/es/components/Dropdown/Dropdown.css +1 -1
- package/dist/es/components/Dropdown/Dropdown.d.ts +3 -1
- package/dist/es/components/Dropdown/Dropdown.js +26 -4
- package/dist/es/components/ErrorLoad/ErrorLoad.css +1 -1
- package/dist/es/components/ErrorLoad/ErrorLoad.js +1 -3
- package/dist/es/components/Link/Link.css +1 -0
- package/dist/es/components/Link/Link.d.ts +1 -0
- package/dist/es/components/Link/Link.js +4 -2
- package/dist/es/components/ListData/ListData.css +1 -1
- package/dist/es/components/ListData/ListData.js +12 -14
- package/dist/es/components/ListData/components/ListDataSortable.css +1 -1
- package/dist/es/components/ListData/components/ListDataSortable.js +1 -3
- package/dist/es/components/Modal/Modal.d.ts +11 -2
- package/dist/es/components/Modal/Modal.js +4 -0
- package/dist/es/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/es/components/Modal/_ModalContent/ModalContent.js +37 -13
- package/dist/es/components/Modal/_ModalDesktop/ModalDesktop.css +1 -1
- package/dist/es/components/Modal/_ModalMobile/ModalMobile.css +1 -1
- package/dist/es/components/Modal/_ModalMobile/ModalMobile.js +2 -3
- package/dist/es/components/NavArrow/NavArrow.css +1 -1
- package/dist/es/components/NavArrow/NavArrow.js +4 -4
- package/dist/es/components/Notification/Notification.js +13 -9
- package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.css +1 -1
- package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.css +1 -1
- package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.js +4 -4
- package/dist/es/components/Parameter/Parameter.js +3 -1
- package/dist/es/components/RadioButton/RadioButton.css +1 -1
- package/dist/es/components/Row/Row.css +1 -1
- package/dist/es/components/Row/Row.js +6 -4
- package/dist/es/components/ScrollBar/ScrollBar.d.ts +2 -0
- package/dist/es/components/ScrollBar/ScrollBar.js +6 -1
- package/dist/es/components/Search/Search.css +1 -1
- package/dist/es/components/Search/Search.d.ts +2 -0
- package/dist/es/components/Search/Search.js +14 -7
- package/dist/es/components/SectionAccordionGroup/SectionAccordionGroup.css +1 -0
- package/dist/es/components/SectionAccordionGroup/SectionAccordionGroup.d.ts +45 -0
- package/dist/es/components/SectionAccordionGroup/SectionAccordionGroup.js +161 -0
- package/dist/es/components/Select/Select.css +1 -1
- package/dist/es/components/Select/Select.d.ts +8 -1
- package/dist/es/components/Select/Select.js +17 -2
- package/dist/es/components/Selector/Selector.css +1 -1
- package/dist/es/components/Sliders/Slider/Slider.css +1 -1
- package/dist/es/components/Sliders/SliderRange/SliderRange.css +1 -1
- package/dist/es/components/Sliders/SliderRatio/SliderRatio.css +1 -1
- package/dist/es/components/Snackbar/Snackbar.css +1 -1
- package/dist/es/components/Snackbar/Snackbar.js +19 -20
- package/dist/es/components/Stepper/Stepper.css +1 -0
- package/dist/es/components/Stepper/Stepper.d.ts +52 -0
- package/dist/es/components/Stepper/Stepper.js +159 -0
- package/dist/es/components/Stepper/StepperItem.css +1 -0
- package/dist/es/components/Stepper/StepperItem.d.ts +57 -0
- package/dist/es/components/Stepper/StepperItem.js +101 -0
- package/dist/es/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/es/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/es/components/Stepper/img/separator.png +0 -0
- package/dist/es/components/Switcher/Switcher.css +1 -1
- package/dist/es/components/Switcher/Switcher.js +3 -2
- package/dist/es/components/Tabs/Tabs.css +1 -1
- package/dist/es/components/Tabs/Tabs.d.ts +2 -0
- package/dist/es/components/Tabs/Tabs.js +64 -55
- package/dist/es/components/TextField/TextField.css +1 -1
- package/dist/es/components/TextField/TextField.d.ts +2 -2
- package/dist/es/components/TextField/TextField.js +16 -9
- package/dist/es/components/Tooltip/Tooltip.js +5 -3
- package/dist/es/components/UploadForm/UploadField/UploadField.css +1 -1
- package/dist/es/components/UploadForm/UploadField/UploadField.d.ts +3 -0
- package/dist/es/components/UploadForm/UploadField/UploadField.js +8 -2
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +2 -0
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +9 -2
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js +3 -4
- package/dist/es/components/UploadForm/UploadFileItem/components/_UploadFileItemIcon/UploadFileItemIcon.js +6 -0
- package/dist/es/hooks/useResolution.js +15 -23
- package/dist/es/index.d.ts +3 -0
- package/dist/es/index.js +3 -0
- package/dist/lib/components/Accordion/Accordion.css +1 -1
- package/dist/lib/components/Accordion/Accordion.js +1 -3
- package/dist/lib/components/Badges/CounterBadge/CounterBadge.js +1 -2
- package/dist/lib/components/Badges/InfoBadge/InfoBadge.js +28 -16
- package/dist/lib/components/Badges/PriceBadge/PriceBadge.js +28 -16
- package/dist/lib/components/Badges/StatusBadge/StatusBadge.css +1 -1
- package/dist/lib/components/Badges/StatusBadge/StatusBadge.js +16 -7
- package/dist/lib/components/Badges/TimerBadge/TimerBadge.d.ts +2 -0
- package/dist/lib/components/Badges/TimerBadge/TimerBadge.js +6 -2
- package/dist/lib/components/Buttons/Button/Button.css +1 -1
- package/dist/lib/components/Buttons/Button/Button.d.ts +4 -0
- package/dist/lib/components/Buttons/Button/Button.js +37 -12
- package/dist/lib/components/Buttons/ButtonClose/ButtonClose.css +1 -1
- package/dist/lib/components/Buttons/ButtonClose/ButtonClose.js +1 -2
- package/dist/lib/components/Calendar/components/_Month/Month.js +2 -6
- package/dist/lib/components/Carousel/Carousel.css +1 -1
- package/dist/lib/components/Carousel/Carousel.d.ts +7 -0
- package/dist/lib/components/Carousel/Carousel.js +8 -2
- package/dist/lib/components/Checkbox/Checkbox.css +1 -1
- package/dist/lib/components/Checkbox/Checkbox.js +3 -2
- package/dist/lib/components/Chips/Chips/Chip.css +1 -1
- package/dist/lib/components/Chips/Chips/Chip.js +4 -6
- package/dist/lib/components/Chips/Chips/Chips.d.ts +4 -0
- package/dist/lib/components/Chips/Chips/Chips.js +8 -0
- package/dist/lib/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.d.ts +8 -0
- package/dist/lib/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.js +9 -6
- package/dist/lib/components/Chips/ChipsSuggest/ChipSuggest.css +1 -1
- package/dist/lib/components/Chips/ChipsSuggest/ChipSuggest.d.ts +7 -0
- package/dist/lib/components/Chips/ChipsSuggest/ChipSuggest.js +8 -1
- package/dist/lib/components/Chips/ChipsSuggest/ChipsSuggest.d.ts +4 -2
- package/dist/lib/components/Chips/ChipsSuggest/ChipsSuggest.js +3 -0
- package/dist/lib/components/ContentArea/ContentArea.css +1 -1
- package/dist/lib/components/ContentArea/ContentArea.d.ts +3 -2
- package/dist/lib/components/ContentArea/ContentArea.js +5 -0
- package/dist/lib/components/ContentView/ContentView.css +1 -1
- package/dist/lib/components/ContentView/ContentView.d.ts +15 -4
- package/dist/lib/components/ContentView/ContentView.js +16 -3
- package/dist/lib/components/Counter/Counter.css +1 -1
- package/dist/lib/components/Counter/Counter.js +2 -2
- package/dist/lib/components/Dropdown/Dropdown.css +1 -1
- package/dist/lib/components/Dropdown/Dropdown.d.ts +3 -1
- package/dist/lib/components/Dropdown/Dropdown.js +26 -4
- package/dist/lib/components/ErrorLoad/ErrorLoad.css +1 -1
- package/dist/lib/components/ErrorLoad/ErrorLoad.js +1 -3
- package/dist/lib/components/Link/Link.css +1 -0
- package/dist/lib/components/Link/Link.d.ts +1 -0
- package/dist/lib/components/Link/Link.js +2 -1
- package/dist/lib/components/ListData/ListData.css +1 -1
- package/dist/lib/components/ListData/ListData.js +12 -14
- package/dist/lib/components/ListData/components/ListDataSortable.css +1 -1
- package/dist/lib/components/ListData/components/ListDataSortable.js +1 -3
- package/dist/lib/components/Modal/Modal.d.ts +11 -2
- package/dist/lib/components/Modal/Modal.js +5 -1
- package/dist/lib/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/lib/components/Modal/_ModalContent/ModalContent.js +37 -13
- package/dist/lib/components/Modal/_ModalDesktop/ModalDesktop.css +1 -1
- package/dist/lib/components/Modal/_ModalMobile/ModalMobile.css +1 -1
- package/dist/lib/components/Modal/_ModalMobile/ModalMobile.js +2 -3
- package/dist/lib/components/NavArrow/NavArrow.css +1 -1
- package/dist/lib/components/NavArrow/NavArrow.js +4 -4
- package/dist/lib/components/Notification/Notification.js +13 -9
- package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css +1 -1
- package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.css +1 -1
- package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.js +4 -4
- package/dist/lib/components/Parameter/Parameter.js +3 -1
- package/dist/lib/components/RadioButton/RadioButton.css +1 -1
- package/dist/lib/components/Row/Row.css +1 -1
- package/dist/lib/components/Row/Row.js +5 -3
- package/dist/lib/components/ScrollBar/ScrollBar.d.ts +2 -0
- package/dist/lib/components/ScrollBar/ScrollBar.js +6 -1
- package/dist/lib/components/Search/Search.css +1 -1
- package/dist/lib/components/Search/Search.d.ts +2 -0
- package/dist/lib/components/Search/Search.js +14 -7
- package/dist/lib/components/SectionAccordionGroup/SectionAccordionGroup.css +1 -0
- package/dist/lib/components/SectionAccordionGroup/SectionAccordionGroup.d.ts +45 -0
- package/dist/lib/components/SectionAccordionGroup/SectionAccordionGroup.js +170 -0
- package/dist/lib/components/Select/Select.css +1 -1
- package/dist/lib/components/Select/Select.d.ts +8 -1
- package/dist/lib/components/Select/Select.js +17 -2
- package/dist/lib/components/Selector/Selector.css +1 -1
- package/dist/lib/components/Sliders/Slider/Slider.css +1 -1
- package/dist/lib/components/Sliders/SliderRange/SliderRange.css +1 -1
- package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css +1 -1
- package/dist/lib/components/Snackbar/Snackbar.css +1 -1
- package/dist/lib/components/Snackbar/Snackbar.js +19 -20
- package/dist/lib/components/Stepper/Stepper.css +1 -0
- package/dist/lib/components/Stepper/Stepper.d.ts +52 -0
- package/dist/lib/components/Stepper/Stepper.js +168 -0
- package/dist/lib/components/Stepper/StepperItem.css +1 -0
- package/dist/lib/components/Stepper/StepperItem.d.ts +57 -0
- package/dist/lib/components/Stepper/StepperItem.js +110 -0
- package/dist/lib/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/lib/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/lib/components/Stepper/img/separator.png +0 -0
- package/dist/lib/components/Switcher/Switcher.css +1 -1
- package/dist/lib/components/Switcher/Switcher.js +3 -2
- package/dist/lib/components/Tabs/Tabs.css +1 -1
- package/dist/lib/components/Tabs/Tabs.d.ts +2 -0
- package/dist/lib/components/Tabs/Tabs.js +64 -55
- package/dist/lib/components/TextField/TextField.css +1 -1
- package/dist/lib/components/TextField/TextField.d.ts +2 -2
- package/dist/lib/components/TextField/TextField.js +16 -9
- package/dist/lib/components/Tooltip/Tooltip.js +5 -3
- package/dist/lib/components/UploadForm/UploadField/UploadField.css +1 -1
- package/dist/lib/components/UploadForm/UploadField/UploadField.d.ts +3 -0
- package/dist/lib/components/UploadForm/UploadField/UploadField.js +8 -2
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +2 -0
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +9 -2
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js +3 -4
- package/dist/lib/components/UploadForm/UploadFileItem/components/_UploadFileItemIcon/UploadFileItemIcon.js +6 -0
- package/dist/lib/hooks/useResolution.js +15 -23
- package/dist/lib/index.d.ts +3 -0
- package/dist/lib/index.js +21 -0
- package/package.json +5 -5
- package/styles/base.scss +54 -0
|
@@ -25,8 +25,7 @@ var CancelIcon = function CancelIcon(props) {
|
|
|
25
25
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
26
26
|
viewBox: "0 0 32 32"
|
|
27
27
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
28
|
-
|
|
29
|
-
d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
|
|
28
|
+
d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
|
|
30
29
|
}));
|
|
31
30
|
};
|
|
32
31
|
var ButtonCloseThemes = exports.ButtonCloseThemes = {
|
|
@@ -20,18 +20,14 @@ var ArrowLeft = function ArrowLeft(props) {
|
|
|
20
20
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
21
21
|
viewBox: "0 0 20 20"
|
|
22
22
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
23
|
-
d: "
|
|
24
|
-
fillRule: "evenodd",
|
|
25
|
-
clipRule: "evenodd"
|
|
23
|
+
d: "M8.202 10.465a.609.609 0 010-.907l2.547-2.371c.44-.41 1.251-.1 1.251.476v4.679c0 .575-.811.879-1.25.47l-2.548-2.347z"
|
|
26
24
|
}));
|
|
27
25
|
};
|
|
28
26
|
var ArrowRight = function ArrowRight(props) {
|
|
29
27
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
30
28
|
viewBox: "0 0 20 20"
|
|
31
29
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
32
|
-
d: "
|
|
33
|
-
fillRule: "evenodd",
|
|
34
|
-
clipRule: "evenodd"
|
|
30
|
+
d: "M11.798 9.535a.61.61 0 010 .907L9.25 12.813c-.44.41-1.251.1-1.251-.476V7.658c0-.576.811-.879 1.25-.47l2.548 2.347z"
|
|
35
31
|
}));
|
|
36
32
|
};
|
|
37
33
|
var formatDate = function formatDate(date, pattern) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-carousel,.mfui-9-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-9-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-9-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-9-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-9-carousel__swiper_gradient:after,.mfui-9-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-9-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(rgba(var(--gradientColorRGB),0)),to(var(--gradientColor)));background:linear-gradient(270deg,rgba(var(--gradientColorRGB),0) 0,var(--gradientColor) 100%);left:0}.mfui-9-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(rgba(var(--gradientColorRGB),0)));background:linear-gradient(270deg,var(--gradientColor) 0,rgba(var(--gradientColorRGB),0) 100%);right:0}.mfui-9-carousel__swiper_gradient-color_default{--gradientColor:var(--background);--gradientColorRGB:var(--background-rgb)}.mfui-9-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen);--gradientColorRGB:var(--brandGreen-rgb)}.mfui-9-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack);--gradientColorRGB:var(--stcBlack-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0);--gradientColorRGB:var(--spbSky0-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1);--gradientColorRGB:var(--spbSky1-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2);--gradientColorRGB:var(--spbSky2-rgb)}.mfui-9-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-9-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-9-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-9-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-9-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-9-carousel__arrow{display:none}}.mfui-9-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-9-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-9-carousel__arrow_locked{display:none}.mfui-9-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-9-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-9-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:all .5s,background-color .3s;transition:all .5s,background-color .3s;width:8px}.mfui-9-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-9-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-9-carousel .swiper-pagination-bullet-active{cursor:default;-webkit-transform:scaleX(2.3);transform:scaleX(2.3)}.mfui-9-carousel .swiper-pagination-bullet-active:before{border-radius:40%}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-carousel,.mfui-9-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-9-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-9-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-9-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-9-carousel__swiper_gradient:after,.mfui-9-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-9-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(rgba(var(--gradientColorRGB),0)),to(var(--gradientColor)));background:linear-gradient(270deg,rgba(var(--gradientColorRGB),0) 0,var(--gradientColor) 100%);left:0}.mfui-9-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(rgba(var(--gradientColorRGB),0)));background:linear-gradient(270deg,var(--gradientColor) 0,rgba(var(--gradientColorRGB),0) 100%);right:0}.mfui-9-carousel__swiper_gradient-color_default{--gradientColor:var(--background);--gradientColorRGB:var(--background-rgb)}.mfui-9-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen);--gradientColorRGB:var(--brandGreen-rgb)}.mfui-9-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack);--gradientColorRGB:var(--stcBlack-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0);--gradientColorRGB:var(--spbSky0-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1);--gradientColorRGB:var(--spbSky1-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2);--gradientColorRGB:var(--spbSky2-rgb)}.mfui-9-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-9-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-9-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}}.mfui-9-carousel__slide:focus{outline:none}@media screen and (min-width:1024px){.mfui-9-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-9-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-9-carousel__arrow{display:none}}.mfui-9-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-9-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-9-carousel__arrow_locked{display:none}.mfui-9-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-9-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-9-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:all .5s,background-color .3s;transition:all .5s,background-color .3s;width:8px}.mfui-9-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-9-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-9-carousel .swiper-pagination-bullet-active{cursor:default;-webkit-transform:scaleX(2.3);transform:scaleX(2.3)}.mfui-9-carousel .swiper-pagination-bullet-active:before{border-radius:40%}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_prev{right:calc(100% - 20px)}@media screen and (min-width:1280px){.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_prev{right:calc(100% - 20px)}}.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_next{left:calc(100% - 20px)}@media screen and (min-width:1280px){.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_next{left:calc(100% - 20px)}}
|
|
@@ -22,10 +22,15 @@ declare const GradientTheme: {
|
|
|
22
22
|
readonly SPB_SKY_1: "spbSky1";
|
|
23
23
|
readonly SPB_SKY_2: "spbSky2";
|
|
24
24
|
};
|
|
25
|
+
export declare const ArrowPosition: {
|
|
26
|
+
readonly OUTSIDE: "outside";
|
|
27
|
+
readonly INSIDE: "inside";
|
|
28
|
+
};
|
|
25
29
|
type SlidesPerViewType = (typeof SlidesPerView)[keyof typeof SlidesPerView];
|
|
26
30
|
type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
|
|
27
31
|
type EffectThemeType = (typeof EffectTheme)[keyof typeof EffectTheme];
|
|
28
32
|
type GradientThemeType = (typeof GradientTheme)[keyof typeof GradientTheme];
|
|
33
|
+
type ArrowPositionType = (typeof ArrowPosition)[keyof typeof ArrowPosition];
|
|
29
34
|
export type SlidesSettingsType = {
|
|
30
35
|
[key: number]: {
|
|
31
36
|
slidesPerView: number | SlidesPerViewType;
|
|
@@ -84,6 +89,8 @@ export interface ICarouselProps {
|
|
|
84
89
|
disableArrows?: boolean;
|
|
85
90
|
/** Тема стрелок */
|
|
86
91
|
arrowTheme?: ArrowThemeType;
|
|
92
|
+
/** Позиционирование стрелок */
|
|
93
|
+
arrowPosition?: ArrowPositionType;
|
|
87
94
|
/** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
|
|
88
95
|
noSwipingSelector?: string;
|
|
89
96
|
/** Свайп к слайду, по которому произведен клик */
|
|
@@ -4,7 +4,7 @@ function _typeof3(o) { "@babel/helpers - typeof"; return _typeof3 = "function" =
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports["default"] = exports.NavTheme = exports.EffectTheme = void 0;
|
|
7
|
+
exports["default"] = exports.NavTheme = exports.EffectTheme = exports.ArrowPosition = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -136,6 +136,10 @@ var GradientTheme = {
|
|
|
136
136
|
SPB_SKY_1: 'spbSky1',
|
|
137
137
|
SPB_SKY_2: 'spbSky2'
|
|
138
138
|
};
|
|
139
|
+
var ArrowPosition = exports.ArrowPosition = {
|
|
140
|
+
OUTSIDE: 'outside',
|
|
141
|
+
INSIDE: 'inside'
|
|
142
|
+
};
|
|
139
143
|
var getAutoPlayConfig = function getAutoPlayConfig(delay) {
|
|
140
144
|
return {
|
|
141
145
|
delay: delay,
|
|
@@ -193,6 +197,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
193
197
|
disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows,
|
|
194
198
|
_ref$arrowTheme = _ref.arrowTheme,
|
|
195
199
|
arrowTheme = _ref$arrowTheme === void 0 ? _NavArrow.Theme.PURPLE : _ref$arrowTheme,
|
|
200
|
+
arrowPosition = _ref.arrowPosition,
|
|
196
201
|
noSwipingSelector = _ref.noSwipingSelector,
|
|
197
202
|
children = _ref.children,
|
|
198
203
|
pagination = _ref.pagination,
|
|
@@ -379,7 +384,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
379
384
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
380
385
|
ref: rootRef,
|
|
381
386
|
className: cn({
|
|
382
|
-
'nav-theme': navTheme
|
|
387
|
+
'nav-theme': navTheme,
|
|
388
|
+
'arrow-position': arrowPosition
|
|
383
389
|
}, [className, rootClass]),
|
|
384
390
|
onClick: handleRootClick,
|
|
385
391
|
style: gradientStyles
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-checkbox_bottom-margin{margin-bottom:12px}.mfui-9-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-9-checkbox_single .mfui-9-checkbox__inner{padding-left:32px}.mfui-9-checkbox__label{cursor:pointer;display:inline}.mfui-9-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-9-checkbox__custom-input:focus{outline:none}.mfui-9-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{border:none}.mfui-9-checkbox_checked .mfui-9-checkbox__icon{opacity:1}.mfui-9-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-9-checkbox_font-size_regular .mfui-9-checkbox__inner{padding-top:3px}.mfui-9-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-9-checkbox_font-size_small .mfui-9-checkbox__inner{padding-top:6px}.mfui-9-checkbox_color_dark .mfui-9-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_light{color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-checkbox_disabled .mfui-9-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-checkbox_disabled .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_disabled.mfui-9-checkbox_color_light .mfui-9-checkbox__label{color:var(--stcWhite50)}.mfui-9-checkbox_checked.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-9-checkbox_error .mfui-9-checkbox__custom-input{border-color:var(--fury)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-checkbox_bottom-margin{margin-bottom:12px}.mfui-9-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-9-checkbox_single .mfui-9-checkbox__inner{padding-left:32px}.mfui-9-checkbox__label{cursor:pointer;display:inline}.mfui-9-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-9-checkbox__custom-input:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-checkbox__custom-input:focus{outline:none}.mfui-9-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{border:none}.mfui-9-checkbox_checked .mfui-9-checkbox__icon{opacity:1}.mfui-9-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-9-checkbox_font-size_regular .mfui-9-checkbox__inner{padding-top:3px}.mfui-9-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-9-checkbox_font-size_small .mfui-9-checkbox__inner{padding-top:6px}.mfui-9-checkbox_color_dark .mfui-9-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_light{color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-checkbox_disabled .mfui-9-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-checkbox_disabled .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_disabled.mfui-9-checkbox_color_light .mfui-9-checkbox__label{color:var(--stcWhite50)}.mfui-9-checkbox_checked.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-9-checkbox_error .mfui-9-checkbox__custom-input{border-color:var(--fury)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
|
|
@@ -17,7 +17,7 @@ var CheckedIcon = function CheckedIcon(props) {
|
|
|
17
17
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
18
18
|
viewBox: "0 0 20 20"
|
|
19
19
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
20
|
-
d: "
|
|
20
|
+
d: "M6.805 9.324l2.26 2.26 4.383-4.334a.935.935 0 011.323-.01.936.936 0 01-.025 1.323L9.693 13.56a.936.936 0 01-1.319.013l-2.908-2.909a.935.935 0 01.017-1.322.935.935 0 011.322-.017z"
|
|
21
21
|
}));
|
|
22
22
|
};
|
|
23
23
|
var CHANGE_KEY = 'change';
|
|
@@ -81,9 +81,10 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
81
81
|
onChange: handleChange,
|
|
82
82
|
disabled: disabled
|
|
83
83
|
})), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
|
|
84
|
-
tabIndex: 0,
|
|
84
|
+
tabIndex: disabled ? -1 : 0,
|
|
85
85
|
role: "checkbox",
|
|
86
86
|
"aria-checked": isChecked,
|
|
87
|
+
"aria-disabled": disabled,
|
|
87
88
|
className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
|
|
88
89
|
onKeyDown: handleChange
|
|
89
90
|
}), /*#__PURE__*/React.createElement(CheckedIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip.
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-chip:focus{outline:none}.mfui-9-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.mfui-9-chip:hover{background-color:var(--spbSky1)}.mfui-9-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip__counter{margin-left:4px}}.mfui-9-chip__icon,.mfui-9-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-9-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-9-chip__icon{margin-right:4px}}.mfui-9-chip_theme_gray{background-color:var(--spbSky1)}.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky2)}.mfui-9-chip_disabled,.mfui-9-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-chip_disabled svg,.mfui-9-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__counter,.mfui-9-chip_disabled:hover .mfui-9-chip__counter{color:var(--spbSky2)}.mfui-9-chip_disabled.mfui-9-chip_theme_gray,.mfui-9-chip_disabled.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky1)}.mfui-9-chip_checked,.mfui-9-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked svg,.mfui-9-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-9-chip_checked .mfui-9-chip__counter,.mfui-9-chip_checked:hover .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black,.mfui-9-chip_checked.mfui-9-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black svg,.mfui-9-chip_checked.mfui-9-chip_color_black:hover svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black .mfui-9-chip__counter,.mfui-9-chip_checked.mfui-9-chip_color_black:hover .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-9-chip_with-icon{padding-left:8px}}
|
|
@@ -15,18 +15,14 @@ var ArrowDown = function ArrowDown(props) {
|
|
|
15
15
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
16
16
|
viewBox: "0 0 20 20"
|
|
17
17
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
18
|
-
d: "
|
|
19
|
-
fillRule: "evenodd",
|
|
20
|
-
clipRule: "evenodd"
|
|
18
|
+
d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
|
|
21
19
|
}));
|
|
22
20
|
};
|
|
23
21
|
var ArrowUp = function ArrowUp(props) {
|
|
24
22
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
25
23
|
viewBox: "0 0 20 20"
|
|
26
24
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
27
|
-
d: "
|
|
28
|
-
fillRule: "evenodd",
|
|
29
|
-
clipRule: "evenodd"
|
|
25
|
+
d: "M9.535 8.202a.609.609 0 01.907 0l2.371 2.547c.41.44.1 1.251-.476 1.251H7.658c-.576 0-.879-.811-.47-1.25l2.347-2.548z"
|
|
30
26
|
}));
|
|
31
27
|
};
|
|
32
28
|
var ChipColors = exports.ChipColors = {
|
|
@@ -80,6 +76,8 @@ var Chip = function Chip(_ref) {
|
|
|
80
76
|
disabled: disabled,
|
|
81
77
|
onClick: handleClick,
|
|
82
78
|
ref: rootRef
|
|
79
|
+
}, checked && {
|
|
80
|
+
tabIndex: -1
|
|
83
81
|
}), !!icon && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
|
|
84
82
|
className: cn('icon', [classes.icon])
|
|
85
83
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
|
|
@@ -42,6 +42,8 @@ export interface IChipsProps {
|
|
|
42
42
|
dropdownPopup?: string;
|
|
43
43
|
dropdownList?: string;
|
|
44
44
|
dropdownItem?: string;
|
|
45
|
+
scroll?: string;
|
|
46
|
+
scrollInner?: string;
|
|
45
47
|
};
|
|
46
48
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
47
49
|
dataAttrs?: {
|
|
@@ -50,6 +52,8 @@ export interface IChipsProps {
|
|
|
50
52
|
dropdownPopup?: Record<string, string>;
|
|
51
53
|
dropdownList?: Record<string, string>;
|
|
52
54
|
dropdownItem?: Record<string, string>;
|
|
55
|
+
scroll?: Record<string, string>;
|
|
56
|
+
scrollInner?: Record<string, string>;
|
|
53
57
|
};
|
|
54
58
|
}
|
|
55
59
|
declare const Chips: React.FC<IChipsProps>;
|
|
@@ -90,6 +90,14 @@ var Chips = function Chips(_ref) {
|
|
|
90
90
|
var renderItems = function renderItems() {
|
|
91
91
|
if (isScrollableMode) {
|
|
92
92
|
return /*#__PURE__*/React.createElement(_ChipsScrollPanel["default"], {
|
|
93
|
+
classes: {
|
|
94
|
+
root: classes.scroll,
|
|
95
|
+
inner: classes.scrollInner
|
|
96
|
+
},
|
|
97
|
+
dataAttrs: {
|
|
98
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scroll,
|
|
99
|
+
inner: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scrollInner
|
|
100
|
+
},
|
|
93
101
|
value: selectedId,
|
|
94
102
|
items: visibleItems,
|
|
95
103
|
color: color,
|
|
@@ -2,6 +2,14 @@ import * as React from 'react';
|
|
|
2
2
|
import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
|
|
3
3
|
import './ChipsScrollPanel.scss';
|
|
4
4
|
export interface IChipsScrollPanelProps {
|
|
5
|
+
classes?: {
|
|
6
|
+
root?: string;
|
|
7
|
+
inner?: string;
|
|
8
|
+
};
|
|
9
|
+
dataAttrs?: {
|
|
10
|
+
root?: Record<string, string>;
|
|
11
|
+
inner?: Record<string, string>;
|
|
12
|
+
};
|
|
5
13
|
value?: ChipIdType;
|
|
6
14
|
items: IChipProps[];
|
|
7
15
|
color: ChipColorsType;
|
|
@@ -27,7 +27,10 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
|
27
27
|
var HALF_DIVIDER = 2;
|
|
28
28
|
var cn = (0, _uiHelpers.cnCreate)('mfui-9-chips-scroll-panel');
|
|
29
29
|
var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
|
|
30
|
-
var
|
|
30
|
+
var _ref$classes = _ref.classes,
|
|
31
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
|
32
|
+
dataAttrs = _ref.dataAttrs,
|
|
33
|
+
value = _ref.value,
|
|
31
34
|
items = _ref.items,
|
|
32
35
|
color = _ref.color,
|
|
33
36
|
theme = _ref.theme,
|
|
@@ -67,13 +70,13 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
|
|
|
67
70
|
setCurrentValue(value);
|
|
68
71
|
}
|
|
69
72
|
}, [value, currentValue, scrollToActiveItem]);
|
|
70
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className: cn(),
|
|
73
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
74
|
+
className: cn([classes.root]),
|
|
72
75
|
ref: containerRef
|
|
73
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
74
|
-
className: cn('inner'),
|
|
76
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
77
|
+
className: cn('inner', [classes.inner]),
|
|
75
78
|
tabIndex: -1
|
|
76
|
-
}, items.map(function (_a) {
|
|
79
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), items.map(function (_a) {
|
|
77
80
|
var id = _a.id,
|
|
78
81
|
children = _a.children,
|
|
79
82
|
rest = __rest(_a, ["id", "children"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-chip-suggest:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-chip-suggest:focus{outline:none}.mfui-9-chip-suggest svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}.mfui-9-chip-suggest:hover{background-color:var(--spbSky1)}.mfui-9-chip-suggest:active{background-color:var(--spbSky2)}.mfui-9-chip-suggest__inner{overflow:hidden;white-space:nowrap}.mfui-9-chip-suggest__icon{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip-suggest__icon svg{display:block;height:100%;width:100%}@media screen and (max-width:767px){.mfui-9-chip-suggest__icon{margin-right:4px}}.mfui-9-chip-suggest_theme_white{background-color:var(--base)}.mfui-9-chip-suggest_theme_gray{background-color:var(--spbSky0)}.mfui-9-chip-suggest_size_medium{padding:4px 8px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium{padding:8px 12px}}.mfui-9-chip-suggest_size_medium .mfui-9-chip-suggest__icon{margin-right:4px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium .mfui-9-chip-suggest__icon{margin-right:6px}}.mfui-9-chip-suggest_size_medium.mfui-9-chip-suggest_with-icon{padding-right:12px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium.mfui-9-chip-suggest_with-icon{padding-right:20px}}.mfui-9-chip-suggest_size_small{padding:7px 8px}@media screen and (max-width:767px){.mfui-9-chip-suggest_size_small{font-size:12px;line-height:18px}}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_small{padding:4px 8px}}.mfui-9-chip-suggest_size_small .mfui-9-chip-suggest__icon{margin-right:4px}.mfui-9-chip-suggest_size_small.mfui-9-chip-suggest_with-icon{padding-right:12px}
|
|
@@ -6,6 +6,11 @@ export declare const ChipSuggestThemes: {
|
|
|
6
6
|
readonly GRAY: "gray";
|
|
7
7
|
};
|
|
8
8
|
export type ChipSuggestThemesType = (typeof ChipSuggestThemes)[keyof typeof ChipSuggestThemes];
|
|
9
|
+
export declare const ChipSuggestSize: {
|
|
10
|
+
readonly MEDIUM: "medium";
|
|
11
|
+
readonly SMALL: "small";
|
|
12
|
+
};
|
|
13
|
+
export type ChipSuggestSizeType = (typeof ChipSuggestSize)[keyof typeof ChipSuggestSize];
|
|
9
14
|
export interface IChipSuggestProps {
|
|
10
15
|
/** Идентификатор */
|
|
11
16
|
id: ChipSuggestIdType;
|
|
@@ -13,6 +18,8 @@ export interface IChipSuggestProps {
|
|
|
13
18
|
title?: string;
|
|
14
19
|
/** Цвет компонента */
|
|
15
20
|
theme?: ChipSuggestThemesType;
|
|
21
|
+
/** Размер компонента */
|
|
22
|
+
size?: ChipSuggestSizeType;
|
|
16
23
|
/** Иконка */
|
|
17
24
|
icon?: JSX.Element;
|
|
18
25
|
/** Дочерние элементы */
|
|
@@ -4,7 +4,7 @@ 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.ChipSuggestThemes = void 0;
|
|
7
|
+
exports["default"] = exports.ChipSuggestThemes = exports.ChipSuggestSize = 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");
|
|
@@ -15,12 +15,18 @@ var ChipSuggestThemes = exports.ChipSuggestThemes = {
|
|
|
15
15
|
WHITE: 'white',
|
|
16
16
|
GRAY: 'gray'
|
|
17
17
|
};
|
|
18
|
+
var ChipSuggestSize = exports.ChipSuggestSize = {
|
|
19
|
+
MEDIUM: 'medium',
|
|
20
|
+
SMALL: 'small'
|
|
21
|
+
};
|
|
18
22
|
var cn = (0, _uiHelpers.cnCreate)('mfui-9-chip-suggest');
|
|
19
23
|
var ChipSuggest = function ChipSuggest(_ref) {
|
|
20
24
|
var id = _ref.id,
|
|
21
25
|
title = _ref.title,
|
|
22
26
|
_ref$theme = _ref.theme,
|
|
23
27
|
theme = _ref$theme === void 0 ? 'white' : _ref$theme,
|
|
28
|
+
_ref$size = _ref.size,
|
|
29
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
24
30
|
icon = _ref.icon,
|
|
25
31
|
onClick = _ref.onClick,
|
|
26
32
|
children = _ref.children,
|
|
@@ -36,6 +42,7 @@ var ChipSuggest = function ChipSuggest(_ref) {
|
|
|
36
42
|
type: "button",
|
|
37
43
|
className: cn({
|
|
38
44
|
theme: theme,
|
|
45
|
+
size: size,
|
|
39
46
|
'with-icon': !!icon
|
|
40
47
|
}, [className, classes.root])
|
|
41
48
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { ChipSuggestThemesType, ChipSuggestIdType, IChipSuggestProps } from './ChipSuggest';
|
|
2
|
+
import { ChipSuggestThemesType, ChipSuggestSizeType, ChipSuggestIdType, IChipSuggestProps } from './ChipSuggest';
|
|
3
3
|
import './ChipsSuggest.scss';
|
|
4
4
|
export interface IChipsSuggestProps {
|
|
5
5
|
/** Массив элементов */
|
|
6
6
|
items: IChipSuggestProps[];
|
|
7
|
-
/** Цвет
|
|
7
|
+
/** Цвет элементов */
|
|
8
8
|
theme?: ChipSuggestThemesType;
|
|
9
|
+
/** Размер элементов */
|
|
10
|
+
size?: ChipSuggestSizeType;
|
|
9
11
|
/** Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов) */
|
|
10
12
|
isScrollable?: boolean;
|
|
11
13
|
/** Дополнительный класс корневого элемента */
|
|
@@ -28,6 +28,8 @@ var ChipsSuggest = function ChipsSuggest(_ref) {
|
|
|
28
28
|
var items = _ref.items,
|
|
29
29
|
_ref$theme = _ref.theme,
|
|
30
30
|
theme = _ref$theme === void 0 ? 'white' : _ref$theme,
|
|
31
|
+
_ref$size = _ref.size,
|
|
32
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
31
33
|
_ref$isScrollable = _ref.isScrollable,
|
|
32
34
|
isScrollable = _ref$isScrollable === void 0 ? false : _ref$isScrollable,
|
|
33
35
|
onChange = _ref.onChange,
|
|
@@ -48,6 +50,7 @@ var ChipsSuggest = function ChipsSuggest(_ref) {
|
|
|
48
50
|
key: id,
|
|
49
51
|
id: id,
|
|
50
52
|
theme: theme,
|
|
53
|
+
size: size,
|
|
51
54
|
onClick: handleClick
|
|
52
55
|
}, rest), !!children && children);
|
|
53
56
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-content-area_background-color_transparent{background-color:transparent}.mfui-9-content-area_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area_background-color_spbSky2{background-color:var(--spbSky2)}.mfui-9-content-area__inner{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0 auto;max-width:1440px;padding-left:80px;padding-right:80px}@media screen and (max-width:767px){.mfui-9-content-area__inner{padding-left:16px;padding-right:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-content-area__inner{padding-left:48px;padding-right:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner{padding-left:64px;padding-right:64px}}@media screen and (max-width:767px){.mfui-9-content-area__inner_disable-indents_mobile{padding-left:0;padding-right:0}}@media screen and (max-width:1023px){.mfui-9-content-area__inner_disable-indents_mobile-tablet{padding-left:0;padding-right:0}}@media screen and (min-width:768px){.mfui-9-content-area__inner_disable-indents_tablet-desktop{padding-left:0;padding-right:0}}.mfui-9-content-area__inner_disable-indents_all{padding-left:0;padding-right:0}@media screen and (max-width:359px){.mfui-9-content-area__inner_indents_small-mobile{padding-left:8px;padding-right:8px}}.mfui-9-content-area__inner_background-color_transparent{background-color:transparent}.mfui-9-content-area__inner_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area__inner_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area__inner_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area__inner_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area__inner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area__inner_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area__inner_background-color_spbSky2{background-color:var(--spbSky2)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-content-area_background-color_transparent{background-color:transparent}.mfui-9-content-area_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area_background-color_spbSky2{background-color:var(--spbSky2)}.mfui-9-content-area__inner{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0 auto;max-width:1440px;padding-left:80px;padding-right:80px}@media screen and (max-width:767px){.mfui-9-content-area__inner{padding-left:16px;padding-right:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-content-area__inner{padding-left:48px;padding-right:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner{padding-left:64px;padding-right:64px}}@media screen and (max-width:767px){.mfui-9-content-area__inner_disable-indents_mobile{padding-left:0;padding-right:0}}@media screen and (max-width:1023px){.mfui-9-content-area__inner_disable-indents_mobile-desktop-small,.mfui-9-content-area__inner_disable-indents_mobile-tablet{padding-left:0;padding-right:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner_disable-indents_mobile-desktop-small{padding-left:0;padding-right:0}}@media screen and (min-width:768px){.mfui-9-content-area__inner_disable-indents_tablet-desktop{padding-left:0;padding-right:0}}.mfui-9-content-area__inner_disable-indents_all{padding-left:0;padding-right:0}@media screen and (max-width:359px){.mfui-9-content-area__inner_indents_small-mobile{padding-left:8px;padding-right:8px}}.mfui-9-content-area__inner_background-color_transparent{background-color:transparent}.mfui-9-content-area__inner_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area__inner_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area__inner_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area__inner_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area__inner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area__inner_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area__inner_background-color_spbSky2{background-color:var(--spbSky2)}
|
|
@@ -14,6 +14,7 @@ export type BackgroundColorType = (typeof BACKGROUND_COLORS)[keyof typeof BACKGR
|
|
|
14
14
|
declare const DisableIndents: {
|
|
15
15
|
readonly MOBILE: "mobile";
|
|
16
16
|
readonly MOBILE_TABLET: "mobile-tablet";
|
|
17
|
+
readonly MOBILE_DESKTOP_SMALL: "mobile-desktop-small";
|
|
17
18
|
readonly TABLET_DESKTOP: "tablet-desktop";
|
|
18
19
|
readonly ALL: "all";
|
|
19
20
|
};
|
|
@@ -22,7 +23,7 @@ declare const Indents: {
|
|
|
22
23
|
};
|
|
23
24
|
type DisableIndentsType = (typeof DisableIndents)[keyof typeof DisableIndents];
|
|
24
25
|
type IndentsType = (typeof Indents)[keyof typeof Indents];
|
|
25
|
-
export interface
|
|
26
|
+
export interface IContentAreaProps {
|
|
26
27
|
/** Фоновый цвет внешнего контейнера */
|
|
27
28
|
outerBackgroundColor?: BackgroundColorType;
|
|
28
29
|
/** Фоновый цвет внутреннего контейнера */
|
|
@@ -45,5 +46,5 @@ export interface IConrentAreaProps {
|
|
|
45
46
|
};
|
|
46
47
|
children: React.ReactNode;
|
|
47
48
|
}
|
|
48
|
-
declare const ContentArea: React.FC<
|
|
49
|
+
declare const ContentArea: React.FC<IContentAreaProps>;
|
|
49
50
|
export default ContentArea;
|
|
@@ -23,8 +23,13 @@ var BACKGROUND_COLORS = {
|
|
|
23
23
|
};
|
|
24
24
|
var DisableIndents = {
|
|
25
25
|
MOBILE: 'mobile',
|
|
26
|
+
// <= 767
|
|
26
27
|
MOBILE_TABLET: 'mobile-tablet',
|
|
28
|
+
// <= 1023
|
|
29
|
+
MOBILE_DESKTOP_SMALL: 'mobile-desktop-small',
|
|
30
|
+
// <= 1279
|
|
27
31
|
TABLET_DESKTOP: 'tablet-desktop',
|
|
32
|
+
// >= 768
|
|
28
33
|
ALL: 'all'
|
|
29
34
|
};
|
|
30
35
|
var Indents = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-9-content-view__image{display:inline-block;margin-bottom:24px;max-width:144px;vertical-align:top}.mfui-9-content-view__bg-image{background-repeat:no-repeat;background-size:100%;display:inline-block;height:144px;margin-bottom:24px;vertical-align:top;width:144px}.mfui-9-content-view__bg-image_type_waiting{background-image:url(img/waiting.png)}.mfui-9-content-view__bg-image_type_error{background-image:url(img/error.png)}.mfui-9-content-view__bg-image_type_submit{background-image:url(img/submit.png)}.mfui-9-content-view__bg-image_type_success{background-image:url(img/success.png)}.mfui-9-content-view__bg-image_type_fail{background-image:url(img/fail.png)}.mfui-9-content-view__bg-image_type_update{background-image:url(img/update.png)}.mfui-9-content-view__bg-image_type_alarm{background-image:url(img/alarm.png)}.mfui-9-content-view__bg-image_type_empty{background-image:url(img/empty.png)}.mfui-9-content-view__bg-image_type_searchNoResult{background-image:url(img/searchNoResult.png)}.mfui-9-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-9-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-9-content-view__buttons{gap:12px;padding-top:32px}.mfui-9-content-view__buttons
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-9-content-view__image{display:inline-block;margin-bottom:24px;max-width:144px;vertical-align:top}.mfui-9-content-view__bg-image{background-repeat:no-repeat;background-size:100%;display:inline-block;height:144px;margin-bottom:24px;vertical-align:top;width:144px}.mfui-9-content-view__bg-image_type_waiting{background-image:url(img/waiting.png)}.mfui-9-content-view__bg-image_type_error{background-image:url(img/error.png)}.mfui-9-content-view__bg-image_type_submit{background-image:url(img/submit.png)}.mfui-9-content-view__bg-image_type_success{background-image:url(img/success.png)}.mfui-9-content-view__bg-image_type_fail{background-image:url(img/fail.png)}.mfui-9-content-view__bg-image_type_update{background-image:url(img/update.png)}.mfui-9-content-view__bg-image_type_alarm{background-image:url(img/alarm.png)}.mfui-9-content-view__bg-image_type_empty{background-image:url(img/empty.png)}.mfui-9-content-view__bg-image_type_searchNoResult{background-image:url(img/searchNoResult.png)}.mfui-9-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-9-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-9-content-view__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:32px}@media screen and (min-width:768px){.mfui-9-content-view__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}.mfui-9-content-view__buttons_fullwidth{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width:768px){.mfui-9-content-view__link_indent{margin-left:16px}}.mfui-9-content-view_fullscreen{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%}.mfui-9-content-view_fullscreen .mfui-9-content-view__content{margin-top:auto}.mfui-9-content-view_fullscreen .mfui-9-content-view__buttons{margin-top:auto;padding-bottom:24px}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import './ContentView.scss';
|
|
3
|
-
type
|
|
3
|
+
type ButtonParamsType = {
|
|
4
4
|
/** Текст */
|
|
5
5
|
text?: string;
|
|
6
6
|
/** Атрибут href */
|
|
@@ -14,12 +14,19 @@ type ElementType = {
|
|
|
14
14
|
/** Обработчик клика */
|
|
15
15
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
16
16
|
};
|
|
17
|
+
type LinkParamsType = ButtonParamsType & {
|
|
18
|
+
/** Тема */
|
|
19
|
+
theme?: 'green' | 'gray';
|
|
20
|
+
/** Тип */
|
|
21
|
+
type?: 'primary' | 'text';
|
|
22
|
+
};
|
|
17
23
|
export interface IContentViewProps {
|
|
18
24
|
/** Дополнительный класс корневого элемента */
|
|
19
25
|
className?: string;
|
|
20
26
|
/** Дополнительные классы для внутренних элементов */
|
|
21
27
|
classes?: {
|
|
22
28
|
title?: string;
|
|
29
|
+
buttons?: string;
|
|
23
30
|
button?: string;
|
|
24
31
|
link?: string;
|
|
25
32
|
bgImage?: string;
|
|
@@ -33,9 +40,13 @@ export interface IContentViewProps {
|
|
|
33
40
|
/** Ссылка на изображение */
|
|
34
41
|
src?: string;
|
|
35
42
|
/** Параметры кнопки */
|
|
36
|
-
buttonParams?:
|
|
37
|
-
/** Параметры ссылки */
|
|
38
|
-
linkParams?:
|
|
43
|
+
buttonParams?: ButtonParamsType;
|
|
44
|
+
/** Параметры дополнительной кнопки (ссылки) */
|
|
45
|
+
linkParams?: LinkParamsType;
|
|
46
|
+
/** Растянуть кнопки на всю ширину контейнера */
|
|
47
|
+
isFullwidthButtons?: boolean;
|
|
48
|
+
/** Ограничить ширину кнопок на разрешении экрана 0-767 */
|
|
49
|
+
limitButtonsWidthOnMobile?: boolean;
|
|
39
50
|
/** Полноэкранный режим */
|
|
40
51
|
isFullscreen?: boolean;
|
|
41
52
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
@@ -25,6 +25,10 @@ var ContentView = function ContentView(_ref) {
|
|
|
25
25
|
src = _ref.src,
|
|
26
26
|
buttonParams = _ref.buttonParams,
|
|
27
27
|
linkParams = _ref.linkParams,
|
|
28
|
+
_ref$isFullwidthButto = _ref.isFullwidthButtons,
|
|
29
|
+
isFullwidthButtons = _ref$isFullwidthButto === void 0 ? false : _ref$isFullwidthButto,
|
|
30
|
+
_ref$limitButtonsWidt = _ref.limitButtonsWidthOnMobile,
|
|
31
|
+
limitButtonsWidthOnMobile = _ref$limitButtonsWidt === void 0 ? false : _ref$limitButtonsWidt,
|
|
28
32
|
isFullscreen = _ref.isFullscreen,
|
|
29
33
|
dataAttrs = _ref.dataAttrs,
|
|
30
34
|
children = _ref.children;
|
|
@@ -48,24 +52,33 @@ var ContentView = function ContentView(_ref) {
|
|
|
48
52
|
}, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!children && /*#__PURE__*/React.createElement("div", {
|
|
49
53
|
className: cn('text')
|
|
50
54
|
}, children)), showButtons && /*#__PURE__*/React.createElement("div", {
|
|
51
|
-
className: cn('buttons'
|
|
55
|
+
className: cn('buttons', {
|
|
56
|
+
fullwidth: isFullwidthButtons
|
|
57
|
+
}, [classes.buttons])
|
|
52
58
|
}, !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
|
|
53
59
|
className: cn('button', [classes.button]),
|
|
54
60
|
href: buttonParams.href,
|
|
55
61
|
target: buttonParams.target,
|
|
56
62
|
disabled: buttonParams.disabled,
|
|
57
63
|
showLoader: buttonParams.showLoader,
|
|
64
|
+
fullWidth: isFullwidthButtons,
|
|
65
|
+
fullWidthMobile: !limitButtonsWidthOnMobile,
|
|
58
66
|
onClick: buttonParams.onClick,
|
|
59
67
|
dataAttrs: {
|
|
60
68
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
|
|
61
69
|
}
|
|
62
70
|
}, buttonParams.text), !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
|
|
63
|
-
className: cn('link',
|
|
64
|
-
|
|
71
|
+
className: cn('link', {
|
|
72
|
+
indent: linkParams.type === 'text'
|
|
73
|
+
}, [classes.link]),
|
|
74
|
+
type: linkParams.type || 'primary',
|
|
75
|
+
theme: linkParams.theme || 'gray',
|
|
65
76
|
href: linkParams.href,
|
|
66
77
|
target: linkParams.target,
|
|
67
78
|
disabled: linkParams.disabled,
|
|
68
79
|
showLoader: linkParams.showLoader,
|
|
80
|
+
fullWidth: isFullwidthButtons,
|
|
81
|
+
fullWidthMobile: !limitButtonsWidthOnMobile,
|
|
69
82
|
onClick: linkParams.onClick,
|
|
70
83
|
dataAttrs: {
|
|
71
84
|
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-counter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:space-between;width:120px}.mfui-9-counter_size_small{height:32px}.mfui-9-counter_size_medium{height:40px}.mfui-9-counter_size_large{height:52px}.mfui-9-counter__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:20px;height:100%;justify-content:center;margin:0;max-width:32px;outline:none;padding:0;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;width:100%;fill:var(--content);-webkit-tap-highlight-color:rgba(0,0,0,0)}@media screen and (min-width:768px){.mfui-9-counter__btn:hover{background-color:var(--spbSky1)}}.mfui-9-counter__btn:disabled{cursor:default}.mfui-9-counter__btn:disabled .mfui-9-counter__icon{fill:var(--spbSky2)}.mfui-9-counter__btn:disabled:hover{background-color:var(--spbSky0)}.mfui-9-counter__btn_left{border-bottom-left-radius:16px;border-top-left-radius:16px}.mfui-9-counter__btn_right{border-bottom-right-radius:16px;border-top-right-radius:16px}.mfui-9-counter__icon{display:block;height:20px;width:20px}.mfui-9-counter__input-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mfui-9-counter__input,.mfui-9-counter__input-box{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mfui-9-counter__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;margin:0;outline:none;overflow:auto;padding:0;text-align:center;width:100%}.mfui-9-counter_disabled .mfui-9-counter__btn{cursor:default}.mfui-9-counter_disabled .mfui-9-counter__input{color:var(--spbSky3);cursor:default}.mfui-9-counter_disabled .mfui-9-counter__icon{fill:var(--spbSky2)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-counter{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:space-between;width:120px}.mfui-9-counter_size_small{height:32px}.mfui-9-counter_size_medium{height:40px}.mfui-9-counter_size_large{height:52px}.mfui-9-counter__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:20px;height:100%;justify-content:center;margin:0;max-width:32px;outline:none;padding:0;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;width:100%;fill:var(--content);-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-counter__btn:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-counter__btn:focus{outline:none}@media screen and (min-width:768px){.mfui-9-counter__btn:hover{background-color:var(--spbSky1)}}.mfui-9-counter__btn:disabled{cursor:default}.mfui-9-counter__btn:disabled .mfui-9-counter__icon{fill:var(--spbSky2)}.mfui-9-counter__btn:disabled:hover{background-color:var(--spbSky0)}.mfui-9-counter__btn_left{border-bottom-left-radius:16px;border-top-left-radius:16px}.mfui-9-counter__btn_left:focus-visible{z-index:1}.mfui-9-counter__btn_right{border-bottom-right-radius:16px;border-top-right-radius:16px}.mfui-9-counter__icon{display:block;height:20px;width:20px}.mfui-9-counter__input-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mfui-9-counter__input,.mfui-9-counter__input-box{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mfui-9-counter__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;margin:0;outline:none;overflow:auto;padding:0;text-align:center;width:100%}.mfui-9-counter_disabled .mfui-9-counter__btn{cursor:default}.mfui-9-counter_disabled .mfui-9-counter__input{color:var(--spbSky3);cursor:default}.mfui-9-counter_disabled .mfui-9-counter__icon{fill:var(--spbSky2)}
|
|
@@ -19,14 +19,14 @@ var IconMinus = function IconMinus(props) {
|
|
|
19
19
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
20
20
|
viewBox: "0 0 20 20"
|
|
21
21
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
22
|
-
d: "
|
|
22
|
+
d: "M14 9a1 1 0 110 2H6a1 1 0 110-2h8z"
|
|
23
23
|
}));
|
|
24
24
|
};
|
|
25
25
|
var IconPlus = function IconPlus(props) {
|
|
26
26
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
27
27
|
viewBox: "0 0 20 20"
|
|
28
28
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
29
|
-
d: "
|
|
29
|
+
d: "M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
|
30
30
|
}));
|
|
31
31
|
};
|
|
32
32
|
var cn = (0, _uiHelpers.cnCreate)('mfui-9-counter');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-dropdown{background-color:var(--base);border-radius:16px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.08);left:0;opacity:0;padding:16px;pointer-events:none;position:absolute;right:0;top:calc(100% + 1px);-webkit-transform:translateY(-25px);transform:translateY(-25px);-webkit-transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;z-index:1000}.mfui-9-dropdown_visible{opacity:1;pointer-events:auto;-webkit-transform:translateY(0);transform:translateY(0)}.mfui-9-dropdown_short .mfui-9-dropdown__list{max-height:200px}.mfui-9-dropdown__list{max-height:300px;overflow-y:auto;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-dropdown__list::-webkit-scrollbar{width:8px}.mfui-9-dropdown__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--content);cursor:pointer;padding:12px 32px;-webkit-transition:background-color .2s;transition:background-color .2s}.mfui-9-dropdown__item:hover,.mfui-9-dropdown__item_hovered{background-color:var(--spbSky0)}.mfui-9-dropdown__item_active{font-weight:500}.mfui-9-dropdown__item_paddings_small{padding:8px 12px}.mfui-9-dropdown__item_paddings_large{padding:16px 20px}.mfui-9-dropdown__empty{color:var(--spbSky3);padding:12px 16px;text-align:center}.mfui-9-dropdown_disabled{opacity:.5;pointer-events:none}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes dropdownAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-dropdown{background-color:var(--base);border-radius:16px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.08);left:0;opacity:0;padding:16px;pointer-events:none;position:absolute;right:0;top:calc(100% + 1px);-webkit-transform:translateY(-25px);transform:translateY(-25px);-webkit-transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;z-index:1000}.mfui-9-dropdown_visible{opacity:1;pointer-events:auto;-webkit-transform:translateY(0);transform:translateY(0)}.mfui-9-dropdown_short .mfui-9-dropdown__list{max-height:200px}.mfui-9-dropdown__list{max-height:300px;overflow-y:auto;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-9-dropdown__list::-webkit-scrollbar{width:8px}.mfui-9-dropdown__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;color:var(--content);cursor:pointer;padding:12px 32px;-webkit-transition:background-color .2s;transition:background-color .2s}.mfui-9-dropdown__item:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-dropdown__item:focus{outline:none}.mfui-9-dropdown__item:hover,.mfui-9-dropdown__item_hovered{background-color:var(--spbSky0)}.mfui-9-dropdown__item_active{font-weight:500}.mfui-9-dropdown__item_paddings_small{padding:8px 12px}.mfui-9-dropdown__item_paddings_large{padding:16px 20px}.mfui-9-dropdown__empty{color:var(--spbSky3);padding:12px 16px;text-align:center}.mfui-9-dropdown__header{overflow:hidden;width:100%}.mfui-9-dropdown_disabled{opacity:.5;pointer-events:none}
|