Added basic styling for checkboxes, yay

Co-authored-by: Max <max@zed.dev>
This commit is contained in:
Mikayla Maki 2023-02-24 17:04:31 -08:00
parent 86e2101592
commit 118435a348
3 changed files with 39 additions and 11 deletions

View file

@ -860,9 +860,10 @@ pub struct WelcomeStyle {
pub struct CheckboxStyle {
pub width: f32,
pub height: f32,
pub unchecked: ContainerStyle,
pub default: ContainerStyle,
pub checked: ContainerStyle,
pub hovered: ContainerStyle,
pub hovered_and_checked: ContainerStyle,
}
#[derive(Clone, Deserialize, Default)]

View file

@ -126,11 +126,17 @@ impl WelcomePage {
.with_height(style.height)
.contained()
.with_style(if checked {
if state.hovered() {
style.hovered_and_checked
} else {
style.checked
} else if state.hovered() {
}
} else {
if state.hovered() {
style.hovered
} else {
style.unchecked
style.default
}
})
.boxed()
})

View file

@ -6,9 +6,8 @@ export default function welcome(colorScheme: ColorScheme) {
let layer = colorScheme.highest;
// TODO
let checkbox_base = {
background: colorScheme.ramps.red(0.5).hex(),
cornerRadius: 8,
let checkboxBase = {
cornerRadius: 4,
padding: {
left: 8,
right: 8,
@ -26,9 +25,31 @@ export default function welcome(colorScheme: ColorScheme) {
checkbox: {
width: 9,
height: 9,
unchecked: checkbox_base,
checked: checkbox_base,
hovered: checkbox_base
default: {
...checkboxBase,
background: colorScheme.ramps.blue(0.5).hex(),
},
checked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
},
hovered: {
...checkboxBase,
background: colorScheme.ramps.blue(0.5).hex(),
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
},
hoveredAndChecked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
}
}
}
}