@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/es/packages/avatar/style/avatar.scss

@@ -1,6 +1,13 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto; // 防止被压缩
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $avatar-normal-width;
+  height: $avatar-normal-height;
+
   &-round {
     border-radius: 999px;
     overflow: hidden;
@@ -28,45 +35,23 @@
     background-size: 100% 100%;
   }
 
-  .nut-icon-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-text {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100%;
-    height: 100%;
   }
 
   &-large {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-large-width;
     height: $avatar-large-height;
-
     &-img {
       width: $avatar-large-width;
       height: $avatar-large-height;
-      &-image {
-        width: $avatar-large-width;
-        height: $avatar-large-height;
-      }
     }
-
     &-icon {
       width: $avatar-large-width;
       height: $avatar-large-height;
     }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
     &-text {
       width: $avatar-large-width;
       height: $avatar-large-height;
@@ -74,51 +59,13 @@
   }
 
   &-small {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: $avatar-small-width;
     height: $avatar-small-height;
-
-    &-img-image {
-      width: $avatar-small-width;
-      height: $avatar-small-height;
-    }
-    &-icon {
-      // width: $avatar-small-width;
-      // height: $avatar-small-height;
-    }
     &-text {
       width: $avatar-small-width;
       height: $avatar-small-height;
     }
   }
-
-  &-normal {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $avatar-normal-width;
-    height: $avatar-normal-height;
-
-    &-img-image {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-
-    &-icon {
-    }
-
-    .nut-icon-img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-text {
-      width: $avatar-normal-width;
-      height: $avatar-normal-height;
-    }
-  }
 }
 
 // [dir='rtl'] .nut-avatar,

package/dist/es/packages/avatar/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-image {
   display: block;
   position: relative;
@@ -21,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -34,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3, #f5f6fa);
+  background: var(--nutui-gray-3);
   background-size: 100% 100%;
 }
 
@@ -73,6 +77,11 @@
 .nut-avatar {
   position: relative;
   flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--nutui-avatar-normal-width, 40px);
+  height: var(--nutui-avatar-normal-height, 40px);
 }
 .nut-avatar-round {
   border-radius: 999px;
@@ -96,21 +105,12 @@
 .nut-avatar-icon {
   background-size: 100% 100%;
 }
-.nut-avatar .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-text {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
 }
 .nut-avatar-large {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
@@ -118,53 +118,19 @@
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large-img-image {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
 .nut-avatar-large-icon {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
-.nut-avatar-large .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
 .nut-avatar-large-text {
   width: var(--nutui-avatar-large-width, 60px);
   height: var(--nutui-avatar-large-height, 60px);
 }
 .nut-avatar-small {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-img-image {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
 }
 .nut-avatar-small-text {
   width: var(--nutui-avatar-small-width, 32px);
   height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-normal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal-img-image {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-normal .nut-icon-img {
-  width: 100%;
-  height: 100%;
-}
-.nut-avatar-normal-text {
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
 }

package/dist/es/packages/avatarcropper/avatarcropper.js

@@ -7,8 +7,9 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import Taro, { useReady, createSelectorQuery } from "@tarojs/taro";
 import classNames from "classnames";
-import { Canvas } from "@tarojs/components";
+import { Canvas, View } from "@tarojs/components";
 import { Button } from "../button/button";
+import { useConfig } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
 import { useTouch } from "../../utils/use-touch";
 import { clamp, preventDefault } from "../../utils";
@@ -19,20 +20,20 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
         /*#__PURE__*/ React.createElement(Button, {
             type: "danger",
             key: "cancel"
-        }, "取消"),
+        }, "Cancel"),
         /*#__PURE__*/ React.createElement(Button, {
             key: "reset"
-        }, "重置"),
+        }, "Reset"),
         /*#__PURE__*/ React.createElement(Button, {
             key: "rotate"
-        }, "旋转"),
+        }, "Rotate"),
         /*#__PURE__*/ React.createElement(Button, {
             type: "success",
             key: "confirm"
-        }, "确认")
+        }, "Confirm")
     ],
     toolbarPosition: 'bottom',
