vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated inputgroup

pull/5507/head
Cagatay Civici 2024-02-18 18:10:50 +03:00
parent 23ca38cbd9
commit 7e2262e046
3 changed files with 119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/theme/aura/index.js
View File

@ -23,6 +23,7 @@ import global from 'primevue/theme/aura/global';
import image from 'primevue/theme/aura/image';
import inlinemessage from 'primevue/theme/aura/inlinemessage';
import inplace from 'primevue/theme/aura/inplace';
import inputgroup from 'primevue/theme/aura/inputgroup';
import inputswitch from 'primevue/theme/aura/inputswitch';
import inputtext from 'primevue/theme/aura/inputtext';
import knob from 'primevue/theme/aura/knob';
@ -243,6 +244,7 @@ export default {
image,
inlinemessage,
inplace,
inputgroup,
inputswitch,
inputtext,
orderlist,

111
components/lib/theme/aura/inputgroup/index.js Normal file
View File

@ -0,0 +1,111 @@
export default {
variables: {
common: {
addon: {
background: '{form.field.background.color}',
borderColor: '{form.field.border.color}',
textColor: '{form.field.placeholder.color}'
}
}
},
css: `
.p-inputgroup {
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup-addon {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: var(--p-inputgroup-addon-background);
color: var(--p-inputgroup-addon-text-color);
border-top: 1px solid var(--p-inputgroup-addon-border-color);
border-left: 1px solid var(--p-inputgroup-addon-border-color);
border-bottom: 1px solid var(--p-inputgroup-addon-border-color);
padding: 0.5rem 0.75rem;
min-width: 2.5rem;
}
.p-inputgroup .p-float-label {
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup .p-inputtext,
.p-fluid .p-inputgroup .p-inputtext,
.p-inputgroup .p-inputwrapper,
.p-fluid .p-inputgroup .p-input {
flex: 1 1 auto;
width: 1%;
}
.p-inputgroup-addon:last-child {
border-right: 1px solid var(--p-inputgroup-addon-border-color);
}
.p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-inputtext,
.p-inputgroup > .p-float-label > .p-component {
border-radius: 0;
margin: 0;
}
.p-inputgroup > .p-component + .p-inputgroup-addon,
.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
border-left: 0 none;
}
.p-inputgroup > .p-component:focus,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
.p-inputgroup > .p-float-label > .p-component:focus {
z-index: 1;
}
.p-inputgroup > .p-component:focus ~ label,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label,
.p-inputgroup > .p-float-label > .p-component:focus~label {
z-index: 1;
}
.p-inputgroup-addon:first-child,
.p-inputgroup button:first-child,
.p-inputgroup input:first-child,
.p-inputgroup > .p-inputwrapper:first-child,
.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-inputgroup .p-float-label:first-child input {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-inputgroup-addon:last-child,
.p-inputgroup button:last-child,
.p-inputgroup input:last-child,
.p-inputgroup > .p-inputwrapper:last-child,
.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.p-inputgroup .p-float-label:last-child input {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.p-fluid .p-inputgroup .p-button {
width: auto;
}
.p-fluid .p-inputgroup .p-button.p-button-icon-only {
width: 2.5rem;
}
`
};

6
components/lib/theme/aura/inputgroup/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}