tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update tag spacing and styling for remove button (#1283)

Browse Source 
### Context

- Adds custom padding to each side based on if the tag is removable or not
- Improves hover state for the remove button when the tag is focused
- Adds padding to the remove button
This commit is contained in:
Henry Wilkinson 2023-10-20 19:02:32 -04:00 committed by GitHub
parent 5c5ef68a8a
commit e274462ba0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/tag.ts
View File

@ -62,16 +62,31 @@ export class Tag extends SLTag {
.tag__remove { .tag__remove {
color: var(--sl-color-blue-600); color: var(--sl-color-blue-600);
border-radius: 100%; border-radius: 100%;
margin-left: 0.25rem;
padding: 0.125rem;
} }
.tag__remove:hover { .tag__remove:hover {
background-color: var(--sl-color-blue-600); background-color: var(--sl-color-blue-500);
color: var(--sl-color-neutral-0); color: var(--sl-color-neutral-0);
} }
:focus .tag__remove:hover {
color: var(--sl-color-blue-500);
background-color: var(--sl-color-neutral-0);
}
.tag--small { .tag--small {
font-size: var(--sl-font-size-x-small); font-size: var(--sl-font-size-x-small);
} }
.tag--medium {
padding: 0 0.5rem;
}
.tag--medium:is(.tag--removable) {
padding: 0 0.125rem 0 0.5rem;
}
`, `,
]; ];