adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-02-02 08:34:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: style optimization

Browse source
This commit is contained in:
luoxiao 2023-11-03 13:58:29 +08:00
parent b167a9ca3a
commit c8c09174ad
5 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/src/pages/input_number/mod.rs
View file

@ -20,6 +20,7 @@ pub fn InputNumberPage() -> impl IntoView {
html=highlight_str!( html=highlight_str!(
r#" r#"
let value = create_rw_signal(0); let value = create_rw_signal(0);
let value_f64 = create_rw_signal(0.0);
view! { view! {
<Space vertical=true> <Space vertical=true>
<InputNumber value step=1/> <InputNumber value step=1/>

2
demo/src/pages/mobile.rs
View file

@ -13,7 +13,7 @@ pub fn MobilePage(path: &'static str) -> impl IntoView {
}) })
}); });
view! { view! {
<div style="height: 100vh; width: 400px; text-align: center"> <div style="width: 400px; text-align: center">
<iframe <iframe
src=move || src.get() src=move || src.get()
style=move || style.get() style=move || style.get()

6
src/input/input.css
View file

@ -12,9 +12,15 @@
transition: all 0.3s; transition: all 0.3s;
} }
.melt-input--focus,
.melt-input:hover { .melt-input:hover {
border-color: var(--melt-border-color-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 { .melt-input__input-el {
width: 100%; width: 100%;
height: 30px; height: 30px;

6
src/input/mod.rs
View file

@ -52,12 +52,15 @@ pub fn Input(
} }
value.set(input_value); value.set(input_value);
}; };
let is_focus = create_rw_signal(false);
let on_internal_focus = move |ev| { let on_internal_focus = move |ev| {
is_focus.set(true);
if let Some(on_focus) = on_focus.as_ref() { if let Some(on_focus) = on_focus.as_ref() {
on_focus.call(ev); on_focus.call(ev);
} }
}; };
let on_internal_blur = move |ev| { let on_internal_blur = move |ev| {
is_focus.set(false);
if let Some(on_blur) = on_blur.as_ref() { if let Some(on_blur) = on_blur.as_ref() {
on_blur.call(ev); on_blur.call(ev);
} }
@ -68,6 +71,7 @@ pub fn Input(
theme.with(|theme| { theme.with(|theme| {
let border_color_hover = theme.common.color_primary.clone(); 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-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(); let border_radius = theme.common.border_radius.clone();
css_vars.push_str(&format!("--melt-border-radius: {border_radius};")); css_vars.push_str(&format!("--melt-border-radius: {border_radius};"));
css_vars.push_str(&format!( css_vars.push_str(&format!(
@ -87,7 +91,7 @@ pub fn Input(
css_vars css_vars
}); });
view! { 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 <input
type=move || variant.get().as_str() type=move || variant.get().as_str()
prop:value=move || { prop:value=move || {

2
src/menu/menu-group.css
View file

@ -1,6 +1,6 @@
.melt-menu-group { .melt-menu-group {
padding: 0.85rem 1.15em 0.1rem; padding: 0.85rem 1.15em 0.1rem;
font-size: 0.86rem; font-size: 0.86rem;
font-weight: 500; font-weight: bold;
color: var(--melt-font-color); color: var(--melt-font-color);
} }