From df1584a68cf60b8a0599bc8bb3839f5106b66992 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sun, 11 Aug 2024 23:36:37 +0800
Subject: [PATCH] feat: menu style

---
 README.md                             |  2 +-
 demo/src/components/switch_version.rs |  3 +++
 thaw/src/menu/menu-item.css           | 15 ++++++++----
 thaw/src/menu/menu.css                | 34 +++++++++------------------
 4 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index e1fd934..3d33314 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 ## Documentation & Community
 
-[https://next-thawui.vercel.app](https://next-thawui.vercel.app)
+[https://thawui.vercel.app](https://thawui.vercel.app)
 
 [Discord](https://discord.com/channels/1031524867910148188/1270735289437913108)
 
diff --git a/demo/src/components/switch_version.rs b/demo/src/components/switch_version.rs
index 3b8c6c2..439c1c7 100644
--- a/demo/src/components/switch_version.rs
+++ b/demo/src/components/switch_version.rs
@@ -5,6 +5,9 @@ use thaw::*;
 pub fn SwitchVersion() -> impl IntoView {
     let options = vec![
         ("main", "https://thawui.vercel.app"),
+        ("0.3.3", "https://thaw-85fsrigp0-thaw.vercel.app"),
+        ("0.3.2", "https://thaw-czldv7au5-thaw.vercel.app"),
+        ("0.3.1", "https://thaw-bwh2r7eok-thaw.vercel.app"),
         ("0.3.0", "https://thaw-gxcwse9r5-thaw.vercel.app"),
         ("0.2.6", "https://thaw-mzh1656cm-thaw.vercel.app"),
         ("0.2.5", "https://thaw-8og1kv8zs-thaw.vercel.app"),
diff --git a/thaw/src/menu/menu-item.css b/thaw/src/menu/menu-item.css
index de62f5b..2f52031 100644
--- a/thaw/src/menu/menu-item.css
+++ b/thaw/src/menu/menu-item.css
@@ -1,13 +1,20 @@
-.thaw-menu-item{
-    padding: 6px 5px;
-    border-radius: 2px;
-    cursor: pointer;
+.thaw-menu-item {
     display: flex;
     align-items: center;
+    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalS);
+    color: var(--colorNeutralForeground1);
+    cursor: pointer;
+    border-radius: var(--borderRadiusMedium);
 }
 
 .thaw-menu-item:hover:not(.thaw-menu-item--disabled) {
     background-color: var(--colorNeutralBackground1Hover);
+    color: var(--colorNeutralForeground1Hover);
+}
+
+.thaw-menu-item:active:not(.thaw-menu-item--disabled) {
+    background-color: var(--colorNeutralBackground1Pressed);
+    color: var(--colorNeutralForeground1Pressed);
 }
 
 .thaw-menu-item.thaw-menu-item--disabled {
diff --git a/thaw/src/menu/menu.css b/thaw/src/menu/menu.css
index 90de3a4..fa8b4d9 100644
--- a/thaw/src/menu/menu.css
+++ b/thaw/src/menu/menu.css
@@ -1,42 +1,40 @@
 .thaw-menu {
-    padding: 4px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--spacingHorizontalXXS);
+    max-height: 80vh;
+    padding: var(--spacingHorizontalXS);
     background-color: var(--colorNeutralBackground1);
     color: var(--colorNeutralForeground1);
     border-radius: var(--borderRadiusMedium);
+    box-shadow: var(--shadow16);
+    overflow-y: auto;
     transform-origin: inherit;
-    position: relative;
 }
 
 [data-thaw-placement="top-start"] > .thaw-menu,
 [data-thaw-placement="top-end"] > .thaw-menu,
 [data-thaw-placement="top"] > .thaw-menu {
     margin-bottom: 4px;
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-        0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 [data-thaw-placement="bottom-start"] > .thaw-menu,
 [data-thaw-placement="bottom-end"] > .thaw-menu,
 [data-thaw-placement="bottom"] > .thaw-menu {
     margin-top: 4px;
-    box-shadow: 0 -3px 6px -4px rgba(0, 0, 0, 0.12),
-        0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 [data-thaw-placement="left-start"] > .thaw-menu,
 [data-thaw-placement="left-end"] > .thaw-menu,
 [data-thaw-placement="left"] > .thaw-menu {
     margin-right: 4px;
-    box-shadow: 3px 0 6px -4px rgba(0, 0, 0, 0.12),
-        6px 0 16px 0 rgba(0, 0, 0, 0.08), 9px 0 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 [data-thaw-placement="right-start"] > .thaw-menu,
 [data-thaw-placement="right-end"] > .thaw-menu,
 [data-thaw-placement="right"] > .thaw-menu {
     margin-left: 4px;
-    box-shadow: -3px 0 6px -4px rgba(0, 0, 0, 0.12),
-        -6px 0 16px 0 rgba(0, 0, 0, 0.08), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 .thaw-menu.dropdown-transition-enter-from,
@@ -51,18 +49,8 @@
     opacity: 1;
 }
 
-.thaw-menu.dropdown-transition-enter-active {
-    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.15s cubic-bezier(0, 0, 0.2, 1),
-        transform 0.15s cubic-bezier(0, 0, 0.2, 1);
-}
-
+.thaw-menu.dropdown-transition-enter-active,
 .thaw-menu.dropdown-transition-leave-active {
-    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
-        transform 0.15s cubic-bezier(0.4, 0, 1, 1);
+    transition: opacity var(--durationNormal) var(--curveDecelerateMid),
+        transform var(--durationNormal) var(--curveDecelerateMid);
 }