SelectButton visuals
parent
2f3fdbd5b6
commit
04d0298ae9
|
@ -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 {
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
|
root: {
|
||||||
|
borderRadius: '{form.field.border.radius}'
|
||||||
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
root: {
|
root: {
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
|
root: {
|
||||||
|
borderRadius: '{form.field.border.radius}'
|
||||||
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
root: {
|
root: {
|
||||||
|
|
|
@ -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}',
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
export default {
|
export default {
|
||||||
|
root: {
|
||||||
|
borderRadius: '{form.field.border.radius}'
|
||||||
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
root: {
|
root: {
|
||||||
|
|
|
@ -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}',
|
||||||
|
|
Loading…
Reference in New Issue