kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(frontend): port checkbox-radio rules into FormCheckbox and drop Bulma import 

The Bulma form/checkbox-radio partial only defined two selectors: .checkbox
(consumed exclusively by FormCheckbox.vue) and .radio (consumed by
ViewEditForm.vue and user/settings/Avatar.vue). Ports the %checkbox-radio
placeholder rules (cursor, line-height, position, hover/disabled states,
and the input cursor override) into FormCheckbox's scoped style for the
.checkbox side, and into scoped style blocks on the two remaining .radio
call-sites for the .radio side (including the 0.5em sibling margin via
margin-inline-start). Drops the now-unused @import. Pixel-perfect verified
on /login, /user/settings/general, and /user/settings/avatar: every
measured label/input getBoundingClientRect and computed style matches the
baseline exactly (0px deltas across all 5 sampled checkboxes and all 5
avatar radios).
This commit is contained in:
kolaente 2026-04-20 21:45:58 +02:00 committed by kolaente
parent 5a1db90103
commit f7dc50faf7
4 changed files with 80 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/input/FormCheckbox.vue
View File

@ -28,12 +28,33 @@ function handleChange(event: Event) {
</template>
<style lang="scss" scoped>
// Ported from bulma-css-variables/sass/form/checkbox-radio.sass
// (the %checkbox-radio placeholder, scoped to .checkbox since this
// component is the sole consumer of that class).
label.checkbox {
cursor: pointer;
line-height: 1.25;
position: relative;
display: flex;
align-items: center;
gap: .5rem;
inline-size: fit-content;
&:hover {
color: var(--input-hover-color);
}
&[disabled],
input[disabled] {
color: var(--input-disabled-color);
cursor: not-allowed;
}
input {
cursor: pointer;
}
&:not(:last-child) {
margin-block-end: .75rem;
}

28
frontend/src/components/project/views/ViewEditForm.vue
View File

@ -302,4 +302,32 @@ function handleBubbleSave() {
inline-size: 100%;
}
}
// Ported from bulma-css-variables/sass/form/checkbox-radio.sass
// (the %checkbox-radio placeholder plus the .radio + .radio sibling rule),
// scoped to this component so we can drop the global Bulma import.
label.radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
input {
cursor: pointer;
}
&:hover {
color: var(--input-hover-color);
}
&[disabled],
input[disabled] {
color: var(--input-disabled-color);
cursor: not-allowed;
}
& + .radio {
margin-inline-start: .5em;
}
}
</style>

2
frontend/src/styles/global.scss
View File

@ -35,7 +35,7 @@
// imports from "bulma-css-variables/sass/form/_all";
@import "bulma-css-variables/sass/form/shared";
@import "bulma-css-variables/sass/form/input-textarea";
@import "bulma-css-variables/sass/form/checkbox-radio";
// @import "bulma-css-variables/sass/form/checkbox-radio"; // ported into FormCheckbox.vue and local scoped styles in Avatar.vue + ViewEditForm.vue
@import "bulma-css-variables/sass/form/select";
// @import "bulma-css-variables/sass/form/file"; // not used; every file input is hidden and triggered via a custom button
@import "bulma-css-variables/sass/form/tools";

30
frontend/src/views/user/settings/Avatar.vue
View File

@ -181,3 +181,33 @@ function cropAvatar() {
background: var(--white);
}
</style>
<style lang="scss" scoped>
// Ported from bulma-css-variables/sass/form/checkbox-radio.sass
// (the %checkbox-radio placeholder), scoped to this component so we can
// drop the global Bulma import.
label.radio {
cursor: pointer;
display: inline-block;
line-height: 1.25;
position: relative;
input {
cursor: pointer;
}
&:hover {
color: var(--input-hover-color);
}
&[disabled],
input[disabled] {
color: var(--input-disabled-color);
cursor: not-allowed;
}
& + .radio {
margin-inline-start: .5em;
}
}
</style>