@nutui/nutui-react-taro 2.3.12 → 2.4.0

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("@tarojs/taro"), require("@tarojs/components"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "@tarojs/taro", "@tarojs/components", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.Taro, global2.components, global2.ReactDOM));
 })(this, function(exports2, React, Taro, components, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react-taro v2.3.12 Fri Mar 01 2024 16:07:31 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.4.0 Fri Mar 08 2024 14:36:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -4950,6 +4950,7 @@
   };
   const Badge = (props) => {
     var _a;
+    const rtl = useRtl();
     const { className, style, value, max, children, dot, top, right: right2, color } = {
       ...defaultProps$1d,
       ...props
@@ -4987,7 +4988,8 @@
     const getStyle = () => {
       const style2 = {};
       style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
-      style2.right = `${Number(right2) || parseFloat(String(right2)) || 0}px`;
+      const dir = rtl ? "left" : "right";
+      style2[dir] = `${Number(right2) || parseFloat(String(right2)) || 0}px`;
       style2.background = color;
       return style2;
     };
@@ -5295,7 +5297,7 @@
       }
       animate();
     };
-    const scrollIntoView = () => {
+    const scrollIntoView = (index) => {
       requestAniFrame$1(() => {
         Promise.all([
           getRect2(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
@@ -5303,20 +5305,20 @@
         ]).then(([navRect, titleRects]) => {
           navRectRef.current = navRect;
           titleRectRef.current = titleRects;
-          const titleRect = titleRectRef.current[value];
+          const titleRect = titleRectRef.current[index];
           if (!titleRect)
             return;
           let to = 0;
           if (props.direction === "vertical") {
             const DEFAULT_PADDING = 11;
-            const top = titleRects.slice(0, value).reduce(
+            const top = titleRects.slice(0, index).reduce(
               (prev, curr) => prev + curr.height,
               DEFAULT_PADDING
             );
             to = top - (navRectRef.current.height - titleRect.height) / 2;
           } else {
             const DEFAULT_PADDING = 20;
-            const left2 = titleRects.slice(0, value).reduce(
+            const left2 = titleRects.slice(0, index).reduce(
               (prev, curr) => prev + curr.width,
               DEFAULT_PADDING
             );
@@ -5335,7 +5337,7 @@
         transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
       });
-      scrollIntoView();
+      scrollIntoView(index);
     }, [value]);
     const tabChange = (item, index) => {
       onClick && onClick(item.value);
@@ -7559,6 +7561,7 @@
   const defaultProps$11 = {
     max: void 0,
     min: void 0,
+    list: false,
     labelPosition: "right",
     direction: "vertical",
     onChange: (value) => {
@@ -7574,6 +7577,7 @@
         children,
         className,
         disabled,
+        list,
         onChange,
         value,
         defaultValue,
@@ -7637,6 +7641,7 @@
             labelPosition: labelPosition || "right",
             disabled,
             max,
+            list,
             onLimit,
             value: _value,
             check: (value2) => {
@@ -7663,7 +7668,8 @@
             className: classNames(
               classPrefix$j,
               {
-                [`nut-checkboxgroup-${props.direction}`]: props.direction
+                [`nut-checkboxgroup-${props.direction}`]: props.direction,
+                [`nut-checkboxgroup-list`]: list
               },
               className
             ),
@@ -7763,6 +7769,9 @@
         if (innerChecked && !innerIndeterminate) {
           return `${cls}${classPrefix$i}-icon-checked ${classPrefix$i}-icon-disabled`;
         }
+        if (innerChecked && innerIndeterminate) {
+          return `${cls}${classPrefix$i}-icon-indeterminate ${classPrefix$i}-icon-disabled`;
+        }
         return `${cls}${classPrefix$i}-icon-disabled`;
       }
       if (innerChecked) {
@@ -7792,7 +7801,7 @@
     };
     const renderButton = () => {
       return /* @__PURE__ */ React.createElement(
-        "div",
+        components.View,
         {
           className: classNames(`${classPrefix$i}-button`, {
             [`${classPrefix$i}-button-active`]: innerChecked,
@@ -7800,17 +7809,23 @@
           })
         },
         children || label,
-        innerChecked && activeIcon ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${classPrefix$i}-button-icon`) }, activeIcon) : null
+        innerChecked && activeIcon ? /* @__PURE__ */ React.createElement(components.View, { className: classNames(`${classPrefix$i}-button-icon`) }, activeIcon) : null
       );
     };
+    const renderListItem = () => {
+      return /* @__PURE__ */ React.createElement(components.View, { className: "nut-checkbox-list-item" }, renderLabel(), renderIcon());
+    };
     const renderCheckboxItem = () => {
+      if (ctx == null ? void 0 : ctx.list) {
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, renderListItem());
+      }
       if (shape === "button") {
         return renderButton();
       }
       return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(), renderLabel());
     };
     return /* @__PURE__ */ React.createElement(
-      "div",
+      components.View,
       {
         className: classNames(
           classPrefix$i,
@@ -8637,7 +8652,7 @@
         } else {
           cmin++;
         }
-        if (cmin <= val) {
+        if (cmin <= Number(val)) {
           index++;
         }
       }
@@ -10533,7 +10548,7 @@
         );
         const nextValue = bound2(shouldOverBoundary, Number(min), Number(max));
         setShadowValue(nextValue);
-        if (negative ? shouldOverBoundary < min : shouldOverBoundary > max) {
+        if (negative ? shouldOverBoundary < Number(min) : shouldOverBoundary > Number(max)) {
           onOverlimit == null ? void 0 : onOverlimit(e2);
         } else {
           onChange == null ? void 0 : onChange(nextValue, e2);
@@ -13079,7 +13094,7 @@
     const handleItemClick = (file, index) => {
       onFileItemClick == null ? void 0 : onFileItemClick(file, index);
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader-slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), maxCount > fileList.length && /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader-input", onClick: _chooseImage }))), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, ...restProps }, (children || previewType === "list") && /* @__PURE__ */ React.createElement("div", { className: "nut-uploader-slot" }, /* @__PURE__ */ React.createElement(React.Fragment, null, children || /* @__PURE__ */ React.createElement(Button, { size: "small", type: "primary" }, "上传文件"), Number(maxCount) > fileList.length && /* @__PURE__ */ React.createElement(Button, { className: "nut-uploader-input", onClick: _chooseImage }))), /* @__PURE__ */ React.createElement(
       Preview,
       {
         ...{
@@ -13092,7 +13107,7 @@
           children
         }
       }
-    ), maxCount > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
+    ), Number(maxCount) > fileList.length && previewType === "picture" && !children && /* @__PURE__ */ React.createElement(
       "div",
       {
         className: `nut-uploader-upload ${previewType} ${disabled ? "nut-uploader-upload-disabled" : ""}`
@@ -13291,6 +13306,7 @@
   const BaseDialog = (props) => {
     const classPrefix2 = "nut-dialog";
     const { locale } = useConfig$1();
+    const [loading, setLoading] = React.useState(false);
     const {
       params: {
         id,
@@ -13345,10 +13361,16 @@
         onClose == null ? void 0 : onClose();
         onCancel == null ? void 0 : onCancel();
       };
-      const handleOk = (e2) => {
+      const handleOk = async (e2) => {
         e2.stopPropagation();
-        onClose == null ? void 0 : onClose();
-        onConfirm == null ? void 0 : onConfirm(e2);
+        setLoading(true);
+        try {
+          await (onConfirm == null ? void 0 : onConfirm(e2));
+          setLoading(false);
+          onClose == null ? void 0 : onClose();
+        } catch {
+          setLoading(false);
+        }
       };
       return footer || /* @__PURE__ */ React.createElement(React.Fragment, null, !hideCancelButton && /* @__PURE__ */ React.createElement(
         Button,
@@ -13366,7 +13388,8 @@
             disabled: disableConfirmButton
           }),
           disabled: disableConfirmButton,
-          onClick: (e2) => handleOk(e2)
+          onClick: (e2) => handleOk(e2),
+          loading
         },
         confirmText || locale.confirm
       ));
@@ -13806,6 +13829,7 @@
   Loading.displayName = "NutLoading";
   const defaultProps$B = {
     ...ComponentDefaults,
+    align: "left",
     direction: "horizontal",
     list: [],
     duration: 1e3,
@@ -13820,10 +13844,12 @@
     speed: 50
   };
   const NoticeBar = (props) => {
+    const rtl = useRtl();
     const {
       children,
       className,
       style,
+      align,
       direction,
       list,
       duration,
@@ -13930,7 +13956,7 @@
         const contentRes = await getRectByTaro(contentRef.current);
         const wrapW = warpRes.width;
         const offsetW = contentRes.width;
-        const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
+        const canScroll = align === "left" && scrollable == null ? offsetW > wrapW : scrollable;
         SetIsCanScroll(canScroll);
         if (canScroll) {
           SetWrapWidth(wrapW);
@@ -13981,7 +14007,7 @@
       onClose && onClose(event);
     };
     const isEllipsis = () => {
-      if (isCanScroll == null) {
+      if (isCanScroll == null && align === "left") {
         return wrap;
       }
       return !isCanScroll && !wrap;
@@ -13989,7 +14015,7 @@
     const contentStyle = {
       animationDelay: `${firstRound ? delay : 0}s`,
       animationDuration: `${animationDuration}s`,
-      transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`
+      transform: `translateX(${firstRound ? 0 : `${rtl ? -wrapWidth : wrapWidth}px`})`
     };
     const barStyle = {
       height: isVertical ? `${height}px` : ""
@@ -14135,16 +14161,18 @@
       }
     };
     const noticebarClass = classNames({
-      "nut-noticebar-box": true,
-      [`nut-noticebar-box-wrapable`]: wrap
+      [`${classPrefix2}-box`]: true,
+      [`${classPrefix2}-box-wrapable`]: wrap,
+      [`${classPrefix2}-box-${align}`]: true
     });
+    const cls = classNames(classPrefix2, className);
     React.useEffect(() => {
       return () => {
         stopAutoPlay();
       };
     }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className || ""}`, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick }, leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null, /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: "nut-noticebar-box-wrap" }, /* @__PURE__ */ React.createElement(
-      "div",
+    return /* @__PURE__ */ React.createElement(components.View, { className: cls, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement(components.View, { className: noticebarClass, style: barStyle, onClick: handleClick }, leftIcon ? /* @__PURE__ */ React.createElement(components.View, { className: "nut-noticebar-box-left-icon" }, leftIcon) : null, /* @__PURE__ */ React.createElement(components.View, { ref: wrapRef, className: "nut-noticebar-box-wrap" }, /* @__PURE__ */ React.createElement(
+      components.View,
       {
         ref: contentRef,
         className: `nut-noticebar-box-wrap-content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`,
@@ -14153,18 +14181,25 @@
       },
       children,
       content
-    )), closeable || rightIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React.createElement(A$1, { size: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
-      "div",
+    )), closeable || rightIcon ? /* @__PURE__ */ React.createElement(
+      components.View,
+      {
+        className: "nut-noticebar-box-right-icon",
+        onClick: onClickIcon
+      },
+      rightIcon || /* @__PURE__ */ React.createElement(A$1, { size: 12 })
+    ) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React.createElement(
+      components.View,
       {
         className: "nut-noticebar-vertical",
         style: barStyle,
         ref: container,
         onClick: handleClick
       },
-      leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
-      children ? /* @__PURE__ */ React.createElement("div", { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
+      leftIcon ? /* @__PURE__ */ React.createElement(components.View, { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
+      children ? /* @__PURE__ */ React.createElement(components.View, { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
-          "div",
+          components.View,
           {
             style: itemStyle(index),
             key: index,
@@ -14175,7 +14210,7 @@
           item
         );
       })) : /* @__PURE__ */ React.createElement(
-        "div",
+        components.View,
         {
           className: "nut-noticebar-box-horseLamp-list",
           style: horseLampStyle
@@ -14184,7 +14219,7 @@
           return (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
             /* @__PURE__ */ React.createElement(
-              "div",
+              components.View,
               {
                 className: "nut-noticebar-box-horseLamp-list-item",
                 style: { height },
@@ -14199,7 +14234,7 @@
         })
       ),
       /* @__PURE__ */ React.createElement(
-        "div",
+        components.View,
         {
           className: "nut-noticebar-box-right-icon",
           onClick: (e2) => {
@@ -14316,6 +14351,7 @@
   const defaultProps$z = {
     ...ComponentDefaults,
     list: [],
+    theme: "light",
     location: "bottom",
     visible: false,
     offset: [0, 12],
@@ -14323,9 +14359,9 @@
     targetId: "",
     className: "",
     showArrow: true,
-    overlay: false,
     closeOnOutsideClick: true,
     closeOnActionClick: true,
+    overlay: false,
     onClick: () => {
     },
     onOpen: () => {
@@ -14338,16 +14374,17 @@
     const {
       children,
       list,
+      theme,
       location,
       visible,
       offset,
+      arrowOffset,
       targetId,
       overlay,
       closeOnOutsideClick,
       closeOnActionClick,
       className,
       showArrow,
-      arrowOffset,
       style,
       onClick,
       onOpen,
@@ -14419,7 +14456,8 @@
     };
     const classes = classNames(
       {
-        [`${classPrefix$c}`]: true
+        [`${classPrefix$c}`]: true,
+        [`${classPrefix$c}-${theme}`]: theme === "dark"
       },
       className
     );
@@ -14527,11 +14565,12 @@
         className: "nut-popover-wrapper",
         ref: popoverRef,
         onClick: () => {
-          props.onClick && props.onClick();
+          var _a;
+          (_a = props == null ? void 0 : props.onClick) == null ? void 0 : _a.call(props);
           if (!visible) {
-            onOpen && onOpen();
+            onOpen == null ? void 0 : onOpen();
           } else {
-            onClose && onClose();
+            onClose == null ? void 0 : onClose();
           }
         },
         style
@@ -15150,6 +15189,7 @@
     id: "",
     icon: null,
     iconSize: "20",
+    content: "",
     msg: "",
     duration: 2,
     // 时长,duration为0则一直展示
@@ -15177,6 +15217,7 @@
         contentStyle,
         icon,
         iconSize,
+        content,
         msg,
         duration,
         type: type2,
@@ -15288,7 +15329,7 @@
         },
         hasIcon() ? /* @__PURE__ */ React.createElement("p", { className: `${classPrefix$9}-icon-wrapper` }, iconName()) : null,
         title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$9}-title` }, title) : null,
-        /* @__PURE__ */ React.createElement("span", { className: `${classPrefix$9}-text` }, msg)
+        /* @__PURE__ */ React.createElement("span", { className: `${classPrefix$9}-text` }, content || msg)
       ))
     ) : null);
   };
@@ -16052,7 +16093,7 @@
       if (!timeStr)
         return Date.now();
       let t2 = timeStr;
-      t2 = t2 > 0 ? +t2 : t2.toString().replace(/-/g, "/");
+      t2 = Number(t2) > 0 ? +t2 : t2.toString().replace(/-/g, "/");
       return new Date(t2).getTime();
     };
     const initTime = () => {
@@ -17274,7 +17315,7 @@
   };
   Steps.defaultProps = defaultProps$c;
   Steps.displayName = "NutSteps";
-  function useTableSticky(columns) {
+  function useTableSticky(columns, rtl = false) {
     const [isSticky, setIsSticky] = React.useState(false);
     const [stickyColumnStyleMap, setStickyColumnStyleMap] = React.useState({});
     const [stickyColumnClassMap, setStickyColumnClassMap] = React.useState({});
@@ -17289,9 +17330,9 @@
       let _stickyLeftWidth = 0;
       let _stickyRightWidth = 0;
       leftColumns.forEach((curr, index) => {
-        leftColumns[index - 1] || {};
+        const dir = rtl ? "right" : "left";
         _columnStyleMap[curr.key] = {
-          left: _stickyLeftWidth || 0,
+          [dir]: _stickyLeftWidth || 0,
           width: curr.width || "auto"
         };
         _columnClassMap[curr.key] = {
@@ -17307,9 +17348,9 @@
       });
       for (let i2 = rightColumns.length - 1; i2 >= 0; i2--) {
         const curr = rightColumns[i2];
-        rightColumns[i2 + 1] || {};
+        const dir = rtl ? "left" : "right";
         _columnStyleMap[curr.key] = {
-          right: _stickyRightWidth || 0,
+          [dir]: _stickyRightWidth || 0,
           width: curr.width || "auto"
         };
         _columnClassMap[curr.key] = {
@@ -17356,6 +17397,7 @@
   };
   const Table = (props) => {
     const { locale } = useConfig$1();
+    const rtl = useRtl();
     defaultProps$b.noData = locale.noData;
     const {
       children,
@@ -17386,7 +17428,7 @@
       stickyRightWidth,
       getStickyClass,
       getStickyStyle
-    } = useTableSticky(columns);
+    } = useTableSticky(columns, rtl);
     React.useEffect(() => {
       setValue(data);
     }, [data]);
@@ -17899,11 +17941,9 @@
       }
     });
   };
-  const clientHeight = Taro.getSystemInfoSync().windowHeight - 5 || 667;
   const defaultProps$7 = {
     ...ComponentDefaults,
     list: [],
-    containerHeight: clientHeight,
     itemHeight: 66,
     margin: 10,
     itemEqual: true,
@@ -17920,12 +17960,20 @@
       key,
       onScroll,
       className,
-      containerHeight,
+      containerHeight: origContainerHeight,
       ...rest
     } = {
       ...defaultProps$7,
       ...props
     };
+    const clientHeight = React.useMemo(
+      () => Taro.getSystemInfoSync().windowHeight - 5 || 667,
+      []
+    );
+    const containerHeight = React.useMemo(
+      () => origContainerHeight ?? clientHeight,
+      [origContainerHeight, clientHeight]
+    );
     const [startOffset, setStartOffset] = React.useState(0);
     const start = React.useRef(0);
     const scrollRef = React.useRef(null);

package/dist/packages/animatingnumbers/countup.scss

@@ -3,6 +3,7 @@
     display: inline-flex;
     height: $countup-height;
     overflow: hidden;
+    direction: ltr;
   }
 
   &-listitem {

package/dist/packages/badge/badge.scss

@@ -38,6 +38,8 @@
     border: $badge-border;
     border-radius: $badge-border-radius;
     min-width: $badge-min-width;
+    white-space: nowrap;
+    z-index: 1;
   }
 
   &-one {

package/dist/packages/checkbox/checkbox.scss

@@ -118,6 +118,23 @@
     color: $white;
     border: 1px solid $color-text-disabled;
   }
+
+  &-list-item {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $checkbox-list-item-padding;
+    border-top: $checkbox-list-item-border;
+
+    .nut-checkbox-label {
+      flex: auto;
+    }
+
+    .nut-icon {
+      flex: none;
+    }
+  }
 }
 
 [dir='rtl'] .nut-checkbox,
