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

6
src/alert/mod.rs
View file

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

6
src/auto_complete/mod.rs
View file

@ -79,7 +79,11 @@ pub fn AutoComplete(
<div
class="melt-auto-complete__menu"
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

5
src/avatar/mod.rs
View file

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

4
src/badge/badge.css
View file

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

4
src/badge/mod.rs
View file

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

18
src/button/button.css
View file

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

30
src/button/mod.rs
View file

@ -76,28 +76,30 @@ pub fn Button(
if variant.get() == ButtonVariant::Primary {
let bg_color_hover = color.get().theme_color_hover(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!("--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!("--melt-background-color: {bg_color};"));
css_vars.push_str(&format!("--melt-background-color-hover: {bg_color_hover};"));
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
));
css_vars.push_str(&format!(
"--background-color-active: {};",
"--melt-background-color-active: {};",
theme.button.color_text_active
));
css_vars.push_str(&format!("--melt-ripple-color: #0000;"));
} else {
css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
css_vars.push_str("--border-color: #555a;");
css_vars.push_str("--border-color-hover: #555;");
css_vars.push_str(&format!("--melt-font-color-hover: {bg_color};"));
css_vars.push_str("--melt-border-color: #555a;");
css_vars.push_str("--melt-border-color-hover: #555;");
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--checked .melt-checkbox__dot {
border-color: var(--background-color-checked);
border-color: var(--melt-background-color-checked);
}
.melt-checkbox--checked .melt-checkbox__dot {
background-color: var(--background-color-checked);
background-color: var(--melt-background-color-checked);
}
.melt-checkbox__label {

9
src/checkbox/mod.rs
View file

@ -23,9 +23,12 @@ pub fn Checkbox(
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
let theme = theme.get();
let bg_color = theme.common.color_primary;
css_vars.push_str(&format!("--background-color-checked: {bg_color};"));
theme.with(|theme| {
css_vars.push_str(&format!(
"--melt-background-color-checked: {};",
theme.common.color_primary
));
});
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"
ref=popover_ref
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.get()
}
on:input=on_input
on:focus=on_internal_focus
on:blur=on_internal_blur
class="melt-input__input-el"
placeholder=move || placeholder.get()
/>
{
if let Some(suffix) = input_suffix {
view! {
<div class="melt-input__suffix">
{(suffix.children)()}
</div>
}.into()
{if let Some(suffix) = input_suffix {
view! { <div class="melt-input__suffix">{(suffix.children)()}</div> }.into()
} else {
None
}
}
}}
</div>
}
}

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

@ -2,5 +2,5 @@
padding: 0.85rem 1.15em 0.1rem;
font-size: 0.86rem;
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 {
margin: 0.3rem 0.4rem;
padding: 0.5rem 0.75rem;
color: var(--font-color);
color: var(--melt-font-color);
cursor: pointer;
border-radius: 0.25rem;
font-size: 0.875rem;
@ -12,10 +12,10 @@
}
.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 {
color: var(--font-color-active);
background-color: var(--bg-color);
color: var(--melt-font-color-active);
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 mut css_vars = String::new();
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
});

11
src/menu/menu_item.rs
View file

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

1
src/message/message_provider.rs
View file

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

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

@ -43,7 +43,11 @@ pub fn Tabbar(
}
});
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)]

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

@ -8,7 +8,7 @@
}
.melt-tabbar-item--selected {
color: var(--font-color-selected)
color: var(--melt-font-color-selected)
}
.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 mut css_vars = String::new();
let theme = theme.get();
theme.with(|theme| {
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
});

10
src/progress/mod.rs
View file

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

2
src/radio/mod.rs
View file

@ -17,7 +17,7 @@ pub fn Radio(
let mut css_vars = String::new();
theme.with(|theme| {
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

4
src/radio/radio.css
View file

@ -21,7 +21,7 @@
.melt-radio:hover .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 {
@ -31,7 +31,7 @@
bottom: 3px;
left: 3px;
right: 3px;
background-color: var(--background-color-checked);
background-color: var(--melt-background-color-checked);
border-radius: 50%;
}

6
src/select/mod.rs
View file

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

4
src/skeleton/mod.rs
View file

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

8
src/skeleton/skeleton.css vendored
View file

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

14
src/table/mod.rs
View file

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

14
src/table/table.css
View file

@ -2,21 +2,21 @@
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: var(--background-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background-color: var(--melt-background-color);
border: 1px solid var(--melt-border-color);
border-radius: var(--melt-border-radius);
}
.melt-table th {
text-align: inherit;
background-color: var(--background-color-striped);
background-color: var(--melt-background-color-striped);
}
.melt-table td,
.melt-table th {
padding: 12px;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
border-right: 1px solid var(--melt-border-color);
border-bottom: 1px solid var(--melt-border-color);
}
.melt-table.melt-table--single-row td,
@ -35,5 +35,5 @@
border-bottom: none;
}
.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 css_vars = create_memo(move |_| {
let mut css_vars = String::new();
let theme = theme.get();
theme.with(|theme| {
let color_primary = theme.common.color_primary.clone();
css_vars.push_str(&format!(
"--label-active-background-color: {color_primary};"
"--melt-label-active-background-color: {color_primary};"
));
});
css_vars
});
@ -90,6 +91,7 @@ pub fn Tabs(
let key = key.clone();
move |_| value.set(key.clone())
}
ref=label_ref
>
{label}

2
src/tabs/tabs.css
View file

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

6
src/tag/mod.rs
View file

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

6
src/tag/tag.css
View file

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

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

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

4
src/upload/upload.css
View file

@ -3,3 +3,7 @@
height: 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 });
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>
}
}