adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -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!(
r#"
let value = create_rw_signal(0);
let value_f64 = create_rw_signal(0.0);
view! {
<Space vertical=true>
<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! {
<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()

6
src/input/input.css
View file

@ -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;

6
src/input/mod.rs
View file

@ -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 || {

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

@ -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);
}