fix: CSS for plate add buttons

Some improvement, still not great
This commit is contained in:
Emilia Allison 2024-08-09 20:58:27 -04:00
parent caf10f10c1
commit 2ccb84041b
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
2 changed files with 29 additions and 2 deletions

View File

@ -53,3 +53,30 @@ div.tree li {
background: color.change($color-light, $alpha: 0.2);
}
}
div.tree button {
position: relative;
top: -0.15em;
display: inline;
margin-left: 0;
margin-bottom: 0.4rem;
border: 2px solid transparent;
background: transparent;
user-select: none;
list-style: none;
line-height: 1em;
aspect-ratio: 1;
&::before {
text-align: center;
vertical-align: middle;
content: "+"; // Nicer X
}
&:hover {
background: rgba(1,1,1,0.1);
transition: background 0.1s;
}
}

View File

@ -103,7 +103,7 @@ pub fn Tree(props: &TreeProps) -> Html {
<button onclick={
let open_new_plate_callback = props.open_new_plate_callback.clone();
move |_| {open_new_plate_callback.emit(NewPlateDialogType::SourceOnly)}
}>{"+"}</button>
} />
</h3>
<ul>
{source_plates}
@ -114,7 +114,7 @@ pub fn Tree(props: &TreeProps) -> Html {
<button onclick={
let open_new_plate_callback = props.open_new_plate_callback.clone();
move |_| {open_new_plate_callback.emit(NewPlateDialogType::DestinationOnly)}
}>{"+"}</button>
} />
</h3>
<ul>
{dest_plates}