adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: css vars

Browse source
This commit is contained in:
luoxiao 2023-11-02 22:01:48 +08:00
parent bde1af3b5c
commit b167a9ca3a
35 changed files with 149 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/alert/alert.css
View file

@ -1,8 +1,8 @@
.melt-alert { .melt-alert {
position: relative; position: relative;
padding: 14px 20px 14px 42px; padding: 14px 20px 14px 42px;
background-color: var(--background-color); background-color: var(--melt-background-color);
border: 1px solid var(--border-color); border: 1px solid var(--melt-border-color);
border-radius: 3px; border-radius: 3px;
line-height: 1.6; line-height: 1.6;
} }
@ -12,7 +12,7 @@
top: 12px; top: 12px;
left: 10px; left: 10px;
font-size: 24px; font-size: 24px;
color: var(--icon-color); color: var(--melt-icon-color);
} }
.melt-alert__header { .melt-alert__header {

6
src/alert/mod.rs
View file

@ -54,15 +54,15 @@ pub fn Alert(
theme.with(|theme| { theme.with(|theme| {
let variant = variant.get(); let variant = variant.get();
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--icon-color: {};", "--melt-icon-color: {};",
variant.theme_icon_color(theme) variant.theme_icon_color(theme)
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color: {};", "--melt-background-color: {};",
variant.theme_background_color(theme) variant.theme_background_color(theme)
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--border-color: {};", "--melt-border-color: {};",
variant.theme_border_color(theme) variant.theme_border_color(theme)
)); ));
}); });

6
src/auto_complete/mod.rs
View file

@ -79,7 +79,11 @@ pub fn AutoComplete(
<div <div
class="melt-auto-complete__menu" class="melt-auto-complete__menu"
style=move || { style=move || {
if is_show_menu.get() { menu_css_vars.get() } else { "display: none;".to_string() } if is_show_menu.get() {
menu_css_vars.get()
} else {
"display: none;".to_string()
}
} }
ref=auto_complete_menu_ref ref=auto_complete_menu_ref

5
src/avatar/mod.rs
View file

@ -31,10 +31,9 @@ pub fn Avatar(
<span class="melt-avatar" style=move || css_vars.get()> <span class="melt-avatar" style=move || css_vars.get()>
{move || { {move || {
let src = src.get(); let src = src.get();
(!src.is_empty()).then(|| view! { (!src.is_empty()).then(|| view! { <img src=src/> })
<img src=src />
})
}} }}
</span> </span>
} }
} }

4
src/badge/badge.css
View file

@ -4,8 +4,8 @@
} }
.melt-badge__sup { .melt-badge__sup {
position: absolute; position: absolute;
color: var(--font-color); color: var(--melt-font-color);
background-color: var(--background-color); background-color: var(--melt-background-color);
} }
.melt-badge__sup--value { .melt-badge__sup--value {
top: -9px; top: -9px;

4
src/badge/mod.rs
View file

@ -31,10 +31,10 @@ pub fn Badge(
mount_style("badge", include_str!("./badge.css")); mount_style("badge", include_str!("./badge.css"));
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
css_vars.push_str("--font-color: #fff;"); css_vars.push_str("--melt-font-color: #fff;");
theme.with(|theme| { theme.with(|theme| {
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color: {};", "--melt-background-color: {};",
color.get().theme_color(theme) color.get().theme_color(theme)
)); ));
}); });

18
src/button/button.css
View file

