SelectButton visuals

pull/5756/head
Cagatay Civici 2024-05-15 10:57:21 +03:00
parent 2f3fdbd5b6
commit 04d0298ae9
6 changed files with 18 additions and 7 deletions

View File

@ -6,11 +6,12 @@ const theme = ({ dt }) => `
user-select: none; user-select: none;
vertical-align: bottom; vertical-align: bottom;
outline-color: transparent; outline-color: transparent;
border-radius: ${dt('border.radius.md')}; border-radius: ${dt('selectbutton.border.radius')};
} }
.p-selectbutton .p-togglebutton { .p-selectbutton .p-togglebutton {
border-radius: 0; border-radius: 0;
border-width: 1px 1px 1px 0;
} }
.p-selectbutton .p-togglebutton:focus-visible { .p-selectbutton .p-togglebutton:focus-visible {
@ -19,13 +20,14 @@ const theme = ({ dt }) => `
} }
.p-selectbutton .p-togglebutton:first-child { .p-selectbutton .p-togglebutton:first-child {
border-top-left-radius: ${dt('border.radius.md')}; border-left-width: 1px;
border-bottom-left-radius: ${dt('border.radius.md')}; border-top-left-radius: ${dt('selectbutton.border.radius')};
border-bottom-left-radius: ${dt('selectbutton.border.radius')};
} }
.p-selectbutton .p-togglebutton:last-child { .p-selectbutton .p-togglebutton:last-child {
border-top-right-radius: ${dt('border.radius.md')}; border-top-right-radius: ${dt('selectbutton.border.radius')};
border-bottom-right-radius: ${dt('border.radius.md')}; border-bottom-right-radius: ${dt('selectbutton.border.radius')};
} }
.p-selectbutton.p-invalid { .p-selectbutton.p-invalid {

View File

@ -1,4 +1,7 @@
export default { export default {
root: {
borderRadius: '{form.field.border.radius}'
},
colorScheme: { colorScheme: {
light: { light: {
root: { root: {

View File

@ -1,4 +1,7 @@
export default { export default {
root: {
borderRadius: '{form.field.border.radius}'
},
colorScheme: { colorScheme: {
light: { light: {
root: { root: {

View File

@ -10,7 +10,7 @@ export default {
hoverColor: '{form.field.color}', hoverColor: '{form.field.color}',
checkedBackground: '{highlight.background}', checkedBackground: '{highlight.background}',
checkedColor: '{highlight.color}', checkedColor: '{highlight.color}',
checkedBorderColor: '{highlight.focus.background}', checkedBorderColor: '{form.field.border.color}',
disabledBackground: '{form.field.disabled.background}', disabledBackground: '{form.field.disabled.background}',
disabledBorderColor: '{form.field.disabled.background}', disabledBorderColor: '{form.field.disabled.background}',
disabledColor: '{form.field.disabled.color}', disabledColor: '{form.field.disabled.color}',

View File

@ -1,4 +1,7 @@
export default { export default {
root: {
borderRadius: '{form.field.border.radius}'
},
colorScheme: { colorScheme: {
light: { light: {
root: { root: {

View File

@ -10,7 +10,7 @@ export default {
hoverColor: '{form.field.color}', hoverColor: '{form.field.color}',
checkedBackground: '{highlight.background}', checkedBackground: '{highlight.background}',
checkedColor: '{highlight.color}', checkedColor: '{highlight.color}',
checkedBorderColor: '{highlight.focus.background}', checkedBorderColor: '{form.field.border.color}',
disabledBackground: '{form.field.disabled.background}', disabledBackground: '{form.field.disabled.background}',
disabledBorderColor: '{form.field.disabled.background}', disabledBorderColor: '{form.field.disabled.background}',
disabledColor: '{form.field.disabled.color}', disabledColor: '{form.field.disabled.color}',