naive-ui 2.18.1 → 2.19.2

package/lib/layout/src/Layout.d.ts

@@ -61,6 +61,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -88,6 +89,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -115,6 +117,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -254,6 +257,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
             siderBorderColorInverted: string;
             siderColor: string;
             siderColorInverted: string;
+            siderToggleButtonBorder: string;
             siderToggleButtonColor: string;
             siderToggleBarColor: string;
             siderToggleBarColorHover: string;
@@ -292,8 +296,8 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
 } & {
     position: "static" | "absolute";
     contentStyle: string | CSSProperties;
-    nativeScrollbar: boolean;
     embedded: boolean;
+    nativeScrollbar: boolean;
     hasSider: boolean;
     siderPlacement: "left" | "right";
 } & {
@@ -314,6 +318,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -341,6 +346,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -368,6 +374,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -382,8 +389,8 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
 }>, {
     position: "static" | "absolute";
     contentStyle: string | CSSProperties;
-    nativeScrollbar: boolean;
     embedded: boolean;
+    nativeScrollbar: boolean;
     hasSider: boolean;
     siderPlacement: "left" | "right";
 }>;
@@ -424,6 +431,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -451,6 +459,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -478,6 +487,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -617,6 +627,7 @@ declare const _default: import("vue").DefineComponent<{
             siderBorderColorInverted: string;
             siderColor: string;
             siderColorInverted: string;
+            siderToggleButtonBorder: string;
             siderToggleButtonColor: string;
             siderToggleBarColor: string;
             siderToggleBarColorHover: string;
@@ -655,8 +666,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     position: "static" | "absolute";
     contentStyle: string | CSSProperties;
-    nativeScrollbar: boolean;
     embedded: boolean;
+    nativeScrollbar: boolean;
     hasSider: boolean;
     siderPlacement: "left" | "right";
 } & {
@@ -677,6 +688,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -704,6 +716,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -731,6 +744,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -745,8 +759,8 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     position: "static" | "absolute";
     contentStyle: string | CSSProperties;
-    nativeScrollbar: boolean;
     embedded: boolean;
+    nativeScrollbar: boolean;
     hasSider: boolean;
     siderPlacement: "left" | "right";
 }>;

package/lib/layout/src/LayoutContent.d.ts

@@ -35,6 +35,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -62,6 +63,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -89,6 +91,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -228,6 +231,7 @@ declare const _default: import("vue").DefineComponent<{
             siderBorderColorInverted: string;
             siderColor: string;
             siderColorInverted: string;
+            siderToggleButtonBorder: string;
             siderToggleButtonColor: string;
             siderToggleBarColor: string;
             siderToggleBarColorHover: string;
@@ -266,8 +270,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     position: "static" | "absolute";
     contentStyle: string | import("vue").CSSProperties;
-    nativeScrollbar: boolean;
     embedded: boolean;
+    nativeScrollbar: boolean;
     hasSider: boolean;
     siderPlacement: "left" | "right";
 } & {
@@ -288,6 +292,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -315,6 +320,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -342,6 +348,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -356,8 +363,8 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     position: "static" | "absolute";
     contentStyle: string | import("vue").CSSProperties;
-    nativeScrollbar: boolean;
     embedded: boolean;
+    nativeScrollbar: boolean;
     hasSider: boolean;
     siderPlacement: "left" | "right";
 }>;

package/lib/layout/src/LayoutFooter.d.ts

