Fixed ToggleButton
Cagatay Civici
parent
d36dabf257
commit
2533843785
|
|
@ -2,50 +2,31 @@ export default {
|
|||
css: ({ dt }) => `
|
||||
.p-togglebutton {
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
border: 1px solid transparent;
|
||||
background: ${dt('togglebutton.background')};
|
||||
border-radius: ${dt('rounded.base')};
|
||||
outline-color: transparent;
|
||||
position: relative;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-togglebutton-input {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
outline: 0 none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: ${dt('rounded.base')};;
|
||||
}
|
||||
|
||||
.p-togglebutton .p-button {
|
||||
flex: 1 1 auto;
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
color: ${dt('togglebutton.item.color')};
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
outline-color: transparent;
|
||||
padding: 0.5rem 1rem;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: ${dt('rounded.base')};
|
||||
gap: 0.5rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
color: ${dt('togglebutton.color')};
|
||||
background: ${dt('togglebutton.background')};
|
||||
border: 1px solid ${dt('togglebutton.border.color')};
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
border-radius: ${dt('rounded.base')};
|
||||
outline-color: transparent;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.p-togglebutton .p-button::before {
|
||||
.p-togglebutton-label,
|
||||
.p-togglebutton-icon {
|
||||
position: relative;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.p-togglebutton::before {
|
||||
content: "";
|
||||
background: transparent;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
|
|
@ -57,41 +38,20 @@ export default {
|
|||
border-radius: ${dt('rounded.sm')};
|
||||
}
|
||||
|
||||
.p-togglebutton .p-button .p-button-label,
|
||||
.p-togglebutton .p-button .p-button-icon {
|
||||
position: relative;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.p-togglebutton .p-button .p-button-icon-left,
|
||||
.p-togglebutton .p-button .p-button-icon-right {
|
||||
color: ${dt('togglebutton.item.icon.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
|
||||
color: ${dt('togglebutton.item.hover.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
|
||||
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
|
||||
color: ${dt('togglebutton.item.icon.hover.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-highlight .p-button {
|
||||
color: ${dt('togglebutton.item.checked.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-highlight .p-button::before {
|
||||
background: ${dt('togglebutton.item.checked.background')};
|
||||
.p-togglebutton.p-highlight::before {
|
||||
background: ${dt('togglebutton.checked.background')};
|
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.p-togglebutton.p-highlight .p-button .p-button-icon-left,
|
||||
.p-togglebutton.p-highlight .p-button .p-button-icon-right {
|
||||
color: ${dt('togglebutton.item.icon.checked.color')};
|
||||
.p-togglebutton:not(:disabled):not(.p-highlight):hover {
|
||||
color: ${dt('togglebutton.hover.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) {
|
||||
.p-togglebutton.p-highlight {
|
||||
color: ${dt('togglebutton.checked.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
}
|
||||
|
|
@ -100,17 +60,26 @@ export default {
|
|||
border-color: ${dt('togglebutton.invalid.border.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-disabled {
|
||||
.p-togglebutton:disabled {
|
||||
opacity: 1;
|
||||
background: ${dt('togglebutton.disabled.background')};
|
||||
color: ${dt('togglebutton.disabled.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-disabled .p-button {
|
||||
color: ${dt('togglebutton.item.disabled.color')};
|
||||
.p-togglebutton-icon {
|
||||
color: ${dt('togglebutton.icon.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-disabled .p-button .p-button-icon {
|
||||
color: ${dt('togglebutton.item.icon.disabled.color')};
|
||||
.p-togglebutton:not(:disabled):not(.p-highlight):hover .p-togglebutton-icon {
|
||||
color: ${dt('togglebutton.icon.hover.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-highlight .p-togglebutton-icon {
|
||||
color: ${dt('togglebutton.icon.checked.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton:disabled .p-togglebutton-icon {
|
||||
color: ${dt('togglebutton.icon.disabled.color')};
|
||||
}
|
||||
`
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,17 +3,16 @@ export default {
|
|||
light: {
|
||||
root: {
|
||||
background: '{surface.100}',
|
||||
disabledBackground: '{form.field.disabled.background}',
|
||||
invalidBorderColor: '{form.field.invalid.border.color}'
|
||||
},
|
||||
item: {
|
||||
checkedBackground: '{surface.0}',
|
||||
disabledBackground: '{form.field.disabled.background}',
|
||||
borderColor: '{surface.100}',
|
||||
invalidBorderColor: '{form.field.invalid.border.color}',
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.700}',
|
||||
checkedColor: '{surface.900}',
|
||||
disabledColor: '{form.field.disabled.color}'
|
||||
},
|
||||
itemIcon: {
|
||||
icon: {
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.700}',
|
||||
checkedColor: '{surface.900}',
|
||||
|
|
@ -23,17 +22,16 @@ export default {
|
|||
dark: {
|
||||
root: {
|
||||
background: '{surface.950}',
|
||||
disabledBackground: '{form.field.disabled.background}',
|
||||
invalidBorderColor: '{form.field.invalid.border.color}'
|
||||
},
|
||||
item: {
|
||||
checkedBackground: '{surface.800}',
|
||||
disabledBackground: '{form.field.disabled.background}',
|
||||
borderColor: '{surface.950}',
|
||||
invalidBorderColor: '{form.field.invalid.border.color}',
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}',
|
||||
checkedColor: '{surface.0}',
|
||||
disabledColor: '{form.field.disabled.color}'
|
||||
},
|
||||
itemIcon: {
|
||||
icon: {
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}',
|
||||
checkedColor: '{surface.0}',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
<template>
|
||||
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
|
||||
<button v-ripple type="button" :class="cx('button')" :tabindex="tabindex" :aria-pressed="modelValue" :aria-disabled="disabled" @click="onChange" v-bind="getPTOptions('button')">
|
||||
<slot name="icon" :value="modelValue" :class="cx('icon')">
|
||||
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
|
||||
</slot>
|
||||
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
|
||||
<slot name="icon" :value="modelValue" :class="cx('icon')">
|
||||
<span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
|
||||
</slot>
|
||||
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,10 @@ const classes = {
|
|||
root: ({ instance, props }) => [
|
||||
'p-togglebutton p-component',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-highlight': instance.active,
|
||||
'p-invalid': props.invalid
|
||||
}
|
||||
],
|
||||
button: 'p-togglebutton-button',
|
||||
icon: ({ instance, props }) => [
|
||||
'p-togglebutton-icon',
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue