diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js index 249768142..c10741b2c 100644 --- a/components/lib/themes/primeone/base/index.js +++ b/components/lib/themes/primeone/base/index.js @@ -33,6 +33,7 @@ import image from 'primevue/themes/primeone/base/image'; import inlinemessage from 'primevue/themes/primeone/base/inlinemessage'; import inplace from 'primevue/themes/primeone/base/inplace'; import inputgroup from 'primevue/themes/primeone/base/inputgroup'; +import inputnumber from 'primevue/themes/primeone/base/inputnumber'; import inputotp from 'primevue/themes/primeone/base/inputotp'; import inputswitch from 'primevue/themes/primeone/base/inputswitch'; import inputtext from 'primevue/themes/primeone/base/inputtext'; @@ -119,6 +120,7 @@ export default { inlinemessage, inplace, inputgroup, + inputnumber, inputotp, inputswitch, inputtext, diff --git a/components/lib/themes/primeone/base/inputnumber/index.js b/components/lib/themes/primeone/base/inputnumber/index.js new file mode 100644 index 000000000..bc5a7a8b9 --- /dev/null +++ b/components/lib/themes/primeone/base/inputnumber/index.js @@ -0,0 +1,148 @@ +export default { + css: ({ dt }) => ` +.p-inputnumber { + display: inline-flex; + position: relative; +} + +.p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + background: ${dt('inputnumber.button.background')}; + color: ${dt('inputnumber.button.color')}; + 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')}; +} + +.p-inputnumber-button:hover { + background: ${dt('inputnumber.button.hover.background')}; + color: ${dt('inputnumber.button.hover.color')}; +} + +.p-inputnumber-button:active { + background: ${dt('inputnumber.button.active.background')}; + color: ${dt('inputnumber.button.active.color')}; +} + +.p-inputnumber-buttons-stacked { + overflow: hidden; +} + +.p-inputnumber-buttons-stacked .p-inputnumber-button { + position: relative; + border: 0 none; +} + +.p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); +} + +.p-inputnumber-buttons-stacked .p-inputnumber-button-up { + padding: 0; + border-top-right-radius: calc(${dt('rounded.base')} - 1px); +} + +.p-inputnumber-buttons-stacked .p-inputnumber-button-down { + padding: 0; + border-bottom-right-radius: calc(${dt('rounded.base')} - 1px); +} + +.p-inputnumber-buttons-stacked .p-inputnumber-button { + flex: 1 1 auto; + border: 0 none; +} + +.p-inputnumber-buttons-horizontal .p-inputnumber-button { + border: 1px solid ${dt('inputnumber.button.border.color')}; +} + +.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover { + border-color: ${dt('inputnumber.button.hover.border.color')}; +} + +.p-inputnumber-buttons-horizontal .p-inputnumber-button:active { + border-color: ${dt('inputnumber.button.active.border.color')}; +} + +.p-inputnumber-buttons-horizontal .p-inputnumber-button-up { + order: 3; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; + border-left: 0 none; +} + +.p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; +} + +.p-inputnumber-buttons-horizontal .p-inputnumber-button-down { + order: 1; + border-top-left-radius: ${dt('rounded.base')}; + border-bottom-left-radius: ${dt('rounded.base')}; + border-right: 0 none; +} + +.p-inputnumber-buttons-vertical { + flex-direction: column; +} + +.p-inputnumber-buttons-vertical .p-inputnumber-button { + border: 1px solid ${dt('inputnumber.button.border.color')}; + padding: 0.5rem 0; +} + +.p-inputnumber-buttons-vertical .p-inputnumber-button:hover { + border-color: ${dt('inputnumber.button.hover.border.color')}; +} + +.p-inputnumber-buttons-vertical .p-inputnumber-button:active { + border-color: ${dt('inputnumber.button.active.border.color')}; +} + +.p-inputnumber-buttons-vertical .p-inputnumber-button-up { + order: 1; + border-top-left-radius: ${dt('rounded.base')}; + border-top-right-radius: ${dt('rounded.base')}; + width: 100%; + border-bottom: 0 none; +} + +.p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; +} + +.p-inputnumber-buttons-vertical .p-inputnumber-button-down { + order: 3; + border-bottom-left-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; + width: 100%; + border-top: 0 none; +} + +.p-inputnumber-input { + flex: 1 1 auto; +} + +.p-fluid .p-inputnumber { + width: 100%; +} + +.p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; +} + +.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; +} +` +}; diff --git a/components/lib/themes/primeone/base/inputnumber/package.json b/components/lib/themes/primeone/base/inputnumber/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/base/inputnumber/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/primeone/presets/aura/index.js index 0e151f58a..26c54c86a 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/primeone/presets/aura/index.js @@ -32,6 +32,7 @@ import image from 'primevue/themes/primeone/presets/aura/image'; import inlinemessage from 'primevue/themes/primeone/presets/aura/inlinemessage'; import inplace from 'primevue/themes/primeone/presets/aura/inplace'; import inputgroup from 'primevue/themes/primeone/presets/aura/inputgroup'; +import inputnumber from 'primevue/themes/primeone/presets/aura/inputnumber'; import inputotp from 'primevue/themes/primeone/presets/aura/inputotp'; import inputswitch from 'primevue/themes/primeone/presets/aura/inputswitch'; import inputtext from 'primevue/themes/primeone/presets/aura/inputtext'; @@ -266,8 +267,9 @@ export default { inlinemessage, inplace, inputgroup, - inputswitch, + inputnumber, inputotp, + inputswitch, inputtext, knob, listbox, diff --git a/components/lib/themes/primeone/presets/aura/inputnumber/index.js b/components/lib/themes/primeone/presets/aura/inputnumber/index.js new file mode 100644 index 000000000..fb8ad1783 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/inputnumber/index.js @@ -0,0 +1,33 @@ +export default { + button: { + width: '2.5rem' + }, + colorScheme: { + light: { + button: { + background: 'transparent', + hoverBackground: '{surface.100}', + activeBackground: '{surface.200}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + color: '{surface.400}', + hoverColor: '{surface.500}', + activeColor: '{surface.600}' + } + }, + dark: { + button: { + background: 'transparent', + hoverBackground: '{surface.800}', + activeBackground: '{surface.700}', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + color: '{surface.400}', + hoverColor: '{surface.300}', + activeColor: '{surface.200}' + } + } + } +}; diff --git a/components/lib/themes/primeone/presets/aura/inputnumber/package.json b/components/lib/themes/primeone/presets/aura/inputnumber/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/themes/primeone/presets/aura/inputnumber/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}