-    editText: '编辑',
+    editText: 'Edit',
     sizeType: [
         'original',
         'compressed'
@@ -45,6 +46,24 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var classPrefix = "nut-avatar-cropper";
 export var AvatarCropper = function(props) {
+    var locale = useConfig().locale;
+    defaultProps.toolbar = [
+        /*#__PURE__*/ React.createElement(Button, {
+            type: "danger",
+            key: "cancel"
+        }, locale.cancel),
+        /*#__PURE__*/ React.createElement(Button, {
+            key: "reset"
+        }, locale.reset),
+        /*#__PURE__*/ React.createElement(Button, {
+            key: "rotate"
+        }, locale.avatarCropper.rotate),
+        /*#__PURE__*/ React.createElement(Button, {
+            type: "success",
+            key: "confirm"
+        }, locale.confirm)
+    ];
+    defaultProps.editText = locale.edit;
     var _ref = _object_spread({}, defaultProps, props), children = _ref.children, toolbar = _ref.toolbar, maxZoom = _ref.maxZoom, space = _ref.space, toolbarPosition = _ref.toolbarPosition, editText = _ref.editText, sizeType = _ref.sizeType, sourceType = _ref.sourceType, shape = _ref.shape, className = _ref.className, style = _ref.style, onConfirm = _ref.onConfirm, onCancel = _ref.onCancel, rest = _object_without_properties(_ref, [
         "children",
         "toolbar",
@@ -65,7 +84,6 @@ export var AvatarCropper = function(props) {
     var _useState = _sliced_to_array(useState(false), 2), visible = _useState[0], setVisible = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), moving = _useState1[0], setMoving = _useState1[1];
     var _useState2 = _sliced_to_array(useState(false), 2), zooming = _useState2[0], setZooming = _useState2[1];
-    // 获取系统信息
     var systemInfo = Taro.getSystemInfoSync();
     // 支付宝基础库2.7.0以上支持，需要开启支付宝小程序canvas2d
     var showAlipayCanvas2D = useMemo(function() {
@@ -116,9 +134,7 @@ export var AvatarCropper = function(props) {
             cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId)
         }));
     }, []);
-    // 触摸
     var touch = useTouch();
-    // 高亮框样式
     var highlightStyle = useMemo(function() {
         var width = "".concat(state.cropperWidth / pixelRatio, "px");
         var height = width;
@@ -200,13 +216,9 @@ export var AvatarCropper = function(props) {
         ctx.fillRect(0, 0, displayWidth, displayHeight);
         ctx.fillStyle = '#000';
         ctx.fillRect(space * pixelRatio, (displayHeight - cropperWidth) / 2, cropperWidth, cropperWidth);
-        // 绘制偏移量
         ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
-        // 绘制旋转角度
         ctx.rotate(Math.PI / 180 * angle);
-        // 绘制缩放
         ctx.scale(scale, scale);
-        // 绘制图片
         ctx.drawImage(src, x, y, width, height);
     }, [
         drawImage,
@@ -264,11 +276,8 @@ export var AvatarCropper = function(props) {
         ctx.fill();
         // 绘制偏移量
         ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
-        // 绘制旋转角度
         ctx.rotate(Math.PI / 180 * angle);
-        // 绘制缩放
         ctx.scale(scale, scale);
-        // 绘制图片
         ctx.drawImage(src, x, y, width, height);
         ctx.draw();
     }, [
@@ -297,7 +306,7 @@ export var AvatarCropper = function(props) {
         draw
     ]);
     // 设置绘制图片
-    var setDrawImgInfo = function() {
+    var setDrawImgInfo = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(image) {
             var displayWidth, cropperWidth, copyDrawImg, imgWidth, imgHeight, isPortrait, rate, scale;
             return _ts_generator(this, function(_state) {
@@ -353,7 +362,6 @@ export var AvatarCropper = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    // 选择图片
     var chooseImage = function() {
         Taro.chooseImage({
             count: 1,
@@ -367,8 +375,7 @@ export var AvatarCropper = function(props) {
             }
         });
     };
-    // 选择图片后回调
-    var imageChange = function() {
+    var imageChange = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(file) {
             return _ts_generator(this, function(_state) {
                 Taro.getImageInfo({
@@ -386,7 +393,6 @@ export var AvatarCropper = function(props) {
             return _ref.apply(this, arguments);
         };
     }();
-    // 重设缩放
     var resetScale = function(scale) {
         setState(_object_spread_props(_object_spread({}, state), {
             moveX: 0,
@@ -396,7 +402,6 @@ export var AvatarCropper = function(props) {
             defScale: scale || state.defScale
         }));
     };
-    // 设置缩放
     var setScale = function(scale) {
         scale = clamp(scale, +0.3, +maxZoom + 1);
         if (scale !== state.scale) {
@@ -416,7 +421,6 @@ export var AvatarCropper = function(props) {
         startDistance: 0
     }), 2), startMove = _useState6[0], setStartMove = _useState6[1];
     var startMoveX = startMove.startMoveX, startMoveY = startMove.startMoveY, startScale = startMove.startScale, startDistance = startMove.startDistance;
-    // 触摸开始
     var onTouchStart = function(event) {
         var touches = event.touches;
         var offsetX = touch.offsetX;
@@ -435,7 +439,6 @@ export var AvatarCropper = function(props) {
             }));
         }
     };
-    // 触摸移动
     var onTouchMove = function(event) {
         var touches = event.touches;
         touch.move(event);
@@ -457,7 +460,6 @@ export var AvatarCropper = function(props) {
             setScale(scale);
         }
     };
-    // 触摸结束
     var onTouchEnd = function(event) {
         var stopPropagation = false;
         if (moving || zooming) {
@@ -489,13 +491,11 @@ export var AvatarCropper = function(props) {
         preventDefault(event, stopPropagation);
         touch.reset();
     };
-    // 重置角度
     var reset = function() {
         setState(_object_spread_props(_object_spread({}, state), {
             angle: 0
         }));
     };
-    // 设置角度
     var rotate = function() {
         if (state.angle === 270) {
             setState(_object_spread_props(_object_spread({}, state), {
@@ -507,7 +507,6 @@ export var AvatarCropper = function(props) {
             angle: state.angle + 90
         }));
     };
-    // 关闭
     var cancel = function() {
         var isEmit = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
         setVisible(false);
@@ -549,7 +548,7 @@ export var AvatarCropper = function(props) {
             height: cropperWidth,
             destWidth: cropperWidth,
             destHeight: cropperWidth,
-            success: function() {
+            success: /*#__PURE__*/ function() {
                 var _ref = _async_to_generator(function(res) {
                     var filePath;
                     return _ts_generator(this, function(_state) {
@@ -588,7 +587,7 @@ export var AvatarCropper = function(props) {
             height: cropperWidth,
             destWidth: cropperWidth * systemInfo.pixelRatio,
             destHeight: cropperWidth * systemInfo.pixelRatio,
-            success: function() {
+            success: /*#__PURE__*/ function() {
                 var _ref = _async_to_generator(function(res) {
                     var filePath;
                     return _ts_generator(this, function(_state) {
@@ -613,21 +612,21 @@ export var AvatarCropper = function(props) {
             rotate,
             confirm
         ];
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-popup-toolbar-flex")
         }, actions.map(function(action, index) {
-            return /*#__PURE__*/ React.createElement("div", {
+            return /*#__PURE__*/ React.createElement(View, {
                 key: index,
                 className: "".concat(classPrefix, "-popup-toolbar-item"),
                 onClick: function(_e) {
                     return action();
                 }
             }, toolbar[index]);
-        })));
+        }));
     };
     var CropperPopup = function() {
         var canvasId = canvasAll.canvasId;
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-popup"),
             style: {
                 display: visible ? 'block' : 'none'
@@ -638,23 +637,23 @@ export var AvatarCropper = function(props) {
             type: showAlipayCanvas2D ? '2d' : undefined,
             style: canvasStyle,
             className: "".concat(classPrefix, "-popup-canvas")
-        }), /*#__PURE__*/ React.createElement("div", {
+        }), /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-popup-highlight"),
             onTouchStart: onTouchStart,
             onTouchMove: onTouchMove,
             onTouchEnd: onTouchEnd
-        }, /*#__PURE__*/ React.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(View, {
             className: "highlight",
             style: highlightStyle
-        })), /*#__PURE__*/ React.createElement("div", {
+        })), /*#__PURE__*/ React.createElement(View, {
             className: toolbarPositionCls
-        }, /*#__PURE__*/ React.createElement(ToolBar, null))));
+        }, /*#__PURE__*/ React.createElement(ToolBar, null)));
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, _object_spread_props(_object_spread({
         className: cls
     }, rest), {
         style: style
-    }), children, /*#__PURE__*/ React.createElement("div", {
+    }), children, /*#__PURE__*/ React.createElement(View, {
         className: "nut-avatar-cropper-edit-text",
         onClick: chooseImage
     }, editText)), CropperPopup());

package/dist/es/packages/avatarcropper/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-cropper {
   position: relative;
   display: flex;

package/dist/es/packages/avatargroup/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-avatar-group {
   display: flex;
   flex-direction: row;

package/dist/es/packages/backtop/backtop.d.ts

@@ -1,27 +1,15 @@
 import React, { FunctionComponent } from 'react';
-import type { MouseEvent } from 'react';
+import { PageScrollObject } from '@tarojs/taro';
 import { ITouchEvent } from '@tarojs/components';
-import { BasicComponent } from "../../utils/typings";
-export interface BackTopProps extends BasicComponent {
-    /**
-    * 页面垂直滚动多高后出现
-    * @default 200
-    */
-    threshold: number
-    /**
-    * 设置组件页面层级
-    * @default 900
-    */
-    zIndex: number
-    /**
-    * 设置动画持续时间，为 0 时表示无动画
-    * @default 1000
-    */
-    duration: number
-    /**
-    * 按钮点击时触发事件
-    * @default -
-    */
-    onClick?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
+import { HoverButtonProps } from "../hoverbutton/index";
+export interface BackTopProps extends HoverButtonProps {
+    threshold: number;
+    zIndex: number;
+    duration: number;
+    /**
+     * 容器滚动时的回调参数，主要用于 rn、鸿蒙端
+     */
+    scrollRes?: PageScrollObject;
+    onClick?: (event: React.MouseEvent<HTMLDivElement> | ITouchEvent) => void;
 }
 export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/es/packages/backtop/backtop.js

@@ -2,51 +2,71 @@ import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useState } from "react";
-import { usePageScroll, pageScrollTo } from "@tarojs/taro";
+import React, { useCallback, useState, useEffect, useRef } from "react";
+import { usePageScroll, pageScrollTo, getSystemInfo } from "@tarojs/taro";
 import { View } from "@tarojs/components";
-import { Top } from "@nutui/icons-react-taro";
 import classNames from "classnames";
+import { Top } from "@nutui/icons-react-taro";
 import { ComponentDefaults } from "../../utils/typings";
-import { useRtl } from "../configprovider/index";
+import HoverButton from "../hoverbutton/index";
+import { rn } from "../../utils/platform-taro";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     threshold: 200,
     zIndex: 900,
     duration: 1000
 });
 export var BackTop = function(props) {
-    var rtl = useRtl();
-    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, style = _$_object_spread.style, onClick = _$_object_spread.onClick;
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, threshold = _$_object_spread.threshold, zIndex = _$_object_spread.zIndex, className = _$_object_spread.className, duration = _$_object_spread.duration, icon = _$_object_spread.icon, style = _$_object_spread.style, scrollRes = _$_object_spread.scrollRes, onClick = _$_object_spread.onClick;
     var classPrefix = 'nut-backtop';
-    var _useState = _sliced_to_array(useState(false), 2), backTop = _useState[0], SetBackTop = _useState[1];
-    // 监听用户滑动页面事件
-    usePageScroll(function(res) {
+    var _useState = _sliced_to_array(useState(false), 2), backTop = _useState[0], setBackTop = _useState[1];
+    var _obj;
+    var cls = classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-show"), backTop), _define_property(_obj, "".concat(classPrefix, "-rn"), rn()), _obj), className);
+    var systemInfo = useRef({});
+    useEffect(function() {
+        getSystemInfo().then(function(res) {
+            systemInfo.current = res;
+        });
+    }, []);
+    var onScroll = useCallback(function(res) {
         var scrollTop = res.scrollTop;
-        scrollTop >= threshold ? SetBackTop(true) : SetBackTop(false);
-    });
+        setBackTop(scrollTop >= threshold);
+    }, [
+        threshold
+    ]);
+    // 监听用户滑动页面事件
+    usePageScroll(onScroll);
+    useEffect(function() {
+        if (!scrollRes) return;
+        onScroll(scrollRes);
+    }, [
+        onScroll,
+        scrollRes
+    ]);
     // 返回顶部点击事件
-    var goTop = function(e) {
-        onClick && onClick(e);
+    var goTop = useCallback(function(e) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
         pageScrollTo({
             scrollTop: 0,
             duration: duration > 0 ? duration : 0
         });
-    };
-    var _obj;
-    var styles = Object.keys(style || {}).length !== 0 ? _object_spread({
-        zIndex: zIndex
-    }, style) : (_obj = {}, _define_property(_obj, rtl ? 'left' : 'right', '10px'), _define_property(_obj, "bottom", '20px'), _define_property(_obj, "zIndex", zIndex), _obj);
-    return /*#__PURE__*/ React.createElement(View, {
-        className: classNames(classPrefix, {
-            show: backTop
-        }, className),
-        style: styles,
+    }, [
+        duration,
+        onClick
+    ]);
+    return /*#__PURE__*/ React.createElement(HoverButton, {
+        className: cls,
+        style: _object_spread({
+            zIndex: zIndex
+        }, style),
+        icon: !children && (icon || /*#__PURE__*/ React.createElement(Top, null)),
+        onClick: function(e) {
+            goTop(e);
+        }
+    }, children && /*#__PURE__*/ React.createElement(View, {
+        className: "nut-hoverbutton-item-container",
         onClick: function(e) {
             goTop(e);
         }
-    }, children || /*#__PURE__*/ React.createElement(Top, {
-        size: 19,
-        className: "nut-backtop-main"
-    }));
+    }, children));
 };
 BackTop.displayName = 'NutBackTop';

package/dist/es/packages/backtop/style/backtop.scss

@@ -1,25 +1,22 @@
 .nut-backtop {
   display: none;
-  position: fixed;
 
-  &.show {
-    width: 40px;
-    height: 40px;
+  &-rn {
+    position: absolute;
+  }
+
+  &-show {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $color-background-overlay;
-    color: $color-title;
-    border: 1px solid $backtop-border-color;
-    border-radius: 50%;
-
-    &:active {
-      background: $color-background;
-    }
-  }
-
-  &-main {
+    width: $hoverbutton-item-size;
+    height: $hoverbutton-item-size;
     transition: all 0.2s ease-in-out;
-    color: $color-title;
+    .nut-hoverbutton-item-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }