mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-10-31 14:31:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(ui): implement hover for switch (#9057)

Browse source 
Followup to https://codeberg.org/forgejo/forgejo/issues/6459

Preview:
- https://codeberg.org/attachments/cc12a227-c6eb-4ab5-91ad-0ef967f88c7a
- https://codeberg.org/attachments/a13c8cb6-f654-430c-a6c6-990a2a7f0911

Changes:
- hovered items now have background painted with transition
- added E2E testing: mostly for CSS logic introduced in this PR but also a bit for existing functionality
- variable --color-active is now consistently non-transparent: it already was in forgejo-dark but is now in all themes
- some code improvements in switch.css

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9057
Reviewed-by: Beowulf <beowulf@beocode.eu>
This commit is contained in:
0ko 2025-08-30 18:54:11 +02:00
commit 18cd9b5efa
5 changed files with 113 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web_src/css/modules/switch.css
View file

@ -1,3 +1,17 @@
/* Copyright 2025 The Forgejo Authors. All rights reserved.
SPDX-License-Identifier: GPL-3.0-or-later */
:root .switch {
--switch-padding-y: .5em;
--switch-padding-x: 1.125em;
}
@media (pointer: coarse) {
:root .switch {
--switch-padding-y: .75em;
}
}
.switch {
display: grid;
grid-auto-flow: column;
@ -9,27 +23,39 @@
border-radius: var(--border-radius);
}
.switch .item {
.switch > .item {
display: flex;
gap: 0.5rem;
align-items: center;
padding: .5em 1.125em;
padding: var(--switch-padding-y) var(--switch-padding-x);
color: var(--color-text);
border-radius: var(--border-radius);
text-wrap: nowrap;
transition: background-color 0.1s ease;
}
.switch .active.item {
.switch > .item:hover {
background: var(--color-hover);
}
/* Item that has to crawl under it's active neighbor, so when it is hovered,
there are no ugly unpainted v/^ shapes between them */
.switch > .item:has(+ .active.item) { /* Active neighbor is next item */
margin-right: calc(-1 * var(--border-radius));
padding-right: calc(var(--switch-padding-x) + var(--border-radius));
}
.switch > .active.item + .item { /* Active neighbor is previous item */
margin-left: calc(-1 * var(--border-radius));
padding-left: calc(var(--switch-padding-x) + var(--border-radius));
}
.switch > .active.item {
z-index: 2;
padding-left: var(--switch-padding-x);
background: var(--color-active);
outline: 1px solid var(--color-input-border);
}
@media (pointer: coarse) {
.switch .item {
padding: .75em 1.125em;
}
}
.switch button.item {
.switch > button.item {
background: transparent;
}