112 lines
2.8 KiB
JavaScript
112 lines
2.8 KiB
JavaScript
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;
|
|
}
|
|
`
|
|
};
|