@@ -140,11 +157,13 @@
       left: 0;
       border-right: 10px solid transparent;
       border-left: 10px solid $color-primary;
+
       &-checked {
         left: auto;
         right: 50%;
         transform: translate(3px, -3px);
       }
+
       .nut-icon {
         &:before {
           margin-left: 0;

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -8,6 +8,7 @@
   &-vertical {
     .nut-checkbox {
       margin-bottom: 5px;
+
       &.nut-checkbox-reverse {
         width: 100%;
         justify-content: space-between;
@@ -31,7 +32,31 @@
       }
     }
   }
+
+  &-list {
+    width: 100%;
+    border-bottom: $checkbox-list-item-border;
+    border-top: $checkbox-list-item-border;
+    padding: $checkbox-list-padding;
+    background: $checkbox-list-background-color;
+
+    .nut-checkbox {
+      margin-bottom: 5px;
+
+      &:first-child {
+        .nut-checkbox-list-item {
+          border-top: none;
+        }
+      }
+
+      &.nut-checkbox-reverse {
+        width: 100%;
+        justify-content: space-between;
+      }
+    }
+  }
 }
+
 [dir='rtl'] .nut-checkboxgroup,
 .nut-rtl .nut-checkboxgroup {
   .nut-checkbox {

package/dist/packages/collapseitem/collapseitem.scss

@@ -62,7 +62,7 @@
 
   &-icon-box {
     display: flex;
-    padding-right: 40px;
+    width: 24px;
     position: relative;
     color: $color-text;
   }
@@ -107,11 +107,6 @@
 }
 [dir='rtl'] .nut-collapse-item,
 .nut-rtl .nut-collapse-item {
-  &-icon-box {
-    padding-right: 0;
-    padding-left: 40px;
-  }
-
   &-icon {
     left: auto;
     right: 5px;

package/dist/packages/dialog/dialog.scss

@@ -17,7 +17,6 @@
   &-outer {
     position: fixed;
     max-height: 100%;
-    overflow-y: auto;
     background-color: $white;
     transition:
       transform 0.2s,
@@ -52,6 +51,13 @@
       left: $dialog-close-left;
     }
 
+    &-bottom {
+      top: initial;
+      bottom: -56px;
+      left: 50%;
+      transform: translate(-50%);
+    }
+
     &:active {
       opacity: 0.7;
     }
@@ -77,6 +83,7 @@
     word-break: break-all;
     white-space: pre-wrap;
     text-align: $dialog-content-text-align;
+    overflow-y: auto;
   }
 
   &-footer {