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: button hover

Browse source
This commit is contained in:
luoxiao 2023-09-17 23:10:33 +08:00
parent f9e9c84623
commit 433a90bfdb
3 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/button/button.css
View file

@ -16,6 +16,7 @@
.melt-button:hover {
transition: all 0.3s;
border-color: var(--border-color-hover);
background-color: var(--background-color-hover);
}
.melt-button--text,
@ -35,4 +36,4 @@
.melt-button--round {
padding: 0 10px;
border-radius: 50%;
}
}

10
src/button/mod.rs
View file

@ -31,6 +31,14 @@ impl ButtonColor {
ButtonColor::ERROR => theme.common.color_error.clone(),
}
}
pub fn theme_color_hover(&self, theme: &Theme) -> String {
match self {
ButtonColor::PRIMARY => theme.common.color_primary_hover.clone(),
ButtonColor::SUCCESS => theme.common.color_success_hover.clone(),
ButtonColor::WARNING => theme.common.color_warning_hover.clone(),
ButtonColor::ERROR => theme.common.color_error_hover.clone(),
}
}
}
#[component]
@ -47,8 +55,10 @@ pub fn Button(
let mut css_vars = String::new();
let theme = theme.get();
let bg_color = color.get().theme_color(&theme);
let bg_color_hover = color.get().theme_color_hover(&theme);
if type_.get() == ButtonType::PRIMARY {
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!("--font-color: #fff;"));
css_vars.push_str(&format!("--border-color: {bg_color};"));
css_vars.push_str(&format!("--border-color-hover: {bg_color};"));

16
src/theme/common.rs
View file

@ -5,9 +5,13 @@ pub struct CommonTheme {
pub font_family: String,
pub color_primary: String,
pub color_primary_hover: String,
pub color_success: String,
pub color_success_hover: String,
pub color_warning: String,
pub color_warning_hover: String,
pub color_error: String,
pub color_error_hover: String,
pub font_size: String,
pub font_size_small: String,
@ -32,9 +36,13 @@ impl CommonTheme {
Self {
font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
color_primary: "".into(),
color_primary_hover: "".into(),
color_success: "".into(),
color_success_hover: "".into(),
color_warning: "".into(),
color_warning_hover: "".into(),
color_error: "".into(),
color_error_hover: "".into(),
font_size: "14px".into(),
font_size_small: "12px".into(),
font_size_medium: "16px".into(),
@ -57,18 +65,26 @@ impl ThemeMethod for CommonTheme {
fn light() -> Self {
Self {
color_primary: "#f5222d".into(),
color_primary_hover: "#ff4d4f".into(),
color_success: "#18a058".into(),
color_success_hover: "#36ad6a".into(),
color_warning: "#f0a020".into(),
color_warning_hover: "#fcb040".into(),
color_error: "#d03050".into(),
color_error_hover: "#de576d".into(),
..CommonTheme::common()
}
}
fn dark() -> Self {
Self {
color_primary: "#d32029".into(),
color_primary_hover: "#e04648".into(),
color_success: "#18a058".into(),
color_success_hover: "".into(),
color_warning: "#f0a020".into(),
color_warning_hover: "#fcb040".into(),
color_error: "#d03050".into(),
color_error_hover: "#de576d".into(),
..CommonTheme::common()
}
}