improve checkbox styles

This commit is contained in:
Henry Jameson 2024-02-21 13:10:11 +02:00
parent 8a47069cee
commit f609aaba0c
7 changed files with 22 additions and 13 deletions

View File

@ -12,7 +12,7 @@
@change="$emit('update:modelValue', $event.target.checked)"
>
<i
class="input checkbox-indicator"
class="input -checkbox checkbox-indicator"
:aria-hidden="true"
@transitionend.capture="onTransitionEnd"
/>
@ -82,8 +82,7 @@ export default {
transition: color 200ms;
width: 1.1em;
height: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
border-radius: var(--roundness);
box-shadow: var(--shadow);
background-color: var(--background);
vertical-align: top;

View File

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:aria-labelledby="name + '-label'"
class="input opt exlcude-disabled visible-for-screenreader-only"
class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"

View File

@ -12,6 +12,10 @@ const hoverGlow = {
export default {
name: 'Input',
selector: '.input',
variant: {
checkbox: '.-checkbox',
radio: '.-radio'
},
states: {
disabled: ':disabled',
hover: ':hover:not(:disabled)',
@ -21,6 +25,12 @@ export default {
'Text'
],
defaultRules: [
{
variant: 'checkbox',
directives: {
roundness: 1
}
},
{
directives: {
background: '--fg, -5',

View File

@ -43,7 +43,7 @@
<input
v-if="poll.multiple"
type="checkbox"
class="input poll-checkbox"
class="input -checkbox poll-checkbox"
:disabled="loading"
:value="index"
>
@ -52,7 +52,7 @@
type="radio"
:disabled="loading"
:value="index"
class="input"
class="input -radio"
>
<label class="option-vote">
<RichContent

View File

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:aria-labelledby="name + '-label'"
class="input opt visible-for-screenreader-only"
class="input -checkbox opt visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', !present ? fallback : undefined)"

View File

@ -129,7 +129,7 @@
v-model="selected.inset"
:disabled="!present"
name="inset"
class="input input-inset visible-for-screenreader-only"
class="input -checkbox input-inset visible-for-screenreader-only"
type="checkbox"
>
<label

View File

@ -30,7 +30,7 @@ export const shadowsKeys = new Set([
export const radiiKeys = new Set([
'btn',
'input',
// 'checkbox',
'checkbox',
'panel',
'avatar',
'avatarAlt',
@ -122,10 +122,10 @@ export const convertTheme2To3 = (data) => {
case 'input':
rule.component = 'Input'
break
// TODO: missing feature?
// case 'checkbox':
// rule.component = 'Input'
// break
case 'checkbox':
rule.component = 'Input'
rule.variant = 'checkbox'
break
case 'panel':
rule.component = 'Panel'
break