mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-23 13:45:06 +01:00
improve checkbox styles
This commit is contained in:
parent
8a47069cee
commit
f609aaba0c
@ -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;
|
||||
|
@ -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)"
|
||||
|
@ -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',
|
||||
|
@ -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
|
||||
|
@ -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)"
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user