@nutui/nutui-react 3.0.0 → 3.0.2

package/dist/style.scss

@@ -1,73 +1,70 @@
 @import './styles/variables.scss';
 @import './styles/mixins/index.scss';
 @import './styles/animation/index.scss';
-@import './es/packages/watermark/style/watermark.scss';
 @import './es/packages/virtuallist/style/virtuallist.scss';
-@import './es/packages/video/style/video.scss';
+@import './es/packages/watermark/style/watermark.scss';
 @import './es/packages/uploader/style/uploader.scss';
+@import './es/packages/video/style/video.scss';
 @import './es/packages/trendarrow/style/trendarrow.scss';
 @import './es/packages/tour/style/tour.scss';
 @import './es/packages/toast/style/toast.scss';
 @import './es/packages/timeselect/style/timeselect.scss';
+@import './es/packages/tag/style/tag.scss';
 @import './es/packages/timedetail/style/timedetail.scss';
 @import './es/packages/textarea/style/textarea.scss';
-@import './es/packages/tag/style/tag.scss';
-@import './es/packages/tabs/style/tabs.scss';
 @import './es/packages/tabpane/style/tabpane.scss';
-@import './es/packages/tabbaritem/style/tabbaritem.scss';
+@import './es/packages/tabs/style/tabs.scss';
 @import './es/packages/table/style/table.scss';
 @import './es/packages/tabbar/style/tabbar.scss';
+@import './es/packages/tabbaritem/style/tabbaritem.scss';
 @import './es/packages/switch/style/switch.scss';
-@import './es/packages/swiper/style/swiper.scss';
 @import './es/packages/swiperitem/style/swiperitem.scss';
-@import './es/packages/subsidenavbar/style/subsidenavbar.scss';
-@import './es/packages/sticky/style/sticky.scss';
+@import './es/packages/swiper/style/swiper.scss';
 @import './es/packages/swipe/style/swipe.scss';
+@import './es/packages/sticky/style/sticky.scss';
 @import './es/packages/steps/style/steps.scss';
-@import './es/packages/skeleton/style/skeleton.scss';
-@import './es/packages/space/style/space.scss';
 @import './es/packages/step/style/step.scss';
+@import './es/packages/space/style/space.scss';
 @import './es/packages/signature/style/signature.scss';
-@import './es/packages/segmented/style/segmented.scss';
-@import './es/packages/sidenavbaritem/style/sidenavbaritem.scss';
-@import './es/packages/sidenavbar/style/sidenavbar.scss';
 @import './es/packages/sidebaritem/style/sidebaritem.scss';
-@import './es/packages/shortpassword/style/shortpassword.scss';
+@import './es/packages/skeleton/style/skeleton.scss';
 @import './es/packages/sidebar/style/sidebar.scss';
+@import './es/packages/shortpassword/style/shortpassword.scss';
+@import './es/packages/segmented/style/segmented.scss';
 @import './es/packages/searchbar/style/searchbar.scss';
 @import './es/packages/safearea/style/safearea.scss';
 @import './es/packages/resultpage/style/resultpage.scss';
 @import './es/packages/row/style/row.scss';
-@import './es/packages/range/style/range.scss';
 @import './es/packages/rate/style/rate.scss';
+@import './es/packages/range/style/range.scss';
 @import './es/packages/radiogroup/style/radiogroup.scss';
+@import './es/packages/radio/style/radio.scss';
 @import './es/packages/pulltorefresh/style/pulltorefresh.scss';
 @import './es/packages/progress/style/progress.scss';
 @import './es/packages/price/style/price.scss';
-@import './es/packages/radio/style/radio.scss';
 @import './es/packages/popup/style/popup.scss';
+@import './es/packages/picker/style/picker.scss';
 @import './es/packages/popover/style/popover.scss';
 @import './es/packages/pickerview/style/pickerview.scss';
-@import './es/packages/picker/style/picker.scss';
 @import './es/packages/pagination/style/pagination.scss';
 @import './es/packages/overlay/style/overlay.scss';