@@ -23,6 +23,7 @@ declare const layoutFooterProps: {
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -50,6 +51,7 @@ declare const layoutFooterProps: {
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -77,6 +79,7 @@ declare const layoutFooterProps: {
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -113,6 +116,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -140,6 +144,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -167,6 +172,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -209,6 +215,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -236,6 +243,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -263,6 +271,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;

package/lib/layout/src/LayoutHeader.d.ts

@@ -38,6 +38,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -65,6 +66,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -92,6 +94,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -134,6 +137,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -161,6 +165,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -188,6 +193,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;

package/lib/layout/src/LayoutSider.d.ts

@@ -49,6 +49,7 @@ declare const layoutSiderProps: {
         style: CSSProperties;
     }>;
     readonly triggerStyle: PropType<string | CSSProperties>;
+    readonly collapsedTriggerStyle: PropType<string | CSSProperties>;
     readonly 'onUpdate:collapsed': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateCollapsed: PropType<MaybeArray<(value: boolean) => void>>;
     readonly onExpand: PropType<MaybeArray<() => void>>;
@@ -103,6 +104,7 @@ declare const _default: import("vue").DefineComponent<{
         style: CSSProperties;
     }>;
     triggerStyle: PropType<string | CSSProperties>;
+    collapsedTriggerStyle: PropType<string | CSSProperties>;
     'onUpdate:collapsed': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateCollapsed: PropType<MaybeArray<(value: boolean) => void>>;
     onExpand: PropType<MaybeArray<() => void>>;
@@ -124,6 +126,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -151,6 +154,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -178,6 +182,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -316,6 +321,7 @@ declare const _default: import("vue").DefineComponent<{
             siderBorderColorInverted: string;
             siderColor: string;
             siderColorInverted: string;
+            siderToggleButtonBorder: string;
             siderToggleButtonColor: string;
             siderToggleBarColor: string;
             siderToggleBarColorHover: string;
@@ -357,6 +363,7 @@ declare const _default: import("vue").DefineComponent<{
     inverted?: unknown;
     scrollbarProps?: unknown;
     triggerStyle?: unknown;
+    collapsedTriggerStyle?: unknown;
     'onUpdate:collapsed'?: unknown;
     onUpdateCollapsed?: unknown;
     onExpand?: unknown;
@@ -395,6 +402,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -422,6 +430,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -449,6 +458,7 @@ declare const _default: import("vue").DefineComponent<{
         siderBorderColorInverted: string;
         siderColor: string;
         siderColorInverted: string;
+        siderToggleButtonBorder: string;
         siderToggleButtonColor: string;
         siderToggleBarColor: string;
         siderToggleBarColorHover: string;
@@ -464,6 +474,7 @@ declare const _default: import("vue").DefineComponent<{
         style: CSSProperties;
     }) | undefined;
     triggerStyle?: string | CSSProperties | undefined;
+    collapsedTriggerStyle?: string | CSSProperties | undefined;
     "onUpdate:collapsed"?: MaybeArray<(value: boolean) => void> | undefined;
     onUpdateCollapsed?: MaybeArray<(value: boolean) => void> | undefined;
     onExpand?: MaybeArray<() => void> | undefined;

package/lib/layout/src/LayoutSider.js

@@ -54,6 +54,7 @@ const layoutSiderProps = {
     inverted: Boolean,
     scrollbarProps: Object,
     triggerStyle: [String, Object],
+    collapsedTriggerStyle: [String, Object],
     'onUpdate:collapsed': [Function, Array],
     onUpdateCollapsed: [Function, Array],
     // deprecated
@@ -144,10 +145,11 @@ exports.default = (0, vue_1.defineComponent)({
         return Object.assign({ scrollableElRef,
             scrollbarInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, styleMaxWidth: styleMaxWidthRef, mergedCollapsed: mergedCollapsedRef, scrollContainerStyle: scrollContainerStyleRef, siderPlacement: siderPlacementRef, handleTriggerClick, cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { siderToggleButtonColor, siderToggleBarColor, siderToggleBarColorHover } = self;
+                const { siderToggleButtonColor, siderToggleButtonBorder, siderToggleBarColor, siderToggleBarColorHover } = self;
                 const vars = {
                     '--bezier': cubicBezierEaseInOut,
                     '--toggle-button-color': siderToggleButtonColor,
+                    '--toggle-button-border': siderToggleButtonBorder,
                     '--toggle-bar-color': siderToggleBarColor,
                     '--toggle-bar-color-hover': siderToggleBarColorHover
                 };
@@ -197,6 +199,6 @@ exports.default = (0, vue_1.defineComponent)({
                         overflow: 'auto'
                     }
                 ], ref: "scrollableElRef" }, this.$slots)),
-            showTrigger ? (showTrigger === 'arrow-circle' ? ((0, vue_1.h)(ToggleButton_1.default, { clsPrefix: mergedClsPrefix, style: this.triggerStyle, onClick: this.handleTriggerClick })) : ((0, vue_1.h)(ToggleBar_1.default, { clsPrefix: mergedClsPrefix, style: this.triggerStyle, onClick: this.handleTriggerClick }))) : null));
+            showTrigger ? (showTrigger === 'bar' ? ((0, vue_1.h)(ToggleBar_1.default, { clsPrefix: mergedClsPrefix, style: mergedCollapsed ? this.collapsedTriggerStyle : this.triggerStyle, onClick: this.handleTriggerClick })) : ((0, vue_1.h)(ToggleButton_1.default, { clsPrefix: mergedClsPrefix, style: mergedCollapsed ? this.collapsedTriggerStyle : this.triggerStyle, onClick: this.handleTriggerClick }))) : null));
     }
 });

