Updated tokens for InputNumber
parent
a83714ac28
commit
3ac1d2766f
|
@ -11,11 +11,11 @@ const theme = ({ dt }) => `
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
curspor: pointer;
|
cursor: pointer;
|
||||||
background: ${dt('inputnumber.button.background')};
|
background: ${dt('inputnumber.button.background')};
|
||||||
color: ${dt('inputnumber.button.color')};
|
color: ${dt('inputnumber.button.color')};
|
||||||
width: ${dt('inputnumber.button.width')};
|
width: ${dt('inputnumber.button.width')};
|
||||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inputnumber-button:hover {
|
.p-inputnumber-button:hover {
|
||||||
|
@ -28,10 +28,6 @@ const theme = ({ dt }) => `
|
||||||
color: ${dt('inputnumber.button.active.color')};
|
color: ${dt('inputnumber.button.active.color')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inputnumber-stacked {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-inputnumber-stacked .p-inputnumber-button {
|
.p-inputnumber-stacked .p-inputnumber-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
|
@ -48,12 +44,12 @@ const theme = ({ dt }) => `
|
||||||
|
|
||||||
.p-inputnumber-stacked .p-inputnumber-increment-button {
|
.p-inputnumber-stacked .p-inputnumber-increment-button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-top-right-radius: calc(${dt('border.radius.md')} - 1px);
|
border-top-right-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inputnumber-stacked .p-inputnumber-decrement-button {
|
.p-inputnumber-stacked .p-inputnumber-decrement-button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-bottom-right-radius: calc(${dt('border.radius.md')} - 1px);
|
border-bottom-right-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inputnumber-stacked .p-inputnumber-button {
|
.p-inputnumber-stacked .p-inputnumber-button {
|
||||||
|
@ -98,7 +94,7 @@ const theme = ({ dt }) => `
|
||||||
|
|
||||||
.p-inputnumber-vertical .p-inputnumber-button {
|
.p-inputnumber-vertical .p-inputnumber-button {
|
||||||
border: 1px solid ${dt('inputnumber.button.border.color')};
|
border: 1px solid ${dt('inputnumber.button.border.color')};
|
||||||
padding: 0.5rem 0;
|
padding: ${dt('inputnumber.button.vertical.padding')}; 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-inputnumber-vertical .p-inputnumber-button:hover {
|
.p-inputnumber-vertical .p-inputnumber-button:hover {
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
export default {
|
export default {
|
||||||
button: {
|
button: {
|
||||||
width: '2.5rem'
|
width: '2.5rem',
|
||||||
|
borderRadius: '{form.field.border.radius}',
|
||||||
|
verticalPadding: '{form.field.padding.y}'
|
||||||
},
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
|
|
|
@ -228,7 +228,7 @@ export default {
|
||||||
floatLabelColor: '{surface.500}',
|
floatLabelColor: '{surface.500}',
|
||||||
floatLabelFocusColor: '{surface.500}',
|
floatLabelFocusColor: '{surface.500}',
|
||||||
floatLabelInvalidColor: '{red.400}',
|
floatLabelInvalidColor: '{red.400}',
|
||||||
iconColor: '{surface.400}',
|
iconColor: '{surface.500}',
|
||||||
shadow: 'none'
|
shadow: 'none'
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
|
|
|
@ -1,32 +1,34 @@
|
||||||
export default {
|
export default {
|
||||||
button: {
|
button: {
|
||||||
width: '2.5rem'
|
width: '2.5rem',
|
||||||
|
borderRadius: '{form.field.border.radius}',
|
||||||
|
verticalPadding: '{form.field.padding.y}'
|
||||||
},
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
button: {
|
button: {
|
||||||
background: 'transparent',
|
background: '{surface.100}',
|
||||||
hoverBackground: '{surface.100}',
|
hoverBackground: '{surface.200}',
|
||||||
activeBackground: '{surface.200}',
|
activeBackground: '{surface.300}',
|
||||||
borderColor: '{form.field.border.color}',
|
borderColor: '{form.field.border.color}',
|
||||||
hoverBorderColor: '{form.field.border.color}',
|
hoverBorderColor: '{form.field.border.color}',
|
||||||
activeBorderColor: '{form.field.border.color}',
|
activeBorderColor: '{form.field.border.color}',
|
||||||
color: '{surface.400}',
|
color: '{surface.600}',
|
||||||
hoverColor: '{surface.500}',
|
hoverColor: '{surface.700}',
|
||||||
activeColor: '{surface.600}'
|
activeColor: '{surface.800}'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
button: {
|
button: {
|
||||||
background: 'transparent',
|
background: '{surface.800}',
|
||||||
hoverBackground: '{surface.800}',
|
hoverBackground: '{surface.700}',
|
||||||
activeBackground: '{surface.700}',
|
activeBackground: '{surface.500}',
|
||||||
borderColor: '{form.field.border.color}',
|
borderColor: '{form.field.border.color}',
|
||||||
hoverBorderColor: '{form.field.border.color}',
|
hoverBorderColor: '{form.field.border.color}',
|
||||||
activeBorderColor: '{form.field.border.color}',
|
activeBorderColor: '{form.field.border.color}',
|
||||||
color: '{surface.400}',
|
color: '{surface.300}',
|
||||||
hoverColor: '{surface.300}',
|
hoverColor: '{surface.200}',
|
||||||
activeColor: '{surface.200}'
|
activeColor: '{surface.100}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue