github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2026-02-21 20:55:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make disabled checkboxes match overall style (#5869)

Browse Source
This commit is contained in:
Robert Kaussow
2025-12-16 13:22:19 +01:00
committed by GitHub
parent 9bc6ff0066
commit 4fa2edbc5c
3 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/atomic/Button.vue
View File

@@ -2,9 +2,9 @@
<component
:is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
v-bind="btnAttrs"
class="border-wp-background-400 dark:border-wp-background-100 relative flex shrink-0 cursor-pointer items-center overflow-hidden rounded-md border px-2 py-1 whitespace-nowrap transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
class="border-wp-control-neutral-200 relative flex shrink-0 cursor-pointer items-center overflow-hidden rounded-md border px-2 py-1 whitespace-nowrap transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
:class="{
'border-wp-control-neutral-300 dark:border-wp-background-100 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
'border-wp-control-neutral-200 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
color === 'gray',
'border-wp-control-ok-300 bg-wp-control-ok-100 hover:bg-wp-control-ok-200 text-white': color === 'green',
'border-wp-control-info-300 bg-wp-control-info-100 hover:bg-wp-control-info-200 text-white': color === 'blue',

2
web/src/components/form/Checkbox.vue
View File

@@ -3,7 +3,7 @@
<input
:id="`checkbox-${id}`"
type="checkbox"
class="checkbox border-wp-control-neutral-200 disabled:border-wp-control-neutral-200 disabled:bg-wp-control-neutral-300 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-md border transition-colors duration-150"
class="checkbox border-wp-control-neutral-200 disabled:border-wp-control-neutral-200 disabled:bg-wp-control-neutral-100 dark:disabled:bg-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-md border transition-colors duration-150"
:checked="innerValue"
:disabled="disabled || false"
@click="innerValue = !innerValue"

8
web/src/components/form/RadioField.vue
View File

@@ -3,9 +3,10 @@
<input
:id="`radio-${id}-${option.value}`"
type="radio"
class="radio border-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-full border"
class="radio border-wp-control-neutral-200 disabled:border-wp-control-neutral-200 disabled:bg-wp-control-neutral-100 dark:disabled:bg-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-full border"
:value="option.value"
:checked="innerValue?.includes(option.value)"
:disabled="disabled || false"
@click="innerValue = option.value"
/>
<div class="ml-4 flex flex-col">
@@ -23,6 +24,7 @@ import type { RadioOption } from './form.types';
const props = defineProps<{
modelValue: string;
options: RadioOption[];
disabled?: boolean;
}>();
const emit = defineEmits<{
@@ -66,6 +68,10 @@ const id = (Math.random() + 1).toString(36).substring(7);
opacity: 0;
}
.radio:disabled::before {
border-color: var(--wp-text-alt-100);
}
.radio:checked::before {
opacity: 1;
}