+@import './es/packages/numberkeyboard/style/numberkeyboard.scss';
 @import './es/packages/notify/style/notify.scss';
 @import './es/packages/noticebar/style/noticebar.scss';
-@import './es/packages/numberkeyboard/style/numberkeyboard.scss';
-@import './es/packages/menuitem/style/menuitem.scss';
 @import './es/packages/navbar/style/navbar.scss';
-@import './es/packages/layout/style/layout.scss';
+@import './es/packages/menuitem/style/menuitem.scss';
 @import './es/packages/menu/style/menu.scss';
-@import './es/packages/loading/style/loading.scss';
 @import './es/packages/lottie/style/lottie.scss';
+@import './es/packages/layout/style/layout.scss';
+@import './es/packages/loading/style/loading.scss';
 @import './es/packages/inputnumber/style/inputnumber.scss';
 @import './es/packages/input/style/input.scss';
 @import './es/packages/indicator/style/indicator.scss';
 @import './es/packages/infiniteloading/style/infiniteloading.scss';
 @import './es/packages/imagepreview/style/imagepreview.scss';
-@import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
-@import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/hoverbutton/style/hoverbutton.scss';
+@import './es/packages/griditem/style/griditem.scss';
+@import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
 @import './es/packages/image/style/image.scss';
 @import './es/packages/grid/style/grid.scss';
 @import './es/packages/formitem/style/formitem.scss';
@@ -76,35 +73,36 @@
 @import './es/packages/empty/style/empty.scss';
 @import './es/packages/ellipsis/style/ellipsis.scss';
 @import './es/packages/elevator/style/elevator.scss';
-@import './es/packages/drag/style/drag.scss';
 @import './es/packages/divider/style/divider.scss';
+@import './es/packages/drag/style/drag.scss';
 @import './es/packages/dialog/style/dialog.scss';
-@import './es/packages/countup/style/countup.scss';
+@import './es/packages/datepickerview/style/datepickerview.scss';
 @import './es/packages/datepicker/style/datepicker.scss';
+@import './es/packages/countup/style/countup.scss';
+@import './es/packages/configprovider/style/configprovider.scss';
 @import './es/packages/countdown/style/countdown.scss';
 @import './es/packages/collapseitem/style/collapseitem.scss';
-@import './es/packages/configprovider/style/configprovider.scss';
-@import './es/packages/collapse/style/collapse.scss';
 @import './es/packages/col/style/col.scss';
-@import './es/packages/checkboxgroup/style/checkboxgroup.scss';
+@import './es/packages/collapse/style/collapse.scss';
 @import './es/packages/circleprogress/style/circleprogress.scss';
+@import './es/packages/checkboxgroup/style/checkboxgroup.scss';
 @import './es/packages/checkbox/style/checkbox.scss';
-@import './es/packages/cell/style/cell.scss';
 @import './es/packages/cellgroup/style/cellgroup.scss';
 @import './es/packages/cascader/style/cascader.scss';
+@import './es/packages/cell/style/cell.scss';
 @import './es/packages/card/style/card.scss';
 @import './es/packages/calendaritem/style/calendaritem.scss';
-@import './es/packages/calendarcard/style/calendarcard.scss';
 @import './es/packages/calendar/style/calendar.scss';
 @import './es/packages/button/style/button.scss';
+@import './es/packages/calendarcard/style/calendarcard.scss';
+@import './es/packages/badge/style/badge.scss';
 @import './es/packages/barrage/style/barrage.scss';
 @import './es/packages/backtop/style/backtop.scss';
-@import './es/packages/avatargroup/style/avatargroup.scss';
 @import './es/packages/avatarcropper/style/avatarcropper.scss';
-@import './es/packages/badge/style/badge.scss';
-@import './es/packages/avatar/style/avatar.scss';
 @import './es/packages/audio/style/audio.scss';
+@import './es/packages/avatargroup/style/avatargroup.scss';
 @import './es/packages/animatingnumbers/style/animatingnumbers.scss';