package/lib/layout/src/ToggleButton.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
+const _internal_1 = require("../../_internal");
+const icons_1 = require("../../_internal/icons");
 exports.default = (0, vue_1.defineComponent)({
     name: 'LayoutToggleButton',
     props: {
@@ -11,8 +13,10 @@ exports.default = (0, vue_1.defineComponent)({
         onClick: Function
     },
     render() {
-        return ((0, vue_1.h)("div", { class: `${this.clsPrefix}-layout-toggle-button`, onClick: this.onClick },
-            (0, vue_1.h)("svg", { viewBox: "0 0 56.06 56.06" },
-                (0, vue_1.h)("path", { d: "M50,22A28,28,0,1,0,78,50,28.06,28.06,0,0,0,50,22ZM65.09,52.16h-25l7.1,7.1a2.16,2.16,0,0,1-3.05,3.05L33.38,51.52a2.15,2.15,0,0,1,0-3L44.16,37.69a2.16,2.16,0,0,1,3.05,3.05l-7.1,7.1h25a2.16,2.16,0,0,1,0,4.32Z", transform: "translate(-21.97 -21.97)" }))));
+        const { clsPrefix } = this;
+        return ((0, vue_1.h)("div", { class: `${clsPrefix}-layout-toggle-button`, onClick: this.onClick },
+            (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, {
+                default: () => (0, vue_1.h)(icons_1.ChevronRightIcon, null)
+            })));
     }
 });

package/lib/layout/src/styles/layout-sider.cssr.js

@@ -35,16 +35,18 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
  `, [(0, cssr_1.cM)('bordered', `
  border-right: none;
  border-left: 1px solid var(--border-color);
- `), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('layout-toggle-button', `
- transform: translateX(-50%) translateY(-50%) rotate(0);
- `), (0, cssr_1.cB)('layout-toggle-bar', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('top', {
+ `), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('layout-toggle-button', [(0, cssr_1.cB)('base-icon', `
+ transform: rotate(180deg);
+ `)]), (0, cssr_1.cB)('layout-toggle-bar', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('top', {
   transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
 }), (0, cssr_1.cE)('bottom', {
   transform: 'rotate(12deg) scale(1.15) translateY(2px)'
 })])])]), (0, cssr_1.cB)('layout-toggle-button', `
- transform: translateX(-50%) translateY(-50%) rotate(180deg);
  left: 0;
- `), (0, cssr_1.cB)('layout-toggle-bar', `
+ transform: translateX(-50%) translateY(-50%);
+ `, [(0, cssr_1.cB)('base-icon', `
+ transform: rotate(0);
+ `)]), (0, cssr_1.cB)('layout-toggle-bar', `
  left: -28px;
  transform: rotate(180deg);
  `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('top', {
@@ -55,21 +57,35 @@ exports.default = (0, cssr_1.cB)('layout-sider', `
   transform: 'rotate(-12deg) scale(1.15) translateY(-2px)'
 }), (0, cssr_1.cE)('bottom', {
   transform: 'rotate(12deg) scale(1.15) translateY(2px)'
-})])]), (0, cssr_1.cB)('layout-toggle-button', `
- transform: translateX(50%) translateY(-50%) rotate(180deg);
- `)]), (0, cssr_1.cB)('layout-toggle-button', `
+})])]), (0, cssr_1.cB)('layout-toggle-button', [(0, cssr_1.cB)('base-icon', `
+ transform: rotate(0);
+ `)])]), (0, cssr_1.cB)('layout-toggle-button', `
  transition:
- transform .3s var(--bezier),
- fill .3s var(--bezier);
+ color .3s var(--bezier),
+ right .3s var(--bezier),
+ left .3s var(--bezier),
+ border-color .3s var(--bezier),
+ background-color .3s var(--bezier);
  cursor: pointer;
- width: 36px;
- height: 36px;
+ width: 24px;
+ height: 24px;
  position: absolute;
  top: 50%;
  right: 0;
- fill: var(--toggle-button-color);
- transform: translateX(50%) translateY(-50%) rotate(0);
- `), (0, cssr_1.cB)('layout-toggle-bar', `
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ color: var(--text-color);
+ border: var(--toggle-button-border);
+ background-color: var(--toggle-button-color);
+ box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
+ transform: translateX(50%) translateY(-50%);
+ `, [(0, cssr_1.cB)('base-icon', `
+ transition: transform .3s var(--bezier);
+ transform: rotate(180deg);
+ `)]), (0, cssr_1.cB)('layout-toggle-bar', `
  cursor: pointer;
  height: 72px;
  width: 32px;

package/lib/layout/styles/dark.js

@@ -10,7 +10,7 @@ const layoutDark = {
         Scrollbar: styles_1.scrollbarDark
     },
     self(vars) {
-        const { textColor2, bodyColor, cardColor, dividerColor, scrollbarColor, scrollbarColorHover } = vars;
+        const { textColor2, bodyColor, popoverColor, cardColor, dividerColor, scrollbarColor, scrollbarColorHover } = vars;
         return {
             textColor: textColor2,
             textColorInverted: textColor2,
@@ -28,7 +28,8 @@ const layoutDark = {
             siderBorderColorInverted: dividerColor,
             siderColor: cardColor,
             siderColorInverted: cardColor,
-            siderToggleButtonColor: 'rgba(255, 255, 255, .3)',
+            siderToggleButtonBorder: '1px solid transparent',
+            siderToggleButtonColor: popoverColor,
             siderToggleBarColor: (0, seemly_1.composite)(bodyColor, scrollbarColor),
             siderToggleBarColorHover: (0, seemly_1.composite)(bodyColor, scrollbarColorHover),
             __invertScrollbar: 'false'

package/lib/layout/styles/light.d.ts

@@ -16,6 +16,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     siderBorderColorInverted: string;
     siderColor: string;
     siderColorInverted: string;
+    siderToggleButtonBorder: string;
     siderToggleButtonColor: string;
     siderToggleBarColor: string;
     siderToggleBarColorHover: string;
@@ -39,6 +40,7 @@ declare const layoutLight: import("../../_mixins").Theme<"Layout", {
     siderBorderColorInverted: string;
     siderColor: string;
     siderColorInverted: string;
+    siderToggleButtonBorder: string;
     siderToggleButtonColor: string;
     siderToggleBarColor: string;
     siderToggleBarColorHover: string;

package/lib/layout/styles/light.js

@@ -6,7 +6,7 @@ const common_1 = require("../../_styles/common");
 const styles_1 = require("../../scrollbar/styles");
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
-    const { textColor2, bodyColor, cardColor, dividerColor, actionColor, scrollbarColor, scrollbarColorHover, invertedColor } = vars;
+    const { baseColor, textColor2, bodyColor, cardColor, dividerColor, actionColor, scrollbarColor, scrollbarColorHover, invertedColor } = vars;
     return {
         textColor: textColor2,
         textColorInverted: '#FFF',
@@ -24,7 +24,8 @@ const self = (vars) => {
         siderBorderColorInverted: invertedColor,
         siderColor: cardColor,
         siderColorInverted: invertedColor,
-        siderToggleButtonColor: 'rgba(0, 0, 0, .15)',
+        siderToggleButtonBorder: `1px solid ${dividerColor}`,
+        siderToggleButtonColor: baseColor,
         siderToggleBarColor: (0, seemly_1.composite)(bodyColor, scrollbarColor),
         siderToggleBarColorHover: (0, seemly_1.composite)(bodyColor, scrollbarColorHover),
         // hack for inverted background

package/lib/locales/common/enUS.js

@@ -18,7 +18,7 @@ const enUS = {
     },
     Time: {
         dateFormat: 'yyyy-MM-dd',
-        dateTimeFormat: 'yyyy-MM-dd hh:mm:ss'
+        dateTimeFormat: 'yyyy-MM-dd HH:mm:ss'
     },
     DatePicker: {
         yearFormat: 'yyyy',

package/lib/locales/common/ruRU.js

@@ -18,7 +18,7 @@ const ruRu = {
     },
     Time: {
         dateFormat: 'yyyy-MM-dd',
-        dateTimeFormat: 'yyyy-MM-dd hh:mm:ss'
+        dateTimeFormat: 'yyyy-MM-dd HH:mm:ss'
     },
     DatePicker: {
         yearFormat: 'yyyy',

package/lib/locales/common/ukUA.d.ts

@@ -0,0 +1,3 @@
+import type { NLocale } from './enUS';
+declare const ukUA: NLocale;
+export default ukUA;