@ -1,9 +1,9 @@
.melt-button { .melt-button {
height: 34px; height: 34px;
padding: 0 16px; padding: 0 16px;
background-color: var(--background-color); background-color: var(--melt-background-color);
color: var(--font-color); color: var(--melt-font-color);
border: 1px solid var(--border-color); border: 1px solid var(--melt-border-color);
border-radius: 5px; border-radius: 5px;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -13,8 +13,8 @@
} }
.melt-button:hover { .melt-button:hover {
border-color: var(--border-color-hover); border-color: var(--melt-border-color-hover);
background-color: var(--background-color-hover); background-color: var(--melt-background-color-hover);
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
@ -22,8 +22,8 @@
.melt-button:active:not(.melt-button--disabled) { .melt-button:active:not(.melt-button--disabled) {
transition: all 0.3s; transition: all 0.3s;
border-color: var(--border-color-hover); border-color: var(--melt-border-color-hover);
background-color: var(--background-color-active); background-color: var(--melt-background-color-active);
} }
.melt-button--text, .melt-button--text,
@ -32,7 +32,7 @@
} }
.melt-button--text:hover { .melt-button--text:hover {
color: var(--font-color-hover); color: var(--melt-font-color-hover);
} }
.melt-button--link { .melt-button--link {
@ -41,7 +41,7 @@
} }
.melt-button--link:hover { .melt-button--link:hover {
color: var(--font-color-hover); color: var(--melt-font-color-hover);
} }
.melt-button--round { .melt-button--round {

30
src/button/mod.rs
View file

@ -76,28 +76,30 @@ pub fn Button(
if variant.get() == ButtonVariant::Primary { if variant.get() == ButtonVariant::Primary {
let bg_color_hover = color.get().theme_color_hover(theme); let bg_color_hover = color.get().theme_color_hover(theme);
let bg_color_active = color.get().theme_color_active(theme); let bg_color_active = color.get().theme_color_active(theme);
css_vars.push_str(&format!("--background-color: {bg_color};")); css_vars.push_str(&format!("--melt-background-color: {bg_color};"));
css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};")); css_vars.push_str(&format!("--melt-background-color-hover: {bg_color_hover};"));
css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));
css_vars.push_str("--font-color: #fff;");
css_vars.push_str(&format!("--border-color: {bg_color};"));
css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
css_vars.push_str(&format!("--melt-ripple-color: {bg_color};"));
} else if variant.get() == ButtonVariant::Text {
css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color-hover: {};", "--melt-background-color-active: {bg_color_active};"
));
css_vars.push_str("--melt-font-color: #fff;");
css_vars.push_str(&format!("--melt-border-color: {bg_color};"));
css_vars.push_str(&format!("--melt-border-color-hover: {bg_color};"));
css_vars.push_str(&format!("--melt-melt-ripple-color: {bg_color};"));
} else if variant.get() == ButtonVariant::Text {
css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
css_vars.push_str(&format!(
"--melt-background-color-hover: {};",
theme.button.color_text_hover theme.button.color_text_hover
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color-active: {};", "--melt-background-color-active: {};",
theme.button.color_text_active theme.button.color_text_active
)); ));
css_vars.push_str(&format!("--melt-ripple-color: #0000;")); css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
} else { } else {
css_vars.push_str(&format!("--font-color-hover: {bg_color};")); css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
css_vars.push_str("--border-color: #555a;"); css_vars.push_str("--melt-border-color: #555a;");
css_vars.push_str("--border-color-hover: #555;"); css_vars.push_str("--melt-border-color-hover: #555;");
css_vars.push_str(&format!("--melt-ripple-color: #0000;")); css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
} }
}); });

4
src/checkbox/checkbox.css
View file

@ -20,10 +20,10 @@
} }
.melt-checkbox:hover .melt-checkbox__dot, .melt-checkbox:hover .melt-checkbox__dot,
.melt-checkbox--checked .melt-checkbox__dot { .melt-checkbox--checked .melt-checkbox__dot {
border-color: var(--background-color-checked); border-color: var(--melt-background-color-checked);
} }
.melt-checkbox--checked .melt-checkbox__dot { .melt-checkbox--checked .melt-checkbox__dot {
background-color: var(--background-color-checked); background-color: var(--melt-background-color-checked);
} }
.melt-checkbox__label { .melt-checkbox__label {

9
src/checkbox/mod.rs
View file

@ -23,9 +23,12 @@ pub fn Checkbox(
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
let theme = theme.get(); theme.with(|theme| {
let bg_color = theme.common.color_primary; css_vars.push_str(&format!(
css_vars.push_str(&format!("--background-color-checked: {bg_color};")); "--melt-background-color-checked: {};",
theme.common.color_primary
));
});
css_vars css_vars
}); });

6
src/color_picker/mod.rs
View file

@ -108,7 +108,11 @@ pub fn ColorPicker(#[prop(optional, into)] value: MaybeRwSignal<RGBA>) -> impl I
class="melt-color-picker-popover" class="melt-color-picker-popover"
ref=popover_ref ref=popover_ref
style=move || { style=move || {
if is_show_popover.get() { popover_css_vars.get() } else { "display: none".to_string() } if is_show_popover.get() {
popover_css_vars.get()
} else {
"display: none".to_string()
}
} }
> >

15
src/input/mod.rs
View file

@ -94,23 +94,20 @@ pub fn Input(
value_trigger.track(); value_trigger.track();
value.get() value.get()
} }
on:input=on_input on:input=on_input
on:focus=on_internal_focus on:focus=on_internal_focus
on:blur=on_internal_blur on:blur=on_internal_blur
class="melt-input__input-el" class="melt-input__input-el"
placeholder=move || placeholder.get() placeholder=move || placeholder.get()
/> />
{
if let Some(suffix) = input_suffix { {if let Some(suffix) = input_suffix {
view! { view! { <div class="melt-input__suffix">{(suffix.children)()}</div> }.into()
<div class="melt-input__suffix">
{(suffix.children)()}
</div>
}.into()
} else { } else {
None None
} }}
}
</div> </div>
} }
} }

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

@ -2,5 +2,5 @@
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: 500;
color: var(--font-color); color: var(--melt-font-color);
} }

8
src/menu/menu-item.css
View file

@ -1,7 +1,7 @@
.melt-menu-item__content { .melt-menu-item__content {
margin: 0.3rem 0.4rem; margin: 0.3rem 0.4rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
color: var(--font-color); color: var(--melt-font-color);
cursor: pointer; cursor: pointer;
border-radius: 0.25rem; border-radius: 0.25rem;
font-size: 0.875rem; font-size: 0.875rem;
@ -12,10 +12,10 @@
} }
.melt-menu-item__content:hover:not(.melt-menu-item__content--selected) { .melt-menu-item__content:hover:not(.melt-menu-item__content--selected) {
background-color: var(--bg-color-hover); background-color: var(--melt-background-color-hover);
} }
.melt-menu-item__content--selected { .melt-menu-item__content--selected {
color: var(--font-color-active); color: var(--melt-font-color-active);
background-color: var(--bg-color); background-color: var(--melt-background-color);
} }

2
src/menu/menu_group.rs
View file

@ -8,7 +8,7 @@ pub fn MenuGroup(#[prop(into)] label: String, children: Children) -> impl IntoVi
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
theme.with(|theme| { theme.with(|theme| {
css_vars.push_str(&format!("--font-color: {};", theme.menu.group_color)); css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.group_color));
}); });
css_vars css_vars
}); });

11
src/menu/menu_item.rs
View file

@ -17,15 +17,16 @@ pub fn MenuItem(
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
let theme = theme.get(); theme.with(|theme| {
let font_color = theme.common.color_primary.clone(); let font_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--font-color-active: {font_color};")); css_vars.push_str(&format!("--melt-font-color-active: {font_color};"));
css_vars.push_str(&format!("--font-color: {};", theme.menu.color)); css_vars.push_str(&format!("--melt-font-color: {};", theme.menu.color));
css_vars.push_str(&format!("--bg-color: {font_color}1a;")); css_vars.push_str(&format!("--melt-background-color: {font_color}1a;"));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--bg-color-hover: {};", "--melt-background-color-hover: {};",
theme.menu.item_color_hover theme.menu.item_color_hover
)); ));
});
css_vars css_vars
}); });
view! { view! {

1
src/message/message_provider.rs
View file

@ -34,6 +34,7 @@ pub fn MessageProvider(children: Children) -> impl IntoView {
} }
} }
/> />
</div> </div>
</Teleport> </Teleport>
} }

6
src/mobile/tabbar/mod.rs
View file

@ -43,7 +43,11 @@ pub fn Tabbar(
} }
}); });
provide_context(tabbar_injection_key); provide_context(tabbar_injection_key);
view! { <div class="melt-tabbar" style=move || css_vars.get()>{children()}</div> } view! {
<div class="melt-tabbar" style=move || css_vars.get()>
{children()}
</div>
}
} }
#[derive(Clone)] #[derive(Clone)]

2
src/mobile/tabbar/tabbar-item.css
View file

@ -8,7 +8,7 @@
} }
.melt-tabbar-item--selected { .melt-tabbar-item--selected {
color: var(--font-color-selected) color: var(--melt-font-color-selected)
} }
.melt-tabbar-item__content { .melt-tabbar-item__content {

5
src/mobile/tabbar/tabbar_item.rs
View file

@ -20,9 +20,10 @@ pub fn TabbarItem(
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
let theme = theme.get(); theme.with(|theme| {
let font_color = theme.common.color_primary.clone(); let font_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--font-color-selected: {font_color};")); css_vars.push_str(&format!("--melt-font-color-selected: {font_color};"));
});
css_vars css_vars
}); });

10
src/progress/mod.rs
View file