+@import './es/packages/avatar/style/avatar.scss';
 @import './es/packages/animate/style/animate.scss';
-@import './es/packages/actionsheet/style/actionsheet.scss';
-@import './es/packages/address/style/address.scss';
+@import './es/packages/address/style/address.scss';
+@import './es/packages/actionsheet/style/actionsheet.scss';

package/dist/styles/variables-jmapp.scss

@@ -1332,7 +1332,6 @@ $steps-dot-icon-border: var(
 $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default;
 
 // dialog（✅）
-$dialog-z-index: var(--nutui-dialog-z-index, $mask-content-z-index) !default;
 $dialog-width: var(--nutui-dialog-width, 295px) !default;
 $dialog-padding: var(
   --nutui-dialog-padding,
@@ -2151,55 +2150,6 @@ $navbar-title-font-color: var(
   $color-title
 ) !default;
 
-// sidenavbar（✅）
-$sidenavbar-content-bg-color: var(
-  --nutui-sidenavbar-content-bg-color,
-  $white
-) !default;
-$sidenavbar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
-$sidenavbar-title-padding: var(
-  --nutui-sidenavbar-title-padding,
-  10px 8px 10px 20px
-) !default;
-$sidenavbar-title-background: var(
-  --nutui-sidenavbar-title-background,
-  $color-background
-) !default;
-$sidenavbar-title-color: var(
-  --nutui-sidenavbar-title-color,
-  $color-title
-) !default;
-// subsidenavbar（✅）
-$sidenavbar-sub-title-padding: var(
-  --nutui-sidenavbar-sub-title-padding,
-  10px 8px 10px 35px
-) !default;
-$sidenavbar-sub-title-background: var(
-  --nutui-sidenavbar-sub-title-background,
-  $color-background-sunken
-) !default;
-$sidenavbar-sub-title-color: var(
-  --nutui-sidenavbar-sub-title-color,
-  $color-title
-) !default;
-// sidenavbaritem（✅）
-$sidenavbar-sub-item-color: var(
-  --nutui-sidenavbar-sub-item-color,
-  $color-text
-) !default;
-$sidenavbar-sub-item-padding: var(
-  --nutui-sidenavbar-sub-item-padding,
-  10px 8px 10px 55px
-) !default;
-$sidenavbar-sub-list-background: var(
-  --nutui-sidenavbar-sub-list-background,
-  $white
-) !default;
-$sidenavbar-sub-list-color: var(
-  --nutui-sidenavbar-sub-list-background,
-  $color-text
-) !default;
-
 // elevator（✅）
 $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default;
 $elevator-list-font-size: var(

package/dist/styles/variables-jrkf.scss

@@ -1351,7 +1351,6 @@ $steps-dot-icon-border: var(
 $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default;
 
 // dialog（✅）
-$dialog-z-index: var(--nutui-dialog-z-index, $mask-content-z-index) !default;
 $dialog-width: var(--nutui-dialog-width, 295px) !default;
 $dialog-padding: var(
   --nutui-dialog-padding,
@@ -2184,55 +2183,6 @@ $navbar-title-font-color: var(
   $color-text-title
 ) !default;
 
-// sidenavbar（✅）
-$sidenavbar-content-bg-color: var(
-  --nutui-sidenavbar-content-bg-color,
-  $white
-) !default;
-$sidenavbar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
-$sidenavbar-title-padding: var(
-  --nutui-sidenavbar-title-padding,
-  10px 8px 10px 20px
-) !default;
-$sidenavbar-title-background: var(
-  --nutui-sidenavbar-title-background,
-  $color-background
-) !default;
-$sidenavbar-title-color: var(
-  --nutui-sidenavbar-title-color,
-  $color-text-title
-) !default;
-// subsidenavbar（✅）
-$sidenavbar-sub-title-padding: var(
-  --nutui-sidenavbar-sub-title-padding,
-  10px 8px 10px 35px
-) !default;
-$sidenavbar-sub-title-background: var(
-  --nutui-sidenavbar-sub-title-background,
-  $color-background-sunken
-) !default;
-$sidenavbar-sub-title-color: var(
-  --nutui-sidenavbar-sub-title-color,
-  $color-text-title
-) !default;
-// sidenavbaritem（✅）
-$sidenavbar-sub-item-color: var(
-  --nutui-sidenavbar-sub-item-color,
-  $color-text
-) !default;
-$sidenavbar-sub-item-padding: var(
-  --nutui-sidenavbar-sub-item-padding,
-  10px 8px 10px 55px
-) !default;
-$sidenavbar-sub-list-background: var(
-  --nutui-sidenavbar-sub-list-background,
-  $white
-) !default;
-$sidenavbar-sub-list-color: var(
-  --nutui-sidenavbar-sub-list-background,
-  $color-text
-) !default;
-
 // elevator（✅）
 $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default;
 $elevator-list-font-size: var(

package/dist/styles/variables.scss

@@ -1341,7 +1341,6 @@ $steps-dot-icon-border: var(
 $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default;
 
 // dialog（✅）
-$dialog-z-index: var(--nutui-dialog-z-index, $mask-content-z-index) !default;
 $dialog-min-width: var(--nutui-dialog-min-width, 240px) !default;
 $dialog-width: var(--nutui-dialog-width, 295px) !default;
 $dialog-padding: var(--nutui-dialog-padding, 24px) !default;
@@ -2230,54 +2229,6 @@ $sidebar-active-color: var(
 ) !default;
 $sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default;
 $sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default;
-// sidenavbar（✅）
-$sidenavbar-content-bg-color: var(
-  --nutui-sidenavbar-content-bg-color,
-  $white
-) !default;
-$sidenavbar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
-$sidenavbar-title-padding: var(
-  --nutui-sidenavbar-title-padding,
-  10px 8px 10px 20px
-) !default;
-$sidenavbar-title-background: var(
-  --nutui-sidenavbar-title-background,
-  $color-background
-) !default;
-$sidenavbar-title-color: var(
-  --nutui-sidenavbar-title-color,
-  $color-title
-) !default;
-// subsidenavbar（✅）
-$sidenavbar-sub-title-padding: var(
-  --nutui-sidenavbar-sub-title-padding,
-  10px 8px 10px 35px
-) !default;
-$sidenavbar-sub-title-background: var(
-  --nutui-sidenavbar-sub-title-background,
-  $color-background-sunken
-) !default;
-$sidenavbar-sub-title-color: var(
-  --nutui-sidenavbar-sub-title-color,
-  $color-title
-) !default;
-// sidenavbaritem（✅）
-$sidenavbar-sub-item-color: var(
-  --nutui-sidenavbar-sub-item-color,
-  $color-text
-) !default;
-$sidenavbar-sub-item-padding: var(
-  --nutui-sidenavbar-sub-item-padding,
-  10px 8px 10px 55px
-) !default;
-$sidenavbar-sub-list-background: var(
-  --nutui-sidenavbar-sub-list-background,
-  $white
-) !default;
-$sidenavbar-sub-list-color: var(
-  --nutui-sidenavbar-sub-list-background,
-  $color-text
-) !default;
 
 // elevator（✅）
 $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default;

package/package.json

@@ -1 +1 @@
-{"name":"@nutui/nutui-react","version":"3.0.0","style":"dist/style.css","main":"dist/nutui.react.umd.js","module":"dist/es/packages/nutui.react.build.js","typings":"dist/es/packages/nutui.react.build.d.ts","scripts":{"publish:beta":"npm publish --tag=beta --access public --no-git-checks","publish:latest":"npm publish --access public --no-git-checks"},"sideEffects":["*.scss","dist/es/**/style/*","dist/cjs/**/style/*","dist/style.css","dist/styles/font/*","dist/styles/font-jmapp/*"],"description":"京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序","keywords":["nutui","nutui2","nutui3","react","nutui-react","webpack","react component","vite","jdc","jdcfe","taro"],"author":"jdcfe","license":"MIT","repository":{"type":"git","url":"git+https://github.com/jdf2e/nutui-react.git"},"files":["dist","README.md","package.json","LICENSE","CHANGELOG.md"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{"@babel/runtime":"^7.23.9","@nutui/icons-react":"^3.0.0-beta.2","@nutui/jdesign-icons-react-taro":"1.0.6-beta.2","@nutui/touch-emulator":"^1.0.0","@react-spring/web":"~9.6.1","@swc/helpers":"^0.5.7","@use-gesture/react":"10.2.20","async-validator":"^4.2.5","classnames":"^2.5.1","react-fast-compare":"^3.2.2","lodash.kebabcase":"^4.1.1","lottie-miniprogram":"^1.0.12","lottie-react":"^2.4.0","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"}}
+{"name":"@nutui/nutui-react","version":"3.0.2","style":"dist/style.css","main":"dist/nutui.react.umd.js","module":"dist/es/packages/nutui.react.build.js","typings":"dist/es/packages/nutui.react.build.d.ts","scripts":{"publish:beta":"npm publish --tag=beta --access public --no-git-checks","publish:latest":"npm publish --access public --no-git-checks"},"sideEffects":["*.scss","dist/es/**/style/*","dist/cjs/**/style/*","dist/style.css","dist/styles/font/*","dist/styles/font-jmapp/*"],"description":"京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序","keywords":["nutui","nutui2","nutui3","react","nutui-react","webpack","react component","vite","jdc","jdcfe","taro"],"author":"jdcfe","license":"MIT","repository":{"type":"git","url":"git+https://github.com/jdf2e/nutui-react.git"},"files":["dist","README.md","package.json","LICENSE","CHANGELOG.md"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{"@babel/runtime":"^7.23.9","@nutui/icons-react":"^3.0.1","@nutui/jdesign-icons-react-taro":"1.0.6-beta.2","@nutui/touch-emulator":"^1.0.0","@react-spring/web":"~9.6.1","@swc/helpers":"^0.5.7","@use-gesture/react":"10.2.20","async-validator":"^4.2.5","classnames":"^2.5.1","lodash.kebabcase":"^4.1.1","lottie-miniprogram":"^1.0.12","lottie-react":"^2.4.0","react-fast-compare":"^3.2.2","react-transition-group":"^4.4.5","rehype-highlight":"^7.0.2"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"}}

package/dist/cjs/packages/sidenavbar/context.d.ts

@@ -1 +0,0 @@
-export declare const OffsetContext: import("react").Context<number>;

package/dist/cjs/packages/sidenavbar/context.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "OffsetContext", {
-    enumerable: true,
-    get: function() {
-        return OffsetContext;
-    }
-});
-var _react = require("react");
-var OffsetContext = /*#__PURE__*/ (0, _react.createContext)(20);

package/dist/cjs/packages/sidenavbar/index.d.ts

@@ -1,3 +0,0 @@
-import { SideNavBar } from './sidenavbar';
-export type { SideNavBarProps } from './sidenavbar';
-export default SideNavBar;

package/dist/cjs/packages/sidenavbar/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-var _sidenavbar = require("./sidenavbar");
-var _default = _sidenavbar.SideNavBar;

package/dist/cjs/packages/sidenavbar/sidenavbar.d.ts

@@ -1,14 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-/**
- * @deprecated Use SideBar instead.
- */
-export interface SideNavBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, BasicComponent {
-    title: ReactNode;
-    visible: boolean;
-    width: string;
-    indent: number;
-    position: 'left' | 'right';
-    onClose: () => void;
-}
-export declare const SideNavBar: FunctionComponent<Partial<SideNavBarProps>>;

package/dist/cjs/packages/sidenavbar/sidenavbar.js

@@ -1,70 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "SideNavBar", {
-    enumerable: true,
-    get: function() {
-        return SideNavBar;
-    }
-});
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
-var _popup = /*#__PURE__*/ _interop_require_default._(require("../popup"));
-var _utils = require("./utils");
-var _context = require("./context");
-var _typings = require("../../utils/typings");
-var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
-    position: 'left',
-    width: '80%'
-});
-var SideNavBar = function SideNavBar(props) {
-    (0, _react.useEffect)(function() {
-        console.warn('Warning: SideNavBar is deprecated and will be removed in future versions. Please use NewComponent SideBar instead.');
-    }, []);
-    var classPrefix = 'nut-sidenavbar';
-    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, visible = _ref.visible, width = _ref.width, position = _ref.position, children = _ref.children, className = _ref.className, onClose = _ref.onClose, indent = _ref.indent, rest = (0, _object_without_properties._)(_ref, [
-        "title",
-        "visible",
-        "width",
-        "position",
-        "children",
-        "className",
-        "onClose",
-        "indent"
-    ]);
-    var innerIndent = indent ? Number(indent) : 20;
-    return /*#__PURE__*/ _react.default.createElement(_popup.default, {
-        visible: visible,
-        style: {
-            width: width,
-            height: '100%'
-        },
-        position: position,
-        onClose: onClose
-    }, /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: (0, _classnames.default)(classPrefix, className)
-    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content")
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-list sidenavbar-show"),
-        onClick: _utils.handleClick
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-title ").concat(classPrefix, "-border-bt"),
-        style: {
-            paddingLeft: "".concat(innerIndent, "px")
-        }
-    }, title, " ", /*#__PURE__*/ _react.default.createElement("i", {
-        className: "arrow-icon arrow-down"
-    })), /*#__PURE__*/ _react.default.createElement(_context.OffsetContext.Provider, {
-        value: innerIndent
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content")
-    }, children))))));
-};
-SideNavBar.displayName = 'NutSideNavBar';

package/dist/cjs/packages/sidenavbar/style/index.js

@@ -1,2 +0,0 @@
-import '../../popup/style';
-import './sidenavbar.scss';

package/dist/cjs/packages/sidenavbar/style/sidenavbar.scss

@@ -1,89 +0,0 @@
-.nut-sidenavbar {
-  color: #1d1d21;
-  font-size: 14px;
-  height: 100%;
-  overflow: auto;
-  display: block;
-  background-color: $sidenavbar-content-bg-color;
-
-  .arrow-icon {
-    position: absolute;
-    width: 0;
-    height: 0;
-    right: 16px;
-    top: 18px;
-    cursor: pointer;
-  }
-
-  .arrow-down {
-    border-top: 4px solid $color-text-help;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-  }
-
-  .arrow-up {
-    border-bottom: 4px solid $color-text-help;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-  }
-
-  &-title {
-    height: $sidenavbar-item-height;
-    padding: $sidenavbar-title-padding;
-    background: $sidenavbar-title-background;
-    color: $sidenavbar-title-color;
-    box-sizing: border-box;
-    transition: transform 0.5s;
-  }
-
-  &-content {
-    position: relative;
-    display: block;
-  }
-
-  &-list {
-    &.sidenavbar-show {
-      .nut-sidenavbar-content {
-        height: auto;
-        overflow: inherit;
-      }
-    }
-
-    &.sidenavbar-hide {
-      .nut-sidenavbar-content {
-        height: 0;
-        overflow: hidden;
-      }
-    }
-  }
-
-  .nut-subsidenavbar-border-bt {
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 1px;
-      background: #eeeff2;
-      transform: scale(1, 0.5);
-      left: 0;
-      bottom: 0;
-    }
-  }
-}
-
-[dir='rtl'] .nut-sidenavbar,
-.nut-rtl .nut-sidenavbar {
-  .arrow-icon {
-    right: auto;
-    left: 16px;
-  }
-
-  .nut-subsidenavbar-border-bt {
-    &:after {
-      left: auto;
-      right: 0;
-    }
-  }
-}