feat(component): mobile menu support (#7892)

packages/frontend/component/src/ui/menu/mobile/styles.css.ts

@@ -0,0 +1,79 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+import { modalContent } from '../../modal/styles.css';
+import { bgColor } from '../styles.css';
+
+// To override desktop menu style defined in '../styles.css.ts'
+
+export const mobileMenuModal = style({
+  selectors: {
+    // to make sure it will override the desktop modal style
+    [`&.${modalContent}`]: {
+      backgroundColor: cssVarV2('layer/background/overlayPanel'),
+      boxShadow: cssVar('menuShadow'),
+      userSelect: 'none',
+      borderRadius: 24,
+      minHeight: 0,
+      padding: 0,
+      overflow: 'hidden',
+    },
+  },
+});
+
+export const slider = style({
+  display: 'flex',
+  alignItems: 'start',
+  transition: 'all 0.23s',
+});
+
+export const menuContent = style({
+  boxSizing: 'border-box',
+  fontSize: 17,
+  fontWeight: '400',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 0,
+  width: '100%',
+  flexShrink: 0,
+  padding: '13px 0px 13px 0px',
+});
+
+export const mobileMenuItem = style({
+  padding: '10px 20px',
+  borderRadius: 0,
+  ':hover': {
+    vars: {
+      [bgColor]: 'transparent',
+    },
+  },
+  ':active': {
+    vars: {
+      [bgColor]: cssVar('hoverColor'),
+    },
+  },
+  selectors: {
+    '&.danger:hover': {
+      vars: { [bgColor]: 'transparent' },
+    },
+    '&.danger:active': {
+      vars: { [bgColor]: cssVar('backgroundErrorColor') },
+    },
+    '&.warning:hover': {
+      vars: { [bgColor]: 'transparent' },
+    },
+    '&.warning:active': {
+      vars: { [bgColor]: cssVar('backgroundWarningColor') },
+    },
+  },
+});
+
+export const backButton = style({
+  height: 42,
+  alignSelf: 'start',
+  fontWeight: 600,
+  fontSize: 17,
+  paddingLeft: 0,
+  marginLeft: 20,
+});