@ -15,9 +15,7 @@ pub fn Progress(
view! { view! {
<div class="melt-progress"> <div class="melt-progress">
<span class="melt-progress__tip-left"> <span class="melt-progress__tip-left">
<Show when=move || left_tip.with(|v| !v.is_empty())> <Show when=move || left_tip.with(|v| !v.is_empty())>{move || left_tip.get()}</Show>
{move || left_tip.get()}
</Show>
</span> </span>
<span class="melt-progress__progress"> <span class="melt-progress__progress">
<span class="melt-progress__progress-inner" style=style> <span class="melt-progress__progress-inner" style=style>
@ -25,9 +23,9 @@ pub fn Progress(
</span> </span>
</span> </span>
<span class="melt-progress__tip-right"> <span class="melt-progress__tip-right">
<Show when=move || right_tip.with(|v| !v.is_empty())> <Show when=move || {
{move || right_tip.get()} right_tip.with(|v| !v.is_empty())
</Show> }>{move || right_tip.get()}</Show>
</span> </span>
</div> </div>
} }

2
src/radio/mod.rs
View file

@ -17,7 +17,7 @@ pub fn Radio(
let mut css_vars = String::new(); let mut css_vars = String::new();
theme.with(|theme| { theme.with(|theme| {
let bg_color = theme.common.color_primary.clone(); let bg_color = theme.common.color_primary.clone();
css_vars.push_str(&format!("--background-color-checked: {bg_color};")); css_vars.push_str(&format!("--melt-background-color-checked: {bg_color};"));
}); });
css_vars css_vars

4
src/radio/radio.css
View file

@ -21,7 +21,7 @@
.melt-radio:hover .melt-radio__dot, .melt-radio:hover .melt-radio__dot,
.melt-radio--checked .melt-radio__dot { .melt-radio--checked .melt-radio__dot {
border-color: var(--background-color-checked); border-color: var(--melt-background-color-checked);
} }
.melt-radio--checked .melt-radio__dot::before { .melt-radio--checked .melt-radio__dot::before {
@ -31,7 +31,7 @@
bottom: 3px; bottom: 3px;
left: 3px; left: 3px;
right: 3px; right: 3px;
background-color: var(--background-color-checked); background-color: var(--melt-background-color-checked);
border-radius: 50%; border-radius: 50%;
} }

6
src/select/mod.rs
View file

@ -125,11 +125,7 @@ where
<div <div
class="melt-select-menu" class="melt-select-menu"
style=move || { style=move || {
if is_show_menu.get() { if is_show_menu.get() { menu_css_vars.get() } else { "display: none;".into() }
menu_css_vars.get()
} else {
"display: none;".into()
}
} }
ref=menu_ref ref=menu_ref

4
src/skeleton/mod.rs
View file

@ -28,11 +28,11 @@ pub fn Skeleton(
theme.with(|theme| { theme.with(|theme| {
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color-start: {};", "--melt-background-color-start: {};",
theme.skeletion.background_color_start theme.skeletion.background_color_start
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color-end: {};", "--melt-background-color-end: {};",
theme.skeletion.background_color_end theme.skeletion.background_color_end
)); ));
}); });

8
src/skeleton/skeleton.css vendored
View file

@ -1,13 +1,13 @@
.melt-skeleton { .melt-skeleton {
width: 100%; width: 100%;
height: 1em; height: 1em;
background-color: var(--background-color-start); background-color: var(--melt-background-color-start);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--background-color-start) 25%, var(--melt-background-color-start) 25%,
var(--background-color-end) 37%, var(--melt-background-color-end) 37%,
var(--background-color-start) 63% var(--melt-background-color-start) 63%
); );
animation: meltSkeletonLoading 1.4s ease infinite; animation: meltSkeletonLoading 1.4s ease infinite;
background-size: 400% 100%; background-size: 400% 100%;

14
src/table/mod.rs
View file

@ -17,15 +17,21 @@ pub fn Table(
let mut css_vars = String::new(); let mut css_vars = String::new();
theme.with(|theme| { theme.with(|theme| {
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color: {};", "--melt-background-color: {};",
theme.table.background_color theme.table.background_color
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color-striped: {};", "--melt-background-color-striped: {};",
theme.table.background_color_striped theme.table.background_color_striped
)); ));
css_vars.push_str(&format!("--border-color: {};", theme.table.border_color)); css_vars.push_str(&format!(
css_vars.push_str(&format!("--border-radius: {};", theme.common.border_radius)); "--melt-border-color: {};",
theme.table.border_color
));
css_vars.push_str(&format!(
"--melt-border-radius: {};",
theme.common.border_radius
));
}); });
css_vars css_vars

14
src/table/table.css
View file

