From c8c09174ad8754566f182359b9714cdadd7aa398 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Fri, 3 Nov 2023 13:58:29 +0800
Subject: [PATCH] feat: style optimization

---
 demo/src/pages/input_number/mod.rs | 1 +
 demo/src/pages/mobile.rs           | 2 +-
 src/input/input.css                | 6 ++++++
 src/input/mod.rs                   | 6 +++++-
 src/menu/menu-group.css            | 2 +-
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/demo/src/pages/input_number/mod.rs b/demo/src/pages/input_number/mod.rs
index 2537524..cf60375 100644
--- a/demo/src/pages/input_number/mod.rs
+++ b/demo/src/pages/input_number/mod.rs
@@ -20,6 +20,7 @@ pub fn InputNumberPage() -> impl IntoView {
                     html=highlight_str!(
                         r#"
                     let value = create_rw_signal(0);
+                    let value_f64 = create_rw_signal(0.0);
                     view! {
                         <Space vertical=true>
                             <InputNumber value step=1/>
diff --git a/demo/src/pages/mobile.rs b/demo/src/pages/mobile.rs
index bc4f28a..c2592cf 100644
--- a/demo/src/pages/mobile.rs
+++ b/demo/src/pages/mobile.rs
@@ -13,7 +13,7 @@ pub fn MobilePage(path: &'static str) -> impl IntoView {
         })
     });
     view! {
-        <div style="height: 100vh; width: 400px; text-align: center">
+        <div style="width: 400px; text-align: center">
             <iframe
                 src=move || src.get()
                 style=move || style.get()
diff --git a/src/input/input.css b/src/input/input.css
index 8bc13c5..9614577 100644
--- a/src/input/input.css
+++ b/src/input/input.css
@@ -12,9 +12,15 @@
     transition: all 0.3s;
 }
 
+.melt-input--focus,
 .melt-input:hover {
     border-color: var(--melt-border-color-hover);
 }
+
+.melt-input--focus {
+    box-shadow: 0 0 0 2px var(--melt-box-shadow-color);
+}
+
 .melt-input__input-el {
     width: 100%;
     height: 30px;
diff --git a/src/input/mod.rs b/src/input/mod.rs
index 2cb6cd7..d4f4448 100644
--- a/src/input/mod.rs
+++ b/src/input/mod.rs
@@ -52,12 +52,15 @@ pub fn Input(
         }
         value.set(input_value);
     };
+    let is_focus = create_rw_signal(false);
     let on_internal_focus = move |ev| {
+        is_focus.set(true);
         if let Some(on_focus) = on_focus.as_ref() {
             on_focus.call(ev);
         }
     };
     let on_internal_blur = move |ev| {
+        is_focus.set(false);
         if let Some(on_blur) = on_blur.as_ref() {
             on_blur.call(ev);
         }
@@ -68,6 +71,7 @@ pub fn Input(
         theme.with(|theme| {
             let border_color_hover = theme.common.color_primary.clone();
             css_vars.push_str(&format!("--melt-border-color-hover: {border_color_hover};"));
+            css_vars.push_str(&format!("--melt-box-shadow-color: {border_color_hover}33;"));
             let border_radius = theme.common.border_radius.clone();
             css_vars.push_str(&format!("--melt-border-radius: {border_radius};"));
             css_vars.push_str(&format!(
@@ -87,7 +91,7 @@ pub fn Input(
         css_vars
     });
     view! {
-        <div class="melt-input" style=move || css_vars.get()>
+        <div class="melt-input" class=("melt-input--focus", move || is_focus.get()) style=move || css_vars.get()>
             <input
                 type=move || variant.get().as_str()
                 prop:value=move || {
diff --git a/src/menu/menu-group.css b/src/menu/menu-group.css
index a2105db..018e702 100644
--- a/src/menu/menu-group.css
+++ b/src/menu/menu-group.css
@@ -1,6 +1,6 @@
 .melt-menu-group {
     padding: 0.85rem 1.15em 0.1rem;
     font-size: 0.86rem;
-    font-weight: 500;
+    font-weight: bold;
     color: var(--melt-font-color);
 }