@ -2,21 +2,21 @@
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
background-color: var(--background-color); background-color: var(--melt-background-color);
border: 1px solid var(--border-color); border: 1px solid var(--melt-border-color);
border-radius: var(--border-radius); border-radius: var(--melt-border-radius);
} }
.melt-table th { .melt-table th {
text-align: inherit; text-align: inherit;
background-color: var(--background-color-striped); background-color: var(--melt-background-color-striped);
} }
.melt-table td, .melt-table td,
.melt-table th { .melt-table th {
padding: 12px; padding: 12px;
border-right: 1px solid var(--border-color); border-right: 1px solid var(--melt-border-color);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--melt-border-color);
} }
.melt-table.melt-table--single-row td, .melt-table.melt-table--single-row td,
@ -35,5 +35,5 @@
border-bottom: none; border-bottom: none;
} }
.melt-table tr { .melt-table tr {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--melt-border-color);
} }

6
src/tabs/mod.rs
View file

@ -24,11 +24,12 @@ pub fn Tabs(
let theme = use_theme(Theme::light); let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| { let css_vars = create_memo(move |_| {
let mut css_vars = String::new(); let mut css_vars = String::new();
let theme = theme.get(); theme.with(|theme| {
let color_primary = theme.common.color_primary.clone(); let color_primary = theme.common.color_primary.clone();
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--label-active-background-color: {color_primary};" "--melt-label-active-background-color: {color_primary};"
)); ));
});
css_vars css_vars
}); });
@ -90,6 +91,7 @@ pub fn Tabs(
let key = key.clone(); let key = key.clone();
move |_| value.set(key.clone()) move |_| value.set(key.clone())
} }
ref=label_ref ref=label_ref
> >
{label} {label}

2
src/tabs/tabs.css
View file

@ -13,7 +13,7 @@
.melt-tabs-label__line { .melt-tabs-label__line {
position: absolute; position: absolute;
height: 3px; height: 3px;
background-color: var(--label-active-background-color); background-color: var(--melt-label-active-background-color);
border-radius: 3px; border-radius: 3px;
bottom: 0; bottom: 0;
left: 0; left: 0;

6
src/tag/mod.rs
View file

@ -52,15 +52,15 @@ pub fn Tag(
theme.with(|theme| { theme.with(|theme| {
let variant = variant.get(); let variant = variant.get();
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--font-color: {};", "--melt-font-color: {};",
variant.theme_font_color(theme) variant.theme_font_color(theme)
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--background-color: {};", "--melt-background-color: {};",
variant.theme_background_color(theme) variant.theme_background_color(theme)
)); ));
css_vars.push_str(&format!( css_vars.push_str(&format!(
"--border-color: {};", "--melt-border-color: {};",
variant.theme_border_color(theme) variant.theme_border_color(theme)
)); ));
}); });

6
src/tag/tag.css
View file

@ -4,8 +4,8 @@
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
padding: 0 10px; padding: 0 10px;
background-color: var(--background-color); background-color: var(--melt-background-color);
color: var(--font-color); color: var(--melt-font-color);
border: 1px solid var(--border-color); border: 1px solid var(--melt-border-color);
border-radius: 3px; border-radius: 3px;
} }

2
src/upload/upload-dragger.css
View file

@ -1,4 +1,5 @@
.melt-upload-dragger { .melt-upload-dragger {
width: 100%;
padding: 20px; padding: 20px;
background-color: var(--melt-background-color); background-color: var(--melt-background-color);
border: 1px dashed var(--melt-border-color); border: 1px dashed var(--melt-border-color);
@ -6,6 +7,7 @@
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: border 0.3s; transition: border 0.3s;
box-sizing: border-box;
} }
.melt-upload-dragger:hover, .melt-upload-dragger:hover,
.melt-upload--drag-over .melt-upload-dragger { .melt-upload--drag-over .melt-upload-dragger {

4
src/upload/upload.css
View file

@ -3,3 +3,7 @@
height: 0; height: 0;
opacity: 0; opacity: 0;
} }
.melt-upload__trigger {
display: inline-block;
}

10
src/wave/mod.rs
View file

@ -38,7 +38,13 @@ pub fn Wave(#[prop(optional)] comp_ref: ComponentRef<WaveRef>) -> impl IntoView
}); });
comp_ref.load(WaveRef { play }); comp_ref.load(WaveRef { play });
view! { view! {
<div class="melt-wave" class=("melt-wave--active", move || animation_timeout_handle.with(|handle| handle.is_some())) ref=wave_ref> <div
</div> class="melt-wave"
class=(
"melt-wave--active",
move || animation_timeout_handle.with(|handle| handle.is_some()),
)
ref=wave_ref
></div>
} }
} }